/*
 * Homepage sections — exported asset paths live in
 * /images/redesign/Section X - Name/ (spaces URL-encoded as %20).
 *
 * Order matches the Figma file:
 *   1 Hero (in hero.css)
 *   2 What is a Mikvah
 *   3 Find a Mikvah (map)
 *   4 Resources (Referrals / TH Instructors / PURE Helpline)
 *   5 The Mikvah Mall
 *   6 Podcast
 *   7 Featured Articles (Blog)
 *   8 My Mikvah Calendar (download)
 *   9 Footer (decorations added in footer.css)
 */

/* ── Section 2: What is a Mikvah ──────────────────────────────────── */
/* Figma layout: carousel frame 535px (pool image + PiP card) on the left,
 * article container 697px on the right, with a 80px gap, inside a
 * 1312px-wide container on a peach-bg section. */
.redesign .about-split {
    display: grid;
    grid-template-columns: 535px 697px;
    gap: 80px;
    align-items: center;
    justify-content: center;
    position: relative;
}

@media (max-width: 1240px) {
    .redesign .about-split {
        grid-template-columns: 1fr 1fr;
    }
}

.redesign .about-split__media {
    position: relative;
    width: 455px;                  /* pool image width per Figma */
    aspect-ratio: 455 / 541;       /* Figma image group 455×541 */
    max-width: 100%;
    overflow: visible;
    background: var(--brand-offwhite-peach);
}

@media (max-width: 1240px) {
    .redesign .about-split__media { width: 100%; aspect-ratio: 4 / 5; }
}

/* Main image — the base layer */
.redesign .about-split__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Picture-in-picture video card overlapping the pool image, positioned
 * per Figma at x=222/y=314 inside the 455×541 frame (right-half / lower-half),
 * sized 313×175. */
.redesign .about-split__pip {
    position: absolute;
    left: 222px;
    top: 314px;
    width: 313px;
    height: 176px;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(32, 52, 60, 0.22);
    z-index: 2;
}

@media (max-width: 1240px) {
    .redesign .about-split__pip {
        left: auto;
        right: -4%;
        bottom: -8%;
        top: auto;
        width: 52%;
        height: auto;
        aspect-ratio: 16 / 10;
    }
}

.redesign .about-split__pip video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Chestnut-fill play button per Figma (#d0b09c bg, rounded-1000px, p-8px).
 * Rendered as an <a> pointing to /what-is-mikvah so tapping the play
 * icon opens the same destination as the section's "Learn more" CTA. */
.redesign .about-split__play {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    background: var(--brand-chestnut);
    color: var(--neutral-white);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(32, 52, 60, 0.25);
    transition: transform 160ms ease, background-color var(--hover-dur) var(--hover-ease);
}

.redesign .about-split__play:hover {
    transform: scale(1.06);
    background: #b99a86;
}

.redesign .about-split__play svg {
    width: 32px;
    height: 32px;
    margin-left: 2px;
}

/* Decorative flower line art — per Figma Vector container (node 11336:36362)
 * the flowers sit at the bottom-right of the whole Section 2 (peach)
 * background. Not anchored to the image. 382×361 at normal scale. */
.redesign .about-section {
    position: relative;
    overflow: hidden;
}

.redesign .about-section__flowers {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 382px;
    height: auto;
    opacity: 1;              /* Figma renders the flowers at full chestnut — bumped from 0.9 */
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 1240px) {
    .redesign .about-section__flowers { width: 260px; }
}

@media (max-width: 768px) {
    .redesign .about-section__flowers { width: 180px; }
}

.redesign .about-split__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 560px;
}

/* Tablet/narrow-desktop (769–900 px) — stacked grid, but keep the
 * pool image + PiP tied together as a single block. The PiP switches
 * to its mobile overlay position (bottom of the image) at this same
 * breakpoint so it doesn't float off the bottom-right of the media
 * once the grid collapses to a single column. */
