/**
 * =====================================================
 * TIPOGRAFIA - LaVuRS
 * =====================================================
 * 
 * Sistema tipográfico baseado no design Figma:
 * 
 * FONTES:
 * - Holy Cream: Títulos, headings, elementos de destaque
 * - Inter: Corpo de texto, parágrafos, UI, navegação
 * 
 * TAMANHOS (do Figma):
 * - Hero: Holy Cream 68px / Inter 24px
 * - Seções: Holy Cream 42px / Inter 16px Bold
 * - Cards: Holy Cream 26px / Inter 68px (números)
 * - Labels: Holy Cream 16px / Inter 16px
 * 
 * LINE-HEIGHTS:
 * - Holy Cream: 100% (tight, display-optimized)
 * - Inter: 40px (24px text) / 24px (16px text)
 * 
 * =====================================================
 */

/* ============================
   IMPORTAÇÃO DAS FONTES
   ============================ */

@import url('https://fonts.cdnfonts.com/css/holy-cream');

/* Newsreader - citações editoriais (Figma: LaVuRS/Editorial/Quote) */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,500;1,600&display=swap');

/* Editorial display font, hosted locally. */
@font-face {
    font-family: 'Ancizar Serif';
    src: url('../fonts/ancizar-serif/AncizarSerif[wght].ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Inter - Fontes locais com todos os pesos */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_18pt-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_18pt-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_18pt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_18pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_18pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_18pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_18pt-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_18pt-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* ============================
   VARIÁVEIS CSS (Sistema Figma)
   ============================ */

:root {
    /* ===== FONTES (novo padrão LaVuRS) ===== */
    --font-display: 'Ancizar Serif', 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-quote: 'Newsreader', Georgia, serif;

    /* ===== PESOS ===== */
    --font-weight-regular: 400;
    --font-weight-bold: 700;

    /* ===== TAMANHOS EDITORIAIS (Figma LaVuRS) ===== */
    --font-size-hero-title: 72px;
    /* Ancizar Serif Bold - Hero headline */
    --font-size-section-title: 64px;
    /* Ancizar Serif Bold - títulos de seção */
    --font-size-card-title: 32px;
    /* Ancizar Serif Bold - card cover title */
    --font-size-card-title-sm: 24px;
    /* Ancizar Serif Bold - card compacto / footer */
    --font-size-small-title: 18px;
    /* Ancizar Serif Bold - título de linha (notícia) */
    --font-size-event-number: 32px;
    /* Inter Semi Bold - números de evento (dia) */
    --font-size-hero-body: 18px;
    /* Inter Regular - texto de apoio do hero */
    --font-size-body: 16px;
    /* Inter Regular - texto padrão */
    --font-size-small: 14px;
    /* Inter - textos de UI */

    /* ===== LINE HEIGHTS ===== */
    --line-height-display: 1;
    --line-height-hero-body: 1.5;
    --line-height-body: 24px;
    --line-height-small: 22px;

    /* ===== CORES LaVuRS (Figma) ===== */
    --lavurs-text-primary: #1d3829;
    /* Verde institucional */
    --lavurs-text-primary-alt: #25533e;
    /* Verde para ênfase dentro de títulos */
    --lavurs-text-secondary: #4d5e53;
    /* Verde acinzentado - corpo de texto */
    --lavurs-text-inverse: #ffffff;
    /* Texto sobre fundos escuros */
    --lavurs-accent-teal: #1e7776;
    /* Teal de destaque */
    --lavurs-accent-gold: #de9e36;
    /* Dourado - traços/artworks */
    --lavurs-surface-white: #ffffff;
    --lavurs-surface-offwhite: #f7f5f0;
    --lavurs-surface-warm: #f4efe6;
    --lavurs-border-subtle: #e0e5e0;
    --lavurs-border-partner: #d9d9d9;
    --lavurs-overlay-dark-strong: rgba(0, 0, 0, 0.8);
    --lavurs-overlay-dark-soft: rgba(0, 0, 0, 0.2);

    /* Vidro do header: off-white levemente mais quente que a superfície
       creme, em canais RGB soltos para compor rgba() com alfas variados.
       Reage bem tanto ao verde institucional quanto às fotografias. */
    --lv-nav-glass: 247, 245, 238;

    /* Contraparte escura do vidro, usada quando o header passa sobre uma
       superfície escura: o véu troca de lado junto com a tinta. */
    --lv-nav-ink: 12, 26, 18;

    /* Compat: mantém nomes antigos usados em outros trechos do projeto */
    --color-lime-700: var(--lavurs-text-primary);
    --color-blue-700: var(--lavurs-accent-teal);
    --color-blue-200: #bfdbfe;
    --color-blue-800: #1e40af;
    --color-purple-700: #7e22ce;
    --color-purple-100: #f3e8ff;
    --color-orange-700: var(--lavurs-accent-gold);
    --color-orange-100: #ffedd5;
    --color-orange-600: var(--lavurs-accent-gold);
    --color-gray-50: #f9fafb;
    --color-gray-400: #9ca3af;
    --color-gray-950: #030712;
    --color-surface: var(--lavurs-surface-offwhite);

    /* ===== ESPAÇAMENTO (escala Figma, px) ===== */
    --lavurs-spacing-0: 0px;
    --lavurs-spacing-4: 4px;
    --lavurs-spacing-8: 8px;
    --lavurs-spacing-10: 10px;
    --lavurs-spacing-12: 12px;
    --lavurs-spacing-14: 14px;
    --lavurs-spacing-16: 16px;
    --lavurs-spacing-18: 18px;
    --lavurs-spacing-20: 20px;
    --lavurs-spacing-24: 24px;
    --lavurs-spacing-28: 28px;
    --lavurs-spacing-32: 32px;
    --lavurs-spacing-40: 40px;
    --lavurs-spacing-64: 64px;
    --lavurs-spacing-80: 80px;
    --lavurs-spacing-120: 120px;

    /* ===== RAIOS ===== */
    --lavurs-radius-12: 12px;
    --lavurs-radius-16: 16px;
    --lavurs-radius-24: 24px;
    --lavurs-radius-32: 32px;
    --lavurs-radius-37: 37px;
    --lavurs-radius-64: 64px;
    --lavurs-radius-180: 180px;
    --lavurs-radius-pill: 999px;
}


/* ============================
   RESET TIPOGRÁFICO
   ============================ */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html {
    font-size: 16px;
    /* Base para conversões */
}

body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}


/* ============================
   HOLY CREAM - TÍTULOS/HEADINGS
   Baseado nas especificações do Figma
   ============================ */

/* Hero Title - 72px Ancizar Serif Bold */
h1,
.h1,
.heading-hero,
.heading-1 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-hero-title);
    line-height: 1.1;
    color: var(--lavurs-text-primary);
    margin-bottom: 0.4em;
}

