/* ABOUTME: Fabuwood page layout — full-bleed hero image, section headers, and */
/* ABOUTME: horizontal rails whose offset is scrubbed by page scroll ([wsllc_fabuwood_page]). */

.wsllc-fab {
    --fab-ink: #1c2129;
    --fab-muted: #6b7480;
    --fab-line: #e3e6ea;
    --fab-accent: #ca511d;
    /* Fabuwood's --neutral-background-secondary */
    --fab-tint: #f2f4f8;
    --fab-bleed: calc(-50vw + 50%);
}

/* The7 wraps page content in a padded container; these blocks break out of it
   so the hero and the rails run the full width of the window. */
.wsllc-fab__hero,
.wsllc-fab__rail-wrap {
    width: 100vw;
    margin-left: var(--fab-bleed);
}

/* ── Main image ── */

.wsllc-fab__hero {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}
.wsllc-fab__hero img {
    display: block;
    width: 100%;
    height: min(78vh, 720px);
    object-fit: cover;
    object-position: center;
}

/* The7's page-title bar (page name + breadcrumbs) is suppressed here so the
   hero image is the first thing under the masthead. Body-class scoped, so no
   other page is touched. */
.wsllc-fabuwood-page .page-title {
    display: none;
}

/* ── Section headers ── */

.wsllc-fab__head {
    max-width: 760px;
    margin: 0 auto;
    padding: 96px 20px 48px;
    text-align: center;
}
/* The page heading sits above the hero, so it needs less room overhead than a
   section header breaking up the flow below it. */
.wsllc-fab__head--page {
    padding: 40px 20px 36px;
}
.wsllc-fab__title {
    margin: 0;
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.12;
    color: var(--fab-ink);
}

/* Headings rise into place, ending on Fabuwood's opacity:1 / transform:none.
   This is a plain CSS animation rather than a class toggled by script: a
   scripted reveal can be applied before the browser paints the "from" state,
   which drops the animation entirely (see the contact page gotcha). */
.wsllc-fab__title {
    animation: wsllc-fab-rise .8s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes wsllc-fab-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wsllc-fab__title {
        animation: none;
    }
}

/* ── Tinted bands ──
   Door Styles and Construction sit on Fabuwood's secondary background. The
   band goes full-bleed; a rail inside re-runs the same bleed maths against a
   parent that is already 100vw, so its offset resolves to zero and it stays
   put. Block-level content needs reining back to the content column. */
.wsllc-fab__band {
    width: 100vw;
    margin-left: var(--fab-bleed);
    background: var(--fab-tint);
    padding-bottom: 72px;
}
/* A rail that runs into a band has no white space of its own below it, so it
   supplies the gap. Matched to the 96px every section header carries above its
   title, so the rhythm is even on both sides of a section boundary. The swatch
   value is short of 96 because the chip caption's trailing line box already
   contributes the difference — both land at 96px measured. */
.wsllc-fab__rail-wrap--marquee:has(+ .wsllc-fab__band) {
    padding-bottom: 79px;
}
/* The7's generated custom.css puts 70px under #main, which shows as a white
   strip between the last band and the footer. The content wrapper carries both
   `#main` and `.sidebar-none`, and an id beats any class, so the override has
   to go through #main too. Zeroed so the tint runs to the footer; the band's
   own padding is the spacing now. */
.wsllc-fabuwood-page #main {
    padding-bottom: 0;
}
.wsllc-fab__band > .wsllc-fab__grid,
.wsllc-fab__band > .wsllc-pgal {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    /* The band supplies the bottom space; the block's own would double it. */
    padding-bottom: 0;
}

/* ── Scroll-scrubbed rails ──
   The wrapper clips; the rail inside is wider than the window and is moved
   along X by js/fabuwood-page.js as the section passes through the viewport.
   No transition here on purpose: the offset must track scroll frame by frame,
   and the JS does its own easing. */

.wsllc-fab__rail-wrap {
    overflow: hidden;
    padding: 8px 0 8px;
}
.wsllc-fab__rail {
    display: flex;
    gap: 28px;
    width: max-content;
    padding: 0 5vw;
    will-change: transform;
}
.wsllc-fab__card {
    flex: 0 0 clamp(230px, 26vw, 420px);
    margin: 0;
}
/* Deliberately no background here: every card image on this page carries its
   own alpha, so a fill would paint a panel behind each door. Aspect and fit
   are set per card type below. */
.wsllc-fab__card img {
    display: block;
    width: 100%;
    height: auto;
}
.wsllc-fab__caption {
    margin: 14px 2px 0;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fab-muted);
}

/* ── Door styles (section 1) ──
   Portrait door shots, shown at their native 384:635 so nothing is cropped. */

.wsllc-fab__card--style {
    flex: 0 0 clamp(130px, 14vw, 200px);
}
/* The door shots carry their own alpha — any background here paints straight
   through it as a panel behind every door, so there is none. */
.wsllc-fab__card--style img {
    aspect-ratio: 384 / 635;
    object-fit: contain;
}

/* ── Color swatches ──
   Small square chips: the rails carry the whole collection, so the tile has to
   stay compact enough that a row still reads as a row. */

.wsllc-fab__rail-wrap + .wsllc-fab__rail-wrap {
    margin-top: 22px;
}
/* The Door Styles rail runs straight into the tinted band below it, so its own
   bottom padding is the only white space there. Matched to the 96px that every
   section header carries above its title. */
