/* ==========================================================================
   banner.css — composant bannière (index + pages projet)
   Média (image ou vidéo) plein cadre, fade blanc "vitrine", texte dans
   un tiers. Par défaut : fade 40 % → 0 %, texte à droite.
   .banner--reverse : fade 0 % → 40 %, texte à gauche.
   Si la bannière est un lien (<a>), le média s'agrandit au survol.
   ========================================================================== */

.banner {
  /* Réglages */
  --fade-strong: 0.4;         /* opacité du blanc du côté "fort" du fade */
  --fade-weak: 0;             /* opacité du blanc du côté "faible" */
  --fade-direction: to right; /* du côté fort vers le côté faible */
  --content-column: 3;        /* tiers occupé par le texte */
  --content-align: end;       /* end = à droite, start = à gauche */
  --zoom: 1.06;               /* agrandissement du média au survol */

  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden; /* le média zoomé ne déborde pas */
  background: var(--color-surface); /* visible si le média manque */
  color: #fff;
  text-decoration: none;
}

.banner--reverse {
  --fade-direction: to left;
  --content-column: 1;
  --content-align: start;
}

/* Média : 100 % de la bannière */
.banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

a.banner:hover .banner__media,
a.banner:focus-visible .banner__media {
  transform: scale(var(--zoom));
}

/* Fade blanc "vitrine" */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--fade-direction),
    rgb(255 255 255 / var(--fade-strong)),
    rgb(255 255 255 / var(--fade-weak))
  );
  pointer-events: none;
}

.banner__content {
  position: relative;
  z-index: 1; /* au-dessus du fade */
  grid-column: var(--content-column);
  display: flex;
  flex-direction: column;
  align-items: var(--content-align);
  text-align: var(--content-align);
  padding: clamp(1.25rem, 5vh, 3.5rem) var(--gutter);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.25);
}

.banner__title {
  margin: 0 0 0.6em;
  font-family: var(--project-font-title, var(--font-sans));
  font-size: clamp(1.75rem, 2.2vw, 2.75rem);
  font-weight: var(--project-font-title-weight, 300);
  line-height: 1.1;
  text-shadow: 1px 1px 2px black;
}

.banner__text {
  margin: 0;
  font-family: var(--project-font-text, var(--font-sans));
  font-size: clamp(1.05rem, 1.5vw, 1.75rem);
  font-weight: 300;
  line-height: 1.2;
  text-shadow: 1px 1px 2px black;
}

a.banner:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Sur petit écran, le tiers est trop étroit : le texte prend toute la largeur */
@media (max-width: 760px) {
  .banner .banner__content {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner__media {
    transition: none;
  }
}