/* Inspiration Gallery (Toatsmedia_InspirationGallery). Brand: Copperplate headings, Arbeit text, black on white. */
.hig { margin: 0 auto; padding: 44px 0 60px; }
.hig-head { text-align: center; margin: 0 auto 36px; max-width: 900px; }
.hig-title { font-family: 'Copperplate', serif; font-size: 42px; font-weight: 250; line-height: 1.2; color: #000; margin: 0 0 14px; }
.hig-intro { font-family: 'Arbeit', sans-serif; font-size: 16px; line-height: 1.6; color: #000; margin: 0; }
.hig-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 22px; }
.hig-tabs a { font-family: 'Arbeit', sans-serif; font-size: 14px; letter-spacing: .35px; color: #000; text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; }
.hig-tabs a:hover, .hig-tabs a.is-active { border-bottom-color: #000; text-decoration: none; }

/* Grid: plain grid without JS; with JS each tile spans rows by its aspect ratio (masonry, order kept). */
.hig-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; align-items: start; }
.hig-grid.is-masonry { grid-auto-rows: 4px; row-gap: 0; }
.hig-item { margin: 0; }
.hig-tile { display: block; position: relative; overflow: hidden; background: #f4f4f4; aspect-ratio: var(--ar, 1); cursor: zoom-in; }
.hig-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .3s; }
.hig-tile:hover img { transform: scale(1.025); }
.hig-tile:focus-visible { outline: 1px solid #000; outline-offset: 3px; }
@media (max-width: 1199px) { .hig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .hig { padding-top: 16px; }
    .hig-head { margin-bottom: 22px; }
    .hig-title { font-size: 30px; }
    .hig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 8px; }
}
@media (hover: none) { .hig-tile:hover img { transform: none; } }

/* Full-screen viewer */
html.hig-lock, html.hig-lock body { overflow: hidden; }
.hig-lb { position: fixed; inset: 0; z-index: 10000; background: #0b0b0b; color: #fff; opacity: 0; transition: opacity .25s ease; -webkit-tap-highlight-color: transparent; }
.hig-lb[hidden] { display: none; }
.hig-lb.is-open { opacity: 1; }
.hig-lb-stage { position: absolute; inset: 64px 88px 72px; }
/* Two stacked layers for a slow cross-fade with a gentle drift in the direction of travel. */
.hig-lb-img { position: absolute; inset: 0; margin: auto; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none;
    opacity: 0; transform: translate3d(var(--hig-dx, 0px), 0, 0) scale(var(--hig-s, 1)); will-change: opacity, transform;
    transition: opacity .75s cubic-bezier(.25, .1, .25, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.hig-lb-img.is-active { opacity: 1; }
.hig-lb-img.is-leaving { transition-duration: .55s, .8s; transition-timing-function: cubic-bezier(.4, 0, .6, 1), cubic-bezier(.4, 0, .2, 1); }
.hig-lb-img.no-anim { transition: none; }
.hig-lb-count { transition: opacity .4s ease; }
.hig-lb-count.is-changing { opacity: 0; }
.hig-lb-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; cursor: pointer; opacity: .75; transition: opacity .2s; box-shadow: none; }
.hig-lb .hig-lb-btn:hover, .hig-lb .hig-lb-btn:focus, .hig-lb .hig-lb-btn:active { opacity: 1; background: transparent; border: 0; box-shadow: none; color: #fff; }
.hig-lb .hig-lb-btn:focus:not(:focus-visible) { outline: none; }
.hig-lb-btn:focus-visible { outline: 1px solid rgba(255,255,255,.3); outline-offset: -8px; }
.hig-lb-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.hig-lb-btn[hidden] { display: none; }
.hig-lb-close { top: 10px; right: 14px; }
.hig-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.hig-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.hig-lb-prev svg, .hig-lb-next svg { width: 30px; height: 30px; }
.hig-lb-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; display: flex; align-items: center; justify-content: center; gap: 28px; font-family: 'Arbeit', sans-serif; }
.hig-lb-count { font-size: 13px; letter-spacing: 1.5px; opacity: .7; }
.hig-lb-product { font-family: 'Arbeit', sans-serif; font-size: 14px; font-weight: 450; letter-spacing: .35px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.8); padding: 9px 22px; transition: background .2s, color .2s; }
.hig-lb-product:hover, .hig-lb-product:focus { background: #fff; color: #000; text-decoration: none; }
.hig-lb-product[hidden] { display: none; }
@media (max-width: 767px) {
    .hig-lb-stage { inset: 56px 0 76px; }
    .hig-lb-prev, .hig-lb-next { top: auto; bottom: 10px; transform: none; }
    .hig-lb-prev { left: 4px; }
    .hig-lb-next { right: 4px; }
    .hig-lb-close { top: 4px; right: 4px; }
    .hig-lb-foot { height: 76px; gap: 16px; padding: 0 60px; }
}
@media (prefers-reduced-motion: reduce) {
    .hig-lb, .hig-tile img, .hig-lb-count { transition: none; }
    .hig-lb-img { transform: none !important; transition: opacity .25s linear; }
}
