/**
 * ExpoQueijo 2026 — Responsive System
 * Mobile-first responsive overrides
 * Dependencies: design-system.css
 */

/* ═══════════════════════════════════════════════
   Global Mobile — Evitar overflow e garantir base
   ═══════════════════════════════════════════════ */

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-width: 320px;
}

/* Imagens nunca estouram no container */
img,
picture,
video,
iframe {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════
   Base Container Widths
   ═══════════════════════════════════════════════ */

.e-con {
    --container-max-width: 1200px;
}

.e-con.e-con-full {
    --container-max-width: 100%;
    max-width: 100%;
    padding-inline: 0;
}

/* ═══════════════════════════════════════════════
   Typography — Fluid Clamp
   ═══════════════════════════════════════════════ */

.expo-section-title h2 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.expo-section-title .expo-subtitle {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
}

/* ═══════════════════════════════════════════════
   Desktop (≥1200px) — Defaults
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   Tablet (768px – 1024px)
   ═══════════════════════════════════════════════ */

@media (max-width: 1024px) {

    /* Counters: 2 columns */
    .expo-counters-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px;
    }

    /* News grid: 2 columns */
    .expo-noticias-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Hospedagem: 2 columns */
    .expo-hospedagem-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Gallery: 2 columns */
    .expoqueijo-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Local do Evento: stack */
    .expo-local-wrapper {
        flex-direction: column !important;
    }

    .expo-local-wrapper>* {
        width: 100% !important;
    }

    /* Elementor containers: stack multi-column */
    .e-con[data-flex_direction="row"] {
        flex-direction: column;
    }

    .e-con[data-flex_direction="row"]>.e-con {
        width: 100% !important;
    }

    /* Page hero */
    .expo-hero-slider {
        height: 50vh !important;
        min-height: 300px;
    }

    /* Section padding */
    .e-con {
        --padding-inline: 24px;
    }

    /* ── Elementor Header: logo sizing (tablet) ── */
    .elementor-location-header .elementor-widget-image img {
        width: 180px !important;
        height: auto !important;
    }

    /* ── Elementor Page Titles: scale down from 56px ── */
    .elementor-heading-title {
        font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    }

    /* ── Section min-heights: don't force 100vh on tablet ── */
    .e-con[data-settings*="min_height"] {
        min-height: 50vh !important;
    }
}

