/* =====================================================================
   Hero (Home) — full-width carousel section.

   Extracted from homepage.css on the hero-home-snap rebuild so the
   rules can ride along with the melody-magic/hero-carousel block via
   wp_enqueue_block_style() — that loads them automatically in the
   editor AND on the front-end whenever the block renders, instead of
   gated on is_front_page().

   Decorative SVGs that used to live as inline <svg> children of the
   markup (squiggle under the accent word; arrow on the primary CTA)
   are now CSS-only via mask-image + currentColor. This lets the H1
   ship as a plain wp:heading and the primary CTA as a plain
   wp:button — neither block strips arbitrary SVG, but eliminating
   inline SVG removes the constraint entirely.

   Selectors are written twice where the legacy hero-home.html (raw
   <a class="mm-hero__cta-primary">) and the new hero-home-snap pattern
   (wp:button.is-style-mm-hero-primary) need to share visuals. The
   second selector path uses the WordPress core button DOM:
   .wp-block-button.is-style-mm-hero-primary > .wp-block-button__link.
===================================================================== */

.mm-hero {
    position: relative;
    isolation: isolate;
    background-color: var(--mm-teal-900);
    padding-block: clamp(96px, 14vw, 168px);
    padding-inline: var(--mm-s-8);
    color: #fff;
    min-height: clamp(540px, 70vh, 700px);
    max-height: 700px;
    display: flex;
    align-items: center;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Neutralize WP core's `:where(.is-layout-flow) > * { margin-block-start: 1rem }`
   inside the hero. Hero stacks via absolute positioning + flex; the default
   1rem on every direct child shifts .mm-hero__inner down (the absolutely-
   positioned slides/scrim/dots ignore margin, but .mm-hero__inner is
   relative). Specificity (0,2,1) beats core's (0,1,1). */
.mm-hero.is-layout-flow > * {
    margin-block-start: 0;
}

/* Background carousel — slides anchored DIRECTLY to the viewport.
   !important on width + max-width is required because WP core injects
   `.alignfull:not(.is-layout-constrained) > * { max-width: 1440px;
   margin-inline: auto }` at higher specificity, which caps slides to the
   page-frame width otherwise. JS toggles .is-active and CSS opacity-
   crossfades. */

.mm-hero__slides {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    z-index: -2;
}

.mm-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1100ms ease-in-out;
    will-change: opacity;
}

.mm-hero__slide.is-active {
    opacity: 1;
}

.mm-hero__slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    user-select: none;
    pointer-events: none;
}

/* Gradient scrim — uniform horizontal coverage, mild vertical fade. */

.mm-hero__scrim {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    z-index: -1;
    /* Ben 6/1: teal→grape→teal diagonal wash over the carousel photos
       (was a dark teal-900 vertical fade). Kept in sync with homepage.css. */
    background: linear-gradient(135deg, rgba(64, 176, 160, 0.55) 0%, rgba(122, 58, 150, 0.52) 60%, rgba(31, 122, 112, 0.60) 100%);
    pointer-events: none;
}

/* Content */

.mm-hero__inner {
    position: relative;
    max-width: 1440px;
    width: 100%;
    margin-inline: auto;
}

.mm-hero__content {
    max-width: 920px;
    margin-inline-start: 0;
    margin-inline-end: auto;
    text-align: left;
    min-width: 0;
}

.mm-hero__eyebrow {
    margin: 0 0 18px 0;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-teal-300);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Legacy teal dot span (pattern hero only) — superseded by the ::before star. */
.mm-hero__eyebrow-dot { display: none; }

/* Purple logo-style star to the left of the eyebrow (CSS-only, mask-image).
   Kept in sync with homepage.css. grape-500 = the logo purple. */
.mm-hero__eyebrow::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background-color: var(--wp--preset--color--grape-500);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