@media (max-width: 900px) {
    .redesign .about-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .redesign .about-split__media {
        width: 100%;
        aspect-ratio: 393 / 467;    /* use the Figma mobile ratio — taller so the PiP sits cleanly at the bottom of the image */
    }
    /* PiP: overlay at the BOTTOM of the pool image, 20 px inset each
     * side, matching the Figma mobile composition. Previously this
     * only applied at ≤768, which left a "floating off the corner"
     * glitch between 769–900 since the desktop float-out rule from
     * the 1240 breakpoint was still in effect. */
    .redesign .about-split__pip {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 20px;
        right: 20px;
        width: auto;
        height: auto;
        aspect-ratio: 528 / 297;
        max-width: none;
    }
    .redesign .about-split__flowers {
        right: 0;
        bottom: -32px;
        width: 140px;
    }
}

/* ── Section 2 mobile (Figma node 11485:3060) ─────────────────────
 * Mobile layout flips the desktop 2-column grid into a full-bleed
 * stacked layout:
 *   • peach bg extends edge-to-edge (no container padding)
 *   • pool image bleeds to viewport edges (393 × 467 in Figma)
 *   • PiP video overlays the bottom half of the pool image, 89.82 %
 *     wide and centered (≈ 20 px inset each side)
 *   • 64 px gap between image and info
 *   • info section is LEFT-aligned (not centered), 20 px side pad,
 *     64 px bottom pad, 32 px heading + 18 px paragraph
 *   • section has no top/bottom block padding; image sits flush with
 *     section top, info owns its own bottom spacing */
@media (max-width: 768px) {
    .redesign .about-section.section {
        padding-block: 0;
    }
    .redesign .about-section > .container {
        padding-inline: 0;        /* let image + info control their own padding */
    }
    .redesign .about-split {
        gap: 64px;                /* Figma gap-[64px] between image and info */
        /* Pull the section up over the preceding section's bottom margin —
           at this breakpoint about-split spans full width with no inline
           padding, so it can safely overlap upward. */
        margin-top: -70px;
    }
    .redesign .about-split__pip {
        /* Figma mobile: PiP at 50.7 % from top (slightly above bottom) */
        top: 50.7%;
        bottom: auto;
    }
    .redesign .about-split__text {
        padding: 0 20px 64px;
        gap: 20px;
        max-width: none;
        text-align: left;
    }
    .redesign .about-split__text h2 {
        font-size: 32px;          /* Figma mobile heading */
        line-height: 1.2;
    }
    .redesign .about-split__text p {
        font-size: 18px;
        line-height: 1.5;
    }
    /* Peach section's flower decoration sits behind the text on mobile */
    .redesign .about-section__flowers {
        width: 131px;             /* Figma mobile vector section width */
        right: 20px;
        bottom: 24px;
        z-index: 0;
    }
    .redesign .about-split__text > * { position: relative; z-index: 1; }
}

/* ── Section 3: Find a Mikvah ────────────────────────────────────── */
/* Figma node 11336:36410. Desktop: outer pill (radius 100, padding
 * 24px) with a faint map-background image, holding a white inner pill
 * input. Below: "View Full Directory" peach CTA. Mobile collapses the
 * search pill — only the CTA remains. Submitting routes to
 * /directory/{slug}. */
.redesign .find-mikvah__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    width: 460px;
    max-width: 100%;
    margin: 0 auto 40px;
}

