/* ============================================================
   Windows page (ID 13) — two-column hero + Project Gallery
   ============================================================ */

/* ---------- Two-column hero ---------- */

/* The JS wraps the hero in this track and sets its height to the hero plus
   the right column's hidden content. While the page scrolls through that
   extra distance the hero is held position: fixed below the header (set by
   windows-page.js from the scroll position) — NOT position: sticky, which
   silently fails inside the theme/WPBakery wrappers that carry
   overflow: hidden, and NOT a per-frame translateY, which visibly lags the
   composited native scroll and makes the image stutter. The image therefore
   cannot move until the column has fully played out (the Explore Offers
   button revealed); the page scroll itself stays fully native and keeps the
   site's exact smoothness. */
.wsllc-win-hero-track {
    margin: 10px 0 60px;
}

.wsllc-win-hero {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    will-change: transform;
}

/* LEFT — image gallery. No positioning of its own: the whole hero is the
   pinned element (translateY set by the JS), so the gallery stays fully in
   view while the page scrolls the hero through its track. */
.wsllc-win-hero__media {
    flex: 1 1 50%;
    min-width: 0;
    align-self: flex-start;
}

.wsllc-win-hero__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Keep the whole gallery (stage + thumb row) inside the viewport while
       the right column scrolls — the main image must never be cut off.
       --wsllc-pin is set by the JS to sit below the theme's floating header;
       the extra 176px covers the thumbnails, their gap, and margins. */
    max-height: calc(100vh - var(--wsllc-pin, 24px) - 176px);
    overflow: hidden;
    background: #eceef1;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.wsllc-win-hero__main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.35s ease;
}

.wsllc-win-hero__main.is-fading {
    opacity: 0;
}

.wsllc-win-hero__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

/* Fixed small squares, left-aligned (Fabuwood door-style pattern) rather than
   stretching to fill the row. */
.wsllc-win-hero__thumb {
    flex: 0 0 88px;
    width: 88px;
    padding: 0;
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    background: #eceef1;
    aspect-ratio: 1 / 1;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.wsllc-win-hero__thumb:hover {
    transform: translateY(-2px);
}

.wsllc-win-hero__thumb.is-active {
    border-color: #ca511d;
}

.wsllc-win-hero__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* RIGHT — a viewport-capped column with its overflow CLIPPED, not scrollable:
   overflow hidden means no input (wheel, touch, keyboard) can scroll it
   directly and no scroll chaining or latching can ever occur. Its scrollTop
   is set programmatically by windows-page.js as a pure function of the page
   scroll position, which is what produces the Fabuwood behavior: the column
   plays through while the hero is pinned, then the page moves on. The cap
   must match the PIN offset used there. */
.wsllc-win-hero__text {
    flex: 1 1 50%;
    min-width: 0;
    max-height: calc(100vh - var(--wsllc-pin, 24px) - 24px);
    overflow: hidden;
    /* The column clips its overflow, and the CTA's glow reaches ~26px past
       the button — the right padding keeps the halo's right edge inside the
       clip box (the bottom edge gets its room from the CTA's own padding). */
    padding-right: 32px;
}

/* Section headings sit centered over the column; the CTA anchors to the
   right edge and body copy holds the 88px left line below. */
.wsllc-win-hero__text h2 {
    margin-top: 0;
    text-align: center;
}

/* One continuous vertical line down the column: the intro copy at the top and
   the closing notes at the bottom share the certification descriptions' left
   edge (72px logo column + 16px card gap). Only direct children — the cert
   cards' own text is nested deeper and already sits on that line. Section
   headings stay full-left as anchors. */
.wsllc-win-hero__text > p {
    margin-left: 88px;
}

.wsllc-win-hero__text h2 + p,
.wsllc-win-hero__text p {
    line-height: 1.7;
}

.wsllc-win-hero__cta {
    /* Bottom padding keeps the glow's lower edge inside the column's clip
       box — it's the last element, so without it the halo shears off. */
    padding: 26px 0 40px;
    text-align: right;
}

.wsllc-win-hero__cta a {
    display: inline-block;
    padding: 16px 48px;
    background: #ca511d;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.25s ease;
    /* Breathing glow so the CTA reads as the column's destination. */
    animation: wsllc-cta-glow 2.6s ease-in-out infinite;
}

.wsllc-win-hero__cta a:hover {
    background: #a83e13;
}

@keyframes wsllc-cta-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(202, 81, 29, 0.35); }
    50%      { box-shadow: 0 0 26px rgba(202, 81, 29, 0.70); }
}

/* ---------- Certification cards (in hero right column) ---------- */
.wsllc-certs {
    margin: 6px 0 16px;
}

.wsllc-cert {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-top: 1px solid #ededed;
}

.wsllc-cert:first-child {
    border-top: none;
    padding-top: 4px;
}

.wsllc-cert__logo {
    flex: 0 0 72px;
    width: 72px;
}

.wsllc-cert__logo img {
    width: 100%;
    height: auto;
    display: block;
}