/* Section Title - 64px Ancizar Serif Bold */
h2,
.h2,
.heading-section,
.heading-2 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-section-title);
    line-height: 1.05;
    color: var(--lavurs-text-primary);
    margin-bottom: 0.4em;
}

/* Card Title - 32px Ancizar Serif Bold */
h3,
.h3,
.heading-card,
.heading-3 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-card-title);
    line-height: 1.15;
    color: var(--lavurs-text-primary);
    margin-bottom: 0.4em;
}

/* Small Title - 24px Ancizar Serif Bold */
h4,
.h4,
.heading-small,
.heading-4 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-card-title-sm);
    line-height: 1.2;
    color: var(--lavurs-text-primary);
    margin-bottom: 0.4em;
}

/* Mapeamento de classes antigas do projeto */
.ltext-201 {
    /* Hero title */
    font-family: var(--font-display);
    font-size: var(--font-size-hero-title);
    line-height: 1.1;
}

.ltext-101 {
    /* Section title */
    font-family: var(--font-display);
    font-size: var(--font-size-section-title);
    line-height: 1.05;
}

.mtext-111 {
    /* Card title */
    font-family: var(--font-display);
    font-size: var(--font-size-card-title);
    line-height: 1.15;
}

.stext-101 {
    /* Small title */
    font-family: var(--font-display);
    font-size: var(--font-size-small-title);
    line-height: var(--line-height-display);
}


/* ============================
   INTER - CORPO DE TEXTO
   Baseado nas especificações do Figma
   ============================ */

/* Hero Body - 24px */
.body-hero,
.body-large,
.lead {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-hero-body);
    line-height: var(--line-height-hero-body);
    margin-bottom: 1em;
}

/* Standard Body - 16px */
p,
.paragraph,
.body-regular,
.body-standard,
.text-base {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    margin-bottom: 1em;
}

/* Small Text - 14px */
small,
.small,
.body-small,
.text-small {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}

