/* =====================================================================
   gift-cert-callout.css — seasonal gift-certificate callout, block version.

   Coupled with melody-magic/gift-cert-callout (bound in inc/blocks.php via
   wp_enqueue_block_style, so it loads wherever the block renders: the home
   page front-end in season AND the editor canvas year-round). Kept out of
   homepage.css per the polish-file convention — the old v1 band rules that
   lived there are removed in the same commit; this file is the only source
   of .mm-gift-cert styling.

   v2 design (per the retired pattern's spec): contained warm card floating
   on the paper background — mirrors try-class-band's structural rhythm
   (eyebrow → headline w/ accent → sub → CTA stack + atmospheric blobs)
   but with a butter/rose light gradient + grape accents so it reads as
   "festive gift," not "promo strip." Replaces the v1 alignfull
   dark-purple band.

   Self-sufficient on purpose: every layout primitive the card needs is
   declared here (the .mm-band lesson — never lean on homepage.css for
   base layout, it only loads on the front page).
   ===================================================================== */

/* ---- Section = full-width gutter; the visuals live on the card ----
   Same breakout treatment as .mm-band so the card centers on the viewport
   even inside page 378's constrained wrapper group. */
.mm-gift-cert {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-block: clamp(40px, 5vw, 72px);
    padding-inline: clamp(16px, 5vw, 64px);
    background: none;
}

/* JS dismiss (seasonal-callout.js) sets [hidden]; beat any display:flex/grid. */
.mm-gift-cert[hidden] {
    display: none;
}

/* ---- Card ---- */
.mm-gift-cert__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 1080px;
    margin-inline: auto;
    border-radius: clamp(20px, 2.4vw, 32px);
    padding: clamp(32px, 4.5vw, 56px) clamp(24px, 5vw, 64px);
    background: linear-gradient(135deg, #FFF8E7 0%, #FBE8D2 52%, #F6E4EE 100%);
    border: 1px solid rgba(122, 58, 150, 0.14);
    box-shadow: 0 26px 60px -30px rgba(95, 44, 117, 0.35);
}

/* ---- Atmospheric blobs (behind the content via negative z-index
   inside the card's isolated stacking context) ---- */
.mm-gift-cert__blob {
    position: absolute;
    border-radius: 999px;
    filter: blur(44px);
    z-index: -1;
    pointer-events: none;
}
.mm-gift-cert__blob--butter {
    width: 280px;
    height: 280px;
    top: -90px;
    right: -60px;
    background: rgba(244, 209, 106, 0.55);
}
.mm-gift-cert__blob--grape {
    width: 320px;
    height: 320px;
    bottom: -130px;
    left: -90px;
    background: rgba(184, 146, 201, 0.32);
}

.mm-gift-cert__sparkles {
    position: absolute;
    top: 14px;
    right: clamp(56px, 8vw, 96px);
    pointer-events: none;
}

/* ---- Season badge ---- */
.mm-gift-cert__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(122, 58, 150, 0.18);
    color: var(--wp--preset--color--grape-700, #5F2C75);
    font-family: var(--mm-font-display, inherit);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mm-gift-cert__badge-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--wp--preset--color--apricot, #F2A65A);
}

/* ---- Pitch + CTA row ---- */
.mm-gift-cert__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
}
.mm-gift-cert__pitch {
    flex: 1 1 380px;
    min-width: 0;
}
.mm-gift-cert__cta-col {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* ---- Eyebrow ---- */
.mm-gift-cert__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--mm-font-display, inherit);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--grape-700, #5F2C75);
}
.mm-gift-cert__eyebrow-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--wp--preset--color--grape, #7A3A96);
}

/* ---- Heading + sub ----
   Two-class selectors so WP's :root :where(p){margin/line-height} (0,1,0)
   and :where(.is-layout-flow) > * margins can't out-cascade us. */
