/* =========================================================
   TOGA DIGITAL — CSS da home v2 (front-page.php)
   Tokens de cor e componentes base (header, footer, chip, avatar,
   card, adslot) vêm de style.css (child theme).
   ========================================================= */

/* TICKER */
.ticker{ background: var(--tinta); color: #fff; overflow: hidden; padding: 10px 0; }
.marquee{ display: flex; gap: 44px; white-space: nowrap; width: max-content; animation: toga-scroll 70s linear infinite; padding-left: 24px; }
@keyframes toga-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.marquee span{ font-size: .82rem; color: #D7D9E0; }
.marquee span a:hover{ color: #fff; }

/* HERO */
.hero{ background: var(--tinta); color: #fff; position: relative; overflow: hidden; padding: 64px 0 90px; }
.hero::before{
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(circle at 88% 8%, rgba(75,79,224,.35), transparent 45%),
		repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 26px);
	pointer-events: none;
}
.hero-grid{ position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
.hero-eyebrow{ color: var(--sinal); margin-bottom: 18px; display: block; }
.hero h1{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12; margin-bottom: 18px; max-width: 15ch; }
.hero p.lede{ color: #B7BAC9; font-size: 1.02rem; line-height: 1.6; max-width: 42ch; margin-bottom: 26px; }
.hero-tags{ display: flex; gap: 8px; flex-wrap: wrap; }
.hero-tags span{ font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; padding: 6px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 100px; color: #C7C9D6; }

/* DOCKET (card de destaque, estilo dossiê) */
.docket{ background: var(--papel); color: var(--tinta); border-radius: 18px; position: relative; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); display: block; }
.docket-tab{ display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px dashed var(--linha); font-family: var(--font-mono); font-size: .68rem; color: var(--toga); }
.docket-tab b{ color: var(--sinal); }
.docket-body{ padding: 26px 26px 28px; }
.docket-photo{ width: 100%; height: 150px; object-fit: cover; border-radius: 10px; margin-bottom: 18px; display: block; }
.docket .chip{ margin-bottom: 14px; }
.docket h2{ font-size: 1.35rem; line-height: 1.25; margin-bottom: 10px; }
.docket p{ color: var(--toga); font-size: .9rem; margin-bottom: 16px; }
.docket .meta{ font-family: var(--font-mono); font-size: .72rem; color: var(--toga-2); }
.docket::after{
	content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
	border-style: solid; border-width: 0 26px 26px 0;
	border-color: transparent var(--papel-2) transparent transparent;
	border-radius: 0 18px 0 0;
}

/* GRADE DE CATEGORIAS */
.cat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 44px 0; }
.cat-card{ display: block; border: 1px solid var(--linha); border-radius: 14px; padding: 18px; background: var(--branco-bloco); transition: .15s; }
.cat-card:hover{ border-color: var(--sinal); background: var(--sinal-tint); }
.cat-icon{ width: 38px; height: 38px; border-radius: 10px; background: var(--sinal-tint); color: var(--sinal); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.cat-card:hover .cat-icon{ background: #fff; }
.cat-card b{ font-family: var(--font-display); font-size: .95rem; display: block; margin-bottom: 6px; }
.cat-card span{ font-size: .8rem; color: var(--toga); line-height: 1.4; }

/* SECTION HEAD */
.sec-head{ display: flex; justify-content: space-between; align-items: baseline; margin: 52px 0 22px; }
.sec-head h3{ font-size: 1.3rem; }
.curl{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--sinal); margin-right: 9px; vertical-align: middle; }

/* FEED BENTO */
.feed{ display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; grid-auto-flow: dense; gap: 18px; }
.tile{ display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--linha); background: var(--branco-bloco); position: relative; }
.tile.big{ grid-column: span 2; grid-row: span 2; }
.tile.wide{ grid-column: span 2; grid-row: span 1; }
.tile .thumb{ flex-shrink: 0; position: relative; }
.tile.big .thumb{ height: 56%; }
.tile.wide .thumb{ width: 38%; height: 100%; position: absolute; right: 0; top: 0; }
.tile.wide .body{ width: 62%; }
.tile.wide .thumb img, .tile.big .thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-grad{ width: 100%; height: 100%; }
.g1{ background: linear-gradient(135deg, var(--sinal), #8B8EF0); }
.g2{ background: linear-gradient(135deg, var(--selo), #4FBE96); }
.g3{ background: linear-gradient(135deg, var(--tinta), var(--sinal)); }
.g4{ background: linear-gradient(135deg, #7A5CE0, var(--sinal)); }
.tile .body{ padding: 14px 16px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tile .type-badge{ align-self: flex-start; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: 100px; margin-bottom: 8px; }
.tb-noticia{ background: var(--papel-2); color: var(--toga); }
.tb-artigo{ background: var(--sinal-tint); color: var(--sinal); }
.tile h4{ font-size: .92rem; line-height: 1.3; margin-bottom: auto; font-family: var(--font-display); font-weight: 700; }
.tile.big h4{ font-size: 1.25rem; line-height: 1.28; }
.tile.wide h4{ font-size: 1rem; }
.tile .meta{ font-family: var(--font-mono); font-size: .66rem; color: var(--toga-2); margin-top: 8px; }
.tile.big p.dek{ color: var(--toga); font-size: .85rem; margin: 8px 0 0; }

.tile.ad-tile{ background: var(--tinta); border-color: var(--tinta); justify-content: center; grid-column: 3 / 5; grid-row: 3 / 4; }
.tile.ad-tile::before{ content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(75,79,224,.14) 0 10px, transparent 10px 20px); }
.tile.ad-tile .body{ position: relative; justify-content: center; }
.tile.ad-tile .eyebrow{ color: #8A8DA0; margin-bottom: 6px; }
.tile.ad-tile b{ color: #fff; font-family: var(--font-display); font-size: 1rem; }

/* TOGAOPINA — quote rail */
.opina{ background: var(--tinta); border-radius: 22px; padding: 44px 36px; margin: 56px 0; color: #fff; }
.opina-head{ display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.opina-head img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sinal); display: block; }
.opina-head b{ font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--sinal); display: block; }
.opina-head span{ font-size: .82rem; color: #A9ABBC; }
.opina-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote-card{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; transition: .15s; }
.quote-card:hover{ border-color: var(--sinal); }
.quote-card:hover h5{ color: #fff; }
.quote-card:hover span{ color: #A9ABBC; }
.quote-card .qmark{ font-family: var(--font-display); font-size: 2.2rem; color: var(--sinal); line-height: 1; margin-bottom: 6px; }
.quote-card h5{ font-size: 1.02rem; line-height: 1.35; margin-bottom: 12px; font-family: var(--font-display); font-weight: 600; }
.quote-card span{ font-size: .8rem; color: #A9ABBC; margin-top: auto; }
.quote-card a.go, .quote-card span.go{ font-family: var(--font-mono); font-size: .72rem; color: var(--sinal); margin-top: 14px; display: inline-block; }

/* NEWSLETTER */
.news-cta{ text-align: center; padding: 56px 24px; }
.news-cta h3{ font-size: 1.4rem; margin-bottom: 8px; }
.news-cta p{ color: var(--toga); margin-bottom: 20px; }
.news-cta form{ display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.news-cta input{ flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linha); font-family: var(--font-body); font-size: .9rem; }

@media (max-width: 900px){
	.hero-grid{ grid-template-columns: 1fr; }
	.cat-grid{ grid-template-columns: repeat(2, 1fr); }
	.feed{ grid-template-columns: repeat(2, 1fr); }
	.tile.big{ grid-column: span 2; }
	.tile.wide{ grid-column: span 2; }
	.tile.ad-tile{ grid-column: span 2; grid-row: auto; }
	.opina-grid{ grid-template-columns: 1fr; }
}