/* Media Block - Finance Tool
   Desktop: Figma node 473:150 — Mobile: Figma node 446:523

   Mirror of Media Block - Copy Right: copy on the left, photo on the right.
   Named grid areas because the photo leads on mobile while the copy leads in
   the DOM, so the two swap order at the breakpoint.

   Note the mobile frame keeps the desktop type sizes — the 44px heading and
   18/30 body do not step down the way they do on the other blocks. */

.mediaBlockFinanceTool {
    display: grid;
    /* The mock splits 729 copy / 539 photo within its 1440 frame. Holding that
       as a ratio rather than a fixed 729px column stops the photo being squeezed
       on narrower desktops. */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-areas: "copy media";
    column-gap: 52px;
    align-items: stretch;
    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);
}

/* ── Copy column — vertically centred against the photo ── */

.mediaBlockFinanceTool__copy {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
}

.mediaBlockFinanceTool__heading {
    font-family: "Andada Pro", serif;
    font-weight: 400;
    font-size: 44px;
    line-height: normal;
    color: #385723;
    margin: 0;
    /* Plain declaration, not !important — breakpoint rules need to override it */
    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;
}

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

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

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

.mediaBlockFinanceTool__body ul,
.mediaBlockFinanceTool__body ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

/* Markers restored explicitly — the theme's list reset clears them. */
.mediaBlockFinanceTool__body ul {
    list-style: disc;
}

.mediaBlockFinanceTool__body ol {
    list-style: decimal;
}

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

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

/* ── Photo ── */

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

/* The photo sets the section height at the ratio it has in the mock
   (539 x 262 within the 1440px frame). */
.mediaBlockFinanceTool__media::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 539 / 262;
    /* Stops the section growing without limit on ultra-wide monitors */
    max-height: 320px;
}

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

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

.mediaBlockFinanceTool__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: #a47c48;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s ease;
}

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

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

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

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

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

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

    .mediaBlockFinanceTool__heading {
        font-size: 34px;
    }

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

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

@media (max-width: 768px) {
    .mediaBlockFinanceTool {
        grid-template-columns: 1fr;
        /* Photo leads on mobile, copy follows */
        grid-template-areas:
            "media"
            "copy";
        column-gap: 0;
        row-gap: 24px;
        padding: 40px 20px;
    }

    .mediaBlockFinanceTool__media::before {
        max-height: none;
    }

    /* The mobile mock holds the desktop type sizes rather than stepping them
       down, so the heading and body are deliberately left alone here. The
       tablet rule above would otherwise shrink them. */
    .mediaBlockFinanceTool__heading {
        font-size: 44px;
    }

    .mediaBlockFinanceTool__body {
        font-size: 18px;
        line-height: 30px;
    }

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

    .mediaBlockFinanceTool__cta:active {
        transform: none;
    }
}