.mm-hero__headline {
    /* Extra bottom space clears the butter squiggle (.mm-hero__accent::after,
       bottom:-12px + 14px tall ≈ 26px below the last line) so it never
       overlaps the lede below. Kept in sync with homepage.css which also
       defines this rule and loads later. */
    margin: 0 0 48px 0;
    font-family: var(--mm-font-display);
    font-size: clamp(34px, 5.5vw, 76px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 28px rgba(14, 63, 58, 0.7), 0 1px 4px rgba(14, 63, 58, 0.55);
}

/* Uniform vertical rhythm for hero content — one even gap between every element.
   Beats WP's (0,1,0) layout reset with a 2-class selector (0,2,0). Squiggle is
   offset to -6px so it hugs the word. Kept in sync with homepage.css. */
.mm-hero .mm-hero__content > * {
    margin-block-start: 20px;
    margin-block-end: 0;
}
.mm-hero .mm-hero__content > *:first-child {
    margin-block-start: 0;
}

.mm-hero__accent {
    color: var(--mm-teal-300);
    position: relative;
    display: inline;
}

/* Squiggle — CSS-only, attached to the accent span. The SVG path is the
   same shape that used to live inline; mask-image renders the path as a
   silhouette and background-color paints it butter. The accent span needs
   `position: relative` (above) so the pseudo-element anchors to it. */
.mm-hero__accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    width: 100%;
    height: 14px;
    pointer-events: none;
    background-color: var(--mm-butter);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'><path d='M2 8 Q 40 1, 80 7 T 160 7 T 240 7 T 320 7 T 400 7 T 480 7 T 560 7 T 598 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'><path d='M2 8 Q 40 1, 80 7 T 160 7 T 240 7 T 320 7 T 400 7 T 480 7 T 560 7 T 598 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

.mm-hero__lede {
    margin: 0 auto 32px 0;
    font-family: var(--mm-font-body);
    font-size: 19px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-width: 620px;
    text-shadow: 0 1px 12px rgba(14, 63, 58, 0.5);
}

.mm-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 40px;
}

/* NOTE: do NOT reset margin-top on .mm-hero .wp-block-buttons.mm-hero__ctas
   here — that (0,3,0) selector used to force margin-top:0 and broke the even
   hero rhythm by killing the gap above the buttons. Spacing for the buttons
   (like every hero child) now comes from the uniform
   `.mm-hero .mm-hero__content > *` rule above. */

/* Primary CTA — legacy <a> markup AND new wp:button style variation. */
.mm-hero__cta-primary,
.mm-hero .wp-block-button.is-style-mm-hero-primary > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    border-radius: 999px;
    background-color: #fff;
    color: var(--mm-teal-900);
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.35);
    transition: transform var(--mm-dur) var(--mm-ease), box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-hero__cta-primary:hover,
.mm-hero__cta-primary:focus-visible,
.mm-hero .wp-block-button.is-style-mm-hero-primary > .wp-block-button__link:hover,
.mm-hero .wp-block-button.is-style-mm-hero-primary > .wp-block-button__link:focus-visible {
    color: var(--mm-teal-900);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.42);
}

/* Arrow icon — CSS-only mask, sits as ::after so the link's text remains
   a plain RichText editable string in the block editor. currentColor
   means the arrow takes the same color as the button text. */
.mm-hero__cta-primary::after,
.mm-hero .wp-block-button.is-style-mm-hero-primary > .wp-block-button__link::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    transition: transform var(--mm-dur) var(--mm-ease);
    flex-shrink: 0;
}

.mm-hero__cta-primary:hover::after,
.mm-hero .wp-block-button.is-style-mm-hero-primary > .wp-block-button__link:hover::after {
    transform: translateX(2px);
}

/* Secondary CTA — legacy <a> markup AND new wp:button style variation. */
.mm-hero__cta-secondary,
.mm-hero .wp-block-button.is-style-mm-hero-secondary > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    background-color: var(--mm-butter);
    color: var(--mm-teal-900);
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    border: 1.5px solid var(--mm-butter);
    box-shadow: 0 10px 28px -8px rgba(14, 63, 58, 0.45);
    transition: background-color var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease), box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-hero__cta-secondary:hover,
.mm-hero__cta-secondary:focus-visible,
.mm-hero .wp-block-button.is-style-mm-hero-secondary > .wp-block-button__link:hover,
.mm-hero .wp-block-button.is-style-mm-hero-secondary > .wp-block-button__link:focus-visible {
    background-color: #F8DC85;
    border-color: #F8DC85;
    color: var(--mm-teal-900);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px -10px rgba(14, 63, 58, 0.55);
}

/* Proof bar */

.mm-hero__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    max-width: 620px;
    margin-inline-start: 0;
    margin-inline-end: auto;
    text-align: left;
}

