/* Media Block - 3 Col Bullets
   Desktop: Figma node 473:71 — Mobile: Figma node 446:481

   Same reflow pattern as the other media blocks: the photo moves from a fixed
   landscape column on the left to a full-width banner on top, and the heading
   moves out of the copy and onto that banner. Everything is a direct grid child
   so it can be re-placed by named area per breakpoint.

   The bullet list is a single <ul> flowed with CSS multi-column rather than
   three separate lists — one list stays semantically correct for screen readers
   and reflows to any number of bullets without the editor balancing columns. */

.mediaBlock3ColBullets {
    display: grid;
    grid-template-columns: 404px 1fr;
    /* The 1fr rows above and below the copy centre it against the photo, which
       the mock aligns to the middle of the row. */
    grid-template-rows: 1fr auto auto 1fr auto auto auto auto;
    grid-template-areas:
        "media   ."
        "media   head"
        "media   body"
        "media   ."
        "lead    lead"
        "bullets bullets"
        "link    link"
        "cta     cta";
    column-gap: 40px;
    background: #faf7f4;
    padding: 40px 60px;
    /* Break out of the theme's content column so the left edge lines up with the
       hero and copy blocks above it */
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
}

/* ── Photo ── */

.mediaBlock3ColBullets__media {
    grid-area: media;
    align-self: start;
    position: relative;
    overflow: hidden;
}

.mediaBlock3ColBullets__media::before {
    content: "";
    display: block;
    width: 100%;
    /* The mock pins the photo to 404 x 245 */
    aspect-ratio: 404 / 245;
}

.mediaBlock3ColBullets__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor the crop to the top so faces near the top of the frame survive */
    object-position: center top;
    display: block;
}

/* Bottom scrim — only used on mobile, where the heading sits over the photo */
.mediaBlock3ColBullets__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 16.8%, rgba(0, 0, 0, 0.8));
    pointer-events: none;
    display: none;
}

/* ── Heading ── */

.mediaBlock3ColBullets__heading {
    grid-area: head;
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: normal;
    color: #000000;
    margin: 0 0 10px;
    /* Plain declaration, not !important — the mobile rule overlays this heading
       on the photo and needs to set its own padding. */
    padding: 0;
    overflow-wrap: break-word;
    /* The theme adds a left rule to some headings — this block's design has none */
    border-left: none !important;
}

/* ── Intro copy ── */

.mediaBlock3ColBullets__body {
    grid-area: body;
    font-family: "Andada Pro", serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #000000;
    overflow-wrap: break-word;
}

.mediaBlock3ColBullets__body p {
    margin: 0 0 10px;
}

.mediaBlock3ColBullets__body p:last-child {
    margin-bottom: 0;
}

/* The fountain_content toolbar exposes list buttons, so copy here can contain
   lists. Markers and indent are set explicitly because the theme resets them. */
.mediaBlock3ColBullets__body ul,
.mediaBlock3ColBullets__body ol {
    margin: 0 0 10px;
    padding-left: 27px;
}

.mediaBlock3ColBullets__body ul {
    list-style: disc;
}

.mediaBlock3ColBullets__body ol {
    list-style: decimal;
}

.mediaBlock3ColBullets__body li {
    margin-bottom: 0;
}

.mediaBlock3ColBullets__body ul:last-child,
.mediaBlock3ColBullets__body ol:last-child {
    margin-bottom: 0;
}

