/* ============================================
   CARIOCANDO — Typography
   Headlines, body text, display styles
   ============================================ */

/* ── Display / Hero Headlines ── */
.display-xl {
    font-family: var(--font-display);
    font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.display-lg {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.display-md {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    font-weight: 600;
    line-height: var(--leading-snug);
}

/* ── Headings ── */
h1, .h1 {
    font-family: var(--font-body);
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--preto);
    margin-bottom: var(--space-4);
}

h2, .h2 {
    font-family: var(--font-body);
    font-size: clamp(var(--text-xl), 2.8vw, var(--text-3xl));
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--preto);
    margin-bottom: var(--space-3);
}

h3, .h3 {
    font-family: var(--font-body);
    font-size: clamp(var(--text-lg), 2.2vw, var(--text-2xl));
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--cinza-mais-escuro);
    margin-bottom: var(--space-3);
}

h4, .h4 {
    font-family: var(--font-body);
    font-size: clamp(var(--text-md), 1.8vw, var(--text-xl));
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--cinza-mais-escuro);
    margin-bottom: var(--space-2);
}

h5, .h5 {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 600;
    line-height: var(--leading-normal);
    color: var(--cinza-escuro);
    margin-bottom: var(--space-2);
}

h6, .h6 {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-normal);
    color: var(--cinza-escuro);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* ── Section Titles ── */
.section-title {
    font-family: var(--font-body);
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
    font-weight: 700;
    color: var(--preto);
    margin-bottom: var(--space-3);
}

.section-title--display {
    font-family: var(--font-display);
}

.section-subtitle {
    font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
    color: var(--cinza-texto);
    max-width: 640px;
    line-height: var(--leading-relaxed);
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-header .section-subtitle {
    margin: var(--space-2) auto 0;
}

/* ── Overline / Eyebrow ── */
.overline {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--azul-rio);
    margin-bottom: var(--space-3);
    display: inline-block;
}

.overline::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--azul-rio);
    margin-right: var(--space-2);
    vertical-align: middle;
    border-radius: var(--radius-full);
}

/* ── Lead / Intro text ── */
.lead {
    font-size: clamp(var(--text-md), 1.5vw, var(--text-lg));
    line-height: var(--leading-relaxed);
    color: var(--cinza-escuro);
    font-weight: 400;
}

/* ── Body text ── */
.body-text {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--cinza-escuro);
}

.body-text-lg {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

/* ── Caption ── */
.caption {
    font-size: var(--text-sm);
    color: var(--cinza-texto);
    line-height: var(--leading-normal);
}

.caption-xs {
    font-size: var(--text-xs);
    color: var(--cinza-texto-light);
    letter-spacing: var(--tracking-wide);
}

/* ── Text on dark backgrounds ── */
.text-on-dark {
    color: var(--branco);
}

.text-on-dark .section-subtitle,
.text-on-dark .caption {
    color: rgba(255, 255, 255, 0.7);
}

.text-on-dark .overline {
    color: var(--azul-rio-light);
}

.text-on-dark .overline::before {
    background: var(--azul-rio-light);
}

/* ── Text colors ── */
.text-azul { color: var(--azul-rio); }
.text-dourado { color: var(--dourado); }
.text-coral { color: var(--coral); }
.text-verde { color: var(--verde-natureza); }
.text-muted { color: var(--cinza-texto); }
.text-white { color: var(--branco); }

/* ── Display font variant ── */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

/* ── Text alignment ── */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ── Truncation ── */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}