/* Outer pill — large, padded, with a faint map texture behind. */
.redesign .find-mikvah__pill {
    display: block;
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    padding: 24px;
    border-radius: var(--radius-full);
    background-color: var(--brand-offwhite-peach);
    background-image: url('/images/redesign/Map-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Faint warm wash over the map so the white input reads with strong
 * contrast (matches Figma render warmth on top of busy map tiles). */
.redesign .find-mikvah__pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(254, 245, 242, 0.55);
    pointer-events: none;
}

/* Inner white field — a single rounded white pill. Magnifying glass is
 * an absolutely-positioned overlay (pointer-events:none) so clicks
 * anywhere in the field focus the input behind it. Previous layout used
 * two flex cells (icon + input) which made the icon a separate hit
 * target and stole focus from the input. */
.redesign .find-mikvah__field {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 72px;
    background: var(--neutral-white);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    box-sizing: border-box;
    overflow: hidden;
}

.redesign .find-mikvah__icon {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    color: var(--text-heading);
    pointer-events: none;
    z-index: 2;
    display: block;
}

.redesign .find-mikvah__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.redesign .find-mikvah__input {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-full);
    padding: 0 32px 0 72px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.5;
    color: var(--text-heading);
    background: transparent;
    outline: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.redesign .find-mikvah__input::placeholder {
    /* The real placeholder is a single space (see home.blade.php) so it
     * doesn't conflict with the .find-mikvah__placeholder overlay. Keep
     * the color transparent so the space isn't visible. */
    color: transparent;
}

.redesign .find-mikvah__input:focus,
.redesign .find-mikvah__input:focus-visible {
    outline: 0;
    box-shadow: none;
}

/* Overlay placeholder — slides off-right + fades on focus or when the
 * input has content. The real <input> keeps a single-space placeholder
 * so :placeholder-shown can still detect "has content" reliably across
 * browsers (toggles on user typing + on programmatic value-set from
 * Google Places autocomplete). */
.redesign .find-mikvah__placeholder {
    position: absolute;
    left: 72px;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 360ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 240ms ease-out;
    will-change: transform, opacity;
}

.redesign .find-mikvah__field:focus-within .find-mikvah__placeholder,
.redesign .find-mikvah__input:not(:placeholder-shown) ~ .find-mikvah__placeholder {
    /* Slide fully out to the right of the pill, past its rounded edge,
     * and fade to invisible. translateX uses 130% so the text clears
     * even when the pill is narrow. */
    transform: translate(130%, -50%);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .redesign .find-mikvah__placeholder {
        transition: opacity 120ms ease-out;
    }
    .redesign .find-mikvah__field:focus-within .find-mikvah__placeholder,
    .redesign .find-mikvah__input:not(:placeholder-shown) ~ .find-mikvah__placeholder {
        transform: translateY(-50%);
        opacity: 0;
    }
}

/* Strip the default WebKit search-clear button so it doesn't render
 * a second little widget inside the pill. */
.redesign .find-mikvah__input::-webkit-search-cancel-button,
.redesign .find-mikvah__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* ── Google Places Autocomplete dropdown (.pac-container) ────────
 * The legacy google.maps.places.Autocomplete API attaches behavior to
 * our real <input> (no shadow DOM), and renders predictions into a
 * `.pac-container` div appended to <body>. Styling here is global —
 * applies to both the homepage pill and the /directory search — since
 * the container lives outside any wrapper. The legacy class names
 * (.pac-item, .pac-item-query, .pac-matched) are stable across the
 * Maps JS API and have been for years. */
.pac-container {
    margin-top: 8px;
    padding: 8px 0;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    font-family: var(--font-body, "Manrope", system-ui, sans-serif);
    overflow: hidden;
    /* Float above the directory map (Google Maps internal stacking
     * tops out around 1000) and any sticky-bar / nav. */
    z-index: 10000;
}

/* Kill the default Google branding image at the bottom of the
 * container — billing terms still require attribution, which the Maps
 * Geocoder/Autocomplete documentation is satisfied with via the small
 * "powered by Google" line; the legacy logo image can be hidden. */
.pac-logo:after {
    display: none !important;
}

.pac-item {
    padding: 14px 20px;
    font-size: 16px;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    border-top: 0;
    transition: background-color var(--hover-dur) var(--hover-ease);
    display: flex;
    align-items: center;
    gap: 12px;
}

.pac-item:hover,
.pac-item-selected,
.pac-item.pac-item-selected {
    background-color: #fdf6ee;
}

.pac-icon,
.pac-icon-marker {
    /* Google's prediction icon — keep it but soften the color to blend
     * with the lighter design. Sized 18×18 by default. */
    opacity: 0.45;
    margin-right: 4px;
    flex-shrink: 0;
}

.pac-item-query {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    padding-right: 4px;
}

/* `.pac-matched` is the substring of the suggestion that matches the
 * user's input. Bolded + heading color matches the inspiration. */
.pac-matched {
    font-weight: 700;
    color: var(--text-heading, #1a1a1a);
}

.redesign .find-mikvah__cta-wrap {
    text-align: center;
    margin-top: 32px;
}

.redesign .find-mikvah__cta {
    /* Slightly larger pill to match Figma's prominent View Full Directory */
    padding: 16px 32px;
    font-size: 16px;
}

@media (max-width: 768px) {
    .redesign .find-mikvah__intro { width: 100%; gap: 16px; margin-bottom: 24px; }
    /* Mobile: hide the search pill — Figma + user direction. The CTA
     * is the only affordance below 768px. */
    .redesign .find-mikvah__pill { display: none; }
    .redesign .find-mikvah__cta-wrap { margin-top: 0; }
    .redesign .find-mikvah__cta { width: 100%; max-width: 320px; }
}

/* ── Section 4: Resources callout trio ───────────────────────────── */
/* Figma: 3 columns × 1fr with 64px gap inside a 1312px container.
 * Each card: border color varies (slate / peach / chestnut),
 * 64px horizontal / 112px vertical padding, 32px gap between elements,
 * centered content, each with a distinct button variant. */
.redesign .callout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
}

.redesign .callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 112px 64px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease;
    text-align: center;
}

