/* =========================================================================
   Escultoriam — layout: estructura y ritmo de secciones
   ========================================================================= */

/* Una sección, una pantalla: el contenido se centra en el alto disponible.
   Se descuenta la cabecera fija, que es lo mismo que descuenta
   `scroll-padding-top`: al llegar desde el menú o la pala, la sección aterriza
   pegada al filo de la cabecera y cabe entera, sin dejar ver nada de la
   anterior. Con 100svh a secas, esos píxeles se salían por abajo.
   `min-height` y no `height`: si el contenido no cabe —móvil, tipografía
   grande, zoom— la sección crece en vez de recortar. Nunca se oculta nada. */
.section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--nav-h) - 1px);
  padding-block: var(--section-y);
}

/* Fondo de piedra azul con una veladura muy leve, nunca negro plano.
   Dos familias que se alternan y solo cambian de dónde entra la luz:
   `noble` la recibe por arriba, `deep` por abajo. El color de esa luz lo pone
   cada sección con `--veil`, y el suelo con `--floor`. */
.section {
  --veil: 16 46 85;
  --veil-a: 0.5;
  --wash: 0.12;
  --floor: var(--blue-900);
}

/* Dos capas por sección: el foco radial marca de dónde entra la luz y la
   veladura plana tiñe la banda entera. Sin la plana, el centro de la sección
   volvía al azul del suelo y dos secciones seguidas se veían iguales. */
.section--noble {
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(var(--veil) / var(--veil-a)) 0%, rgb(6 16 32 / 0) 62%),
    linear-gradient(rgb(var(--veil) / var(--wash)), rgb(var(--veil) / var(--wash))),
    var(--floor);
}

.section--deep {
  background:
    radial-gradient(100% 70% at 50% 100%, rgb(var(--veil) / var(--veil-a)) 0%, rgb(6 16 32 / 0) 60%),
    linear-gradient(rgb(var(--veil) / var(--wash)), rgb(var(--veil) / var(--wash))),
    var(--floor);
}

/* Escenario: tercera familia de fondo, solo para el Reloj del Duelo. El foco
   entra por el centro y no por un borde, así que la banda se distingue de las
   seis anteriores incluso antes de leer nada. Es la última sección y la única
   interactiva: se le permite ser la más vistosa. */
.section--stage {
  /* La esfera es grande: esta banda cede relleno vertical para que quepa. */
  padding-block: var(--s-4);

  /* Los haces de la esfera sobresalen un 30 % por cada lado y en móvil eso
     provocaba scroll horizontal: la banda los recorta. */
  overflow: clip;

  --veil: 140 104 40;
  --veil-a: 0.22;
  --wash: 0.05;
  --floor: #040c18;

  background:
    radial-gradient(58% 46% at 50% 46%, rgb(var(--veil) / var(--veil-a)) 0%, rgb(6 16 32 / 0) 72%),
    radial-gradient(120% 90% at 50% 50%, rgb(108 23 34 / 0.16) 0%, rgb(6 16 32 / 0) 66%),
    linear-gradient(rgb(var(--veil) / var(--wash)), rgb(var(--veil) / var(--wash))),
    var(--floor);
}

/* --- el tinte de cada sección ---------------------------------------------
   Cada una lleva el color con el que ya se identifica en la mesa, muy diluido:
   se distinguen al recorrer la página sin que ninguna deje de ser piedra azul.
   El suelo alterna 900/800 para reforzar el cambio de banda, y el orden evita
   que dos tintes parecidos se toquen: azul · turquesa · morado · índigo ·
   oro · borgoña. */

/* el juego — azul de la Casa Leonhart */
.section--tint-house {
  --wash: 0.14;
  --veil: 16 46 85;
  --veil-a: 0.55;
}

/* la ronda — turquesa del Oráculo del Destino, la fase que la abre */
.section--tint-oracle {
  --wash: 0.13;
  --veil: 14 77 77;
  --veil-a: 0.34;
  --floor: var(--blue-800);
}

/* los hechizos — morado del Libro de Hechizos */
.section--tint-spells {
  --wash: 0.15;
  --veil: 41 4 103;
  --veil-a: 0.42;
}

/* las facciones — azul del Juicio del Reino, la corte que las enfrenta */
.section--tint-judgment {
  --wash: 0.15;
  --veil: 26 39 116;
  --veil-a: 0.4;
  --floor: var(--blue-800);
}

/* el mapa — oro del camino y de los Escudos del Triunfo */
.section--tint-gold {
  --wash: 0.07;
  --veil: 140 104 40;
  --veil-a: 0.2;
}

/* preventa — borgoña de la corte */
.section--tint-court {
  --wash: 0.13;
  --veil: 108 23 34;
  --veil-a: 0.3;
  --floor: var(--blue-800);
}

.section__head {
  max-width: 46rem;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head--center .eyebrow {
  justify-content: center;
}

.section__head--center .eyebrow::after {
  display: none;
}

.section__head h2 + .lede {
  margin-top: var(--s-4);
}

.section__head--center .lede {
  margin-inline: auto;
}

/* Dos columnas: texto y ficha. Móvil apila, escritorio reparte 7/5. */
.split {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-6);
}

/* Los items de grid no deben poder crecer por su contenido mínimo. */
.split > *,
.closing > * {
  min-width: 0;
}

.split__aside {
  align-self: start;
}

/* La ficha no acompaña al texto renglón a renglón: es una pieza aparte y se
   centra contra el alto de la columna de texto, que es el de la sección. */
.split__aside--center {
  align-self: center;
}

/* Variante con el encabezado dentro de la retícula: en escritorio el aside
   arranca en la misma línea que el titular, no debajo del texto. */
.split--lead {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-3) var(--s-8);
    align-items: start;
  }

  .split--lead > :not(.split__aside) {
    grid-column: 1;
  }

  /* El mapa reparte a la mitad: con los escudos ceñidos al bloque de texto, la
     columna izquierda ya no necesita 7 partes y el tablero —que es la pieza
     protagonista de la sección— gana ese ancho. */
  .split--map {
    grid-template-columns: 6fr 6fr;
  }

  .split--lead > .split__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Cierre comercial */
.closing {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}

.closing__panel {
  position: relative;
}

@media (min-width: 1024px) {
  .closing {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
}

.split--arcane {
  align-items: center;
}

@media (min-width: 1024px) {
  .split--arcane {
    grid-template-columns: 6fr 5fr;
  }
}