/* ===================================================================
   editorial.css: hub /mentoria/, /imprensa/, /guru-do-amor/ e a 404, na
   identidade "mi" (base.css + mi.css antes deste). So o que e unico
   dessas paginas (prefixo ed-). Sem fonte custom, sem style inline.
   Breakpoints: 640 e 960.
   =================================================================== */

/* ---------- Abertura ---------- */

.ed-hero { padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 88px); }
.ed-hero .mi-head { max-width: 860px; }
.ed-ident { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 860px; margin-top: 28px; }
.ed-ident__foto { flex: none; display: block; width: clamp(160px, 24vw, 240px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: var(--mi-r-lg); background: var(--mi-soft); }
@media (min-width: 640px) {
  .ed-ident { flex-direction: row; align-items: center; gap: 40px; }
}

/* ---------- Fechamento: caixa escura numa secao clara ---------- */

.ed-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: clamp(32px, 5vw, 72px); border-radius: var(--mi-r-xl); background: var(--mi-ink); color: #fff; }
.ed-cta .mi-t2 { max-width: 22ch; color: #fff; }
.ed-cta .mi-lead { max-width: 60ch; color: var(--mi-on-dark); }
.ed-cta .mi-actions { margin-top: 6px; gap: 12px 28px; }
.mi .ed-cta__link { display: inline-flex; align-items: center; min-height: var(--mi-hit); color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.mi .ed-cta__link:hover { color: #d0d0d0; }

/* ---------- Setas ---------- */

.ed-ic { flex: none; width: 20px; height: 20px; opacity: .55; transition: transform .25s ease, opacity .25s ease; }

/* ---------- Hub: grupos de situacoes ---------- */

.ed-grupos { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.ed-grupo { display: flex; flex-direction: column; gap: 10px; }
.ed-grupo .mi-small { max-width: 62ch; color: var(--mi-on-dark); }
.ed-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.mi .ed-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 12px 18px; border: 1.5px solid var(--mi-line-dark); border-radius: var(--mi-r-md); color: #fff; font-size: 16px; line-height: 1.4; text-decoration: none; transition: border-color .25s ease, background .25s ease; }
.mi .ed-item:hover { border-color: #fff; color: #fff; background: #151515; }
.ed-item:hover .ed-ic { transform: translateX(3px); opacity: 1; }
.ed-prose { max-width: var(--mi-prose); }
.mi .ed-prose > p + p { margin-top: 1.1em; }

/* ---------- Cartoes de link (imprensa, perfis, materias) ---------- */

.ed-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ed-links--perfis,
.ed-links--mats { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.ed-sec--lista .ed-links { grid-template-columns: 1fr; max-width: 860px; }
.mi .ed-link { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: clamp(20px, 2.4vw, 28px); border: 1.5px solid var(--mi-line); border-radius: var(--mi-r-md); background: #fff; color: var(--mi-ink); text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease; }
.mi .ed-link:hover { border-color: var(--mi-ink); color: var(--mi-ink); box-shadow: var(--mi-sh-card); }
.ed-link:hover .ed-ic { transform: translate(2px, -2px); opacity: 1; }
.mi-sec--dark .ed-link { background: var(--mi-ink); border-color: var(--mi-line-dark); color: #fff; }
.mi-sec--dark .ed-link:hover { border-color: #fff; color: #fff; box-shadow: none; }
.ed-link__t,
.ed-link h2.ed-link__t { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; font-family: var(--mi-hfont); font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.ed-link__s { font-size: 16px; line-height: 1.6; color: var(--mi-muted); text-wrap: pretty; }
.ed-link__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--mi-faint); }
.ed-link__outlet { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mi-faint); }
.mi-sec--dark .ed-link__s,
.mi-sec--dark .ed-link__meta,
.mi-sec--dark .ed-link__outlet { color: var(--mi-on-dark); }
.ed-contato { max-width: 860px; margin: var(--mi-s6) 0 0; }
.mi-sec--dark .ed-contato { color: var(--mi-on-dark); }
.mi-sec--dark .ed-contato a { color: #fff; }

/* ---------- Guru do Amor ---------- */

.ed-paras { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.mi .ed-h2-gap { margin-top: clamp(40px, 5vw, 64px); margin-bottom: var(--mi-s5); }
.ed-mais { margin-top: var(--mi-s6); }
.ed-sec--faq .mi-faq__list { max-width: 860px; }
.ed-sec--faq .mi-faq__list details { border-bottom: 1px solid var(--mi-line-dark); }
.ed-sec--faq .mi-faq__list details:first-child { border-top: 1px solid var(--mi-line-dark); }
.ed-sec--faq .mi-faq__list summary { min-height: var(--mi-hit); color: #fff; }
.ed-sec--faq .mi-faq__list summary span { color: var(--mi-on-dark); transition: transform .25s ease; }
.ed-sec--faq .mi-faq__list details[open] summary span { transform: rotate(45deg); }
.ed-sec--faq .mi-faq__list details p { color: var(--mi-on-dark); }

/* ---------- 404 (404.html e estatica; usa so esta folha + base + mi) ---------- */

.ed-404 { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.ed-404__main { flex: 1; display: flex; align-items: center; padding-block: clamp(48px, 8vw, 112px); }
.ed-404__main .mi-wrap { width: 100%; }
.ed-404__in { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 640px; }
.ed-404__links { display: grid; gap: 10px; width: 100%; margin: 14px 0 0; padding: 0; list-style: none; }
.mi.ed-404 .ed-item { color: var(--mi-ink); border-color: var(--mi-line); }
.mi.ed-404 .ed-item:hover { color: var(--mi-ink); background: var(--mi-soft); border-color: var(--mi-ink); }

@media (prefers-reduced-motion: reduce) {
  .ed-ic { transition: none; }
}