/* ============================================================
   HERO — boutique introduction, mobile-first
   ============================================================ */

/* ── Desktop layout ─────────────────────────────────────── */
.hero {
    padding-block: clamp(40px, 6vw, 80px) clamp(60px, 8vw, 100px);
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(253,246,239,.85) 0%, rgba(249,226,222,.4) 100%);
}

.hero::before {
    content: "";
    position: absolute;
    top: -60px; right: -120px;
    width: 420px; height: 420px;
    background: radial-gradient(ellipse 600px 400px, rgba(192,123,127,.25), transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute;
    bottom: -100px; left: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(231,208,171,.28), transparent 68%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: stretch;
    position: relative;
    z-index: 1;
}

/* ── Text side ───────────────────────────────────────────── */
.hero-text .eyebrow { margin-bottom: 20px; }

.hero-title {
    font-size: clamp(2.4rem, 5.5vw, 4.4rem);
    font-weight: 500;
    margin-bottom: 24px;
    color: var(--wine-800);
}
.hero-title .accent {
    font-family: "Cormorant Garamond", "Frank Ruhl Libre", serif;
    font-style: italic;
    font-weight: 500;
    color: var(--rose-500);
    display: inline-block;
}
.hero-title .accent::after {
    content: "";
    display: block;
    height: 10px;
    margin-top: -12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M0,5 Q50,0 100,5 T200,5' stroke='%23cfa97a' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
    opacity: .7;
}

.hero-lede {
    font-size: 1.1rem;
    color: var(--ink-soft);
    max-width: 540px;
    line-height: 1.75;
    margin-bottom: 32px;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 36px;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: var(--ink-soft);
    font-size: 0.9rem;
}
.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.hero-trust svg {
    width: 16px; height: 16px;
    color: var(--rose-400);
    flex: 0 0 auto;
}

/* ── Visual side (desktop) ───────────────────────────────── */
.hero-visual {
    position: relative;
    height: 100%;
    min-height: 520px;
}

.hero-photo {
    position: absolute;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    background: var(--cream-200);
}
.hero-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.hero-photo-main {
    inset: 0;
    z-index: 2;
}

/* Gold boutique frame */
.hero-frame {
    position: absolute;
    inset: -12px;
    border: 2px solid var(--gold-400);
    border-radius: var(--radius-2xl);
    z-index: 1;
    pointer-events: none;
    opacity: .9;
}
.hero-frame::before {
    content: "";
    position: absolute;
    inset: -18px;
    border: 1px solid rgba(192,123,127,.3);
    border-radius: var(--radius-2xl);
}

/* Corner ornaments */
.hero-corner {
    position: absolute;
    width: 20px; height: 20px;
    border: 2px solid var(--gold-400);
    z-index: 4;
    pointer-events: none;
}
.hero-corner.top-left    { top: 16px;    left: 16px;    border-right: none; border-bottom: none; }
.hero-corner.top-right   { top: 16px;    right: 16px;   border-left:  none; border-bottom: none; }
.hero-corner.bottom-left { bottom: 16px; left: 16px;    border-right: none; border-top:    none; }
.hero-corner.bottom-right{ bottom: 16px; right: 16px;   border-left:  none; border-top:    none; }

/* Small floating cake image */
.hero-cake-float {
    position: absolute;
    bottom: -20px;
    left: -24px;
    width: 140px;
    height: 140px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 16px 40px -16px rgba(107, 48, 64, 0.45),
                0 0 0 5px var(--cream-50),
                0 0 0 6px var(--gold-400);
    z-index: 6;
    transform: rotate(-3deg);
    transition: transform var(--dur) var(--ease);
}
.hero-cake-float:hover {
    transform: rotate(0deg) scale(1.04);
}
.hero-cake-float img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Floating name badge */
.hero-badge {
    position: absolute;
    top: 24px; right: 24px;
    background: linear-gradient(135deg, rgba(253,246,239,.95), rgba(248,236,224,.92));
    border-radius: var(--radius-pill);
    padding: 14px 22px;
    box-shadow: 0 12px 32px -12px rgba(107,48,64,.35),
                inset 0 1px 0 rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 5;
    border: 1px solid rgba(192,123,127,.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.hero-badge-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.hero-badge-icon img { width: 36px; height: 36px; object-fit: contain; }
.hero-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.hero-badge-text strong {
    font-family: "Frank Ruhl Libre", serif;
    color: var(--wine-700);
    font-size: 0.95rem;
}
.hero-badge-text small {
    color: var(--ink-soft);
    font-size: 0.78rem;
}

/* ── Tablet (portrait / small desktop) ──────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero-grid { gap: 32px; }
    .hero-visual { min-height: 440px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE HERO — clean split layout (image top, text below)
   No text-on-image = perfect contrast, professional look
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Reset section to plain cream background */
    .hero {
        background: var(--cream-100);
        padding: 0 0 52px;
        min-height: auto;
        display: block;
        overflow: visible;
    }
    .hero::before,
    .hero::after { display: none; }

    /* Stack: image first, text second */
    .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    /* ── Image block — TOP of mobile ── */
    .hero-visual {
        display: block;          /* override desktop hide */
        order: -1;               /* always before text */
        position: relative;
        width: 100%;
        height: 74vw;
        min-height: 280px;
        max-height: 420px;
    }

    /* Photo fills the image block, rounded bottom */
    .hero-photo-main {
        position: absolute;
        inset: 0;
        border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
        overflow: hidden;
        box-shadow: 0 20px 48px -20px rgba(107,48,64,.32);
        z-index: 2;
    }
    .hero-photo-main img {
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: center 10%; /* show Talia's face */
    }

    /* Subtle bottom-edge gradient on image only (not text) */
    .hero-photo-main::after {
        content: "";
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 80px;
        background: linear-gradient(to top, rgba(253,246,239,.55), transparent);
        pointer-events: none;
    }

    /* Hide decorative desktop-only elements */
    .hero-frame,
    .hero-corner { display: none; }
    .hero-cake-float { display: none; }

    /* Badge — anchor to bottom-right of image */
    .hero-badge {
        position: absolute;
        bottom: 16px;
        right: 16px;
        top: auto;
        left: auto;
        padding: 10px 16px;
        gap: 8px;
    }
    .hero-badge-text strong { font-size: 0.88rem; }
    .hero-badge-text small  { font-size: 0.72rem; }
    .hero-badge-icon img { width: 30px; height: 30px; }

    /* ── Text block — BELOW image, clean cream bg ── */
    .hero-text {
        text-align: center;
        padding: 32px 20px 0;
        background: var(--cream-100);
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 2.6rem);
        margin-bottom: 16px;
    }
    .hero-title .accent::after { margin-inline: auto; }

    .hero-lede {
        font-size: 1rem;
        margin-inline: auto;
        max-width: 360px;
        margin-bottom: 24px;
        color: var(--ink-soft);
    }

    .hero-ctas {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 24px;
    }
    .hero-ctas .btn {
        width: 100%;
        max-width: 300px;
    }

    .hero-trust {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 18px;
        font-size: 0.82rem;
    }
}

/* ── Very small phones ───────────────────────────────────── */
@media (max-width: 400px) {
    .hero-visual {
        height: 80vw;
        min-height: 260px;
    }
    .hero-title { font-size: 1.85rem; }
    .hero-lede { font-size: 0.95rem; }
    .hero-badge { padding: 8px 12px; }
}