.mm-hero__proof-item {
    font-family: var(--mm-font-body);
    font-size: 13.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.72);
}

.mm-hero__proof-strong {
    display: block;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 18px;
    color: #fff;
    margin-bottom: 2px;
}

/* Dot pager — bottom-center of the section */

.mm-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1;
}

.mm-hero__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease;
}

.mm-hero__dot:hover {
    background-color: rgba(255, 255, 255, 0.75);
}

.mm-hero__dot.is-active {
    background-color: #fff;
    transform: scale(1.3);
}

.mm-hero__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Entrance motion — staggered fade-up on each content row. */

@keyframes mm-hero-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mm-hero__eyebrow,
.mm-hero__headline,
.mm-hero__lede,
.mm-hero__ctas,
.mm-hero .wp-block-buttons,
.mm-hero__proof {
    animation: mm-hero-fade-up 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mm-hero__eyebrow              { animation-delay:  80ms; }
.mm-hero__headline             { animation-delay: 160ms; }
.mm-hero__lede                 { animation-delay: 280ms; }
.mm-hero__ctas,
.mm-hero .wp-block-buttons     { animation-delay: 380ms; }
.mm-hero__proof                { animation-delay: 480ms; }

/* Mobile <768 — tighter padding, smaller headline, stack proof bar */

@media (max-width: 767px) {
    .mm-hero {
        padding-inline: var(--mm-s-4);
        padding-block: clamp(80px, 18vw, 128px);
        min-height: 560px;
    }
    .mm-hero__headline {
        font-size: clamp(32px, 8vw, 44px);
    }
    .mm-hero__lede {
        font-size: 17px;
    }
    .mm-hero__proof {
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: left;
        max-width: 360px;
    }
    .mm-hero__proof-item {
        display: flex;
        gap: 12px;
        align-items: baseline;
        justify-content: flex-start;
    }
    .mm-hero__proof-strong {
        margin-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-hero__cta-primary,
    .mm-hero__cta-secondary,
    .mm-hero .wp-block-button.is-style-mm-hero-primary > .wp-block-button__link,
    .mm-hero .wp-block-button.is-style-mm-hero-secondary > .wp-block-button__link {
        transition: none;
    }
    .mm-hero__cta-primary:hover,
    .mm-hero .wp-block-button.is-style-mm-hero-primary > .wp-block-button__link:hover {
        transform: none;
    }
    .mm-hero__cta-primary::after,
    .mm-hero .wp-block-button.is-style-mm-hero-primary > .wp-block-button__link::after {
        transition: none;
    }
    .mm-hero__eyebrow,
    .mm-hero__headline,
    .mm-hero__lede,
    .mm-hero__ctas,
    .mm-hero .wp-block-buttons,
    .mm-hero__proof {
        animation: none;
    }
    .mm-hero__slide {
        transition: none;
    }
}

/* =====================================================================
   Editor-only — Hero Carousel block UI.

   Rendered exclusively inside the WP block editor (Gutenberg) when an
   editor is populating the melody-magic/hero-carousel block. None of
   these classes appear on the front-end since render.php emits the
   .mm-hero__* runtime markup instead. Kept in this file so the block's
   editor preview AND the runtime hero share one cache-busted asset.
===================================================================== */

.mm-hero-carousel-edit {
    border: 1px dashed rgba(14, 63, 58, 0.32);
    border-radius: 8px;
    padding: 16px;
    background-color: rgba(14, 63, 58, 0.04);
}

.mm-hero-carousel-edit__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mm-hero-carousel-edit__header strong {
    font-family: var(--mm-font-display, system-ui);
    font-weight: 700;
}

.mm-hero-carousel-edit__count {
    font-size: 12px;
    color: rgba(14, 63, 58, 0.7);
    margin-right: auto;
}

.mm-hero-carousel-edit__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.mm-hero-carousel-edit__slot {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background-color: #0E3F3A;
}

.mm-hero-carousel-edit__thumb {
    display: block;
    width: 100%;
    height: 88px;
    object-fit: cover;
}

.mm-hero-carousel-edit__controls {
    display: flex;
    gap: 4px;
    justify-content: space-between;
    padding: 6px;
    background-color: rgba(255, 255, 255, 0.92);
}

.mm-hero-carousel-edit__hint {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: rgba(14, 63, 58, 0.7);
}