/* ==========================================================================
   5-Piece Canvas Wall Art — SECTIONS C
   §17 Texture · §18 Video / process · §19 Sense of scale ·
   §20 Before / after · §22 Installation + packaging

   Builds on five-piece-canvas-v2.css (tokens, resets, shared classes).
   Load AFTER the foundation.

   RULES OBSERVED THROUGHOUT
     · every selector starts with .fpc-page — nothing here can leak
     · no bare element selectors; the few element resets needed are the
       foundation's, already wrapped in :where()
     · image rules are double-scoped (.fpc-page .fpc-x .fpc-x__photo) so they
       beat an ancestor `img { height:auto; object-fit:contain }`
     · body type uses the foundation's tokens only. The design's 7-13px steps
       map: 7-8 -> micro (uppercase + letter-spaced labels only), 9-10 -> xs,
       11 -> sm, 12 -> md, 13 -> lg. Where the design put NON-uppercase body
       copy at 7-8px, it is lifted to --fpc-fs-xs rather than squeezed into the
       uppercase-only micro step.
     · Bootstrap .container / .row / .col-* never appear (mobile.css forces
       .container to 1200px on phones). .fpc-shell is the container.
   ========================================================================== */


/* ==========================================================================
   §17 — TEXTURE / DETAILS
   design: .ppx-texture{grid .7fr 1.1fr; gap 35px; background #fffdf8}
   ========================================================================== */

.fpc-page .fpc-texture__inner {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(28px, 3.4vw, 44px);
}

.fpc-page .fpc-texture__copy { min-width: 0; }

.fpc-page .fpc-texture__copy .fpc-lede { max-width: 46ch; }

/* ---- the disclosure (native <details>, no JS, no stale aria) ---- */

.fpc-page .fpc-texture__disclosure { margin-top: 18px; }

.fpc-page .fpc-texture__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #85632e;
    font-family: var(--fpc-sans);
    font-size: var(--fpc-fs-sm);
    font-weight: 700;
    cursor: pointer;
    list-style: none;          /* Firefox marker */
}
.fpc-page .fpc-texture__toggle::-webkit-details-marker { display: none; }
.fpc-page .fpc-texture__toggle::marker { content: ''; }

.fpc-page .fpc-texture__toggle:hover { color: #6c4e1f; }

.fpc-page .fpc-texture__chev {
    width: 14px; height: 14px;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.fpc-page .fpc-texture__label--open { display: none; }
.fpc-page .fpc-texture__disclosure[open] .fpc-texture__label--closed { display: none; }
.fpc-page .fpc-texture__disclosure[open] .fpc-texture__label--open { display: inline; }
.fpc-page .fpc-texture__disclosure[open] .fpc-texture__chev { transform: rotate(90deg); }

/* the revealed craft note — design .ppx-craft-note */
.fpc-page .fpc-texture__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 4px;
    padding: 12px 14px;
    background: #f1ebdf;
    border: 1px solid #e4d8c3;
    color: #6d6049;
    font-size: var(--fpc-fs-xs);
    line-height: 1.65;
}
.fpc-page .fpc-texture__note svg {
    width: 15px; height: 15px;
    margin-top: 2px;
    flex-shrink: 0;
    color: #6d7d52;
}

/* ---- the three macro tiles ---- */

.fpc-page .fpc-texture__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.fpc-page .fpc-texture__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    min-height: 165px;
    padding: 15px;
    overflow: hidden;
    background: #d9c9b5;
    color: #fff;
}

/* the design's inset vignette, lifted onto its own layer so it sits over the
   photograph and keeps the white label legible */
.fpc-page .fpc-texture__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 -90px 70px -55px #201911b5;
    background: linear-gradient(0deg, #1d170f80, transparent 62%);
    pointer-events: none;
}

.fpc-page .fpc-texture__tile > * { position: relative; z-index: 1; }

