/* Diván: composición de la página de carta. Requiere tokens, base, components y site. */

/* Lo que salta el índice fijo: los destinos y el foco no quedan debajo de él */
.carta-page {
  scroll-padding-top: 5rem;
}

.carta-head {
  margin-top: -1px;
  padding: var(--space-2) var(--gutter) var(--gap-block);
}

.carta-head__banner {
  max-width: 40rem;
}

/* ---------- Índice fijo ---------- */

.carta-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: var(--space-2) var(--gutter);
  border-bottom: 1px solid var(--line);
}

/* Una sola línea desde 320 px. Con el texto ampliado baja a dos, sin desbordar. */
.carta-index {
  gap: var(--space-1);
}

.carta-index li {
  flex: 1 1 auto;
}

.carta-index .button {
  width: 100%;
  padding-inline: var(--space-2);
}

@media (max-width: 24rem) {
  .carta-index .button {
    padding-inline: var(--space-1);
    font-size: var(--text-small);
  }
}

/* Página muy ampliada: el índice ya no cabe en una línea y deja de seguir al scroll */
@media (max-width: 19.9rem) {
  .carta-bar {
    position: static;
  }
}

@media (min-width: 48rem) {
  .carta-index {
    gap: var(--space-2);
  }

  .carta-index li {
    flex: none;
  }

  .carta-index .button {
    width: auto;
    padding-inline: var(--space-5);
  }
}

/* ---------- Cada carta ---------- */

/* Un enlace a una carta deja su título justo bajo el índice, sin el aire de sección */
.carta-section {
  scroll-margin-top: calc(var(--space-2) - var(--gap-section));
}

.carta-section + .carta-section {
  border-top: 1px solid var(--line);
}

.carta-section__title {
  margin-bottom: var(--gap-block);
}

.carta-section__body {
  display: grid;
  gap: var(--gap-block);
}

/* Columnas de periódico: las secciones de distinta altura no dejan huecos */
.carta-section__grid {
  columns: 3 22rem;
  column-gap: var(--gap-section);
}

.carta-section__grid > .menu-section {
  margin-bottom: var(--gap-block);
  break-inside: avoid;
}

.carta-section__body .menu-section__title {
  margin-bottom: var(--space-4);
}

/* ---------- Menús de grupo ---------- */

.carta-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.carta-groups {
  display: grid;
  gap: var(--space-3);
}

.carta-group {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.carta-group__title {
  grid-column: 1 / -1;
}

/* ---------- Avisos al comienzo de una carta ---------- */

.carta-notes {
  display: grid;
  gap: var(--space-2);
  max-width: 65ch;
}