/* Per-card border colors — rotated so box 1 = peach, box 2 = beige,
 * box 3 = slate (buttons in home.blade.php match each box). */
.redesign .callout--referrals { border-color: var(--brand-border-peach); }
.redesign .callout--th         { border-color: var(--brand-chestnut); }
.redesign .callout--helpline   { border-color: var(--brand-border-slate); }

.redesign .callout:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.redesign .callout__icon {
    width: 58px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.redesign .callout__icon img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.redesign .callout__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: var(--text-heading);
    margin: 0;
    width: 100%;
}

.redesign .callout__body {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-paragraph);
    margin: 0;
    flex: 1 1 auto;
    width: 100%;
}

/* Optional: the PURE Helpline card surfaces the phone number prominently */
.redesign .callout__phone {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
}

.redesign .callout__phone-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-sea-green);
}

.redesign .callout__phone a {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 28px;
    line-height: 1.2;
    color: var(--text-heading);
    text-decoration: none;
}

.redesign .callout__phone a:hover { color: var(--brand-sea-green); }

.redesign .callout__cta {
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 1024px) {
    .redesign .callout-grid { gap: 24px; }
    .redesign .callout { padding: 64px 32px; gap: 24px; }
}

@media (max-width: 768px) {
    .redesign .callout-grid { grid-template-columns: 1fr; }
}

/* ── Section 5 (Figma CTA / 27): The Mikvah Mall ─────────────────── */
/* Figma spec (11400:800): full-width banner, 112px vertical padding,
 * content row is `flex items-end justify-between` inside a 1312px frame.
 * Overlay is rgba(0,0,0,0.24) — much lighter than the prior 0.6 slate,
 * so the photo of books / mug / decor reads through warmly. Visit-our-
 * shop CTA is a glassmorphic offwhite-slate pill (.btn--hero-ghost). */
.redesign .shop-cta {
    position: relative;
    width: 100%;
    padding: 112px var(--container-pad-inline);
    overflow: hidden;
    color: var(--neutral-white);
}

.redesign .shop-cta__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 0;
}

.redesign .shop-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.24);   /* Figma exact (11400:800) */
    z-index: 1;
}

.redesign .shop-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 1312px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.redesign .shop-cta__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.redesign .shop-cta__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 32px;
    line-height: 1.2;
    color: var(--neutral-white);
    margin: 0;
}

.redesign .shop-cta__title .heading-accent {
    /* The italic peach accent doesn't apply on dark bg — reset to white 60% */
    color: rgba(255, 255, 255, 0.7);
}

.redesign .shop-cta__body {
    font-size: 16px;
    line-height: 1.5;
    color: var(--neutral-white);
    margin: 0;
}

.redesign .shop-cta__text {
    gap: 4px;
}

/* Mobile Mikvah Mall (Figma CTA / 27 node 11490:470).
 * Figma mobile keeps the mall photo but swaps the desktop's 60 %
 * sea-green wash for a 40 % BLACK overlay, and centers the whole
 * content block (title + sub + "Visit our shop") horizontally.
 * This reads as "a darker photo with centered stacked copy" rather
 * than "a sea-green banner with photo peeking through". */
