/*
 * layout.css — Navega Theme · Layout Primitives
 * Container, grid, hero, seções, proof bar, metrics bar.
 * Sem estilos de componente interno — apenas estrutura e espaço.
 * ============================================================ */

/* ============================================================
   CONTAINER
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* ============================================================
   SISTEMA DE GRID
   ============================================================ */

.grid       { display: grid; gap: var(--gutter-desktop); }

/* Colunas simétricas */
.grid--2col { grid-template-columns: repeat(2, 1fr); }
.grid--3col { grid-template-columns: repeat(3, 1fr); }
.grid--4col { grid-template-columns: repeat(4, 1fr); }
.grid--2x2  { grid-template-columns: repeat(2, 1fr); }

/* Colunas assimétricas */
.grid--50-50 { grid-template-columns: 1fr 1fr; }
.grid--55-45 { grid-template-columns: 55fr 45fr; }
.grid--60-40 { grid-template-columns: 60fr 40fr; }
.grid--40-60 { grid-template-columns: 40fr 60fr; }
.grid--65-35 { grid-template-columns: 65fr 35fr; }

/* ============================================================
   COLUNA ESTREITA — conteúdo centralizado
   ============================================================ */

.section-narrow          { max-width: 760px; margin-inline: auto; }
.section-narrow--lg-text { max-width: 680px; margin-inline: auto; }

.section-narrow--lg-text p {
    font-size: 1.1875rem;
    color: var(--color-text-secondary);
    line-height: var(--leading-body-lg);
    margin-bottom: var(--space-5);
}
.section-narrow--lg-text p:last-child {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: 0;
}

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

.hero {
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    padding-top: var(--space-10);
    padding-bottom: var(--space-7);
    position: relative;
}

/* Variantes de altura */
.hero--home,
.hero--about {
    /* Fallback for browsers without image-set() support (Safari < 14, very old Chrome) */
    background-image: url('../images/sections/hero-background.jpg?v=3');
    /* Modern browsers: serve high-quality WebP (q=100, 82 KB) with JPG fallback (q=98, 222 KB) */
    background-image: image-set(
        url('../images/sections/hero-background.webp?v=3') type('image/webp'),
        url('../images/sections/hero-background.jpg?v=3') type('image/jpeg')
    );
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.hero--home::before,
.hero--about::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
    pointer-events: none;
}
.hero--home > *,
.hero--about > * {
    position: relative;
    z-index: 1;
}
.hero--home {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.hero--about { padding-block: var(--space-9); }
.hero--short {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
    min-height: 50vh;
    display: flex;
    align-items: center;
}
.hero--page  { padding-top: var(--space-9); padding-bottom: var(--space-9); }
/* Estrutura interna */
.hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-bottom: var(--space-6);
}

/* Conteúdo agrupado (usado em hero--home, hero--about):
   garante gap consistente entre tag, title, subtitle e actions. */
.hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.hero__tag {
    display: inline-block;
    font-size: var(--text-label);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-label);
    color: var(--color-primary);
    background-color: rgba(37,99,235,0.15);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    width: fit-content;
}

