/* =========================================================
   HOME
   Estilos utilizados por la portada y por sus secciones.
   ========================================================= */

/* 01) BASE EDITORIAL DE LA PORTADA ------------------------ */

/* La base editorial, el contenedor y el enlace de salto se cargan desde los módulos compartidos. */

/* Contenedor común de la portada. */

/* Enlace accesible que solo aparece al recibir el foco. */

/* 02) PORTADA Y VÍDEO ------------------------------------ */

/* Segunda mitad del titular. No es un h2: no abre sección, completa el h1.
   El tamaño la separa del titular sin dejarla caer al nivel del texto de entrada. */
.hero-subtitle {
  max-width: 26ch;
  margin: 0 0 1.5rem;
  color: var(--v4-text-secondary);
  font-family: var(--v4-font-heading);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.25;
}

/* El titular cede parte de su margen cuando lleva subtítulo debajo: los dos se leen como una pieza. */
.hero-copy h1:has(+ .hero-subtitle) {
  margin-bottom: 0.9rem;
}

/* Los dos accesos van centrados bajo la columna de texto, que sigue alineada a la izquierda. */
.hero-copy .actions {
  justify-content: center;
}

.hero-with-film {
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  width: min(calc(100% - 3rem), 86rem);
}

/* 03) ENLACES INACTIVOS ---------------------------------- */

/* Los grupos de acción, los botones y sus iconos se cargan desde `v4-interfaz.css`. */

.inactive-link {
  cursor: default;
}

.inactive-link::after {
  color: var(--v4-text-tertiary);
  font-weight: 400;
  content: " · Próximamente";
}

/* El rótulo es contenido generado, así que no viaja en el HTML traducido:
   cada lengua lo declara aquí. */

html[lang="ca"] .inactive-link::after {
  content: " · Pròximament";
}

html[lang="de"] .inactive-link::after {
  content: " · Demnächst";
}

html[lang="en"] .inactive-link::after {
  content: " · Coming soon";
}

html[lang="fr"] .inactive-link::after {
  content: " · Prochainement";
}

html[lang="it"] .inactive-link::after {
  content: " · Prossimamente";
}

/* 04) MARCOS Y MARCADORES EDITORIALES -------------------- */

.placeholder-square {
  aspect-ratio: 1;
}

/* 05) SECCIONES DE LA PORTADA ----------------------------- */

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 3rem;
}

.collection {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  flex-direction: column;
}

.collection-media {
  width: 100%;
  margin-bottom: 1.4rem;
}

.collection-media img {
  width: 100%;
  height: auto;
}

.collection .text-link {
  margin-top: auto;
  padding-top: 0.75rem;
}

.manual-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
}

.manual-copy {
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 4px solid var(--v4-ochre);
}

.manual-entry-actions {
  grid-column: 1 / -1;
  justify-content: center;
  margin-block: clamp(1rem, 3vw, 2rem);
}

.route-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--v4-petrol-border);
  background: var(--v4-petrol-border);
}

.route-card {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--v4-bg);
  flex-direction: column;
}

.route-card .text-link {
  margin-top: auto;
  padding-top: 1rem;
}

.route-number {
  color: var(--v4-ochre);
  font-family: var(--v4-font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
}

/* 06) ADAPTACIÓN ----------------------------------------- */

@media (min-width: 70rem) {
  .hero-copy .actions {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .hero-copy .button {
    padding-inline: 0.6rem;
    white-space: nowrap;
  }

  .hero-copy .button-icon-map {
    width: 2.5rem;
  }
}

@media (max-width: 50rem) {
  .hero-with-film,
  .manual-layout,
  .collection-grid,
  .route-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 38rem) {
  .hero-with-film {
    width: min(calc(100% - 2rem), var(--v4-shell));
  }
}