.mm-gift-cert__card .mm-gift-cert__heading {
    margin: 0 0 12px;
    font-family: var(--wp--preset--font-family--heading, inherit);
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--wp--preset--color--ink, #1F2A2E);
}
.mm-gift-cert__heading-accent {
    color: var(--wp--preset--color--grape, #7A3A96);
    font-style: italic;
}
.mm-gift-cert__card .mm-gift-cert__sub {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.65;
    color: var(--wp--preset--color--ink-2, #3E4C52);
}

/* ---- Primary CTA ----
   Grape pill. Hover lifts + brightens to grape-500 and RE-DECLARES the
   white label: block-styles.css's global a:hover{color:teal-800} (dark
   green, brand-banned) would otherwise recolor the text. */
.mm-gift-cert__card .mm-gift-cert__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--wp--preset--color--grape, #7A3A96);
    color: var(--wp--preset--color--white, #FFFFFF);
    font-family: var(--mm-font-display, inherit);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 14px 28px -14px rgba(95, 44, 117, 0.55);
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.mm-gift-cert__card .mm-gift-cert__cta-primary:hover,
.mm-gift-cert__card .mm-gift-cert__cta-primary:focus-visible {
    background: var(--wp--preset--color--grape-500, #8040A0);
    color: var(--wp--preset--color--white, #FFFFFF);
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -14px rgba(95, 44, 117, 0.6);
}
.mm-gift-cert__cta-icon {
    display: inline-flex;
    flex: none;
}

/* ---- SMS note ----
   Link hover stays grape — same global a:hover{teal-800} trap as the CTA. */
.mm-gift-cert__card .mm-gift-cert__note {
    margin: 0;
    font-size: 14px;
    color: var(--wp--preset--color--ink-3, #6B787D);
}
.mm-gift-cert__card .mm-gift-cert__note a {
    color: var(--wp--preset--color--grape-700, #5F2C75);
    font-weight: 600;
    text-decoration: underline;
}
.mm-gift-cert__card .mm-gift-cert__note a:hover,
.mm-gift-cert__card .mm-gift-cert__note a:focus-visible {
    color: var(--wp--preset--color--grape, #7A3A96);
}

/* ---- Dismiss (top-right, 44px touch target) ---- */
.mm-gift-cert__card .mm-gift-cert__dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--wp--preset--color--ink-3, #6B787D);
    cursor: pointer;
}
.mm-gift-cert__card .mm-gift-cert__dismiss:hover,
.mm-gift-cert__card .mm-gift-cert__dismiss:focus-visible {
    background: rgba(122, 58, 150, 0.12);
    color: var(--wp--preset--color--grape-700, #5F2C75);
}

/* ---- Admin preview frames (render.php preview branches) ----
   Two variants share .mm-gift-cert-admin-wrap + .mm-gift-cert-admin-banner:
   -editor = ServerSideRender in the block-editor canvas (compact dashed
   frame around banner + card); -front = logged-in editors browsing the
   live site (card keeps its real full-bleed layout, banner floats above
   it as a centered dashed pill). */
.mm-gift-cert-admin-wrap .mm-gift-cert-admin-banner {
    font-size: 12px;
    font-weight: 600;
    color: var(--wp--preset--color--grape-700, #5F2C75);
}

/* Editor canvas: frame the whole preview. */
.mm-gift-cert-admin-wrap-editor {
    border: 1px dashed rgba(122, 58, 150, 0.45);
    border-radius: 14px;
    padding: 4px 10px 10px;
}
.mm-gift-cert-admin-wrap-editor .mm-gift-cert-admin-banner {
    margin: 6px 4px;
}
/* The 100vw breakout overflows the editor frame; pin the section back to
   the wrap's width inside the canvas preview. */
.mm-gift-cert-admin-wrap-editor .mm-gift-cert {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-block: 8px 4px;
}

/* Front end (logged-in team): banner pill above the untouched card. The
   negative bottom margin tucks it against the section's own top padding
   so banner + card read as one unit. */
.mm-gift-cert-admin-wrap-front .mm-gift-cert-admin-banner {
    max-width: 1080px;
    margin: 20px auto calc(-1 * clamp(20px, 2.5vw, 40px));
    padding: 8px 16px;
    border: 1px dashed rgba(122, 58, 150, 0.45);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    text-align: center;
    position: relative;
    z-index: 1;
}

/* ---- Small screens ---- */
@media (max-width: 640px) {
    .mm-gift-cert__row {
        align-items: flex-start;
    }
    .mm-gift-cert__sparkles {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-gift-cert__card .mm-gift-cert__cta-primary {
        transition: none;
    }
    .mm-gift-cert__card .mm-gift-cert__cta-primary:hover,
    .mm-gift-cert__card .mm-gift-cert__cta-primary:focus-visible {
        transform: none;
    }
}