.hero__title {
    font-size: var(--text-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    max-width: 780px;
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
}

.hero__subtitle {
    font-size: var(--text-body-lg);
    color: rgba(255,255,255,0.8);
    max-width: 580px;
    line-height: var(--leading-body-lg);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* Meta bar (hero de case) */
.case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255,255,255,0.2);
}
.case-meta__item   { display: flex; flex-direction: column; gap: var(--space-1); }
.case-meta__term   {
    font-size: var(--text-caption);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
.case-meta__value  { font-size: var(--text-body-sm); color: var(--color-text-inverse); }
.case-meta__value a { color: var(--color-blue-light); text-decoration: underline; }

/* Cases filter (dentro do hero de /cases) */
.cases-filter { padding-block: var(--space-5); border-top: 1px solid rgba(255,255,255,0.1); }

/* ============================================================
   SEÇÕES — MODIFICADORES DE FUNDO E PADDING
   ============================================================ */

.section          { padding-block: var(--space-9); }
.section--dark    { background-color: var(--color-surface-dark); }
.section--primary { background-color: var(--color-primary); }
.section--surface { background-color: var(--color-surface); }
.section--navy    { background-color: var(--color-secondary); }

/* Seções específicas de página com padding diferenciado */
.section-icp             { background-color: var(--color-surface); padding-block: var(--space-9); }
.section-services        { padding-block: var(--space-9); }
.section-services-grid   { padding-block: var(--space-9); }
.section-how             { background-color: var(--color-secondary); padding-block: var(--space-9); }
.section-cases-preview   { padding-block: var(--space-9); }
.section-about-preview   { background-color: var(--color-surface); padding-block: var(--space-9); }
.section-cta             { background-color: var(--color-primary); padding-block: var(--space-9); text-align: center; }
.section-contact-cta     { background-color: var(--color-secondary); padding-block: var(--space-9); }
.section-problem         { padding-block: var(--space-9); }
.section-deliverables    { background-color: var(--color-surface); padding-block: var(--space-9); }
.section-proof           { background-color: var(--color-secondary); padding-block: var(--space-9); }
.section-steps           { background-color: var(--color-surface); padding-block: var(--space-9); }
.section-faq             { padding-block: var(--space-9); }
.section-cta-dark        { background-color: var(--color-secondary); padding-block: var(--space-9); }
.section-metrics         { background-color: var(--color-primary); padding-block: var(--space-8); }
.section-challenge       { padding-block: var(--space-9); }
.section-approach        { padding-block: var(--space-9); }
.section-results         { background-color: var(--color-surface); padding-block: var(--space-9); }
.section-testimonial     { background-color: var(--color-secondary); padding-block: var(--space-9); }
.section-case-cta        { padding-block: var(--space-9); }
.section-related-cases   { background-color: var(--color-surface); padding-block: var(--space-9); }
.section-statement       { padding-block: var(--space-9); }
.section-team            { padding-block: var(--space-9); }
.section-philosophy      { background-color: var(--color-secondary); padding-block: var(--space-9); }
.section-credentials     { padding-block: var(--space-9); }
.section-featured-post   { padding-block: var(--space-9); }
.section-posts-grid      { background-color: var(--color-surface); padding-block: var(--space-9); }
.posts-grid__item        { height: 600px; min-width: 0; }
.cases-grid__item        { height: 460px; min-width: 0; }
.cases-grid__item > .card-case { height: 100%; }
.section-newsletter      { background-color: var(--color-primary); padding-block: var(--space-9); text-align: center; }
.section-trust           { padding-block: var(--space-9); }
.section-diag-form       { background-color: var(--color-surface); padding-block: var(--space-9); }
.section-next-steps      { padding-block: var(--space-9); }
.section-expect          { padding-block: var(--space-9); }
.section-contact-form    { padding-block: var(--space-9); }
.section-cases-grid      { padding-block: var(--space-9); }
.section-post-body       { padding-block: var(--space-10); }
.section-related-posts   { background-color: var(--color-surface); padding-block: var(--space-9); }

/* ============================================================
   PROOF BAR
   ============================================================ */

.proof-bar         { background-color: var(--color-primary); padding-block: var(--space-7); }
.proof-bar__inner  {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    text-align: center;
}
.proof-bar__number {
    display: block;
    font-size: 4.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    line-height: 1;
}
.proof-bar__unit { font-size: 2.5rem; }
.proof-bar__desc { font-size: var(--text-body-sm); color: rgba(255,255,255,0.95); margin-top: var(--space-2); }

/* ============================================================
   METRICS BAR (hero de case)
   ============================================================ */

.metrics-bar {
    display: flex;
    gap: var(--space-6);
    justify-content: center;
    flex-wrap: nowrap;
    text-align: center;
}
.metrics-bar__item   {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.metrics-bar__number { font-size: var(--text-h1); font-weight: var(--font-weight-bold); color: var(--color-text-inverse); line-height: 1; }
.metrics-bar__label  { font-size: var(--text-body-sm); color: rgba(255,255,255,0.8); }