/* ==========================================================================
   GODS CALENDAR — páginas editoriais do Calendário da Humanidade
   ========================================================================== */

.editorial-page { overflow: clip; }
.editorial-page section { padding-block: clamp(var(--space-40), 7vw, var(--space-80)); }
.editorial-section-heading { margin-bottom: var(--space-32); }

.editorial-hero { position: relative; isolation: isolate; }
.editorial-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 84% 22%, color-mix(in srgb, var(--color-primary-light) 24%, transparent), transparent 34%);
}
.editorial-hero__inner {
  display: grid;
  align-items: center;
  gap: var(--space-32);
  padding-block: clamp(var(--space-60), 10vw, var(--space-120));
}
.editorial-hero__copy { min-width: 0; }
.editorial-hero h1 { max-width: 13ch; font-size: clamp(44px, 8vw, 104px); }
.editorial-hero h1 span { color: var(--color-primary); }
.editorial-hero__copy > p:last-child { max-width: 58ch; margin-top: var(--space-24); font-size: clamp(18px, 2vw, 24px); color: var(--color-neutral-400); }

.editorial-media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--color-neutral-200);
  border-radius: var(--radius-lg);
}
.editorial-media img { width: 100%; height: 100%; object-fit: cover; }
.editorial-media--annual,
.editorial-media--month { aspect-ratio: 4 / 3; }
.editorial-media--day { aspect-ratio: 16 / 9; }

.editorial-jump {
  display: flex;
  gap: var(--space-8);
  overflow-x: auto;
  padding-block: var(--space-16);
  scrollbar-width: thin;
}
.editorial-jump a { flex: 0 0 auto; min-width: 40px; padding: 8px 10px; border-radius: var(--radius-pill); text-align: center; text-decoration: none; background: var(--color-neutral-0); transition: background .26s var(--ease-out), color .26s var(--ease-out); }
.editorial-jump a[aria-current="true"] { background: var(--color-primary-dark); color: #fff; }

.editorial-axis { display: grid; gap: var(--space-24); }
.editorial-axis > h2 { grid-column: 1 / -1; }
.editorial-semester { width: 100%; min-width: 0; padding: var(--space-32); border-radius: var(--radius-lg); }
.editorial-semester__image { aspect-ratio: 3 / 2; border-radius: var(--radius-md); }
.editorial-semester--grimdark { background: var(--color-neutral-800); color: #fff; }
.editorial-semester--grimdark h3 { color: #fff; }
.editorial-semester--grimdark .editorial-text-link { color: #fff; }
.editorial-semester--fairytale { background: linear-gradient(135deg, var(--color-primary-pale), #fff); border: 1px solid var(--color-primary-light); }

.editorial-chapters > div,
.editorial-missions > div { display: grid; gap: var(--space-16); margin-top: var(--space-32); }
.editorial-quarter,
.editorial-mission { width: 100%; min-width: 0; padding: var(--space-24); background: var(--color-neutral-0); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); }
.editorial-mission { border-top: 4px solid var(--color-primary); }

.editorial-yearline__months { display: grid; gap: var(--space-24); position: relative; margin-top: var(--space-40); }
.editorial-month-card { position: relative; width: 100%; min-width: 0; padding: var(--space-32); background: var(--color-neutral-0); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.editorial-month-card__number { display: block; font-size: clamp(48px, 8vw, 96px); font-weight: 600; line-height: 1; letter-spacing: -.06em; color: var(--color-primary-light); }
.editorial-month-card h3 { margin-block: var(--space-12); }
.editorial-text-link { font-weight: 600; }
.editorial-status { display: inline-flex; width: fit-content; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--color-neutral-100); color: var(--color-neutral-400); font-size: var(--text-xs); }

.editorial-weeks ol { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; background: var(--color-neutral-200); border-radius: var(--radius-lg); overflow: hidden; }
.editorial-week-summary { display: flex; flex-direction: column; min-width: 0; padding: var(--space-16); background: var(--color-neutral-0); }
.editorial-week-summary strong { color: var(--color-primary-dark); }
.editorial-week-summary span { color: var(--color-neutral-400); font-size: var(--text-xxs); overflow-wrap: anywhere; }

.editorial-cta { margin-block: var(--space-60); text-align: center; background: var(--color-primary-pale); border-radius: var(--radius-lg); }
.editorial-cta .btn { margin-top: var(--space-24); }

.editorial-breadcrumb { padding-block: var(--space-24); }
.editorial-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-8); list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); }
.editorial-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-8); color: var(--color-neutral-300); }
.editorial-breadcrumb a { text-decoration: none; }
.editorial-breadcrumb [aria-current="page"] { color: var(--color-neutral-400); }

