/**
 * Family_Flipbook frontend styles.
 *
 * The turn belongs to StPageFlip, which takes the flat list of pages the
 * template prints and builds the book from it. This file dresses the paper:
 * the page itself, the shading down the centre fold, the rounded fore edges
 * and the shadow the book sits in.
 *
 * Structure (see flipbook.phtml):
 *
 *   .family-flipbook-book
 *     .fb-shell              focusable, holds the keyboard
 *       .fb-pages            StPageFlip builds the book inside this
 *         .fb-page           one page, in reading order
 *           .family-flipbook-page
 *
 * Until the library has run, `.fb-pages` is a plain two-column strip showing
 * the first spread and nothing else, so the section is never blank and never
 * a tall stack of loose pages. The component adds `is-ready` to the section
 * once the book is built, which hands the layout over.
 */

.family-flipbook-section {
    --family-flipbook-bg: #f3efe7;
    --family-flipbook-page-bg: #faf7f1;
    --family-flipbook-placeholder: #ddd5c4;
    --family-flipbook-text: #2c2a26;
    --family-flipbook-muted: #6f6a60;
    --family-flipbook-accent-left: #b35a3c;
    --family-flipbook-accent-right: #5f7a52;
    --family-flipbook-border: rgba(44, 42, 38, 0.08);
    --family-flipbook-nav-size: 44px;
    --family-flipbook-animation-speed: 600ms;

    --fb-radius: 5px;

    /* How dark the shading down the centre fold is. It was heavier, and read as
       a crease rather than a fold; lightened on review of the finished book. */
    --fb-gutter: rgba(44, 42, 38, 0.22);

    /* Keep transformed curl bounds inside this section without creating a scroll container.
     * Clip at the section edge so the book itself retains its fold and drop shadow. */
    overflow-x: clip;

    background-color: var(--family-flipbook-bg);
    padding: 60px 0;
    color: var(--family-flipbook-text);
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.family-flipbook-container {
    margin: 0 auto;
    /* The theme's own gutter, so this section lines up with every other one on the
       page: 1.5rem below 1024px and 10rem from 1024px up. Measured on the rendered
       page against .cms-faq-section, .cms-box-section and .cms-bundle-section, which
       all sit at 160px from each edge at 1440. */
    padding: 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 64px;
}

/* ── Intro column ───────────────────────────────────────────────────────── */

.family-flipbook-intro {
    flex: 0 0 calc(43% - 32px);
}

.family-flipbook-intro__eyebrow {
    font: 11px / 17px var(--font-primary);
    letter-spacing: 1.54px;
    text-transform: uppercase;
    color: #7B6E62;
    margin-bottom: 2px;
}

.family-flipbook-intro__heading {
    font-size: 44px;
    font-weight: normal;
    line-height: 46px;
    letter-spacing: -.22px;
    color: var(--primary-color);
    font-family: var(--font-secondary);
    margin: 0 0 19px;
}

.family-flipbook-intro__description {
    font: 14px / 25px var(--font-primary);
    color: #4A413A;
    margin: 0 0 27px;
}

/* ── The book ───────────────────────────────────────────────────────────── */

.family-flipbook-book {
    flex: 0 0 calc(57% - 32px);
    min-width: 300px;
}

/* MANTIS-2884. Two pages side by side need the book to be at least 482px wide, which is the
 * width at which the longest sample page stops running over its page number. Measured, not
 * guessed: at 446px the content overshoots by 42px, and the body font cannot shrink to absorb
 * it because clamp() holds it at a 12px floor while the page keeps getting smaller.
 *
 * Below this width the intro sits above the book instead of beside it, so the book gets the
 * whole container rather than 57% of it. The two-page spread, the copy and the 12px minimum
 * are all preserved; only the column arrangement changes. */
/* 1079 and not 999. A media query is evaluated against the viewport INCLUDING the
 * scrollbar, while the book is laid out in the content width WITHOUT it. At a 1000px
 * window the query already reports 1000 and stops stacking, but the content is only
 * 985px, and page 6 then overlapped its number by 4.11px. Measured by Pablo on the
 * rendered page in 16577, which is why the boundary is the window width at which the
 * CONTENT is wide enough, not the content width itself. */
@media (max-width: 1439px) {
    .family-flipbook-intro,
    .family-flipbook-book {
        flex: 0 0 100%;
    }
}

.fb-shell {
    display: block;
}

.fb-shell:focus-visible {
    outline: 2px solid var(--family-flipbook-accent-left);
    outline-offset: 6px;
    border-radius: 2px;
}

.fb-pages {
    margin: 0 auto;
    filter: drop-shadow(0 14px 26px rgba(44, 42, 38, 0.2));
    touch-action: pan-y;
}

/* Before the library runs: the first spread, flat. */
.fb-pages {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.fb-page {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    background-color: var(--family-flipbook-page-bg);
}

.fb-pages > .fb-page {
    flex: 0 1 50%;
    max-width: 50%;
    aspect-ratio: 400 / 563;
}

.fb-pages > .fb-page:nth-child(n + 3) {
    display: none;
}

/* Once StPageFlip has built the book it positions the pages itself. */
.is-ready .fb-pages {
    display: block;
}

.is-ready .fb-page {
    max-width: none;
    aspect-ratio: auto;
}

/* The plain pager, for anyone whose system asks for reduced motion. No turn
   at all: the spread it shows is chosen by the component, and changing it
   fades rather than moves. A fade carries none of the movement the setting
   exists to avoid, and it still shows the reader that something happened,
   which an instant swap does not. */
.is-plain .fb-pages {
    display: flex;
    transition: opacity 180ms ease;
}

.is-plain.is-turning .fb-pages {
    opacity: 0;
}

.is-plain .fb-pages > .fb-page {
    display: none;
}

.is-plain .fb-pages > .fb-page.is-shown {
    display: block;
    flex: 0 1 50%;
    max-width: 50%;
    aspect-ratio: 400 / 563;
}

/* ── Paper ──────────────────────────────────────────────────────────────── */

.family-flipbook-page {
    position: relative;
    height: 100%;
    /* The container is one page here, so these are twice the share of the
       spread they would be if the whole book were the container. */
    padding: 10cqi 8.8cqi 16cqi;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    background-blend-mode: multiply;
}

/* A page curves into the fold, and its outer corners are rounded. */
.family-flipbook-page--left {
    box-shadow: inset -14px 0 22px -14px var(--fb-gutter);
    border-radius: var(--fb-radius) 0 0 var(--fb-radius);
}

.family-flipbook-page--right {
    box-shadow: inset 14px 0 22px -14px var(--fb-gutter);
    border-radius: 0 var(--fb-radius) var(--fb-radius) 0;
}

.family-flipbook-page__label {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: clamp(11px, 4.1cqi, 15px);
    margin: 0 0 14px;
}

.family-flipbook-page--left .family-flipbook-page__label,
.family-flipbook-page--right .family-flipbook-page__label {
    color: var(--family-flipbook-accent-left);
    font-family: var(--font-secondary);
    letter-spacing: .13px;
    font-style: italic;
    border-bottom: 1px solid #e0d9cd;
    padding-bottom: 8px;
    margin-bottom: 18px;
}

.family-flipbook-page__heading {
    font-size: clamp(14px, 5.6cqi, 20px);
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 20px;
}

.family-flipbook-page__content {
    font-family: 'Segoe Print', 'Comic Sans MS', cursive, Georgia, serif;
    font-style: italic;
    font-size: clamp(12px, 4.4cqi, 16px);
    line-height: 1.35;
    color: var(--family-flipbook-text);
    margin: 0 0 20px;
}

/* Sits at the foot of the page and gives way to the words when a page runs
   long, so the picture can never push the page number out of sight. */
.family-flipbook-page__media {
    margin-top: auto;
    /* Keeps the picture off the page number. margin-top:auto pins this box to the
       foot of the text column, so without this the image's lower edge and the
       number are only the padding apart. */
    margin-bottom: 3cqi;
    flex: 0 1 66cqi;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.family-flipbook-page__media img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 2px;
    margin: 0 auto;
}

.family-flipbook-page__placeholder {
    width: 100%;
    height: 140px;
    background-color: var(--family-flipbook-placeholder);
    border-radius: 2px;
    display: none;
}

.family-flipbook-page__number {
    position: absolute;
    /* Sits lower than it used to. At 7.2cqi the page content came within 9.3px of
       this number on the page that carries a cover image, measured on the live
       Italian store at a 1440 window. */
    bottom: 5.5cqi;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: clamp(10px, 3.8cqi, 13px);
    color: var(--family-flipbook-muted);
    margin: 0;
}

.family-flipbook-page--left .family-flipbook-page__number  { left: 8.8cqi; }
.family-flipbook-page--right .family-flipbook-page__number { right: 8.8cqi; }

/* ── Guard: this stylesheet meeting the OLD markup ──────────────────────────
 *
 * On this project the templates under app/code have reached production later
 * than the stylesheet more than once (Mantis 2856), and the section is in
 * exactly that state on the five live stores while this is written. None of
 * the rules above match the old markup, so without this block the nine old
 * spreads stack in normal flow and the section grows to roughly 10,000px.
 *
 * This keeps it to a readable opening spread until the templates catch up.
 * Delete it once app/code deploys to production reliably.
 */

.family-flipbook-spreads--mobile {
    display: none;
}

.family-flipbook-spread {
    display: none;
}

.family-flipbook-spreads--desktop .family-flipbook-spread:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 800 / 563;
    overflow: hidden;
}

/* The pages above size themselves in container units, which need a container
   on an ANCESTOR. The old markup has no wrapper around a page, so those units
   would fall back to the viewport and leave one word per line. Give the old
   pages plain sizes instead. */
.family-flipbook-spread .family-flipbook-page {
    padding: 22px 20px 34px;
}

.family-flipbook-spread .family-flipbook-page__label {
    font-size: 13px;
}

.family-flipbook-spread .family-flipbook-page__content {
    font-size: 14px;
}

.family-flipbook-spread .family-flipbook-page__media {
    flex: 0 1 auto;
}

.family-flipbook-spread .family-flipbook-page__number {
    bottom: 14px;
    font-size: 11px;
}

.family-flipbook-spread .family-flipbook-page--left .family-flipbook-page__number {
    left: 20px;
}

.family-flipbook-spread .family-flipbook-page--right .family-flipbook-page__number {
    right: 20px;
}

/* ── Pagination & navigation ────────────────────────────────────────────── */

.family-flipbook-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.family-flipbook-pagination__counter {
    font: 11px / 1 sans-serif;
    color: #888;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
}

.family-flipbook-nav {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #faf8f3;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #555;
    transition: .2s;
    user-select: none;
    line-height: 1;
    padding: 0;
}

.family-flipbook-nav:hover:not(:disabled) {
    background-color: var(--family-flipbook-text);
    border-color: var(--family-flipbook-text);
    color: var(--family-flipbook-page-bg);
}

.family-flipbook-nav:active:not(:disabled) {
    transform: scale(0.93);
}

.family-flipbook-nav:focus-visible {
    outline: 2px solid var(--family-flipbook-accent-left);
    outline-offset: 3px;
}

.family-flipbook-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* MANTIS-2884. The theme's desktop gutter, so this section lines up with the rest of the page.
 *
 * A centred max-width of 1120px stood here for part of a day. It kept the book wide, but it
 * left this section sitting 20px from each edge at 1100px while every other section sat at
 * 160px, which is the mismatch this replaces.
 *
 * The 10rem gutter and the side-by-side row cannot both have what they want. Measured on the
 * rendered page at spread 5-6, with the gutter restored and the intro beside the book, page 6
 * overflows by 124px at 1100, 59px at 1200, 36px at 1220, 28px at 1240 and 6px at 1260. It
 * first fits at 1280, and even at 1440 it has only 32px to spare - under two lines. Widening
 * the book's share of the row does not rescue it either: at 1100 a 70/30 split still leaves
 * just 23px.
 *
 * So the row gives way instead of the gutter, and the stacking boundary above moves from
 * 1079 to 1439. Stacked at 1100 the pages are 382.5px wide against 281.8px before, with 68px
 * of slack on page 6 - comfortable rather than borderline, which matters because the other
 * four markets' page 6 text is not the Italian text measured here. */
@media (min-width: 1024px) {
    .family-flipbook-container {
        padding-left: 10rem;
        padding-right: 10rem;
    }
}

@media (max-width: 767px) {
    .family-flipbook-section {
        padding: 40px 0;
    }

    /* Not a column flex container: the intro and the book both carry a
       percentage flex-basis for the desktop row, and in a column that basis
       lands on the HEIGHT axis instead. The book container was then shorter
       than the book inside it and the pages hung over the next section by
       about 170px. As a plain block, both size to their content. */
    .family-flipbook-container {
        display: block;
    }

    .family-flipbook-intro {
        margin-bottom: 24px;
    }

    .family-flipbook-intro__heading {
        font-size: 26px;
        line-height: 28px;
        margin: 0 0 10px;
    }

    .family-flipbook-intro__description {
        margin: 0;
        line-height: 20px;
    }

    /* One page at a time on a phone, so the words stay readable. */
    .fb-pages > .fb-page,
    .is-plain .fb-pages > .fb-page.is-shown {
        flex-basis: 100%;
        max-width: 100%;
    }

    .fb-pages > .fb-page:nth-child(n + 2) {
        display: none;
    }
}