@media (max-width: 768px) {
    .redesign .shop-cta { padding: 80px 20px; }

    /* Override desktop sea-green tint with Figma's rgba(0,0,0,0.4) */
    .redesign .shop-cta::after {
        background: rgba(0, 0, 0, 0.4);
    }

    .redesign .shop-cta__inner {
        flex-direction: column;
        align-items: center;           /* center the stack */
        text-align: center;
        gap: 32px;
    }
    .redesign .shop-cta__text {
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    .redesign .shop-cta__title {
        font-size: 34px;               /* Figma exact */
    }
}

/* ── Legacy .shop-promo (deprecated) ─────────────────────────────── */
.redesign .shop-promo {
    position: relative;
    min-height: 520px;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.redesign .shop-promo__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.redesign .shop-promo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg,
        rgba(32, 52, 60, 0.78) 0%,
        rgba(32, 52, 60, 0.55) 40%,
        rgba(32, 52, 60, 0) 80%);
    z-index: 1;
}

.redesign .shop-promo__inner {
    position: relative;
    z-index: 2;
    padding: 112px var(--container-pad-inline);
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.redesign .shop-promo__text {
    max-width: 480px;
    color: var(--neutral-white);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.redesign .shop-promo__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 40px;
    line-height: 1.2;
    color: var(--neutral-white);
    margin: 0;
}

.redesign .shop-promo__body {
    font-size: 18px;
    line-height: 1.5;
    color: var(--neutral-white);
    opacity: 0.92;
    margin: 0;
}

@media (max-width: 900px) {
    .redesign .shop-promo { min-height: 400px; }
    .redesign .shop-promo__inner {
        padding: 80px 20px;
        justify-content: flex-start;
    }
    .redesign .shop-promo__title { font-size: 32px; }
}

/* ── Section 6: Podcast (2-col row + 3 featured sub-cards) ──────── */
/* Main podcast row: 1312px, peach-bg left 80px-pad column, image right. */
.redesign .podcast-row {
    display: flex;
    align-items: stretch;
    max-width: var(--container-max);   /* 1312px — align to site container */
    margin: 0 auto;
    width: 100%;
    padding-inline: var(--container-pad-inline);  /* L/R gutter < 1440px */
    box-sizing: border-box;
}

.redesign .podcast-row__text {
    /* Text gets the larger share — allowed to exceed 50% so it wraps less
     * and stays close to the image height at mid widths. */
    flex: 1 1 55%;
    min-width: 0;
    background: var(--brand-offwhite-peach);
    padding: 48px 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: space-between;
    min-height: 572px;             /* floor; grows with content via stretch */
}

.redesign .podcast-row__text .section-heading__title {
    font-size: 36px;               /* smaller than default 48 to fit column */
    line-height: 1.2;
}

.redesign .podcast-row__text-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.redesign .podcast-row__text-body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-right: 32px;
}

.redesign .podcast-row__episode {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.redesign .podcast-row__episode-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.3;
    color: var(--text-heading);
    margin: 0;
}

.redesign .podcast-row__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.redesign .podcast-row__image {
    /* Smaller share than the text column (under 50%) and able to shrink at
     * mid widths so the text isn't squeezed. Stretches to the row height
     * (align-items: stretch) instead of a fixed 572 — so when the text wraps
     * taller, the image grows with it and the columns stay flush. */
    flex: 1 1 45%;
    max-width: 656px;
    min-width: 0;
    min-height: 572px;
    background: var(--brand-offwhite-peach);
    position: relative;
    overflow: hidden;
}

.redesign .podcast-row__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* `cover` fills the column edge-to-edge so there's no empty peach band
     * between the text and the artwork. Center keeps the logo/mic in frame. */
    object-fit: cover;
    object-position: center;
}

/* No tint over episode artwork — the image speaks for itself.
 * Earlier this had a sea-green wash; it's been removed for the May '26
 * brand swap so episode covers render in their natural colors. */

@media (max-width: 1024px) {
    .redesign .podcast-row { flex-direction: column; }
    .redesign .podcast-row__text { padding: 48px 32px; gap: 48px; }
    .redesign .podcast-row__image { flex: 0 0 auto; width: 100%; max-width: none; height: 400px; min-height: 0; }
}