.editorial-month-context { display: grid; padding: var(--space-32); background: var(--color-primary-dark); color: #fff; border-radius: var(--radius-lg); }
.editorial-month-context h2 { color: #fff; }
.editorial-month-context p:last-child { max-width: 64ch; margin: var(--space-16) 0 0; color: color-mix(in srgb, #fff 75%, var(--color-primary-dark)); }
.editorial-week { padding-block: var(--space-40); }
.editorial-week__heading { margin-bottom: var(--space-24); }
.editorial-day-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
.editorial-day-card { display: flex; flex-direction: column; width: 100%; min-width: 0; padding: var(--space-24); background: var(--color-neutral-0); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); }
.editorial-day-card time { font-size: var(--text-xl); font-weight: 600; line-height: 1; color: var(--color-primary-dark); }
.editorial-day-card h3 { margin-bottom: var(--space-12); }
.editorial-day-card > p:not(.eyebrow) { color: var(--color-neutral-400); }
.editorial-day-card > :last-child { margin-top: auto; }
.editorial-day-card--featured { border-color: var(--ods-08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ods-08) 12%, transparent); }

.editorial-period-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); padding-block: var(--space-60); }
.editorial-period-nav a { display: flex; flex-direction: column; min-width: 0; padding: var(--space-24); background: var(--color-neutral-0); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); text-decoration: none; }
.editorial-period-nav a:last-child { text-align: right; }
.editorial-period-nav span { color: var(--color-neutral-400); font-size: var(--text-xxs); text-transform: uppercase; letter-spacing: .08em; }
.editorial-period-nav strong { overflow-wrap: anywhere; }

.editorial-article { display: grid; gap: var(--space-60); }
.editorial-article > .editorial-hero { padding-block: clamp(var(--space-40), 7vw, var(--space-80)); }
.editorial-article > .editorial-hero h1 { max-width: 18ch; }
.editorial-article > .editorial-hero > p:last-child { max-width: 64ch; margin-top: var(--space-24); color: var(--color-neutral-400); font-size: clamp(18px, 2vw, 22px); }
.journey-map { display: grid; grid-template-columns: 1fr; margin: 0; background: var(--color-primary-dark); color: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.journey-map > div { min-width: 0; padding: var(--space-16); border-bottom: 1px solid rgba(255,255,255,.14); }
.journey-map > div:last-child { border-bottom: 0; }
.journey-map dt { font-size: var(--text-xxs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary-light); }
.journey-map dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.editorial-story,
.editorial-related { padding-block: 0 !important; }
.editorial-story > p:last-child { max-width: 72ch; margin-top: var(--space-24); font-size: var(--text-m); color: var(--color-neutral-400); }
.editorial-related h2 { margin-bottom: var(--space-32); }
.related-date-card { display: grid; width: 100%; overflow: hidden; background: var(--color-neutral-0); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); }
.related-date-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.related-date-card > div { padding: var(--space-24); }
.related-date-card .btn { margin-top: var(--space-16); }
.editorial-status-panel { padding: var(--space-24); border-top: 1px solid var(--color-neutral-200); color: var(--color-neutral-400); }

@media (min-width: 640px) {
  .editorial-chapters > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-missions > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-weeks ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .editorial-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journey-map > div { border-right: 1px solid rgba(255,255,255,.14); }
}

@media (min-width: 900px) {
  .editorial-axis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-missions > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .editorial-yearline__months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-40) var(--space-80); }
  .editorial-yearline__months::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; translate: -50% 0; background: linear-gradient(var(--color-neutral-800), var(--color-primary-light)); }
  .editorial-month-card:nth-child(even) { translate: 0 var(--space-60); }
  .editorial-weeks ol { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .editorial-day-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journey-map { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .journey-map > div { border-bottom: 0; }
  .related-date-card { grid-template-columns: minmax(240px, .8fr) 1.2fr; }
  .related-date-card img { height: 100%; aspect-ratio: auto; }
}

@media (min-width: 1024px) {
  .editorial-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr); }
  .editorial-hero--year .editorial-media img { object-position: 70% center; }
  .editorial-hero--month .editorial-media img { object-position: 68% center; }
  .editorial-semester { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1fr); align-items: stretch; gap: var(--space-24); }
  .editorial-semester__image { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-month-card:nth-child(even) { translate: none; }
}

/* O .eyebrow usa --color-neutral-400, token de superfície clara. Dentro dos
   painéis escuros chegava a 2,1:1 — ilegível. Sobre cor, o secundário se tinge
   do próprio tom da superfície, nunca de cinza neutro. */
.editorial-month-context .eyebrow { color: color-mix(in srgb, #fff 72%, var(--color-primary-dark)); }
.editorial-semester--grimdark .eyebrow { color: color-mix(in srgb, #fff 72%, var(--color-neutral-800)); }
/* Sobre painel escuro o hover precisa clarear, não escurecer. */
.editorial-semester--grimdark a:hover { color: var(--color-primary-light); }