.wsllc-cert__logo--text {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f2f0;
    border-radius: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ca511d;
    font-size: 15px;
}

.wsllc-cert__body h4 {
    margin: 0 0 5px;
    font-size: 16px;
    line-height: 1.3;
}

.wsllc-cert__body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
}

.wsllc-certs__also {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* ---------- Project Gallery (peeking carousel) ---------- */
.wsllc-pgal {
    margin: 70px 0 40px;
}

.wsllc-pgal__heading {
    text-align: left;
    margin-bottom: 34px;
}

/* Each project is its own row (its own independent carousel). */
.wsllc-pgal__row {
    margin-bottom: 28px;
}

.wsllc-pgal__row:last-child {
    margin-bottom: 0;
}

.wsllc-pgal__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.wsllc-pgal__track {
    display: flex;
    will-change: transform;
}

.wsllc-pgal__track.is-animating {
    transition: transform 0.45s ease;
}

/* 1/4 : 1 : 1/4  ->  center slide is 1/1.5 = 66.667% wide,
   leaving 16.667% peek on each side. The flex-basis/max-width transition
   powers the duo -> peek morph when a duo row's class is removed. */
.wsllc-pgal__slide {
    flex: 0 0 66.667%;
    max-width: 66.667%;
    box-sizing: border-box;
    padding: 0 10px;
    transition: flex-basis 0.45s ease, max-width 0.45s ease;
}

/* Duo layout (alternate rows): slides at 3/4 width, left-aligned by the JS —
   a full lead image plus the next one peeking in from the right. On the
   row's first arrow click the JS removes this class and the row morphs into
   the standard peek layout above. */
.wsllc-pgal__row--duo .wsllc-pgal__slide {
    flex-basis: 75%;
    max-width: 75%;
}

.wsllc-pgal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eceef1;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
    transition: transform 0.45s ease, opacity 0.45s ease;
    opacity: 0.55;
    transform: scale(0.94);
}

/* The centered slide gets full opacity / scale */
.wsllc-pgal__slide.is-center .wsllc-pgal__frame {
    opacity: 1;
    transform: scale(1);
}

.wsllc-pgal__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Arrows live per row and stay invisible (and unclickable) until the row is
   hovered; keyboard focus also reveals them. */
.wsllc-pgal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.25s ease;
}

.wsllc-pgal__row:hover .wsllc-pgal__nav,
.wsllc-pgal__nav:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.wsllc-pgal__nav:hover {
    background: #ca511d;
    transform: translateY(-50%) scale(1.06);
}

.wsllc-pgal__nav:hover svg path {
    stroke: #fff;
}

/* Centered on the 1/4 side-peek images (peek zone is ~16.67% wide,
   so its centre sits ~8.33% in from each edge). */
.wsllc-pgal__nav--prev {
    left: 8.33%;
    margin-left: -26px;
}

.wsllc-pgal__nav--next {
    right: 8.33%;
    margin-right: -26px;
}

/* Duo rows have a peek on one side only: park one arrow just inside the lead
   image's edge and centre the other on the 25% peek. Default duo peeks from
   the right; --duo-left mirrors everything. */
.wsllc-pgal__row--duo .wsllc-pgal__nav--prev {
    left: 20px;
    margin-left: 0;
}

.wsllc-pgal__row--duo .wsllc-pgal__nav--next {
    right: calc(12.5% - 26px);
    margin-right: 0;
}

.wsllc-pgal__row--duo-left .wsllc-pgal__nav--prev {
    left: calc(12.5% - 26px);
}

.wsllc-pgal__row--duo-left .wsllc-pgal__nav--next {
    right: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .wsllc-win-hero {
        flex-direction: column;
        gap: 30px;
    }
    /* Stacked single column on phones — the panel is NOT capped: the column
       flows full-length and the page scrolls natively. With nothing clipped,
       the JS measures zero hidden content, collapses the track, and clears
       the pin transform, so the choreography stands down entirely. */
    .wsllc-win-hero__media {
        width: 100%;
    }
    .wsllc-win-hero__text {
        max-height: none;
        overflow: visible;
        padding-right: 0;
        width: 100%;
    }
    /* The 88px alignment indent is too costly at phone widths. */
    .wsllc-win-hero__text > p {
        margin-left: 0;
    }
    /* One slide size for all rows on phones — the duo/peek distinction
       doesn't survive at this width. Duo selectors repeated so they don't
       out-rank the mobile sizing. */
    .wsllc-pgal__slide,
    .wsllc-pgal__row--duo .wsllc-pgal__slide {
        flex-basis: 86%;
        max-width: 86%;
    }
    .wsllc-pgal__nav--prev,
    .wsllc-pgal__row--duo .wsllc-pgal__nav--prev { left: 6px; margin-left: 0; }
    .wsllc-pgal__nav--next,
    .wsllc-pgal__row--duo .wsllc-pgal__nav--next { right: 6px; margin-right: 0; }
    /* No hover on touch screens — arrows stay visible. */
    .wsllc-pgal__nav {
        opacity: 1;
        pointer-events: auto;
    }
}