/*
  Home page: hero + four teasers, each a preview of its section.
*/

.page-home {
  padding-inline: max(var(--space-md), calc((100vw - var(--width-content)) / 2));
}

/* ---- Hero ---- */
.page-home > .hero {
  text-align: center;
  padding-block: var(--space-4xl) var(--space-5xl);
  max-inline-size: var(--width-content);
  margin-inline: auto;
}
.page-home > .hero > h1 {
  margin-block: var(--space-xl) var(--space-3xl);
  letter-spacing: -.01em;
  /* Two stacked shadows, no blur: a white 1px highlight sitting over a 2px brand drop. */
  text-shadow: 0 1px 0 white, 0 2px 0 var(--brand);
}
.page-home > .hero > figure { max-inline-size: var(--width-hero); margin: 0 auto var(--space-3xl); border-radius: var(--radius-lg); overflow: hidden; }
.page-home > .hero > .tagline {
  font-size: var(--text-lead);
  transform: skew(-8deg);
  max-inline-size: var(--width-narrow);
  margin: var(--space-2xl) auto;
  line-height: 1.5;
  text-align: left;
}
.page-home > .hero > .intro {
  max-inline-size: var(--width-narrow);
  margin: var(--space-xl) auto 0;
  color: var(--ink-muted);
  line-height: 1.8;
  text-align: left;
}

/* ---- Teaser grid ---- */
.page-home > .teasers {
  list-style: none;
  margin: 0 auto;
  padding: 0 0 var(--space-4xl);
  max-inline-size: var(--width-content);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-lg);
}
.page-home > .teasers > .teaser {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  min-inline-size: 0;                 /* let overflowing content shrink to fit column */
  container-type: inline-size;        /* enables cqi units in children */
  container-name: teaser;
}
/* Title shrinks with the card's own width — stays readable even at narrow widths
   where "Événements" / "Participate" would otherwise overflow. */
.page-home .teaser > h2 {
  margin: 0;
  font-size: clamp(1.1rem, 14cqi, var(--text-h2));
  line-height: 1.1;
}
.page-home .teaser > .more {
  align-self: start;
  margin-block-start: auto;           /* stick CTA to the bottom of the card */
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}
.page-home .teaser > .more:hover { text-decoration: underline; }

/* The venue logo on event cards is clutter on the smaller homepage preview. */
.page-home .venue-logo { display: none; }

/* ---- Teaser-specific tweaks ---- */

/* The reused event / project card picks up its own CSS; limit its max width inside the teaser */
.page-home .teaser > .event,
.page-home .teaser > .project { max-inline-size: 100%; }

/* Principles & participate: condensed summary lists */
.page-home .teaser > .summary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.page-home .teaser > .summary > li > a {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  color: var(--ink-body);
  text-decoration: none;
  padding-block: .25rem;
  border-block-end: 1px solid var(--border-light);
  line-height: 1.4;
}
.page-home .teaser > .summary > li:last-child > a { border-block-end: 0; }
.page-home .teaser > .summary > li > a:hover { color: var(--brand); }

/* ---- Partners strip ---- */

.page-home > .partners {
  padding-block: var(--space-3xl) var(--space-4xl);
  text-align: center;
}
.page-home > .partners > h2 {
  font-family: var(--font-ui);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-block-end: var(--space-xl);
}
.page-home > .partners > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xl);
}
.page-home > .partners img {
  display: block;
  block-size: 3.5rem;
  inline-size: auto;
  max-inline-size: 14rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .65;
  transition: filter var(--duration-slow), opacity var(--duration-slow);
}
/* La REcyclerie's wordmark is proportionally smaller — bump it 2x to balance. */
.page-home > .partners > ul > li.partner-recyclerie img { block-size: 7rem; }
.page-home > .partners a:hover img { filter: grayscale(0); opacity: 1; }