/* ==========================================================================
   Chœur Polycantus — 02-layout.css

   Ossature des pages : conteneurs, bandes, grilles et rangées « damier ».
   
   `.split` est le motif structurant repris de l'original : deux colonnes pleine
   largeur, texte d'un côté, image sur fond coloré de l'autre, l'alternance
   s'inversant d'une rangée à l'autre.
   ========================================================================== */

.shell {
  width: min(100% - 2.5rem, var(--page-max));
  margin-inline: auto;
}

.band {
  padding-block: var(--band-y);
}

.band--tight {
  padding-block: calc(var(--band-y) * 0.6);
}

.band--grey {
  background: #f4f6f7;
}

.band--teal {
  background: var(--teal-deep);
  color: rgba(255, 255, 255, 0.92);
}

.band--teal h1,
.band--teal h2,
.band--teal h3,
.band--teal h4 {
  color: var(--white);
}

.band--teal a {
  color: var(--mint);
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--teal);
  color: var(--white);
  padding: 0.6rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.split__panel {
  padding: clamp(2.5rem, 3vw, 4rem) var(--panel-x);
  display: flex;
  flex-direction: column;
  /* Texte calé en haut, comme l'original : la hauteur de la rangée vient de
     l'affiche, l'espace libre reste sous le texte. */
  justify-content: flex-start;
}

.split__panel > :last-child {
  margin-bottom: 0;
}

.split__panel--white {
  background: var(--white);
}

.split__panel--teal {
  background: var(--teal-deep);
  color: rgba(255, 255, 255, 0.92);
}

.split__panel--slate {
  background: var(--slate);
  color: rgba(255, 255, 255, 0.94);
}

.split__panel--grey {
  background: #f4f6f7;
}

.split__panel--teal h2,
.split__panel--teal h3,
.split__panel--slate h2,
.split__panel--slate h3 {
  color: var(--white);
}

/* Panneau d'image : l'affiche est centrée et respire. */
.split__panel--media {
  align-items: center;
  justify-content: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.split__panel--media img {
  /* Affiches affichées presque à leur taille réelle, comme l'original (560 à 660 px). */
  max-width: min(100%, 42rem);
  box-shadow: 0 10px 30px rgba(0, 46, 79, 0.22);
}

/* Le texte d'un panneau reste dans une colonne lisible. */
.split__body {
  width: 100%;
  max-width: 52rem;
  margin-inline: 0;
}

/* Inverse l'ordre visuel sans toucher à l'ordre du document. */
.split--media-first .split__panel--media {
  order: -1;
}

.grid {
  display: grid;
  gap: 2rem;
}

.grid--three {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}

.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  align-items: start;
}

/* Deux colonnes à l'intérieur d'une bande centrée (fiches concert, agenda). */
.grid--two {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  align-items: start;
}

@media (max-width: 900px) {
    .split {
      grid-template-columns: 1fr;
    }

    /* Sur mobile, l'image repasse toujours au-dessus du texte. */
    .split--media-first .split__panel--media,
    .split .split__panel--media {
      order: -1;
    }
}