/**
 * V11 Hero Section — Mezcaleria Chic
 *
 * Dark overlay gradient, pill buttons, full-vh, rose glow accents.
 * Priority 76, cascades after v11-design-system (75).
 */

/* ============================================
   HERO DARK OVERLAY
   ============================================ */

.page-template-front-page .hero-section,
.home .hero-section,
.latoxica-hero-a,
.latoxica-hero-b,
.latoxica-hero-c,
.latoxica-hero-d {
    position: relative;
    min-height: 100vh;
}

.page-template-front-page .hero-section::before,
.home .hero-section::before,
.latoxica-hero-a::before,
.latoxica-hero-b::before,
.latoxica-hero-c::before,
.latoxica-hero-d::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 26, 0.75) 0%,
        rgba(26, 26, 26, 0.4) 40%,
        rgba(26, 26, 26, 0.5) 70%,
        rgba(26, 26, 26, 0.85) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* ============================================
   HERO CONTENT ABOVE OVERLAY
   ============================================ */

.hero-section .hero-content,
.hero-section h1,
.hero-section h2,
.hero-section p,
.hero-section .hero-buttons,
.hero-section .hero-cta,
.latoxica-hero-a__content,
.latoxica-hero-b__content,
.latoxica-hero-c__content,
.latoxica-hero-d__content,
.latoxica-hero-a h1,
.latoxica-hero-b h1,
.latoxica-hero-c h1,
.latoxica-hero-d h1,
.latoxica-hero-a__eyebrow,
.latoxica-hero-b__eyebrow,
.latoxica-hero-c__eyebrow,
.latoxica-hero-d__eyebrow,
.latoxica-hero-a__cta,
.latoxica-hero-b__cta,
.latoxica-hero-c__cta,
.latoxica-hero-d__cta {
    position: relative;
    z-index: 2;
}

/* ============================================
   HERO PILL BUTTONS
   ============================================ */

/* All hero CTAs become pill-shaped */
.hero-section a.btn,
.hero-section a.cta,
.hero-section a[href*="reserver"],
.hero-section a[href*="reservation"],
.hero-section a[href*="commander"],
.hero-section a[href*="order"],
.latoxica-hero-a .latoxica-button,
.latoxica-hero-b .latoxica-button,
.latoxica-hero-c .latoxica-button,
.latoxica-hero-d .latoxica-button,
.latoxica-hero-a__cta .latoxica-button,
.latoxica-hero-b__cta .latoxica-button,
.latoxica-hero-c__cta .latoxica-button,
.latoxica-hero-d__cta .latoxica-button {
    border-radius: 999px !important;
    padding: 0.85rem 2.5rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    transition: all 0.3s ease !important;
}

/* Primary hero CTA = rose */
.hero-section a.btn:first-of-type,
.hero-section a.cta:first-of-type,
.hero-section a[href*="reserver"]:first-of-type,
.hero-section a[href*="commander"]:first-of-type,
.latoxica-hero-a .latoxica-button--primary,
.latoxica-hero-b .latoxica-button--primary,
.latoxica-hero-c .latoxica-button--primary,
.latoxica-hero-d .latoxica-button--primary,
.latoxica-button--primary {
    background: #EC2C91 !important;
    border-color: #EC2C91 !important;
    color: #ffffff !important;
}

.hero-section a.btn:first-of-type:hover,
.hero-section a.cta:first-of-type:hover,
.hero-section a[href*="reserver"]:first-of-type:hover,
.hero-section a[href*="commander"]:first-of-type:hover,
.latoxica-hero-a .latoxica-button--primary:hover,
.latoxica-hero-b .latoxica-button--primary:hover,
.latoxica-hero-c .latoxica-button--primary:hover,
.latoxica-hero-d .latoxica-button--primary:hover,
.latoxica-button--primary:hover {
    background: #F2B119 !important;
    border-color: #F2B119 !important;
    color: #1a1a1a !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(236, 44, 145, 0.35);
}

/* Secondary hero CTA = outline */
.hero-section a.btn:not(:first-of-type),
.hero-section a.cta:not(:first-of-type),
.latoxica-hero-a .latoxica-button--outline,
.latoxica-hero-b .latoxica-button--outline,
.latoxica-hero-c .latoxica-button--outline,
.latoxica-hero-d .latoxica-button--outline,
.latoxica-button--outline {
    background: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

.hero-section a.btn:not(:first-of-type):hover,
.hero-section a.cta:not(:first-of-type):hover,
.latoxica-hero-a .latoxica-button--outline:hover,
.latoxica-hero-b .latoxica-button--outline:hover,
.latoxica-hero-c .latoxica-button--outline:hover,
.latoxica-hero-d .latoxica-button--outline:hover,
.latoxica-button--outline:hover {
    border-color: #EC2C91 !important;
    color: #EC2C91 !important;
}

/* ============================================
   HERO HEADING ROSE GLOW
   ============================================ */

.hero-section h1,
.latoxica-hero-a h1,
.latoxica-hero-b h1,
.latoxica-hero-c h1,
.latoxica-hero-d h1 {
    text-shadow: 0 0 60px rgba(236, 44, 145, 0.2);
}

/* Rose accent words in headings */
.hero-section h1 em,
.hero-section h1 .accent,
.latoxica-hero-a h1 em,
.latoxica-hero-b h1 em,
.latoxica-hero-c h1 em,
.latoxica-hero-d h1 em {
    color: #EC2C91;
    font-style: italic;
}

/* ============================================
   HERO EYEBROW STYLING
   ============================================ */

.latoxica-eyebrow,
.hero-section .eyebrow,
.latoxica-hero-a__eyebrow,
.latoxica-hero-b__eyebrow,
.latoxica-hero-c__eyebrow,
.latoxica-hero-d__eyebrow {
    color: #EC2C91;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    font-size: 0.875rem;
}

/* ============================================
   HERO SUBHEADING
   ============================================ */

.hero-section .hero-subhead,
.hero-section .hero-tagline,
.latoxica-hero-a__subhead,
.latoxica-hero-b__subhead,
.latoxica-hero-c__subhead,
.latoxica-hero-d__subhead {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 600px;
}

/* ============================================
   HALFTONE DECORATIVE ELEMENT
   ============================================ */

.latoxica-hero-a::after,
.latoxica-hero-b::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    right: -2rem;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(#EC2C91 1.5px, transparent 1.5px);
    background-size: 8px 8px;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .page-template-front-page .hero-section,
    .home .hero-section,
    .latoxica-hero-a,
    .latoxica-hero-b,
    .latoxica-hero-c,
    .latoxica-hero-d {
        min-height: 85vh;
    }

    .hero-section a.btn,
    .hero-section a.cta,
    .latoxica-hero-a .latoxica-button,
    .latoxica-hero-b .latoxica-button,
    .latoxica-hero-c .latoxica-button,
    .latoxica-hero-d .latoxica-button {
        padding: 0.75rem 2rem !important;
        font-size: 0.875rem !important;
    }

    .hero-section .hero-subhead,
    .latoxica-hero-a__subhead,
    .latoxica-hero-b__subhead,
    .latoxica-hero-c__subhead,
    .latoxica-hero-d__subhead {
        font-size: 1rem;
    }

    .latoxica-hero-a::after,
    .latoxica-hero-b::after {
        width: 100px;
        height: 100px;
        bottom: -1rem;
        right: -1rem;
    }
}

@media (max-width: 480px) {
    .page-template-front-page .hero-section,
    .home .hero-section,
    .latoxica-hero-a,
    .latoxica-hero-b,
    .latoxica-hero-c,
    .latoxica-hero-d {
        min-height: 75vh;
    }
}