/* Event Date Numbers (Special Case) - 68px */
.event-date-number {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-event-number);
    line-height: var(--line-height-display);
}

/* Bold Emphasis */
.body-bold,
strong,
b {
    font-weight: var(--font-weight-bold);
}


/* ============================
   CLASSES UTILITÁRIAS
   ============================ */

/* Famílias de Fontes */
.font-display {
    font-family: var(--font-display) !important;
}

.font-body {
    font-family: var(--font-body) !important;
}

/* Pesos de Fonte */
.font-regular {
    font-weight: var(--font-weight-regular) !important;
}

.font-bold {
    font-weight: var(--font-weight-bold) !important;
}

/* Transformações de Texto */
.uppercase {
    text-transform: uppercase !important;
}

.lowercase {
    text-transform: lowercase !important;
}

.capitalize {
    text-transform: capitalize !important;
}

.normal-case {
    text-transform: none !important;
}


/* ============================
   COMPONENTES ESPECÍFICOS DO FIGMA
   ============================ */

/* Hero Section: estilos definitivos ficam em css/hero.css
   (mantido apenas para não quebrar seletores legados) */

/* Navigation Menu */
.nav a,
.main-menu a,
.nav-link {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    text-transform: none;
}

/* Buttons */
.btn,
button.btn,
.button {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

/* Event Cards */
.event-card-date {
    font-family: var(--font-body);
    font-size: var(--font-size-event-number);
    line-height: var(--line-height-display);
}

.event-card-month {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-hero-body);
    line-height: var(--line-height-hero-body);
}

.event-card-title {
    font-family: var(--font-body);
    font-size: var(--font-size-hero-body);
    line-height: var(--line-height-hero-body);
}

.event-card-details {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.event-card-location {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

/* Filter Buttons */
.filter-btn {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

/* Form Labels */
input,
textarea,
select,
.form-control {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

input::placeholder,
textarea::placeholder {
    font-weight: var(--font-weight-regular);
    opacity: 0.6;
}

/* Footer */
.footer-heading {
    font-family: var(--font-display);
    font-size: var(--font-size-small-title);
    line-height: var(--line-height-display);
}

.footer-text {
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}


/* ============================
   RESPONSIVIDADE
   ============================ */

/* Tablets (max-width: 991px) */
@media (max-width: 991px) {
    :root {
        --font-size-hero-title: 48px;
        /* 68px → 48px */
        --font-size-section-title: 36px;
        /* 42px → 36px */
        --font-size-card-title: 22px;
        /* 26px → 22px */
        --font-size-event-number: 54px;
        /* 68px → 54px */
        --font-size-hero-body: 20px;
        /* 24px → 20px */
    }

    html {
        font-size: 15px;
    }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    :root {
        --font-size-hero-title: 36px;
        /* 68px → 36px */
        --font-size-section-title: 28px;
        /* 42px → 28px */
        --font-size-card-title: 20px;
        /* 26px → 20px */
        --font-size-event-number: 42px;
        /* 68px → 42px */
        --font-size-hero-body: 18px;
        /* 24px → 18px */
        --font-size-body: 15px;
        /* 16px → 15px */
    }

    html {
        font-size: 14px;
    }

    h1,
    .h1,
    .heading-hero {
        margin-bottom: 0.75em;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    :root {
        --font-size-hero-title: 28px;
        /* 68px → 28px */
        --font-size-section-title: 24px;
        /* 42px → 24px */
        --font-size-card-title: 18px;
        /* 26px → 18px */
        --font-size-event-number: 36px;
        /* 68px → 36px */
        --font-size-hero-body: 16px;
        /* 24px → 16px */
    }
}


/* ============================
   AJUSTES PARA CLASSES ANTIGAS
   Compatibilidade com código legado
   ============================ */

/* Classes de responsividade antigas */
.respon1 {
    /* Título principal slides */
    font-family: var(--font-display);
    font-size: var(--font-size-hero-title);
}

.respon2 {
    /* Subtítulo slides */
    font-family: var(--font-body);
    font-size: var(--font-size-hero-body);
}

.respon33 {
    /* Texto descritivo */
    font-family: var(--font-body);
    font-size: var(--font-size-body);
}

@media (max-width: 767px) {
    .respon1 {
        font-size: var(--font-size-section-title) !important;
    }

    .respon2 {
        font-size: var(--font-size-body) !important;
    }

    .respon33 {
        font-size: var(--font-size-small) !important;
    }
}