/*
 * EXEC Club — camada "executiva".
 * Mesmas fontes e paleta do club.css; cantos mais retos, linhas finas,
 * mais respiro, transições entre páginas e movimento na tela inicial.
 */

/* tokens: ver tokens.css (fonte única, carregado antes deste arquivo) */

body { background: #F4F6F8; letter-spacing: .1px; }
::selection { background: rgba(43, 179, 168, .25); }
h1 { letter-spacing: -.5px; }
h2 { letter-spacing: -.2px; }

/* ---------- Transição entre páginas ----------
 * Momento autoral: "a data vira o evento". O bloco de data e o título de um
 * evento têm o mesmo nome de transição na lista e na página do evento, então
 * deslizam e crescem de um lugar para o outro. O resto da página só esmaece.
 * Navegadores sem View Transitions trocam de página normalmente. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .15s ease-in both; }
::view-transition-new(root) { animation: vtFade .3s ease-out both; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease); }
::view-transition-old(*), ::view-transition-new(*) { height: 100%; }
.topbar { view-transition-name: topbar; }
::view-transition-group(topbar) { animation: none; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtFade { from { opacity: 0; } }

/* Barra fina de carregamento ao trocar de página (só transform, sem recalcular layout) */
.nav-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--teal), var(--accent)); z-index: 100; opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform 8s cubic-bezier(.1, .8, .2, 1), opacity .2s; }
.nav-progress.is-active { transform: scaleX(.85); opacity: 1; }

/* ---------- Botões e chips ---------- */
.btn { border-radius: var(--radius-sm); height: 46px; padding: 0 20px; letter-spacing: .2px; }
.btn-sm { border-radius: 6px; height: 38px; padding: 0 14px; }
.btn-dark:hover, .btn-teal:hover, .btn-accent:hover { box-shadow: 0 6px 16px rgba(10, 31, 58, .18); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(4px); }
.chip { border-radius: var(--radius-xs); font-size: 11px; letter-spacing: 1.4px; padding: 5px 9px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; letter-spacing: .3px; text-decoration: none; color: var(--teal); }

/* ---------- Cartões ---------- */
.card { border-radius: var(--radius); border-color: #E6EAF0; box-shadow: var(--shadow-1); }
.card-link { position: relative; overflow: hidden; }
.card-link::before { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--teal), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); z-index: 2; }
.card-link:hover::before { transform: scaleX(1); }
.card-link:hover, .card-link:focus-visible { box-shadow: var(--shadow-2); transform: none; }
.article-card .cover { height: 150px; }
.cover { border-radius: var(--radius); }
.article-card .cover { border-radius: 0; }
.card-title { letter-spacing: -.1px; }