/* Mobile podcast main row (Figma Podcast Section node 11490:536).
 * Figma mobile shows a single peach card with EVERYTHING centered —
 * tagline, title ("Latest Podcast Episode"), episode title/body, and
 * two stacked pill buttons (Listen + More episodes) with their
 * NATURAL width, centered horizontally.
 *
 * The image column is hidden; the peach card sits in a 20 px side
 * gutter (via section-level padding below) so it reads as an island
 * of content before the featured-cards carousel.
 *
 * IMPORTANT: we drop .podcast-row's desktop flex/column mode entirely
 * on mobile. The desktop rule leaves .podcast-row__text with
 * `flex: 1 0 0` which, in a flex-column parent with no explicit height,
 * can cause the card to collapse to zero height in some engines — the
 * featured carousel below then slides visually "up and over" it. */
@media (max-width: 768px) {
    .redesign .podcast-row {
        display: block;                   /* out of flex so text flows as a normal block */
        padding: 0 20px;                 /* 20 px gutter either side */
    }
    .redesign .podcast-row__image { display: none; }
    .redesign .podcast-row__text {
        flex: 0 0 auto;                  /* cancel desktop flex: 1 0 0 */
        display: flex;                   /* keep inner column layout */
        flex-direction: column;
        width: 100%;
        padding: 32px;                   /* Figma 32 px inner pad */
        gap: 32px;
        min-height: 0;
        align-items: center;             /* center children on cross-axis */
        text-align: center;
        box-sizing: border-box;
    }
    .redesign .podcast-row__text-head {
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .redesign .podcast-row__text-body {
        padding-right: 0;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .redesign .podcast-row__episode {
        align-items: center;
        text-align: center;
    }
    .redesign .podcast-row__actions {
        flex-direction: column;
        align-items: stretch;            /* buttons fill the card width */
        gap: 16px;
        width: 100%;
    }
    .redesign .podcast-row__actions .btn {
        width: 100%;                     /* Figma mobile: full-width pills */
        justify-content: center;
    }
}

/* 3 featured sub-cards below main podcast */
.redesign .featured-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: var(--container-max);   /* 1312px — align with podcast row */
    margin: 32px auto 0;
    padding-inline: var(--container-pad-inline);  /* L/R gutter < 1440px */
    box-sizing: border-box;
}

.redesign .featured-card {
    background: var(--brand-offwhite-peach);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: space-between;   /* push Listen button to bottom */
    min-height: 280px;
}

.redesign .featured-card__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.redesign .featured-card__tagline {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-heading);
    margin: 0;
}

.redesign .featured-card__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: var(--text-heading);
    margin: 0;
}

.redesign .featured-card__body {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-paragraph);
    margin: 0;
}

@media (max-width: 1024px) {
    .redesign .featured-row { grid-template-columns: 1fr; gap: 16px; }
    .redesign .featured-card { padding: 32px; }
}

/* Mobile featured-podcast carousel (Figma node 11490:508 Images Section
 * with 3 cards + Slider Dots 11711:4109). Three 291 px-wide cards in a
 * horizontal snap-scroller with 24 px gap, 20 px side peek so the next
 * card's edge is just visible. Scrollbar hidden. */
@media (max-width: 768px) {
    .redesign .featured-row {
        display: flex;
        grid-template-columns: none;
        gap: 24px;
        max-width: none;
        width: 100%;
        margin: 32px 0 0;                 /* tighter gap below podcast card */
        padding: 0 20px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .redesign .featured-row::-webkit-scrollbar { display: none; }
    .redesign .featured-card {
        flex: 0 0 291px;                  /* Figma mobile card width — fixed, not stretching */
        max-width: 291px;
        min-height: 0;                    /* let content drive height, not the base 280 min */
        scroll-snap-align: center;
        padding: 32px;
    }
}

/* Legacy .podcast-feature kept for any other page that might reference it */
.redesign .podcast-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.redesign .podcast-feature__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--brand-sea-green-darker);
    position: relative;
}

.redesign .podcast-feature__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.redesign .podcast-feature__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--brand-sea-green);
    box-shadow: 0 8px 24px rgba(32, 52, 60, 0.35);
    text-decoration: none;
    transition: transform 160ms ease;
}

.redesign .podcast-feature__play:hover {
    transform: translate(-50%, -50%) scale(1.05);
    color: var(--brand-sea-green-darker);
}

.redesign .podcast-feature__play svg {
    width: 32px;
    height: 32px;
    margin-left: 3px;
}

