/* ============================================
   SECTION: Hero
   Pink rounded card: text column on the left, and a
   large child photograph that bleeds off the right
   AND bottom edges (clipped by the card).
   Layout mirrors the Figma Dev Mode export.
   ============================================ */

.hero {
    padding: 20px var(--section-side-padding) 60px;
    background: var(--color-white);
}

.hero__card {
    position: relative;
    max-width: var(--container-max);
    min-height: 600px;
    margin: 0 auto;
    padding: 56px 80px;
    background-color: var(--color-primary-light);
    border-radius: 12px;
    overflow: hidden;
}

/* ----- Text column (left) ----- */
.hero__content {
    position: relative;
    z-index: 3;
    width: 567px;
    max-width: 100%;
    margin-top: 96px;
    display: flex;
    flex-direction: column;
    gap: 48px;                 /* design gap between text group and buttons */
}

.hero__text {
    display: flex;
    flex-direction: column;
    gap: 16px;                 /* design gap between heading and lede */
}

.hero__heading {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: var(--font-weight-medium);
    line-height: 39px;
    letter-spacing: -1.68px;
    color: var(--color-text-heading);
    margin: 0;
}

.hero__heading .accent-script {
    font-family: var(--font-accent);
    font-weight: 400;
    color: var(--color-primary);
    letter-spacing: -0.03em;
}

.hero__lede {
    font-size: 17px;
    font-weight: var(--font-weight-medium);
    line-height: 28px;
    color: var(--color-text-heading);
    max-width: 440px;
    margin: 0;
}

.hero__actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

/* ----- Media layer: fills the card, holds photo + swirls ----- */
.hero__media {
    position: absolute;
    inset: 0;
    pointer-events: none;      /* never block clicks on the text/buttons */
}

/* Large photo: full size, anchored top:50 so it bleeds off the BOTTOM
   (and the right) when the card is shorter than the photo — matching Figma.
   width 1024/1240 = 82.6%, right overhang 225/1240 = 18.1%. */
.hero__image {
    position: absolute;
    z-index: 1;
    right: -18.1%;
    top: 50px;
    width: 82.6%;
    height: auto;
    aspect-ratio: 1024 / 682;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
}

/* ----- Decorative swirls (anchored to the card) ----- */
.hero__swirl {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

/* White swirl (vector-271): BEHIND the photo, large loop sweeping top-center to right */
.hero__swirl--white {
    z-index: 0;
    width: 82%;
    aspect-ratio: 1106 / 383;
    top: 0;
    right: 2%;
    background-image: url("../../../images/decorative/vector-271.6a8463592368.png");
}

/* Pink swirl (vector-270): IN FRONT of the photo, sweeping across the bottom-right */
.hero__swirl--pink {
    z-index: 2;
    width: 70%;
    aspect-ratio: 828 / 285;
    right: -2%;
    bottom: 0;
    background-image: url("../../../images/decorative/swirl-pink.dc78ba44065e.png");
}

/* ----- Tablet and below: the photo is dropped and the column is centred -----
   Below the desktop breakpoint the photograph has nowhere to sit without
   leaving a large empty band, so the hero becomes the centred, text-only
   composition the phone design uses. The swirls stay on as background
   flourishes and keep their percentage geometry, so they scale with the card. */
@media (max-width: 1024px) {
    .hero__card {
        padding: 64px 32px 72px;
        min-height: 0;
    }

    .hero__content {
        width: 100%;
        max-width: 700px;      /* keeps "and joy" on the heading's second line */
        margin: 0 auto;
        align-items: center;
        text-align: center;
        gap: 32px;
    }

    .hero__text {
        align-items: center;
        gap: 16px;
    }

    .hero__heading {
        font-size: 42px;
        line-height: 48px;
        letter-spacing: -1.2px;
    }

    .hero__lede {
        max-width: none;
    }

    .hero__actions {
        justify-content: center;
    }

    /* Media layer now carries only the swirls */
    .hero__media {
        position: absolute;
        inset: 0;
        margin-top: 0;
    }

    .hero__image {
        display: none;
    }

    /* Desktop's swirl sizes are tuned to sit around the photograph; without
       it they crowd the centred text, so both are pulled back to the corners
       and mostly cropped, the way the phone design uses them. */
    .hero__swirl--white {
        width: 46%;
        top: -12%;
        right: -6%;
        left: auto;
        bottom: auto;
    }

    /* Keeps the desktop width and right-hand anchor, just dropped further
       below the card edge so only the top of the arc shows. */
    .hero__swirl--pink {
        top: auto;
        bottom: -24%;
    }
}

/* ----- Small tablets: same composition, tighter type ----- */
@media (max-width: 768px) {
    .hero {
        padding: 12px var(--section-side-padding) 40px;
    }
    .hero__card {
        padding: 56px 24px 64px;
    }
    .hero__heading {
        font-size: 34px;
        line-height: 40px;
        letter-spacing: -0.8px;
    }
    .hero__lede {
        font-size: 16px;
        line-height: 26px;
    }
}

/* ----- Phones: the Figma mobile composition -----
   Not a narrower desktop hero: the photograph is dropped, the
   decorative swirls come back, and the text column is centred
   inside a 16px-padded card. Geometry from the 360px frame
   (card 328x597): heading 240 wide, lede and buttons 296.
   Capped at 600px because the design's narrow column looks
   marooned in the wide card at tablet widths. */
@media (max-width: 600px) {
    .hero__card {
        padding: 64px 16px 56px;
    }

    .hero__content {
        width: 100%;
        margin-top: 0;
        align-items: center;
        text-align: center;
        gap: 24px;                 /* text group -> buttons */
    }

    .hero__text {
        align-items: center;
        gap: 4px;                  /* heading -> lede */
    }

    .hero__heading {
        max-width: 240px;
        font-size: 36px;
        line-height: 36px;
        letter-spacing: -1.8px;
    }

    /* Lede and buttons run to the card's 16px padding (296 at 360w);
       only the heading keeps a hard cap, which is what gives it the
       designed ragged line breaks. */
    .hero__lede {
        max-width: none;
        font-size: 16px;
        line-height: 24px;
    }

    .hero__actions {
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        gap: 13px;
    }

    .hero__actions .btn {
        width: 100%;
    }

    /* Media layer carries only the swirls now */
    .hero__media {
        position: absolute;
        inset: 0;
        margin-top: 0;
    }

    .hero__image {
        display: none;
    }

    .hero__swirl {
        display: block;
        aspect-ratio: auto;
    }

    /* Placed at the PNG's own size and tuned by eye, NOT with the design's
       geometry (which is 690x339 rotated -150deg). Figma renders this brush
       path at a 2.04 aspect while vector-271.png is a 2.89 raster of it, so
       reproducing the design's transform stretches the stroke and lands the
       loop in the wrong place. Replace this with the design's numbers only
       if the mobile artwork is re-exported at its own proportions. */
    .hero__swirl--white {
        width: 1106px;
        height: 383px;
        top: -200px;
        left: -391px;
        right: auto;
        background-size: 100% 100%;
    }

    /* Anchored to the card's bottom edge so it stays put as the card grows. */
    .hero__swirl--pink {
        width: 537px;
        height: 185px;
        left: -121px;
        right: auto;
        bottom: -117px;
        background-size: 100% 100%;
    }
}