/* Home-only styles. Shared section styles are in /css/sections.css. Brand colours come from the tokens
   (--brand, --brand-soft, --tint); no colour is hard-coded here except the hero's warm wash. */

/* Hero: warm wash behind the copy. The photo is 16:9 with the facilitator left of centre, so keep her in
   view when it is cropped to 4:3 (small screens) or bled to the right edge (desktop). */
[data-page="home"] .s-hero {
  background: radial-gradient(circle at 0 0, #fdf1e0 0, transparent 60%);
}

[data-page="home"] .s-hero .hero-photo img {
  object-position: 42% 40%;
}

/* The feature timeline follows the hero directly; trim the gap a little. */
[data-page="home"] .s-timeline {
  padding-top: 32px;
}

/* About: the overhead photo reads best on its upper half (faces and worksheets). */
[data-page="home"] .s-about img {
  object-position: 50% 35%;
}

/* Partner band and the press row read as one block. */
[data-page="home"] .s-logos:not(.is-compact) {
  padding-bottom: 28px;
}

[data-page="home"] .s-logos.is-compact {
  padding-bottom: 44px;
}

/* The journal photo is portrait: show its cover rather than the centre crop. */
[data-page="home"] .s-cards .card:last-child .card-media img {
  object-position: 50% 30%;
}

/* "Journey so far" films and the classroom clips sit on the same tint and read as one block. */
[data-page="home"] .s-youtube {
  padding-bottom: 20px;
}

[data-page="home"] .s-video {
  padding-top: 36px;
}

/* One landscape and one portrait clip: centre them against each other instead of top-aligning. */
[data-page="home"] .s-video .videos {
  align-items: center;
}

@media (min-width: 1000px) {
  [data-page="home"] .s-timeline {
    padding-top: 44px;
  }

  /* On desktop the photo covers the right 64% and fades in from the left: shift the crop so the facilitator
     sits clear of the fade and of the copy. */
  [data-page="home"] .s-hero .hero-photo img {
    object-position: 0 40%;
  }
}

/* Tablet: the single-column About photo would be very tall at 4:3, so show it as a wide band. */
@media (min-width: 600px) and (max-width: 999px) {
  [data-page="home"] .s-about .about-image {
    aspect-ratio: 16 / 9;
  }
}