/* ═══════════════════════════════════════════════
   Mobile (≤767px)
   ═══════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Global spacing */
    .e-con {
        --padding-inline: 16px;
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    /* Typography scale down */
    h1,
    .expo-section-title h2 {
        font-size: 1.6rem !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.4rem !important;
    }

    h3 {
        font-size: 1.2rem !important;
    }

    body,
    p {
        font-size: 15px;
        line-height: 1.7;
    }

    /* Counters: 2 columns */
    .expo-counters-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px;
    }

    .expo-counter-number {
        font-size: 2rem !important;
    }

    /* News: single column */
    .expo-noticias-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Hospedagem: single column */
    .expo-hospedagem-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Gallery: 2 columns tight, sem overflow */
    .expoqueijo-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
        overflow: hidden;
    }

    .expoqueijo-gallery-grid .gallery-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Hero */
    .expo-hero-slider {
        height: 40vh !important;
        min-height: 220px;
    }

    /* Schedule/Programação */
    .expo-schedule-day {
        padding: 16px;
    }

    .expo-schedule-item {
        flex-direction: column;
        gap: 8px;
    }

    .expo-schedule-time {
        min-width: auto;
    }

    /* Local do Evento */
    .expo-local-map iframe {
        height: 250px !important;
    }

    /* Section Title */
    .expo-section-title {
        margin-bottom: 24px !important;
    }

    .expo-section-title .expo-subtitle {
        font-size: 0.8rem;
    }

    /* Buttons: full width + touch target mínimo 44px (WCAG) */
    .expo-btn,
    .elementor-button {
        width: 100%;
        text-align: center;
        padding: 14px 24px !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Links e itens clicáveis: área de toque adequada */
    .elementor-menu-toggle,
    .elementor-nav-menu .elementor-item {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Evitar texto/long words quebrando layout */
    .e-con,
    .elementor-widget-container,
    .expo-section-title h2 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Flex/Grid children não forçar overflow */
    .e-con>*,
    .elementor-column-wrap>* {
        min-width: 0;
    }

    /* Cards */
    .expo-noticia-card,
    .expo-hospedagem-card {
        border-radius: var(--radius-md);
    }

    .expo-noticia-card img,
    .expo-hospedagem-card img {
        height: 180px;
    }

    /* Hospedagem: compact */
    .expo-hospedagem-info {
        padding: 16px;
    }

    .expo-hospedagem-actions {
        flex-direction: column;
        gap: 8px;
    }

    /* Footer (fallback tema) */
    .site-footer .footer-inner {
        padding: 0 16px;
    }

    .site-footer .site-navigation ul {
        flex-direction: column;
        align-items: center;
    }

    /* Footer Theme Builder Elementor — harmonioso e editável */
    .elementor-location-footer {
        padding: 24px 16px !important;
    }

    .elementor-location-footer .e-con {
        flex-direction: column !important;
        gap: 24px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .elementor-location-footer .elementor-widget-wrap,
    .elementor-location-footer .elementor-widget {
        width: 100% !important;
        text-align: center;
    }

    .elementor-location-footer a,
    .elementor-location-footer .elementor-item {
        font-size: 14px !important;
        padding: 10px 16px !important;
        min-height: 44px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Vencedores — medals */
    .expo-medal-grid {
        grid-template-columns: 1fr !important;
    }

    /* ══════════════════════════════════════════════
       ELEMENTOR OVERRIDES — Mobile
       ══════════════════════════════════════════════ */

    /* ── Header logo: tamanho legível no mobile ── */
    .elementor-location-header .elementor-widget-image img {
        width: 100px !important;
        height: auto !important;
        max-width: 100%;
    }

    /* ── Header container: altura e alinhamento ── */
    .elementor-location-header .e-con {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        gap: 12px !important;
        --flex-wrap-mobile: nowrap !important;
        --flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* ── Logo column: flexível, não cortar slogan ── */
    .elementor-location-header > .e-con > .e-con:first-child {
        --width: auto !important;
        max-width: 65%;
        min-width: 0;
    }

    /* ── All Elementor Heading Titles: 56px → 28px ── */
    .elementor-widget-heading .elementor-heading-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    /* ── CTA headings (36px in Elementor) → 24px ── */
    .elementor-widget-heading .elementor-heading-title[style*="font-size"] {
        font-size: 24px !important;
    }

    /* ── Section min-heights: remove 100vh/80vh on mobile ── */
    .e-con {
        min-height: auto !important;
    }

    /* ── Hero homepage: exatamente 1 tela, sem rolagem inicial ── */
    .elementor-12 .elementor-element-c3d47ff,
    .elementor-12 .elementor-element-9cbd243 {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    /* ── Hero padding: compacto para caber acima da dobra ── */
    .elementor-12 .elementor-element-c3d47ff {
        padding-top: max(72px, calc(56px + env(safe-area-inset-top))) !important;
        padding-bottom: 24px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* ── Section padding: reduce 100px → 48px ── */
    .elementor-12 .e-con:not(.elementor-element-c3d47ff):not(.elementor-element-9cbd243) {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* ── Inner containers: tighter horizontal padding ── */
    .e-con .e-con {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ── Pillar cards / Loop grid: force 1 column ── */
    .elementor-loop-container,
    .elementor-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* ── Elementor icon boxes in grid: 1 column ── */
    .elementor-widget-icon-box {
        width: 100% !important;
    }

    /* ── Pillar section (OS 4 PILARES): force vertical stack ── */
    .elementor-12 .elementor-element-206bac4b .e-con,
    .elementor-12 .elementor-element-5dbdf990 {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        --flex-direction: column !important;
        --flex-wrap-mobile: wrap !important;
    }

    .elementor-12 .elementor-element-206bac4b .e-con>.e-con,
    .elementor-12 .elementor-element-206bac4b .e-con>.elementor-widget {
        width: 100% !important;
        flex: none !important;
        --width: 100% !important;
    }

    /* ── Pillar inner row containers: force column + full width children ── */
    .elementor-12 .elementor-element-206bac4b .e-con.e-flex {
        --flex-direction: column !important;
        --width: 100% !important;
    }

    .elementor-12 .elementor-element-206bac4b .e-con.e-flex>.e-con {
        --width: 100% !important;
        width: 100% !important;
    }

    /* ── Stagger grid (pillar cards): force 1 column on mobile ── */
    .expo-stagger-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        overflow: hidden !important;
    }

    .expo-stagger-grid>* {
        width: 100% !important;
        flex: none !important;
    }

    /* ── Subpage hero sections (post-15 to post-27): tighter ── */
    [class*="elementor-"] .e-con:first-child {
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }

    /* ── Row containers in subpages: stack vertically ── */
    .e-con[style*="flex-direction: row"],
    .e-con[style*="flex-direction:row"] {
        flex-direction: column !important;
    }

    .e-con[style*="flex-direction: row"]>.e-con,
    .e-con[style*="flex-direction:row"]>.e-con {
        width: 100% !important;
        flex: none !important;
    }

    /* ── Min-height on location/event section ── */
    .elementor-12 .elementor-element-b61303c0 {
        min-height: auto !important;
    }

    /* ── Map/gallery section: não preencher tela no mobile ── */
    .elementor-12 .elementor-element-9d49f68d,
    .e-con:has(.expoqueijo-gallery-grid) {
        min-height: auto !important;
        height: auto !important;
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .e-con:has(.expoqueijo-gallery-grid) .e-con {
        min-height: auto !important;
    }

    /* ── Footer section ── */
    .elementor-12 .elementor-element-165d8004 {
        min-height: auto !important;
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* ── WPML dev banner: hide on mobile ── */
    #wpml-legacy-browser-warning,
    .wpml-ls-statics-footer,
    [class*="wpml"][style*="position: fixed"] {
        display: none !important;
    }

    /* ── Safe area (notch / home indicator) ── */
    .elementor-location-header .e-con {
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }

    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ═══════════════════════════════════════════════
   Small Mobile (≤480px)
   ═══════════════════════════════════════════════ */

@media (max-width: 480px) {
    .expo-counters-grid {
        grid-template-columns: 1fr !important;
    }

    .expo-counter-number {
        font-size: 1.75rem !important;
    }

    .expoqueijo-gallery-grid {
        grid-template-columns: 1fr !important;
    }

    .expo-hero-slider {
        height: 35vh !important;
        min-height: 180px;
    }

    /* ── Elementor Header logos: ainda mais compacto em telas pequenas ── */
    .elementor-location-header .elementor-widget-image img {
        width: 80px !important;
    }

    /* ── Headings: further reduction ── */
    .elementor-widget-heading .elementor-heading-title {
        font-size: 24px !important;
    }

    /* ── Hero: compact ── */
    .elementor-12 .elementor-element-c3d47ff {
        padding-top: 70px !important;
        padding-bottom: 32px !important;
    }
}

/* ═══════════════════════════════════════════════
   Gallery Albums — Tab Filtering
   ═══════════════════════════════════════════════ */

.expo-album-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 32px;
}

.expo-album-filters button {
    padding: 10px 24px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 2px solid var(--expo-cinza-light);
    background: transparent;
    color: var(--expo-cinza-dark);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.expo-album-filters button:hover {
    border-color: var(--expo-primary);
    color: var(--expo-primary);
}

.expo-album-filters button.active {
    background: var(--expo-primary);
    border-color: var(--expo-primary);
    color: var(--expo-branco);
}

/* ═══════════════════════════════════════════════
   Vencedores — Medal Cards
   ═══════════════════════════════════════════════ */

.expo-medal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.expo-medal-card {
    background: var(--expo-branco);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    text-align: center;
    padding: 32px 24px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.expo-medal-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.expo-medal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.expo-medal-gold .expo-medal-icon {
    background: var(--medal-gold);
    color: #fff;
}

.expo-medal-silver .expo-medal-icon {
    background: var(--medal-silver);
    color: #fff;
}

.expo-medal-bronze .expo-medal-icon {
    background: var(--medal-bronze);
    color: #fff;
}

.expo-medal-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin: 0 0 8px;
    color: var(--expo-preto);
}

.expo-medal-card p {
    font-size: 0.9rem;
    color: var(--expo-cinza);
    margin: 0;
}

/* ═══════════════════════════════════════════════
   Inscrição Form — Coming Soon
   ═══════════════════════════════════════════════ */

.expo-coming-soon {
    text-align: center;
    padding: 80px 24px;
    background: var(--expo-off-white);
    border-radius: var(--radius-lg);
}

.expo-coming-soon h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--expo-primary);
    margin: 0 0 16px;
}

.expo-coming-soon p {
    font-size: 1.1rem;
    color: var(--expo-cinza);
    max-width: 480px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════
   Contato — Info Cards
   ═══════════════════════════════════════════════ */

.expo-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.expo-contact-card {
    background: var(--expo-branco);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: box-shadow var(--transition-base);
}

.expo-contact-card:hover {
    box-shadow: var(--shadow-md);
}

.expo-contact-card .expo-contact-icon {
    font-size: 32px;
    color: var(--expo-primary);
    margin-bottom: 12px;
}

.expo-contact-card h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin: 0 0 8px;
}

.expo-contact-card p,
.expo-contact-card a {
    font-size: 0.95rem;
    color: var(--expo-cinza);
}

.expo-contact-card a:hover {
    color: var(--expo-primary);
}

/* ═══════════════════════════════════════════════
   Page Internal Hero — Decorative Overlay
   ═══════════════════════════════════════════════ */

.expo-page-hero {
    position: relative;
    background: var(--expo-primary);
    color: var(--expo-branco);
    text-align: center;
    padding: 80px 24px 60px;
    overflow: hidden;
}

.expo-page-hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--expo-branco);
    clip-path: ellipse(55% 100% at 50% 100%);
}

.expo-page-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
}

.expo-page-hero .expo-breadcrumb {
    font-size: 0.85rem;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

.expo-page-hero .expo-breadcrumb a {
    color: inherit;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════
   Print Styles
   ═══════════════════════════════════════════════ */

@media print {

    .site-header,
    .site-footer,
    .expo-hero-slider,
    .expo-hero-arrow,
    .expo-hero-dots {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    .e-con {
        padding: 0 !important;
        margin: 0 !important;
    }
}