/* ==========================================================================
   Section composition — eyebrow + title + subtitle (Sprint 2)
   Shared across every page: replaces .section-title, .section-subtitle,
   .section-label, .section-header, .section-eyebrow that used to live in
   app.css, homepage-seo.css, neighborhoods.css, contact.css, investors.css.
   Canonical home is HERE. Don't redefine these in page CSS.
   ========================================================================== */

.section-eyebrow,
.section-label {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--taupe);
}

.section-eyebrow--terra,
.section-label--terra {
    color: var(--terracotta);
}

.section-title {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.5vw, 2.75rem);
    line-height: 1.1;
    color: var(--ink);
    text-align: left;
}

.section-title em {
    font-style: italic;
    color: var(--terracotta);
}

/* Smaller variant — for sidebars or denser layouts */
.section-title--sm {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    margin-bottom: 14px;
}

/* Centered modifier — used on /naselja, calculator, etc. */
.section-title--center {
    text-align: center;
}

.section-subtitle {
    margin: 0 auto 36px;
    max-width: 65ch;
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.6;
    color: var(--ink);
    opacity: 0.78;
    text-align: left;
}

.section-subtitle--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Section header wrapper — eyebrow + title + subtitle stacked */
.section-header {
    margin-bottom: clamp(28px, 4vw, 48px);
}

/* Bare <h2> inside .section-header inherits canonical .section-title look —
   tako templati ne moraju da pišu class="section-title" na svakom h2-u. */
.section-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.5vw, 2.75rem);
    line-height: 1.1;
    color: var(--ink);
}

.section-header h2 em {
    font-style: italic;
    color: var(--terracotta);
}

.section-header--center {
    text-align: center;
}

.section-header--center .section-title,
.section-header--center .section-subtitle,
.section-header--center h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}