/* Página inicial do site público (site/index). Prefixo home-*; mobile-first (metade da audiência é mobile).
   Contrato: .kiro/steering/padroes-visuais-eventos.md#página-inicial */

.home-sec { padding: 2.5rem 0; }
.home-sec-titulo { text-align: center; margin-bottom: 1.5rem; }
.home-sec-titulo .section-sub-title { margin-bottom: 0; }

/* ---------- Hero (próximo evento) ---------- */
.home-hero {
    position: relative;
    padding: 4rem 0;
    background-color: #f4f6f8;
    /* mesma imagem abstrata de antes, clareada para o texto escuro ter contraste */
    background-image: linear-gradient(rgba(255, 255, 255, .82), rgba(255, 255, 255, .9)), var(--home-hero-bg);
    background-size: cover;
    background-position: center;
}
.home-hero-grid { display: grid; gap: 1.75rem; align-items: center; }
.home-hero-eyebrow {
    display: inline-block;
    margin-bottom: .5rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #666;
}
.home-hero-titulo {
    margin: 0 0 .75rem;
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    line-height: 1.15;
    font-weight: 800;
    color: #252525;
}
.home-hero-texto { margin: 0 0 1.25rem; font-size: 1.0625rem; color: #444; max-width: 34rem; }
.home-hero-acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.home-hero-acoes .btn { min-height: 2.75rem; display: inline-flex; align-items: center; }
.home-hero-acoes .btn-ghost { background: transparent; border: 1px solid #252525; color: #252525; }
.home-hero-acoes .btn-ghost:hover { background: #252525; color: #fff; }

.home-destaque {
    --home-thumb: 6rem;
    display: grid;
    grid-template-columns: var(--home-thumb) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    color: #252525;
    text-decoration: none;
}
.home-destaque:hover { color: #252525; text-decoration: none; }
.home-destaque-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: #f0f0f0; }
.home-destaque-corpo { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.home-destaque-rotulo { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #888; }
.home-destaque-projeto { font-size: .8125rem; font-weight: 600; color: #666; }
.home-destaque-titulo { margin: 0; font-size: 1.0625rem; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.home-destaque-data { font-size: .875rem; color: #444; }
.home-destaque-data::first-letter { text-transform: uppercase; }
.home-destaque-faltam {
    align-self: flex-start;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: #252525;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
}
.home-destaque-rodape { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .25rem; }
.home-destaque-cta { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .875rem; font-weight: 600; color: #252525; }
.home-destaque-cta svg { transition: transform .2s; }
.home-destaque:hover .home-destaque-cta { text-decoration: underline; }
.home-destaque:hover .home-destaque-cta svg { transform: translateX(3px); }

@media (min-width: 576px) {
    .home-destaque { --home-thumb: 9rem; }
}
@media (min-width: 768px) {
    .home-hero { padding: 6rem 0; }
}
@media (min-width: 992px) {
    .home-hero-grid--com-destaque { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
    .home-destaque { --home-thumb: 11rem; padding: 1.25rem; }
    .home-destaque-titulo { font-size: 1.25rem; }
}

/* ---------- Métricas ---------- */
.home-metricas { background: #252525; padding: 1.75rem 0; }
.home-metricas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; text-align: center; }
.home-metrica-num { display: block; font-size: clamp(1.75rem, 7vw, 2.75rem); font-weight: 800; line-height: 1.1; color: #fff; }
.home-metrica-rotulo { display: block; margin-top: .25rem; font-size: .875rem; color: #c8c8c8; }
@media (min-width: 768px) {
    .home-metricas { padding: 2.5rem 0; }
    .home-metricas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Projetos em destaque ---------- */
.home-projetos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.home-projeto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: #252525;
    color: #fff;
    text-decoration: none;
}
.home-projeto:hover { color: #fff; text-decoration: none; }
.home-projeto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.home-projeto:hover img { transform: scale(1.05); }
.home-projeto-info {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2rem .75rem .65rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
}
.home-projeto-nome { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.home-projeto-total { display: block; margin-top: .1rem; font-size: .75rem; opacity: .85; }
.home-projeto:focus-visible, .home-agenda-item:focus-visible { outline: 3px solid #252525; outline-offset: 2px; }
@media (min-width: 768px) {
    .home-projetos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
    .home-projeto-nome { font-size: 1.0625rem; }
    .home-projeto-info { padding: 2.5rem 1rem .85rem; }
}

/* ---------- Catálogo ---------- */
.home-catalogo-mais { text-align: center; margin-top: .5rem; }

/* ---------- Agenda ---------- */
.home-agenda { max-width: 52rem; margin: 0 auto; }
.home-agenda-dia { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid #e5e5e5; }
.home-agenda-dia:first-child { border-top: 0; }
.home-agenda-data { text-align: center; line-height: 1.1; }
.home-agenda-data strong { display: block; font-size: 1.75rem; font-weight: 800; color: #252525; }
.home-agenda-data span { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: #777; }
.home-agenda-itens { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.home-agenda-item {
    --home-thumb: 5.5rem;
    display: grid;
    grid-template-columns: var(--home-thumb) minmax(0, 1fr);
    overflow: hidden; /* a arte acompanha o arredondamento dos cantos do item */
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    color: #252525;
    text-decoration: none;
    transition: box-shadow .2s, border-color .2s;
}
.home-agenda-img { display: block; width: 100%; height: 100%; min-height: var(--home-thumb); object-fit: cover; background: #f0f0f0; }
.home-agenda-texto { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: .75rem 1rem; }
.home-agenda-item:hover { color: #252525; text-decoration: none; border-color: #bdbdbd; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.home-agenda-meta { display: block; font-size: .8125rem; color: #666; overflow-wrap: anywhere; }
.home-agenda-meta strong { color: #252525; }
.home-agenda-titulo { display: block; margin-top: .15rem; font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.home-agenda-ao-vivo { display: inline-block; white-space: nowrap; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; background: #d92d20; color: #fff; font-size: .6875rem; font-weight: 700; text-transform: uppercase; vertical-align: middle; }
.home-agenda-mais { text-align: center; margin-top: 1.25rem; }
@media (min-width: 768px) {
    .home-agenda-item { --home-thumb: 7rem; }
    .home-agenda-dia { grid-template-columns: 5rem minmax(0, 1fr); gap: 1.5rem; }
    .home-agenda-data strong { font-size: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .home-projeto img, .home-agenda-item, .home-destaque-cta svg { transition: none; }
}

/* Faixa de pedido de palestra + newsletter (index) */
.subscribe .newsletter-form .input-group-prepend .btn { border-radius: 0 .75rem .75rem 0; }

/* Mobile (colunas empilhadas): conteúdo centralizado com espaço igual dos dois lados (o tema deixa 20px/50px só à esquerda)
   e respiro na base. Padding dentro da faixa, não margin, para a cor de fundo cobrir o conteúdo. */
@media (max-width: 767.98px) {
    .subscribe .subscribe-call-to-acton { padding: 1.25rem 1rem; text-align: center; }
    .subscribe .ts-newsletter { padding: 1.5rem 1rem 1.75rem; text-align: center; }
    .subscribe .newsletter-form .input-group { justify-content: center; }
}