.redesign .podcast-feature__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.redesign .podcast-feature__badge {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    background: var(--brand-sea-green);
    color: var(--neutral-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.redesign .podcast-feature__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: var(--text-heading);
    margin: 0;
}

.redesign .podcast-feature__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .redesign .podcast-feature { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Wave divider between Featured Articles and Download ────────── */
/* Figma node 11336:37187 — decorative wave strip bridging white
 * content sections above and the slate DOWNLOAD section below.
 * The PNG has transparent top (shows white above) fading to solid slate at
 * bottom, so we render it at its natural aspect ratio with no background
 * and let it visually merge into the slate .app-download section below. */
.redesign .app-download__divider {
    position: relative;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    margin-bottom: -1px;              /* hairline overlap with slate section */
    background: transparent;
}

.redesign .app-download__divider img {
    display: block;
    width: 100%;
    height: auto;                     /* natural aspect ratio — no cropping */
    max-height: 200px;                /* cap on ultra-wide viewports */
    object-fit: cover;
    object-position: center bottom;
}

@media (max-width: 768px) {
    .redesign .app-download__divider img { max-height: 80px; }
}

/* ── Section 8: My Mikvah Calendar (download) ────────────────────── */
/* Figma: slate bg (#85a5b0) with noise overlay. Content is a centered
 * 646px column with tagline/heading/body + pill-chip feature row +
 * Learn More / Web version buttons + app-store badges, then phone
 * mockup composite touches the footer below. */
.redesign .app-download {
    background: var(--brand-slate);
    color: var(--neutral-white);
    padding: 32px var(--container-pad-inline) 0;   /* tighter top — wave divider provides breathing room */
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Decorative wave near the top of the section */
.redesign .app-download__wave {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: 0;
    opacity: 0.7;
    pointer-events: none;
}

.redesign .app-download__wave--top {
    top: 0;
    transform: translateY(-40%);
}

.redesign .app-download__inner {
    position: relative;
    z-index: 1;
    max-width: 646px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.redesign .app-download__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.redesign .app-download__eyebrow { color: var(--brand-offwhite-seagreen); }

.redesign .app-download__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 40px;              /* was var(--fs-h2)=48 → 40 per user feedback */
    line-height: 1.2;
    color: var(--neutral-white);
    margin: 0;
}

.redesign .app-download__body {
    color: var(--text-paragraph-white);
    opacity: 0.92;
    font-size: 15px;              /* was 17 → 15 */
    line-height: 1.55;
    margin: 0;
    text-align: justify;
    text-align-last: center;
    max-width: 520px;
}

/* Feature pills — rgba(194,210,216,0.24) bg per Figma node 11336:37201,
 * pill-shaped, 14px text. */
.redesign .app-download__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.redesign .app-download__features li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(194, 210, 216, 0.24);
    border-radius: var(--radius-pill);
    color: var(--neutral-white);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
}

.redesign .app-download__features svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--neutral-white);
}

.redesign .app-download__actions {
    display: flex;
    gap: 16px;
    width: 100%;                    /* full 646px content column per Figma */
    margin-top: 8px;
}

/* Figma node 11336:37214/37215 — px-[32px] py-[16px], text-[16px].
 * User feedback: smaller font, a bit longer (wider), less tall. */
.redesign .app-download__actions .btn {
    flex: 1 0 0;
    min-width: 0;
    padding: 12px 32px;
    font-size: 15px;
    line-height: 1.5;
}

.redesign .app-download__media {
    margin: 48px auto 0;         /* centered per Figma (304px from each side of 1920) */
    padding-bottom: 0;
    display: block;
    width: 100%;
    max-width: 1312px;
    position: relative;
    z-index: 1;
}

.redesign .app-download__media img {
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
    margin-bottom: 0;
}

/* App store badges row — Figma node 11336:37216 */
.redesign .app-download__badges {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

.redesign .app-download__badges a {
    display: inline-block;
    line-height: 0;
}

.redesign .app-download__badges img {
    height: 36px;                 /* was 48 → 36, smaller per feedback */
    width: auto;
    display: block;
}

@media (max-width: 900px) {
    .redesign .app-download { padding: 24px 20px 0; }
    .redesign .app-download__actions { flex-direction: column; }
    .redesign .app-download__media { margin-top: 32px; }
    .redesign .app-download__badges img { height: 40px; }
}