/* ---------- Cabeçalho ---------- */
.topbar { position: sticky; top: 0; z-index: 40; transition: box-shadow .25s ease-out; }
.topbar-inner { min-height: 76px; }
.topbar.is-scrolled { box-shadow: 0 8px 24px rgba(5, 15, 30, .35); }
.nav { gap: 6px; }
.nav a { position: relative; background: none !important; border-radius: 0; padding: 0 12px; letter-spacing: .3px; }
.nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav a:hover::after { transform: scaleX(.5); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-panel { border-radius: var(--radius-sm); }


/* ---------- Tela inicial ---------- */
.home-hero { position: relative; overflow: hidden; background: var(--navy-900); color: var(--on-navy); padding: 3.5rem 2rem 7.5rem; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-grid { position: absolute; inset: -40px; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000 20%, transparent 75%); animation: gridDrift 40s linear infinite; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.hero-glow.g1 { width: 520px; height: 520px; right: -120px; top: -180px; background: #1F5C8A; animation: float1 18s ease-in-out infinite; }
.hero-glow.g2 { width: 380px; height: 380px; left: 30%; bottom: -220px; background: rgba(43, 179, 168, .35); animation: float2 22s ease-in-out infinite; }
.hero-x { position: absolute; right: 4%; top: 50%; width: min(42vw, 560px); aspect-ratio: 1; fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; opacity: .07; transform: translate(calc(var(--mx, 0) * 18px), calc(-50% + var(--my, 0) * 18px)); transition: transform .6s var(--ease); }
.hero-x path, .split-mark path { stroke-dasharray: 90; stroke-dashoffset: 90; animation: drawX 2.2s .3s var(--ease) forwards; }
/* Loops de fundo param fora da tela ou com a aba escondida (club.js) */
.is-paused .hero-grid, .is-paused .hero-glow { animation-play-state: paused; }
@keyframes gridDrift { to { transform: translate(56px, 56px); } }
@keyframes float1 { 50% { transform: translate(-60px, 50px); } }
@keyframes float2 { 50% { transform: translate(80px, -40px); } }
@keyframes drawX { to { stroke-dashoffset: 0; } }

.home-hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 3rem; align-items: center; }
.hero-intro { display: flex; flex-direction: column; gap: 14px; }
.hero-date { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; }
.hero-date::before { content: ''; width: 28px; height: 1px; background: var(--accent); }
.hero-intro h1 { color: var(--white); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.08; letter-spacing: -1.2px; }
.hero-intro h1 .greet { display: block; font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--on-navy-muted); margin-bottom: 10px; }
.hero-intro .role { font-size: 17px; color: var(--on-navy); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* Entrada em sequência */
.rise { animation: rise .6s var(--ease) both; animation-delay: calc(var(--d, 0) * 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* Painel do próximo evento */
.feature { position: relative; border-radius: 16px; overflow: hidden; background: rgba(18, 48, 90, .72); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 300px; backdrop-filter: blur(6px); }
.feature .cover { height: auto; border-radius: 0; min-height: 260px; }
.feature .cover .chip { position: absolute; top: 16px; left: 16px; z-index: 1; }
.feature-body { padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.feature-body .when { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 1.6px; }
.feature-body .title { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--white); line-height: 1.2; letter-spacing: -.3px; }
.feature-body .desc { color: var(--on-navy); }
.feature-empty { grid-column: 1 / -1; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }

/* Faixa de números */
.metrics { position: relative; z-index: 2; margin: -4.5rem auto 0; max-width: 1280px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-2); display: grid; grid-template-columns: repeat(4, 1fr); }
.metric { padding: 26px 28px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.metric + .metric::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--line); }
.metric strong { font-family: var(--font-head); font-size: 34px; font-weight: 800; color: var(--navy-900); letter-spacing: -1px; line-height: 1; }
.metric span { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.metric a { position: absolute; inset: 0; }
.metric:hover strong { color: var(--teal); }
.metrics-wrap { padding: 0 2rem; }

/* Cabeçalho das seções */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #DFE4EA; margin-bottom: 4px; }
.section-head .kicker { display: block; margin-bottom: 6px; letter-spacing: 2px; }
.section-head h2 { font-size: 22px; }

/* Lista de eventos com "bloco de data" */
.event-list { display: flex; flex-direction: column; }
.event-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 12px; border-bottom: 1px solid #E6EAF0; text-decoration: none; color: var(--ink); transition: background-color .2s ease-out; border-radius: 6px; }
.event-row:hover, .event-row:focus-visible { background: var(--white); color: var(--ink); }
.event-row:active .date-tile { transform: scale(.96); }
.date-tile { transition: transform .12s ease-out; }

/* Cabeçalho da página do evento: o mesmo bloco de data, maior */
.event-head { display: flex; align-items: center; gap: 24px; }
.event-head .date-tile { width: 96px; height: 104px; border-radius: 12px; background: var(--navy-800); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); flex-shrink: 0; }
.event-head .date-tile b { font-size: 38px; }
.event-head .date-tile small { font-size: 13px; }
.event-head h1 { margin: 0; }
.date-tile { width: 64px; height: 68px; border-radius: var(--radius-sm); background: var(--navy-900); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.date-tile b { font-family: var(--font-head); font-size: 24px; font-weight: 800; }
.date-tile small { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); margin-top: 5px; }
.event-row .meta { font-size: 14px; color: var(--muted); }
.event-row .title { font-weight: 700; font-size: 17px; line-height: 1.3; }
.event-row .side { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.event-row .chev { color: var(--line-strong); transition: transform .25s var(--ease), color .2s; }
.event-row:hover .chev { transform: translateX(4px); color: var(--teal); }


/* Cartões de vaga: etiquetas, título, empresa e botões alinhados entre os cartões da mesma fileira,
 * mesmo quando a tag "Interesse registrado" ocupa uma segunda linha em um deles. */
.job-card .job-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.job-card .job-actions { margin-top: auto; }
@supports (grid-template-rows: subgrid) {
  .job-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
  .job-card .job-tags { align-self: start; }
  .job-card .job-actions { margin-top: 4px; align-self: end; }
}

/* Faixa de título das páginas internas */
.page-hero { position: relative; overflow: hidden; background: var(--navy-900); padding: 3rem 2rem 3.25rem; color: var(--on-navy); }
.page-hero .container { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.page-hero h1 { color: var(--white); font-size: clamp(1.8rem, 3vw, 2.5rem); }
.page-hero p { margin: 0; max-width: 640px; font-size: 17px; }
.page-hero .hero-grid { mask-image: radial-gradient(ellipse 60% 120% at 90% 0%, #000 10%, transparent 70%); }
.page-hero .kicker { color: var(--accent); letter-spacing: 2px; }

/* Rodapé */
.footer { background: var(--navy-900); border-top: none; color: var(--on-navy-muted); padding: 1.25rem 2rem; }
.footer .logo-exec { font-size: 17px; }
.footer .logo-club { font-size: 11px; margin-top: 2px; }
.footer a { color: var(--on-navy); }
.footer a:hover { color: var(--white); }
.footer .container { align-items: center; }

/* Login e páginas públicas */
.split-card, .auth-card { border-radius: 16px; }

/* Menos movimento: tira deslocamentos e loops, mantém esmaecimentos e mudanças de cor/estado */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
  .rise { animation-name: vtFade; animation-delay: 0s; }
  .hero-grid, .hero-glow { animation: none; }
  .hero-x { transition: none; transform: translateY(-50%); }
  .hero-x path, .split-mark path { animation: none; stroke-dashoffset: 0; }
  .nav-progress { transition: opacity .2s; }
  .event-row:active .date-tile { transform: none; }
}

@media (max-width: 1024px) {
  .home-hero .container { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(3)::before { display: none; }
}

@media (max-width: 860px) {
  .home-hero { padding: 2rem 16px 6rem; }
  .metrics-wrap { padding: 0 16px; }
  .feature { grid-template-columns: 1fr; }
  .feature .cover { min-height: 180px; }
  .page-hero { padding: 2rem 16px; }
  .event-row { grid-template-columns: 56px minmax(0, 1fr); }
  .event-row .side { grid-column: 2; }
  .date-tile { width: 56px; height: 60px; }
  .metric { padding: 18px; }
  .metric strong { font-size: 28px; }
  .footer .container { flex-direction: column; align-items: flex-start; }
}
.split-brand > .logo { position: relative; z-index: 1; }

/* ---------- Caixa "Adicionar à agenda" (popover no centro da tela) ---------- */
.cal-pop { margin: auto; inset: 0; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 0; border: 1px solid #E6EAF0; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 30px 70px rgba(10, 31, 58, .35); }
.cal-pop::backdrop { background: rgba(10, 31, 58, .55); backdrop-filter: blur(3px); }
.cal-pop-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 22px 22px 18px; border-bottom: 1px solid #E6EAF0; }
.cal-pop-head h2 { font-size: 18px; }
.cal-pop-event { font-weight: 700; color: var(--ink-2); overflow-wrap: anywhere; }
.cal-pop-close { width: 36px; height: 36px; margin: -6px -6px 0 0; border: none; border-radius: 8px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.cal-pop-close:hover { background: var(--bg); color: var(--ink); }
.cal-pop-options { display: flex; flex-direction: column; padding: 10px; }
.cal-option { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); transition: background-color .15s ease-out; }
.cal-option svg { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--teal-50); color: var(--teal); }
.cal-option strong { display: block; font-size: 16px; }
.cal-option small { display: block; font-size: 14px; color: var(--muted); }
.cal-option:hover, .cal-option:focus-visible { background: var(--bg); color: var(--ink); }
.cal-pop :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Entrada: sobe e aparece; saída mais rápida */
.cal-pop, .cal-pop::backdrop { transition: opacity .25s ease-out, transform .3s var(--ease), overlay .3s allow-discrete, display .3s allow-discrete; }
.cal-pop { opacity: 0; transform: translateY(12px) scale(.98); }
.cal-pop:popover-open { opacity: 1; transform: none; }
.cal-pop::backdrop { opacity: 0; }
.cal-pop:popover-open::backdrop { opacity: 1; }
@starting-style {
  .cal-pop:popover-open { opacity: 0; transform: translateY(12px) scale(.98); }
  .cal-pop:popover-open::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-pop, .cal-pop:popover-open { transform: none; }
}

/* ---------- Artigos: reações e comentários ---------- */
.interact { margin-top: 1.5rem; border-top: 1px solid #DFE4EA; border-bottom: 1px solid #DFE4EA; }
.reaction-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 2px; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid #E6EAF0; }
.reaction-summary .comment-count { margin-left: auto; color: var(--muted); text-decoration: none; }
.reaction-summary .comment-count:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.icon-stack { display: inline-flex; }
.icon-stack .reaction-icon { display: block; border-radius: 50%; box-shadow: 0 0 0 2px var(--white); margin-left: -5px; }
.icon-stack .reaction-icon:first-child { margin-left: 0; }
.reaction-icon { flex-shrink: 0; }

.reaction-actions { display: flex; align-items: center; gap: 4px; padding: 6px 0; }
.react { position: relative; display: flex; align-items: center; }
.react-main, .react-more, .react-comment { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: none; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; transition: background-color .15s ease-out, color .15s ease-out; }
.react-main:hover, .react-more:hover, .react-comment:hover { background: #EEF1F4; color: var(--ink); }
.react-main .react-outline { color: var(--muted); transition: color .15s; }
.react-main.is-active { color: var(--teal); }
.react-main:hover .react-outline { color: var(--teal); }
.react-more { width: 30px; padding: 0; justify-content: center; margin-left: -4px; }
.react-main:active, .react-comment:active { transform: scale(.97); }

/* Seletor de reações: aparece ao passar o mouse, com o teclado ou pelo botão ^ */
.react-picker { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; display: flex; gap: 2px; padding: 6px; background: var(--white); border: 1px solid #E6EAF0; border-radius: 999px; box-shadow: 0 14px 34px rgba(10, 31, 58, .18); opacity: 0; visibility: hidden; transform: translateY(6px) scale(.96); transform-origin: left bottom; transition: opacity .15s ease-out, transform .2s var(--ease), visibility 0s .2s; }
.react:hover .react-picker, .react:has(:focus-visible) .react-picker, .react.is-open .react-picker { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .react:hover .react-picker { transition-delay: .25s; } }
.react-option { position: relative; width: 46px; height: 46px; border: none; border-radius: 50%; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s var(--ease), background-color .15s; }
.react-option .reaction-icon { width: 34px; height: 34px; }
.react-option:hover, .react-option:focus-visible { transform: translateY(-6px) scale(1.25); background: transparent; }
.react-option.is-active { background: var(--teal-50); }
.react-name { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--navy-900); color: var(--white); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.react-option:hover .react-name, .react-option:focus-visible .react-name { opacity: 1; }
[data-reactions].is-loading { opacity: .7; pointer-events: none; }
.react-main.just-reacted .reaction-icon { animation: reactPop .3s var(--ease); }
@keyframes reactPop { 40% { transform: scale(1.35); } }

/* Comentários */
.comments { display: flex; flex-direction: column; gap: 18px; margin-top: 1.5rem; }
.comments h2 { font-size: 20px; }
.comment-form { display: flex; gap: 12px; align-items: flex-start; }
.comment-form textarea { min-height: 52px; resize: none; overflow: hidden; border-radius: 10px; }
.comment-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.comment { display: flex; gap: 12px; align-items: flex-start; }
.comment-bubble { flex: 1; min-width: 0; background: var(--white); border: 1px solid #E6EAF0; border-radius: 4px 14px 14px 14px; padding: 12px 16px; }
.comment-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.comment-head strong { display: block; font-size: 15px; }
.comment-head > div { min-width: 0; }
.comment-head time { flex-shrink: 0; }
.comment-body { margin: 8px 0 0; color: var(--ink-2); overflow-wrap: anywhere; }
.comment-delete { margin-top: 6px; color: var(--muted); font-weight: 600; }
.comment-delete:hover { color: var(--red); }
.comment:target .comment-bubble { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43, 179, 168, .18); }

.article-stats { display: flex; gap: 12px; margin-top: 2px; align-items: center; }
.stat-reactions { display: inline-flex; align-items: center; gap: 5px; }

/* Comentários recolhidos: a altura anima de 0 até o conteúdo (grid 0fr → 1fr) */
.reaction-summary button.comment-count, .reaction-summary .comment-count { background: none; border: none; font: inherit; cursor: pointer; }
.js .comments-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.js .comments-wrap.is-open { grid-template-rows: 1fr; }
.js .comments-clip { overflow: hidden; min-height: 0; }
.js .comments-wrap .comments { opacity: 0; }
.js .comments-wrap:not(.is-open) .comments { visibility: hidden; transition: opacity .15s ease-out, visibility 0s .35s; }
.js .comments-wrap.is-open .comments { opacity: 1; transition: opacity .25s ease-out .08s; }
.comment-count[aria-expanded="true"] { color: var(--teal); }
@media (prefers-reduced-motion: reduce) {
  .js .comments-wrap { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .react-picker, .react:hover .react-picker { transform: none; }
  .react-option:hover, .react-option:focus-visible { transform: none; background: var(--teal-50); }
  .react-main.just-reacted .reaction-icon { animation: none; }
}
@media (max-width: 860px) {
  .react-option { width: 40px; height: 40px; }
  .react-option .reaction-icon { width: 30px; height: 30px; }
  .comment-head { flex-direction: column; gap: 2px; }
}

/* ---------- Artigo em blocos ----------
 * Coluna de leitura (720px) no centro; imagens "largas" usam 1080px; "tela inteira" vai de borda a borda. */
.page { overflow-x: clip; }
.article { display: grid; grid-template-columns: [full-start] minmax(0, 1fr) [wide-start] minmax(0, 180px) [col-start] min(720px, 100%) [col-end] minmax(0, 180px) [wide-end] minmax(0, 1fr) [full-end]; row-gap: 28px; }
.article > * { grid-column: col; min-width: 0; }
.article > .a-wide { grid-column: wide; }
.article > .a-full { grid-column: full; width: 100vw; margin-left: calc(50% - 50vw); }
.a-lead { font-size: 20px; line-height: 1.55; font-weight: 600; color: var(--ink); margin: 0; }
.a-heading { font-size: 26px; margin-top: 12px; }
.article .prose > :first-child { margin-top: 0; }
.article .prose > :last-child { margin-bottom: 0; }
.a-figure { margin: 0; }
.a-figure img { width: 100%; border-radius: var(--radius); }
.a-full img { border-radius: 0; max-height: 78vh; object-fit: cover; }
.a-figure figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
.a-full figcaption { padding: 0 16px; }
.a-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.a-split.is-right .a-figure { order: 2; }
.a-gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.a-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.a-quote { margin: 8px 0; padding: 4px 0 4px 28px; position: relative; }
.a-quote::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--accent); }
.a-quote p { margin: 0; font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.35; color: var(--navy-900); letter-spacing: -.3px; }
.a-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 15px; font-weight: 600; color: var(--teal); }
.a-callout { background: var(--navy-900); color: var(--on-navy); border-radius: var(--radius); padding: 26px 28px; }
.a-callout-title { display: block; font-family: var(--font-head); font-size: 18px; color: var(--white); margin-bottom: 10px; }
.a-callout .prose { color: var(--on-navy); font-size: 16px; }
.a-callout .prose strong { color: var(--white); }
.a-callout .prose a { color: var(--accent); }
.article > .interact { margin-top: 1rem; }
@media (max-width: 860px) {
  .a-split, .a-gallery { grid-template-columns: 1fr; gap: 16px; }
  .a-split.is-right .a-figure { order: 0; }
  .a-quote p { font-size: 21px; }
  .a-heading { font-size: 22px; }
}

/* ---------- Editor de blocos (admin) ---------- */
.blocks { display: flex; flex-direction: column; gap: 14px; }
.block { border: 1px solid #DFE4EA; border-radius: var(--radius); background: var(--white); }
.block.is-new, .block.is-moved { animation: blockIn .35s var(--ease); }
@keyframes blockIn { from { box-shadow: 0 0 0 3px rgba(43, 179, 168, .45); } }
.block-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #EEF1F4; background: #F8FAFB; border-radius: var(--radius) var(--radius) 0 0; }
.block-handle { color: var(--line-strong); letter-spacing: -2px; font-weight: 700; }
.block-title { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--navy-800); }
.block-tools { margin-left: auto; display: flex; gap: 2px; }
.block-tool { width: 32px; height: 32px; border: none; border-radius: 6px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.block-tool:hover { background: #EEF1F4; color: var(--ink); }
.block-tool.danger:hover { background: var(--red-50); color: var(--red); }
.block-tool:disabled { opacity: .3; cursor: default; background: transparent; }
.block-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.block-heading-input { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.block-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill-option { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; }
.pill-option:has(input:checked) { border-color: var(--teal); background: var(--teal-50); color: var(--teal-dark); }
.pill-option input { accent-color: var(--teal); }
.block-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
.block-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.image-input { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.image-input input[type=text] { font-size: 14px; }
.image-drop { width: 100%; min-height: 150px; border: 1.5px dashed var(--line-strong); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background: #FAFBFC; transition: border-color .15s, background-color .15s; }
.image-drop:hover, .image-drop:focus-within { border-color: var(--teal); background: var(--teal-50); }
.image-drop img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.image-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; font-size: 14px; padding: 20px; text-align: center; }
.image-drop-empty small { font-weight: 400; font-size: 12px; }
.image-drop [hidden] { display: none; }
.md-toolbar { display: flex; gap: 2px; padding: 4px; border: 1px solid #DFE4EA; border-bottom: none; border-radius: 10px 10px 0 0; background: #F8FAFB; }
.md-toolbar + textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.md-toolbar button { min-width: 32px; height: 30px; border: none; border-radius: 6px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.md-toolbar button:hover { background: #EEF1F4; }
.block-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.editor-actions { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg) 70%, transparent); padding: 14px 0; z-index: 5; }
@media (max-width: 860px) {
  .block-split, .block-gallery { grid-template-columns: 1fr; }
}

/* ---------- Páginas legais ---------- */
.legal h2 { margin-top: 2em; scroll-margin-top: 90px; }
.legal table { font-size: 15px; }
.legal td, .legal th { vertical-align: top; }
.legal-draft { background: var(--orange-50); color: var(--orange); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 15px; font-weight: 600; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 0; border-top: 1px solid #DFE4EA; border-bottom: 1px solid #DFE4EA; font-size: 15px; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nowrap { white-space: nowrap; }
.footer-legal { flex-basis: 100%; font-size: 12px; color: #8FA6C4; }

/* ---------- Acessibilidade: pular para o conteúdo e foco visível pelo teclado ---------- */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--white); color: var(--navy-900); font-weight: 700; padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-2); text-decoration: none; transition: top .15s ease-out; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.topbar :focus-visible, .footer :focus-visible, .sidebar :focus-visible, .page-hero :focus-visible, .home-hero :focus-visible { outline-color: var(--white); }
.check input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.guest-legal { text-align: center; margin: 0; line-height: 1.7; } .auth-foot { text-align: center; line-height: 1.7; }

.page > .main-region { flex: 1; display: flex; flex-direction: column; }
.main-region > .main { flex: 1; }
.main-region:focus { outline: none; }

/* Contraste (auditoria axe): textos secundários sobre fundos escuros e código de erro */
.tabs a[aria-current="page"] .muted { color: var(--on-navy-muted); }
.error-code { color: var(--teal); }

/* ---------- Publicação (rascunho / agora / agendar / encerrar) ---------- */
.publish-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.publish-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; background: var(--white); transition: border-color .15s, background-color .15s; }
.publish-option input { margin-top: 3px; accent-color: var(--teal); flex-shrink: 0; }
.publish-option strong { display: block; font-size: 15px; }
.publish-option small { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.publish-option:has(input:checked) { border-color: var(--teal); background: var(--teal-50); }
.publish-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.publish-when { display: none; margin-top: 14px; max-width: 320px; }
.publish-box:has(input[value="scheduled"]:checked) .publish-when, .publish-when.has-error { display: flex; }


/* ======================================================================
 * Refinamentos (nov/2026): títulos em serifa, home em bento, imagens,
 * estados vazios e aviso flutuante.
 * ====================================================================== */

/* ---------- Títulos em serifa ----------
 * Source Serif 4 é da mesma família da Source Sans 3 do texto: dá o tom
 * editorial nos títulos de destaque. Montserrat continua no logo, rótulos,
 * botões, datas e números. */
/* tokens: ver tokens.css (fonte única, carregado antes deste arquivo) */
.hero-intro h1, .page-hero h1, .section-head h2, .feature-body .title, .tile h2,
.split-copy h2, .split-card h1, .auth-card h1, .error-page h1, .a-quote p,
.article .prose h2, .article .prose h3, .article-card.is-lead .card-title {
  font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto; letter-spacing: -.01em; text-wrap: balance;
}
.hero-intro h1 { letter-spacing: -.02em; }
.hero-intro h1 .greet { font-family: var(--font-head); }
.section-head h2 { font-size: 27px; line-height: 1.15; }
.feature-body .title { font-size: 29px; line-height: 1.12; }

/* ---------- Imagens ----------
 * width/height no HTML reservam o espaço; aqui a altura acompanha a largura. */
img { height: auto; }
.cover-photo .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-photo > :not(.cover-img) { z-index: 1; }

/* ---------- Home em bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.25rem 2.5rem; margin-top: 1.25rem; align-items: start; }
.bento-events { grid-column: span 8; }
.bento-side { grid-column: span 4; display: flex; flex-direction: column; gap: 1.25rem; }
.bento-reads, .bento-jobs { grid-column: 1 / -1; }
/* Vagas: até 3 cartões + o convite para indicar como 4ª célula da mesma grade */
.jobs-bento { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jobs-bento .tile-referral { grid-row: span 4; justify-content: center; }

.tile { position: relative; overflow: hidden; border-radius: var(--radius); padding: 26px 24px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tile h2 { font-size: 22px; line-height: 1.2; }
.tile p { margin: 0; color: var(--ink-2); }
.tile .btn { margin-top: 4px; }
.tile-profile { background: var(--white); border: 1px solid #E6EAF0; box-shadow: var(--shadow-1); }
.tile-community { background: var(--navy-900); }
.tile-community h2 { color: var(--white); }
.tile-community p { color: var(--on-navy); }
.tile-community > :not(.tile-mark) { position: relative; }
.tile-mark { position: absolute; right: -34px; bottom: -42px; width: 160px; aspect-ratio: 1; fill: none; stroke: var(--accent); stroke-width: 11; stroke-linecap: round; opacity: .14; transition: transform .6s var(--ease); }
.tile-community:hover .tile-mark { transform: rotate(8deg) scale(1.04); }
.tile-referral { background: var(--teal-50); }

/* Perfil completo: barra em segmentos finos + lista do que falta */
.meter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 2px; }
.meter span { height: 4px; border-radius: 2px; background: var(--line); transition: background-color .4s var(--ease); }
.meter span.is-on { background: var(--teal); }
.checklist { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 15px; color: var(--ink); width: 100%; }
.checklist li { display: flex; align-items: center; gap: 10px; }
.checklist svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.checklist li.is-done { color: var(--muted); }
.checklist li.is-done svg { stroke: var(--teal); stroke-width: 2.6; }

/* Leituras: um destaque grande e dois compactos */
.reads { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.reads > .is-lead { grid-row: span 2; }
.reads > :only-child { grid-column: 1 / -1; }
.article-card.is-lead .cover { height: 300px; }
.article-card.is-lead .card-body { padding: 22px 24px 24px; gap: 8px; }
.article-card.is-lead .card-title { font-size: 27px; line-height: 1.18; }
.article-card.is-compact { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.article-card.is-compact .cover { height: 100%; min-height: 150px; }
.article-card.is-compact .cover-label { display: none; }
.article-card.is-compact .card-body { justify-content: center; }

/* ---------- Estado vazio ---------- */
.empty-state { display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: var(--white); border: 1px solid #E6EAF0; border-radius: var(--radius); }
.empty-icon { width: 46px; height: 46px; flex-shrink: 0; padding: 11px; border-radius: 50%; background: var(--teal-50); fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty-copy { display: flex; flex-direction: column; gap: 2px; }
.empty-copy strong { color: var(--ink); font-weight: 700; }
.empty-copy span { color: var(--muted); }
.empty-action { margin-left: auto; }

/* ---------- Aviso flutuante ---------- */
.toast { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: var(--radius-sm); max-width: calc(100vw - 32px); }
.toast svg { width: 22px; height: 22px; flex-shrink: 0; padding: 4px; border-radius: 50%; background: var(--accent); fill: none; stroke: var(--navy-900); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .tile-community:hover .tile-mark { transform: none; }
}
@media (max-width: 1024px) {
  /* Uma coluna só: 12 colunas com os espaços entre elas não cabem numa tela estreita */
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > * { grid-column: auto; }
  .reads { grid-template-columns: minmax(0, 1fr); }
  .reads > .is-lead { grid-row: auto; }
  .jobs-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .bento { gap: 2.5rem; }
  .section-head h2 { font-size: 24px; }
  .jobs-bento { grid-template-columns: minmax(0, 1fr); }
  .article-card.is-lead .cover { height: 200px; }
  .article-card.is-lead .card-title { font-size: 23px; }
  .article-card.is-compact { grid-template-columns: 112px minmax(0, 1fr); }
  .article-card.is-compact .cover { min-height: 128px; }
  .empty-state { flex-wrap: wrap; padding: 20px; }
}