.mediaBlock3ColBullets__body a {
    color: #385723;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Bold lead-in above the bullets ── */

.mediaBlock3ColBullets__bulletsIntro {
    grid-area: lead;
    margin: 40px 0 0;
    font-family: "Andada Pro", serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
    color: #000000;
    overflow-wrap: break-word;
}

/* ── Checkmark bullets, flowed across three columns ── */

.mediaBlock3ColBullets__bullets {
    grid-area: bullets;
    column-count: 3;
    column-gap: 40px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.mediaBlock3ColBullets__bullet {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    /* Keep a bullet from splitting across a column boundary */
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Both the rule above and the mobile override set `display`, which outranks the
   browser default of [hidden] { display: none } — without this, collapsing the
   list from main.js would have no visual effect. */
.mediaBlock3ColBullets__bullet[hidden] {
    display: none;
}

.mediaBlock3ColBullets__check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: block;
    /* Nudge the glyph onto the first text line */
    margin-top: 7px;
}

.mediaBlock3ColBullets__bulletText {
    font-family: "Andada Pro", serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #000000;
    overflow-wrap: break-word;
}

/* ── Expand toggle — reveals the rest of the bullet list on mobile.
      Styled as a text link but it is a real button; main.js unhides it only when
      the list is longer than the limit, so it never appears on desktop. ── */

.mediaBlock3ColBullets__toggle {
    grid-area: link;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    /* ADA: keeps the tappable area at or above 44x44px. min-width matters
       because the button has no horizontal padding, so a short label like
       "More" would otherwise be narrower than the 44px minimum. */
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-family: "Andada Pro", serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    color: #385723;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* The rule above sets `display`, which outranks the browser default of
   [hidden] { display: none } — without this the toggle would show on desktop
   and whenever JS has decided it is not needed. */
.mediaBlock3ColBullets__toggle[hidden] {
    display: none;
}

.mediaBlock3ColBullets__toggle:hover {
    color: #a47c48;
}

.mediaBlock3ColBullets__toggle:focus-visible {
    outline: 2px solid #385723;
    outline-offset: 2px;
}

.mediaBlock3ColBullets__toggle:active {
    /* Pressed tone matches the CTA's active brown */
    color: #8a6538;
}

/* ── CTA — brown pill with an inset white keyline, matching the other blocks ── */

.mediaBlock3ColBullets__cta {
    grid-area: cta;
    justify-self: start;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-top: 24px;
    background: #a47c48;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.mediaBlock3ColBullets__ctaLabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ADA: keeps the tappable area at or above 44x44px */
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
    border: 1px solid #ffffff;
    border-radius: 16px;
    font-family: "Andada Pro", serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    text-align: center;
    color: #ffffff;
    white-space: nowrap;
}

.mediaBlock3ColBullets__cta:hover {
    background: #8a6538;
}

.mediaBlock3ColBullets__cta:focus-visible {
    outline: 3px solid #385723;
    outline-offset: 3px;
}

.mediaBlock3ColBullets__cta:active {
    transform: scale(0.98);
}

/* ── Tablet — interpolated; no tablet frame was supplied ── */

@media (max-width: 1024px) {
    .mediaBlock3ColBullets {
        grid-template-columns: 300px 1fr;
        column-gap: 24px;
        padding: 40px 44px;
    }

    .mediaBlock3ColBullets__heading {
        font-size: 24px;
    }

    .mediaBlock3ColBullets__body,
    .mediaBlock3ColBullets__bulletsIntro,
    .mediaBlock3ColBullets__bulletText {
        font-size: 16px;
        line-height: 26px;
    }

    .mediaBlock3ColBullets__bullets {
        column-count: 2;
        column-gap: 24px;
    }

    .mediaBlock3ColBullets__check {
        margin-top: 5px;
    }
}

/* ── Mobile — Figma node 446:481 ── */

@media (max-width: 768px) {
    .mediaBlock3ColBullets {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "media"
            "body"
            "lead"
            "bullets"
            "link"
            "cta";
        column-gap: 0;
        padding: 40px 20px;
    }

    /* A 3:2 banner rather than the mock's fixed 140px, matching the taller
       treatment used on the other blocks. No margin on the media itself — the
       heading overlays the bottom of this box. */
    .mediaBlock3ColBullets__media {
        align-self: stretch;
    }

    .mediaBlock3ColBullets__media::before {
        aspect-ratio: 3 / 2;
    }

    .mediaBlock3ColBullets__media::after {
        display: block;
    }

    /* Heading moves onto the photo, and changes face, case and color with it */
    .mediaBlock3ColBullets__heading {
        grid-area: media;
        align-self: end;
        justify-self: start;
        z-index: 2;
        font-family: "Andada Pro", serif;
        font-size: 26px;
        line-height: 1.25;
        text-transform: uppercase;
        color: #ffffff;
        margin: 0;
        padding: 10px;
    }

    .mediaBlock3ColBullets__body {
        font-size: 16px;
        line-height: 1.5;
        /* Carries the 24px gap below the photo */
        margin-top: 24px;
    }

    .mediaBlock3ColBullets__bulletsIntro {
        margin-top: 10px;
        font-size: 16px;
        line-height: 1.5;
    }

    /* One column, and checkmarks give way to plain disc markers */
    .mediaBlock3ColBullets__bullets {
        column-count: 1;
        margin-top: 10px;
        padding-left: 24px;
        list-style: disc;
    }

    .mediaBlock3ColBullets__bullet {
        display: list-item;
        margin-bottom: 0;
    }

    .mediaBlock3ColBullets__check {
        display: none;
    }

    .mediaBlock3ColBullets__bulletText {
        font-size: 16px;
        line-height: 1.5;
    }

    .mediaBlock3ColBullets__toggle {
        margin-top: 16px;
    }

    .mediaBlock3ColBullets__cta {
        margin-top: 24px;
    }

    .mediaBlock3ColBullets__ctaLabel {
        /* Tighter side padding so a longer CTA label still fits on one line at
           phone widths. white-space stays normal as a safety valve — a label too
           long even for this wraps rather than overflowing the viewport. */
        padding: 12px 12px;
        white-space: normal;
        /* Guards the one case plain wrapping cannot: a single token longer
           than the viewport, whose min-content width would otherwise force
           the shrink-to-fit link wider than the screen. */
        overflow-wrap: anywhere;
    }
}

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

    .mediaBlock3ColBullets__cta:active {
        transform: none;
    }
}