.wsllc-fab__rail-wrap--styles {
    padding-bottom: 96px;
}

/* Tighter pitch than the photo rails: every pixel of tile width becomes rail
   length, and rail length is what the scroll sweep has to spend. */
.wsllc-fab__rail-wrap--swatches .wsllc-fab__rail {
    gap: 16px;
}
/* Sources are 400x400, so this stays sharp to ~200px even on a 2x display.
   Marquee rows drift at a fixed px/second, so tile size no longer trades off
   against sweep speed the way it did under scroll scrubbing. */
.wsllc-fab__card--swatch {
    flex: 0 0 clamp(116px, 13vw, 180px);
}
.wsllc-fab__chip {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
}
.wsllc-fab__chip img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* Gloss is the same swatch under a reflection, so one image serves both the
   matte and gloss cards. Drop the reflection artwork at img/gloss-overlay.png
   and PHP publishes it as --fab-gloss-art, which wins here; until then the
   fallback (a diagonal sheen plus a soft top highlight) stands in. */
.wsllc-fab__chip.is-gloss::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--fab-gloss-art,
        linear-gradient(160deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .10) 22%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .14) 82%, rgba(255, 255, 255, .34) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 38%));
    /* The reflection artwork is a wide strip and the chip is square, so it is
       stretched to fill rather than cropped — a centre crop would throw away
       most of the sweep. Gradients fill either way. */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}
.wsllc-fab__card--swatch .wsllc-fab__caption {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: none;
    line-height: 1.35;
    color: var(--fab-ink);
}
.wsllc-fab__finish {
    display: block;
    margin-top: 2px;
    color: var(--fab-muted);
}

/* ── Passive marquee rails ──
   The card set is in the DOM twice, so travelling exactly half the rail lands
   on the copy and the loop is seamless. Duration comes from JS as --fab-dur,
   derived from the measured width, so every row drifts at the same px/second
   no matter how many cards it holds. */

.wsllc-fab__dupe {
    display: contents;
}
.wsllc-fab__rail-wrap--marquee .wsllc-fab__rail {
    /* No side padding on a loop: there is no start or end to inset, and any
       padding would land inside the travel and break the seam. */
    padding: 0;
    animation: wsllc-fab-drift var(--fab-dur, 60s) linear infinite;
}
.wsllc-fab__rail-wrap--marquee[data-fab-dir="ltr"] .wsllc-fab__rail {
    animation-name: wsllc-fab-drift-rev;
}
/* Let a visitor stop the wall to actually read a color name. */
.wsllc-fab__rail-wrap--marquee:hover .wsllc-fab__rail {
    animation-play-state: paused;
}
/* --fab-shift is the measured card-1-to-copy-of-card-1 distance, so one
   iteration lands the copy exactly where the original was. A percentage would
   not: half the rail also includes half of any gap and padding, which puts the
   seam tens of pixels off and shows as a jump once per loop. */
@keyframes wsllc-fab-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(var(--fab-shift) * -1), 0, 0); }
}
@keyframes wsllc-fab-drift-rev {
    from { transform: translate3d(calc(var(--fab-shift) * -1), 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* ── Construction cards (section 3) ── */

.wsllc-fab__con {
    display: flex;
    flex-direction: column;
}
/* Transparent artwork, same as the door shots — no backing panel. */
.wsllc-fab__con-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.wsllc-fab__con-name {
    margin: 20px 0 6px;
    font-size: 26px;
    line-height: 1.2;
    color: var(--fab-ink);
}
.wsllc-fab__con-design {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fab-accent);
}
.wsllc-fab__con-blurb {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fab-muted);
}
.wsllc-fab__specs {
    margin: 6px 0 0;
    border-top: 1px solid var(--fab-line);
}
.wsllc-fab__spec {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--fab-line);
    font-size: 14px;
}
.wsllc-fab__spec dt {
    margin: 0;
    color: var(--fab-muted);
    font-weight: 400;
}
.wsllc-fab__spec dd {
    margin: 0;
    color: var(--fab-ink);
}

/* Reduced motion / no-JS: hand the rail back to the user as a normal
   horizontal scroller rather than freezing content off-screen. */
.wsllc-fab__rail-wrap.is-static {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wsllc-fab__rail-wrap.is-static .wsllc-fab__rail {
    transform: none !important;
    will-change: auto;
}
/* A marquee that has been stood down must not leave a duplicated card set
   sitting in a rail the visitor is now scrolling by hand. */
.wsllc-fab__rail-wrap--marquee.is-static .wsllc-fab__rail {
    animation: none !important;
}
.wsllc-fab__rail-wrap--marquee.is-static .wsllc-fab__dupe {
    display: none;
}

/* ── Section 3: plain grid, no horizontal motion ── */

.wsllc-fab__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding-bottom: 96px;
}
.wsllc-fab__grid .wsllc-fab__card {
    flex: none;
}
.wsllc-fab__grid .wsllc-fab__card img {
    aspect-ratio: 3 / 2;
}

@media (max-width: 900px) {
    .wsllc-fab__head {
        padding: 64px 20px 36px;
    }
    .wsllc-fab__grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-bottom: 64px;
    }
    .wsllc-fab__hero img {
        height: 52vh;
    }
    .wsllc-fab__rail {
        gap: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wsllc-fab__rail {
        transform: none !important;
        animation: none !important;
    }
    .wsllc-fab__dupe {
        display: none;
    }
}