/**
 * Silinol Gallery — Frontend Styles v2.1.4
 * Covers: Featured Projects, Applications/Process Carousel, Shared Lightbox.
 *
 * KEY VARIABLES:
 *   --sil-hero-h    Hero box height. Change this + --sil-thumb-h together.
 *   --sil-thumb-h   Must equal: (--sil-hero-h - 3 * 8px) / 4
 *   --sil-thumb-w   Thumbnail column width.
 *
 * Example: hero 700px → thumb-h = (700 - 24) / 4 = 169px
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --sil-orange:          #E9632B;
    --sil-orange-10:       rgba(233, 99, 43, 0.10);
    --sil-radius:          40px;
    --sil-arrow-color:     #666;
    --sil-thumb-gap:       8px;

    /* Hero height + thumbnail height — update both together.
       Formula: --sil-thumb-h = (--sil-hero-h - 3 * 8) / 4    */
    --sil-hero-h:          700px;
    --sil-thumb-h:         169px;
    --sil-thumb-w:         260px;

    --sil-transition-snap: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --sil-transition-fade: 200ms ease;
}

/* Smaller viewport height: scale hero down proportionally */
@media (max-height: 820px) {
    :root {
        --sil-hero-h: 580px;
        --sil-thumb-h: 139px; /* (580 - 24) / 4 */
    }
}


/* ============================================================
   FEATURED PROJECTS  —  /gallery
   ============================================================ */

.sil-gallery {
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.sil-proj-body {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* --- Hero --- */
.sil-proj-hero-side {
    flex: 1;
    min-width: 0;
}

.sil-proj-hero-btn {
    display: block;
    width: 100%;
    height: var(--sil-hero-h);
    padding: 0;
    border: 0;
    background: #f0f0f0;
    cursor: zoom-in;
    position: relative;     /* needed for absolute img */
    overflow: hidden;
    border-radius: var(--sil-radius);
}

/* Absolute fill with !important overrides common theme resets like
   img { height: auto; } that would otherwise break object-fit: cover. */
.sil-proj-hero-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transition: transform 400ms ease, opacity 160ms ease;
}

.sil-proj-hero-btn:hover .sil-proj-hero-img {
    transform: scale(1.03);
}

.sil-proj-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background var(--sil-transition-fade);
    pointer-events: none;
    border-radius: var(--sil-radius);
}

.sil-proj-hero-btn:hover .sil-proj-hero-overlay {
    background: rgba(0, 0, 0, 0.15);
}

.sil-proj-hero-btn:focus-visible {
    outline: 3px solid var(--sil-orange);
    outline-offset: 3px;
    border-radius: var(--sil-radius);
}

/* --- Thumbnail column ---
   position:relative so nav arrows can overlay with position:absolute.
   The viewport uses the hero height variable directly rather than
   height:100% to avoid parent-height resolution ambiguity. */
.sil-proj-thumbs {
    position: relative;
    width: var(--sil-thumb-w);
    flex-shrink: 0;
}

.sil-proj-thumbs-viewport {
    overflow: hidden;
    height: var(--sil-hero-h);
    border-radius: var(--sil-radius);
}

.sil-proj-thumbs-track {
    display: flex;
    flex-direction: column;
    gap: var(--sil-thumb-gap);
    transition: transform var(--sil-transition-snap);
    will-change: transform;
}

.sil-proj-thumb {
    display: block;
    width: var(--sil-thumb-w);
    height: var(--sil-thumb-h);
    padding: 0;
    /* 3px border always reserved — prevents layout shift on active */
    border: 3px solid transparent;
    border-radius: var(--sil-radius);
    background: #f0f0f0;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    /* position:relative makes this a containing block for the absolute img */
    position: relative;
    transition:
        border-color var(--sil-transition-fade),
        filter var(--sil-transition-fade),
        opacity var(--sil-transition-fade);
}

/* !important overrides theme img resets (height: auto, max-width: 100%, etc.) */
.sil-proj-thumb img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    pointer-events: none;
}

/* Hover: brightness lift signals clickability.
   No scale transform — scale inside overflow:hidden causes clipping artifacts. */
.sil-proj-thumb:hover {
    filter: brightness(1.09);
    border-color: rgba(233, 99, 43, 0.45);
}

/* Active: full orange border + inner ring since outer shadows
   are clipped by the viewport's overflow:hidden. */
.sil-proj-thumb--active {
    border-color: var(--sil-orange);
    box-shadow: inset 0 0 0 2px rgba(233, 99, 43, 0.25);
}

.sil-proj-thumb:focus-visible {
    outline: 2px solid var(--sil-orange);
    outline-offset: 2px;
}

/* Nav arrows overlay the viewport — position:absolute keeps them
   outside the flex flow so they don't affect total column height. */
