/* 3 Column Cards - Image - Copy - List
   Desktop: Figma node 473:25 — Mobile: Figma node 446:458

   The two frames reflow rather than resize: on mobile the heading moves out of
   the copy panel and sits over the photo, the bullet list drops between the
   body and the CTA, and both tinted panels disappear. Everything is therefore a
   direct grid child of the section, re-placed by named area at each breakpoint —
   that keeps a single heading, body and CTA in the DOM instead of duplicating
   markup per breakpoint. */

.threeColCardsImageCopyList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* auto / auto / 1fr — the heading and body take their natural height and all
       leftover space lands in the CTA row, below the button. The mock spaces the
       panel content apart, which would open a gap between copy and button that
       changes with viewport width. */
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "media head bullets"
        "media body bullets"
        "media cta  bullets";
    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 column ── */

.threeColCardsImageCopyList__media {
    grid-area: media;
    position: relative;
    overflow: hidden;
}

/* The photo column sets the section height at the ratio it has in the mock
   (413 x 449 within the 1440px frame = 108.6%). Without this the section is only
   as tall as its copy, which on a wide viewport leaves the photo box landscape —
   cover then crops top and bottom and cuts off heads. At this ratio the box stays
   slightly portrait and crops left/right instead. */
.threeColCardsImageCopyList__media::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 413 / 449;
    /* Stops the section growing without limit on ultra-wide monitors — above
       roughly 1640px the photo holds at this height instead of scaling on. */
    max-height: 520px;
}

.threeColCardsImageCopyList__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor the crop to the top of the photo — when cover trims vertically it
       takes it off the bottom, 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 */
.threeColCardsImageCopyList__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0.8));
    pointer-events: none;
    display: none;
}

/* ── Tinted backdrop behind the copy column ── */

.threeColCardsImageCopyList__panel {
    grid-column: 2;
    grid-row: 1 / -1;
    background: rgba(234, 224, 212, 0.83);
}

/* ── Copy column ── */

.threeColCardsImageCopyList__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;
    padding: 32px 32px 0;
    overflow-wrap: break-word;
    /* The theme adds a left rule to some headings — this block's design has none */
    border-left: none !important;
}

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

.threeColCardsImageCopyList__body p {
    margin: 0 0 16px;
}

.threeColCardsImageCopyList__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. */
.threeColCardsImageCopyList__body ul,
.threeColCardsImageCopyList__body ol {
    margin: 0 0 16px;
    padding-left: 27px;
}

.threeColCardsImageCopyList__body ul {
    list-style: disc;
}

.threeColCardsImageCopyList__body ol {
    list-style: decimal;
}

.threeColCardsImageCopyList__body li {
    margin-bottom: 0;
}

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

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

/* ── Checkmark bullet list ── */

.threeColCardsImageCopyList__bullets {
    grid-area: bullets;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.83);
    padding: 32px;
    margin: 0;
    list-style: none;
}

.threeColCardsImageCopyList__bullet {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
}

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

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

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

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

.threeColCardsImageCopyList__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;
}

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

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

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

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

@media (max-width: 1024px) {
    .threeColCardsImageCopyList {
        column-gap: 24px;
        padding: 40px 44px;
    }

    .threeColCardsImageCopyList__heading {
        font-size: 24px;
        padding: 24px 24px 0;
    }

    .threeColCardsImageCopyList__body {
        font-size: 16px;
        line-height: 26px;
        padding: 0 24px;
    }

    .threeColCardsImageCopyList__bullets {
        padding: 24px;
        gap: 10px;
    }

    .threeColCardsImageCopyList__bulletText {
        font-size: 16px;
    }

    .threeColCardsImageCopyList__cta {
        margin: 20px 24px 24px;
    }
}

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

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

    /* Panels are desktop-only — mobile sits directly on the section background */
    .threeColCardsImageCopyList__panel {
        display: none;
    }

    /* A 3:2 banner rather than the mock's fixed 140px, so more of the photo is
       visible and it scales with the viewport. No margin on the media itself —
       the heading overlays the bottom of this box, and a margin here would sit
       inside the grid area and push the heading off the photo. */
    .threeColCardsImageCopyList__media::before {
        aspect-ratio: 3 / 2;
        max-height: none;
    }

    .threeColCardsImageCopyList__media::after {
        display: block;
    }

    /* Heading moves onto the photo, and changes face, case and color with it */
    .threeColCardsImageCopyList__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;
    }

    .threeColCardsImageCopyList__body {
        font-size: 16px;
        line-height: 1.5;
        padding: 0;
        /* Carries the 24px gap that used to live on the media margin */
        margin-top: 24px;
        margin-bottom: 10px;
    }

    /* Checkmarks give way to plain disc markers */
    .threeColCardsImageCopyList__bullets {
        display: block;
        background: none;
        padding: 0 0 0 24px;
        margin-bottom: 32px;
        list-style: disc;
    }

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

    .threeColCardsImageCopyList__check {
        display: none;
    }

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

    .threeColCardsImageCopyList__cta {
        margin: 0;
    }

    .threeColCardsImageCopyList__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) {
    .threeColCardsImageCopyList__cta {
        transition: none;
    }

    .threeColCardsImageCopyList__cta:active {
        transform: none;
    }
}