/* gradient fallbacks, exactly the design's — used when a slot resolves to null */
.fpc-page .fpc-texture__tile--weave {
    grid-row: span 2;
    min-height: 340px;
    background: linear-gradient(135deg, #8b785e, #e7d8c2 37%, #aa9274 65%, #e0cfb7);
}
.fpc-page .fpc-texture__tile--ink {
    background: linear-gradient(140deg, #4f6657, #bac3a7 45%, #776b5a);
}
.fpc-page .fpc-texture__tile--edge {
    background: linear-gradient(145deg, #d5c4a7, #6c5841 48%, #f0e3ce);
}

/* double-scoped: beats ancestor img{height:auto;object-fit:contain} */
.fpc-page .fpc-texture__tile .fpc-texture__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.fpc-page .fpc-texture__tile-label {
    color: #f4dcb0;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fpc-page .fpc-texture__tile-title {
    margin-top: 5px;
    font-family: var(--fpc-serif);
    font-weight: 500;
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.2;
}
.fpc-page .fpc-texture__tile-note {
    margin-top: 3px;
    color: #f2ece1;
    font-size: var(--fpc-fs-xs);
    line-height: 1.5;
}


/* ==========================================================================
   §18 — VIDEO / PROCESS  (dark)
   design: .ppx-video-section{grid 1.05fr .8fr; background #282720}
   The section uses the foundation's .fpc-section--dark, which supplies the
   dark variants of .fpc-kicker, .fpc-lede and .fpc-h2 em.
   ========================================================================== */

.fpc-page .fpc-video__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
    align-items: center;
    gap: clamp(30px, 6vw, 85px);
}

.fpc-page .fpc-video__poster {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 290px;
    overflow: hidden;
    background: linear-gradient(120deg, #4b493c, #9d8b6f 48%, #3b3a31);
}

/* poster photograph — double-scoped */
.fpc-page .fpc-video__poster .fpc-video__photo {
    width: 100%;
    height: 100%;
    min-height: 290px;
    object-fit: cover;
    object-position: center;
}

/* real <video>, only present when $fpcVideoSrc is set */
.fpc-page .fpc-video__poster .fpc-video__player {
    width: 100%;
    height: auto;
    display: block;
    background: #14130f;
}

.fpc-page .fpc-video__fallback {
    padding: 16px;
    color: var(--fpc-dark-ink);
    font-size: var(--fpc-fs-md);
}

/* fallback scene when neither a video nor a poster file resolves */
.fpc-page .fpc-video__wall {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 86%;
    height: 175px;
    padding: 8px;
    background: #c1a780;
    box-shadow: 0 20px 36px #09080570;
}
.fpc-page .fpc-video__wall i {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 1px solid #d3bd99;
    background: linear-gradient(150deg, #9d8b6f, #e7dbc7 45%, #7d8470);
}

.fpc-page .fpc-video__caption {
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 14px;
    padding: 5px 8px;
    background: #16150f9e;
    color: #efdcb4;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* when a real player is rendered the caption would cover the controls.
   A modifier class, not :has() — no dependency on selector support. */
.fpc-page .fpc-video__poster--player {
    display: block;
    min-height: 0;
    background: #14130f;
}
.fpc-page .fpc-video__poster--player .fpc-video__caption {
    position: static;
    display: block;
    margin-top: 10px;
    background: transparent;
}

.fpc-page .fpc-video__copy { min-width: 0; }

.fpc-page .fpc-video__steps {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}
.fpc-page .fpc-video__steps li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid #585345;
    color: #ddd4c4;
    font-size: var(--fpc-fs-sm);
    line-height: 1.55;
}
.fpc-page .fpc-video__steps li b {
    flex-shrink: 0;
    color: #dcbb83;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: 1px;
}
.fpc-page .fpc-video__steps li span { min-width: 0; }


/* ==========================================================================
   §19 — SENSE OF SCALE
   design: .ppx-scale-rooms{background #f5f1e9} + 3-col card grid
   ========================================================================== */

.fpc-page .fpc-scale { background: #f5f1e9; }

.fpc-page .fpc-scale__head { max-width: 640px; }

.fpc-page .fpc-scale__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 25px;
}

.fpc-page .fpc-scale__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    min-height: 230px;
    padding: 17px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(140deg, #cfc0a9, #7f7768);
}

/* the design's per-card gradients, kept as the no-photo fallback */
.fpc-page .fpc-scale__card--bed {
    background: linear-gradient(135deg, #e2d2bc, #f1e5d2 58%, #b9a58b);
}
.fpc-page .fpc-scale__card--dining {
    background: linear-gradient(140deg, #cfc0a9, #7f7768);
}
.fpc-page .fpc-scale__card--stairs {
    background: linear-gradient(145deg, #c8bba4, #6f6a5c);
}

/* double-scoped photograph layer */
.fpc-page .fpc-scale__card .fpc-scale__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* the design's framed CSS inset — fallback artwork only */
.fpc-page .fpc-scale__mock {
    position: absolute;
    z-index: 0;
    top: 15%;
    left: 20%;
    right: 20%;
    height: 38%;
    border: 7px solid #b9a184;
    background: linear-gradient(140deg, #9ca78a, #d6c3a5 48%, #5e786f);
    box-shadow: 0 10px 17px #2a211626;
}

/* the design's bottom-up scrim, which is what keeps the white text legible */
.fpc-page .fpc-scale__scrim {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(0deg, #191812f2, #19181296 38%, transparent 76%);
    pointer-events: none;
}

.fpc-page .fpc-scale__card > .fpc-scale__label,
.fpc-page .fpc-scale__card > .fpc-scale__title,
.fpc-page .fpc-scale__card > .fpc-scale__note {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.fpc-page .fpc-scale__label {
    color: #ebd0a0;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fpc-page .fpc-scale__title {
    font-family: var(--fpc-serif);
    font-weight: 500;
    font-size: clamp(19px, 1.5vw, 23px);
    line-height: 1.18;
}
.fpc-page .fpc-scale__note {
    color: #f0e8db;
    font-size: var(--fpc-fs-xs);
    line-height: 1.6;
}


/* ==========================================================================
   §20 — BEFORE / AFTER
   design: .ppx-before-after{grid .6fr 1fr; background #fffdf8}
   Two static cards. No slider — the design's `comparison` state is dead code.
   ========================================================================== */

.fpc-page .fpc-ba__inner {
    display: grid;
    grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 3.4vw, 44px);
}

.fpc-page .fpc-ba__copy { min-width: 0; }
.fpc-page .fpc-ba__copy .fpc-lede { max-width: 42ch; }
.fpc-page .fpc-ba__cta { margin-top: 18px; }

.fpc-page .fpc-ba__art {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.fpc-page .fpc-ba__card {
    min-width: 0;
    padding: 12px;
    background: #f4eee3;
    border: 1px solid #e1d4c0;
}

.fpc-page .fpc-ba__eyebrow {
    display: block;
    color: #8c6b3f;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.fpc-page .fpc-ba__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin: 11px 0;
    overflow: hidden;
    background: linear-gradient(140deg, #d9c9b4, #f1e6d4 50%, #d5c1a7);
}
.fpc-page .fpc-ba__stage--five { padding: 0 7%; gap: 3px; }

/* double-scoped photograph */
.fpc-page .fpc-ba__stage .fpc-ba__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* fallback artwork — the design's own CSS blocks */
.fpc-page .fpc-ba__mock--one {
    width: 59%;
    height: 64%;
    border: 8px solid #f9f5e9;
    background: linear-gradient(140deg, #9ca78a, #d6c3a5 48%, #5e786f);
    box-shadow: 0 8px 18px #28201425;
}
.fpc-page .fpc-ba__mock--five {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
}
.fpc-page .fpc-ba__mock--five i {
    flex: 1;
    min-width: 0;
    height: 63%;
    border: 4px solid #f9f5e9;
    background: linear-gradient(140deg, #9ca78a, #d6c3a5 48%, #5e786f);
    box-shadow: 0 8px 12px #28201425;
}

.fpc-page .fpc-ba__caption {
    display: block;
    font-family: var(--fpc-serif);
    font-weight: 500;
    font-size: var(--fpc-fs-lg);
    line-height: 1.3;
}


/* ==========================================================================
   §22 — INSTALLATION + PACKAGING
   design: .ppx-install-pack{grid 1fr 1fr; gap 25px; background #f3ede3}
   ========================================================================== */

.fpc-page .fpc-installpack { background: #f3ede3; }

.fpc-page .fpc-installpack__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

.fpc-page .fpc-panel {
    min-width: 0;
    padding: 23px;
    background: var(--fpc-paper-3);
    border: 1px solid #e2d8c9;
}

/* the design sets 32px flat; clamped so it holds at 320px */
.fpc-page .fpc-panel__title { font-size: clamp(25px, 2.5vw, 32px); }

.fpc-page .fpc-panel .fpc-lede { font-size: var(--fpc-fs-md); }

/* double-scoped supporting photograph */
.fpc-page .fpc-panel .fpc-panel__photo {
    width: 100%;
    height: 168px;
    margin-top: 16px;
    object-fit: cover;
    object-position: center;
    background: #ece2d2;
}

/* ---- installation steps ---- */

.fpc-page .fpc-installpack__steps {
    display: grid;
    gap: 13px;
    margin-top: 18px;
}
.fpc-page .fpc-installpack__step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
}
.fpc-page .fpc-installpack__step > b {
    color: #a9833f;
    font-family: var(--fpc-serif);
    font-weight: 500;
    font-size: var(--fpc-fs-lg);
    line-height: 1.4;
}
.fpc-page .fpc-installpack__step > span {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.fpc-page .fpc-installpack__step strong {
    font-family: var(--fpc-serif);
    font-weight: 500;
    font-size: var(--fpc-fs-md);
    line-height: 1.3;
}
.fpc-page .fpc-installpack__step small {
    color: #7d7261;
    font-size: var(--fpc-fs-xs);
    line-height: 1.6;
}

/* ---- packaging flow ---- */

.fpc-page .fpc-installpack__flow {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}
.fpc-page .fpc-installpack__flow li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px;
    background: #f3ecdf;
    border: 1px solid #e6d8c3;
}
.fpc-page .fpc-installpack__flow i {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    flex-shrink: 0;
    background: #e6d5b7;
    color: #785a2a;
    font-size: var(--fpc-fs-micro);
    font-style: normal;
    font-weight: 700;
}
.fpc-page .fpc-installpack__flow b {
    min-width: 0;
    color: #5b4e3d;
    font-size: var(--fpc-fs-sm);
    font-weight: 600;
    line-height: 1.4;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
    .fpc-page .fpc-texture__inner,
    .fpc-page .fpc-ba__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
    .fpc-page .fpc-texture__copy .fpc-lede,
    .fpc-page .fpc-ba__copy .fpc-lede { max-width: 62ch; }

    .fpc-page .fpc-video__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
}

@media (max-width: 991px) {
    .fpc-page .fpc-scale__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fpc-page .fpc-installpack__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 767px) {
    .fpc-page .fpc-texture__grid { gap: 8px; }
    .fpc-page .fpc-texture__tile { min-height: 150px; }
    .fpc-page .fpc-texture__tile--weave { min-height: 308px; }

    .fpc-page .fpc-video__poster,
    .fpc-page .fpc-video__poster .fpc-video__photo { min-height: 230px; }
    .fpc-page .fpc-video__wall { height: 140px; }

    .fpc-page .fpc-scale__grid { grid-template-columns: minmax(0, 1fr); }
    .fpc-page .fpc-scale__card { min-height: 265px; }

    .fpc-page .fpc-ba__art { gap: 8px; }
    .fpc-page .fpc-ba__card { padding: 9px; }
    .fpc-page .fpc-ba__stage { height: 118px; margin: 9px 0; }

    .fpc-page .fpc-panel { padding: 18px; }
    .fpc-page .fpc-panel .fpc-panel__photo { height: 150px; }

    /* .fpc-btn goes full-width on phones in the foundation; the summary must
       stay an inline control, not stretch */
    .fpc-page .fpc-texture__toggle { width: auto; }
}

@media (max-width: 420px) {
    .fpc-page .fpc-ba__art { grid-template-columns: minmax(0, 1fr); }
    .fpc-page .fpc-ba__stage { height: 150px; }
    .fpc-page .fpc-texture__grid { grid-template-columns: minmax(0, 1fr); }
    .fpc-page .fpc-texture__tile--weave { grid-row: auto; min-height: 220px; }
    .fpc-page .fpc-installpack__step { grid-template-columns: 24px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .fpc-page .fpc-texture__chev { transition: none; }
}