.sil-proj-thumb-nav {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    height: 44px;
    padding: 0;
    border: none;
    background: var(--sil-orange);
    cursor: pointer;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background var(--sil-transition-fade);
}

/* Rotate the inner character so ‹ points up and › points down on desktop.
   The button itself keeps its shape; only the glyph rotates. */
.sil-proj-thumb-nav span {
    display: inline-block;
    line-height: 1;
}

.sil-proj-thumb-nav--up span   { transform: rotate(-90deg); }
.sil-proj-thumb-nav--down span  { transform: rotate(90deg); }

.sil-proj-thumb-nav--up {
    top: 0;
    border-radius: var(--sil-radius) var(--sil-radius) 0 0;
}

.sil-proj-thumb-nav--down {
    bottom: 0;
    border-radius: 0 0 var(--sil-radius) var(--sil-radius);
}

.sil-proj-thumb-nav:hover {
    background: #d4551e;
}

.sil-proj-thumb-nav:focus-visible {
    outline: 2px solid var(--sil-orange);
    outline-offset: 2px;
}

/* Project caption */
.sil-proj-caption {
    margin-top: 16px;
    text-align: center;
}

.sil-proj-name {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sil-orange);
    margin: 0 0 6px;
    line-height: 1.1;
}

.sil-proj-subtitle {
    font-size: 18px;
    color: #666;
    margin: 0;
    line-height: 1.3;
}


/* ============================================================
   FEATURED PROJECTS — PHONE LANDSCAPE (≤767px)
   Matches Breakdance's "Phone Landscape" breakpoint exactly.
   Switches to stacked layout: hero above, horizontal thumbs below.
   Thumbs use flex:1 so all 4 divide the available width equally
   regardless of the exact pixel width of the phone.
   ============================================================ */
@media (max-width: 767px) {
    .sil-proj-body {
        flex-direction: column;
        gap: 10px;
    }

    .sil-proj-hero-side {
        width: 100%;
    }

    .sil-proj-hero-btn {
        height: 280px;
        border-radius: calc(var(--sil-radius) * 0.6);
    }

    /* Horizontal thumb row */
    .sil-proj-thumbs {
        width: 100%;
        height: 140px;
    }

    .sil-proj-thumbs-viewport {
        height: 140px;
        border-radius: calc(var(--sil-radius) * 0.6);
    }

    .sil-proj-thumbs-track {
        flex-direction: row;
        gap: var(--sil-thumb-gap);
    }

    /* flex:1 + min-width:0 distributes 4 thumbs equally across available width */
    .sil-proj-thumb {
        flex: 0 0 calc(25% - 6px); /* fixed: 4 thumbs always fill the viewport regardless of total count */
        width: calc(25% - 6px);
        min-width: 0;
        height: 140px;
        border-radius: calc(var(--sil-radius) * 0.6);
    }

    /* Reset span rotation: on mobile the arrows are left/right so ‹ › already point correctly */
    .sil-proj-thumb-nav--up   span,
    .sil-proj-thumb-nav--down span { transform: none; }

    /* Nav arrows become left/right for horizontal scroll */
    .sil-proj-thumb-nav--up {
        top: 0;
        bottom: 0;
        right: auto;
        left: 0;
        width: 36px;
        height: 100%;
        border-radius: calc(var(--sil-radius) * 0.6) 0 0 calc(var(--sil-radius) * 0.6);
    }

    .sil-proj-thumb-nav--down {
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 36px;
        height: 100%;
        border-radius: 0 calc(var(--sil-radius) * 0.6) calc(var(--sil-radius) * 0.6) 0;
    }

    .sil-proj-name     { font-size: 22px; }
    .sil-proj-subtitle { font-size: 15px; }
}

/* ============================================================
   FEATURED PROJECTS — PHONE PORTRAIT (≤479px)
   Matches Breakdance's "Phone Portrait" breakpoint.
   Thumbs stay horizontal, just slightly shorter.
   ============================================================ */
@media (max-width: 479px) {
    .sil-proj-hero-btn               { height: 220px; }
    .sil-proj-thumbs                 { height: 100px; }
    .sil-proj-thumbs-viewport        { height: 100px; }
    .sil-proj-thumb                  { height: 100px; }
    .sil-proj-name                   { font-size: 18px; }
    .sil-proj-subtitle               { font-size: 13px; }
}


/* ============================================================
   APPLICATIONS / PROCESS CAROUSEL  —  /gallery-applications
   ============================================================ */

.sil-carousel {
    position: relative;
    /* Forced explicitly rather than left to inherit from whatever Breakdance
       section wraps it. Two carousels dropped into two separately-built
       sections have no guarantee of ending up the same width otherwise,
       which would make their peek geometry genuinely differ even though the
       JS/CSS math computing that geometry is identical for both. */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 24px 0;
    user-select: none;
    touch-action: pan-y;
}

