/**
 * Layout overrides for ticketed-event public landing pages.
 *
 * Triggered by either:
 *   - <html class="is-ticketed-event-pending">  (set BEFORE first paint
 *     by an inline script in form.html when the slug router has detected
 *     formType==='ticketed_event' on the server side, OR set statically
 *     in /event-sample.html)
 *   - <body class="is-ticketed-event">  (set on DOMContentLoaded by
 *     assets/js/event-landing-page.js for runtime fallbacks — direct
 *     /form?id= navigations that didn't go through the slug router)
 *
 * Both selectors are listed everywhere so the layout applies in either
 * case. Combined with the inline `<script>` adding html class in <head>,
 * this eliminates the narrow-layout flash on real ticketed-event URLs.
 */

/* --- Mobile / base ------------------------------------------------------- */

html.is-ticketed-event-pending body .form-wrapper,
body.is-ticketed-event .form-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
}
html.is-ticketed-event-pending body .form-wrapper:hover,
body.is-ticketed-event .form-wrapper:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================================
   HERO — image stays untouched (no gradient overlay, no title
   layered on top). Title sits BELOW the image with the same
   serif treatment, so any host image works regardless of what's
   in the bottom of the frame.
   ============================================================ */
html.is-ticketed-event-pending body .header,
body.is-ticketed-event .header {
    margin: 0 0 1.25rem !important;
}
html.is-ticketed-event-pending body .header-image-wrap,
body.is-ticketed-event .header-image-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
}
html.is-ticketed-event-pending body .header img,
body.is-ticketed-event .header img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover;
    border-radius: 14px !important;
    display: block;
}

/* Title block — invitation-card typography in serif, but kept
   inline (below the image) so it never competes with hero content. */
html.is-ticketed-event-pending body .title,
body.is-ticketed-event .title {
    background: transparent !important;
    color: inherit !important;
    text-align: left !important;
    padding: 1.5rem 0.25rem 0.5rem !important;
    border-radius: 0 !important;
}
html.is-ticketed-event-pending body .title h1,
body.is-ticketed-event .title h1 {
    color: #1a1a20 !important;
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
    font-size: clamp(1.9rem, 4.2vw, 2.6rem) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.005em;
    margin: 0 0 0.5rem !important;
}
html.is-ticketed-event-pending body .title h2,
body.is-ticketed-event .title h2 {
    color: #555 !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    margin: 0 !important;
    opacity: 1 !important;
    /* Decorative ornament glyph rendered via ::before so we don't
       need to touch the existing <h2> markup. */
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
html.is-ticketed-event-pending body .title h2::before,
body.is-ticketed-event .title h2::before {
    content: '✦';
    color: var(--primary-color, #cbaa6a);
    font-size: 0.85em;
    opacity: 0.9;
    flex-shrink: 0;
}

/* Section headings — same serif as the hero title for visual rhythm. */
html.is-ticketed-event-pending body .event-landing-heading,
body.is-ticketed-event .event-landing-heading {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 1.45rem !important;
    letter-spacing: -0.005em;
}

/* --- Desktop ------------------------------------------------------------ */
@media (min-width: 992px) {
    html.is-ticketed-event-pending body .container,
    body.is-ticketed-event .container {
        max-width: 1080px !important;
        padding: 2.5rem 1.5rem !important;
        margin: 0 auto !important;
    }
    html.is-ticketed-event-pending body .header,
    body.is-ticketed-event .header {
        margin-bottom: 1.5rem !important;
    }
    html.is-ticketed-event-pending body .header-image-wrap,
    body.is-ticketed-event .header-image-wrap {
        max-height: 480px;
        aspect-ratio: 21 / 9;
    }
    html.is-ticketed-event-pending body .header img,
    body.is-ticketed-event .header img {
        max-height: 480px;
        aspect-ratio: 21 / 9 !important;
    }
    html.is-ticketed-event-pending body .title,
    body.is-ticketed-event .title {
        padding: 1.75rem 0.25rem 1rem !important;
    }
    html.is-ticketed-event-pending body .title h1,
    body.is-ticketed-event .title h1 {
        font-size: clamp(2.2rem, 4vw, 3rem) !important;
    }
    html.is-ticketed-event-pending body .title h2,
    body.is-ticketed-event .title h2 {
        font-size: 1.05rem !important;
    }
    html.is-ticketed-event-pending body .form-content,
    body.is-ticketed-event .form-content {
        max-width: 760px;
        margin: 0 auto;
        padding: 0 !important;
    }
    html.is-ticketed-event-pending body #event-landing-content,
    body.is-ticketed-event #event-landing-content {
        max-width: 760px;
        margin: 0 auto 2rem;
        position: relative;
        z-index: 3;
    }
    html.is-ticketed-event-pending body .event-landing-section,
    body.is-ticketed-event .event-landing-section {
        padding: 1.5rem 1.75rem;
    }
    html.is-ticketed-event-pending body .event-landing-heading,
    body.is-ticketed-event .event-landing-heading {
        font-size: 1.65rem !important;
    }
}
