/* Media Block - Text Left
   Desktop: Figma node 473:60 — Mobile: Figma node 446:469

   Like the 3-column card block, the two frames reflow rather than resize: the
   photo moves from a fixed portrait column on the right 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,
   keeping one heading, body and CTA in the DOM. */

.mediaBlockTextLeft {
    display: grid;
    grid-template-columns: 1fr 404px;
    /* Trailing 1fr row absorbs any height the photo has beyond the copy, so the
       CTA stays a fixed distance under the copy instead of drifting down. */
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
        "head media"
        "body media"
        "link media"
        "cta  media"
        ".    media";
    column-gap: 40px;
    background: #ffffff;
    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 ── */

.mediaBlockTextLeft__media {
    grid-area: media;
    /* Top-aligned and held at its own size — the mock pins it to 404 x 489 */
    align-self: start;
    position: relative;
    overflow: hidden;
}

.mediaBlockTextLeft__media::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 404 / 489;
}

.mediaBlockTextLeft__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 */
.mediaBlockTextLeft__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 22.5%, rgba(0, 0, 0, 0.8));
    pointer-events: none;
    display: none;
}

/* ── Heading ── */

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

/* ── Body copy — one WYSIWYG holding the intro, the bold lead-in and the list ── */

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

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

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

.mediaBlockTextLeft__body ul,
.mediaBlockTextLeft__body ol {
    margin: 0 0 10px;
    padding-left: 27px;
}

.mediaBlockTextLeft__body ul {
    list-style: disc;
}

.mediaBlockTextLeft__body ol {
    list-style: decimal;
}

.mediaBlockTextLeft__body li {
    margin-bottom: 0;
}

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

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

/* ── 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. ── */

.mediaBlockTextLeft__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. */
.mediaBlockTextLeft__toggle[hidden] {
    display: none;
}

.mediaBlockTextLeft__toggle:hover {
    color: #a47c48;
}

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

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

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

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

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

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

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

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

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

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

    .mediaBlockTextLeft__heading {
        font-size: 24px;
    }

    .mediaBlockTextLeft__body {
        font-size: 16px;
        line-height: 26px;
    }
}

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

@media (max-width: 768px) {
    .mediaBlockTextLeft {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "media"
            "body"
            "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 3-column card block. No margin on the media itself —
       the heading overlays the bottom of this box. */
    .mediaBlockTextLeft__media {
        align-self: stretch;
    }

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

    .mediaBlockTextLeft__media::after {
        display: block;
    }

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

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

    .mediaBlockTextLeft__body p,
    .mediaBlockTextLeft__body ul,
    .mediaBlockTextLeft__body ol {
        margin-bottom: 16px;
    }

    .mediaBlockTextLeft__body ul,
    .mediaBlockTextLeft__body ol {
        padding-left: 24px;
    }

    .mediaBlockTextLeft__toggle {
        margin-top: 16px;
    }

    .mediaBlockTextLeft__cta {
        margin-top: 32px;
    }

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

    .mediaBlockTextLeft__cta:active {
        transform: none;
    }
}