.sil-carousel-track {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 350px;
}

.sil-carousel-item {
    position: absolute;
    width: 340px;
    height: 260px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--sil-radius);
    overflow: hidden;
    will-change: transform, opacity;
    transition:
        transform  360ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity    360ms ease;
}

/* !important overrides theme img resets */
.sil-carousel-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    pointer-events: none;
    border-radius: var(--sil-radius);
}

.sil-carousel--dragging .sil-carousel-item,
.sil-carousel--animating .sil-carousel-item {
    transition: none;
}

.sil-carousel-item--active {
    cursor: zoom-in;
}

.sil-carousel-item--active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 300ms ease;
    border-radius: var(--sil-radius);
    pointer-events: none;
}
.sil-carousel-item--active:hover::after {
    background: rgba(0, 0, 0, 0.16);
}

.sil-carousel-item:focus-visible {
    outline: 3px solid var(--sil-orange);
    outline-offset: 3px;
    border-radius: var(--sil-radius);
}

.sil-carousel-prev,
.sil-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bde-brand-primary-color, var(--sil-orange));
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: #fff;
    padding: 0;
    line-height: 1;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: filter var(--sil-transition-fade), transform var(--sil-transition-fade);
}

.sil-carousel-prev { left: 12px; }
.sil-carousel-next { right: 12px; }

.sil-carousel-prev:hover,
.sil-carousel-next:hover {
    filter: brightness(0.9);
    transform: translateY(-50%) scale(1.06);
}

.sil-carousel-prev:focus-visible,
.sil-carousel-next:focus-visible {
    outline: 2px solid var(--bde-brand-primary-color, var(--sil-orange));
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .sil-carousel-prev,
    .sil-carousel-next { display: none; }

    .sil-carousel-track { height: 320px; }

    .sil-carousel-item {
        /* % of the container, not a fixed px value. A fixed px width only
           peeks a neighbour in by coincidence, on whichever phone widths
           happen to leave enough room; on narrower phones there's nothing
           left over and the neighbour vanishes entirely. A percentage
           always leaves the same proportion of room regardless of the
           actual device width. Capped at 300px so it doesn't get oversized
           on the wider end of the "Phone Landscape" range. */
        width: 64%;
        max-width: 300px;
        aspect-ratio: 5 / 4;
        border-radius: calc(var(--sil-radius) * 0.6);
    }

    .sil-carousel-item img {
        border-radius: calc(var(--sil-radius) * 0.6);
    }
}


/* ============================================================
   SHARED LIGHTBOX / MODAL
   opacity + visibility transition — no display toggle,
   so open/close animates smoothly.
   ============================================================ */

#sil-lightbox {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 320ms ease, visibility 320ms ease;
}

#sil-lightbox.sil-lightbox--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#sil-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: #53565C;
    mix-blend-mode: multiply;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#sil-lightbox-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "prev img  next"
        "prev cap  next";
    align-items: center;
    column-gap: 12px;
    max-width: 90vw;
}

#sil-lightbox-close {
    position: absolute;
    top: -52px;
    right: 0;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    opacity: 0.8;
    transition: opacity var(--sil-transition-fade), background var(--sil-transition-fade);
    line-height: 1;
    padding: 0;
}
#sil-lightbox-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.22);
}
#sil-lightbox-close:focus-visible {
    outline: 2px solid var(--sil-orange);
    border-radius: 50%;
}

#sil-lightbox-img-wrap {
    grid-area: img;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 80vh;
    position: relative; /* needed to contain the absolute incoming img during swipe slide */
}

#sil-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--sil-radius);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    transition: opacity 220ms ease;
}

#sil-lightbox-caption {
    grid-area: cap;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    padding: 14px 0 0;
    min-height: 24px;
    line-height: 1.5;
}

#sil-lightbox-prev,
#sil-lightbox-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    align-self: center;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    padding: 0;
    transition: background var(--sil-transition-fade);
    flex-shrink: 0;
}

#sil-lightbox-prev { grid-area: prev; }
#sil-lightbox-next { grid-area: next; }

#sil-lightbox-prev:hover,
#sil-lightbox-next:hover { background: rgba(255, 255, 255, 0.26); }

#sil-lightbox-prev:focus-visible,
#sil-lightbox-next:focus-visible { outline: 2px solid var(--sil-orange); }

@media (max-width: 767px) {
    #sil-lightbox-shell {
        grid-template-columns: 44px 1fr 44px;
        column-gap: 6px;
        max-width: 96vw;
    }
    #sil-lightbox-prev,
    #sil-lightbox-next { width: 38px; height: 38px; }
    #sil-lightbox-close { top: -44px; }
    #sil-lightbox-img { border-radius: calc(var(--sil-radius) * 0.6); }
    #sil-lightbox-caption { font-size: 15px; }
}