/*
 * Home hero (src/components/HomeHeroGrid.astro).
 * One .is-divided grid inside a framed row: every cell outlines itself, so each separator is a
 * single line. Cells are placed explicitly at each breakpoint; empty cells that a breakpoint
 * doesn't use are hidden.
 *   Desktop  6 × 5, sized to fit the screen: empty × 6 / empty × 3, date, place, arrow /
 *            headline (3 cols × 2 rows) beside the video (3 cols × 2 rows) / Join the list
 *            (2 cols), empty × 4.
 *            Balance: the video, with the dates and place above it, weighs the right; the globe
 *            (top left), the headline and the yellow Join the list (bottom left) answer it.
 *   Tablet   4 cols: 3 empty / date + place / headline / Join the list (3 cols) + empty / video.
 *   Phone    2 cols: 2 empty / date + place / headline / Join the list / video.
 */

.hero-grid {
  padding-top: 6.4em; /* the fixed site header */
  /* Transparent like the other sections, so the page's grain and gutter hatching show through. */
}
.block-inner.hero-grid__frame {
  display: block;
  padding: 0;
}

.hero-grid__cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* Rows go in grid-auto-rows: .is-divided resets grid-template-rows. Every row scales with the
     screen height, so the whole grid, Join the list row included, fits in the first screen:
     two shorter top rows, the headline/video rows, and a fixed row for the call to action. */
  grid-auto-rows: minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr) 14em;
  /* Stops just short of the screen bottom, so the grid's closing line shows. */
  height: calc(100svh - 8em);
  min-height: 56em;
  max-height: 110em;
}

.hero-grid__cell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 0;
  padding: 2.4em;
  color: var(--white);
}

/* ------------------------------------------------------------ placement (desktop) */
.hero-grid__cell.is-e0    { grid-area: 1 / 1 / 2 / 2; }
.hero-grid__cell.is-e1    { grid-area: 1 / 2 / 2 / 3; }
.hero-grid__cell.is-e2    { grid-area: 1 / 3 / 2 / 4; }
.hero-grid__cell.is-e3    { grid-area: 1 / 4 / 2 / 5; }
.hero-grid__cell.is-e4    { grid-area: 1 / 5 / 2 / 6; }
.hero-grid__cell.is-e5    { grid-area: 1 / 6 / 2 / 7; }
.hero-grid__cell.is-e6    { grid-area: 2 / 1 / 3 / 2; }
.hero-grid__cell.is-e7    { grid-area: 2 / 2 / 3 / 3; }
.hero-grid__cell.is-e8    { grid-area: 2 / 3 / 3 / 4; }
.hero-grid__cell.is-date  { grid-area: 2 / 4 / 3 / 5; }
.hero-grid__cell.is-where { grid-area: 2 / 5 / 3 / 6; }
.hero-grid__cell.is-arrow { grid-area: 2 / 6 / 3 / 7; }
.hero-grid__cell.is-title { grid-area: 3 / 1 / 5 / 4; }
.hero-grid__cell.is-video { grid-area: 3 / 4 / 5 / 7; }
.hero-grid__cell.is-cta   { grid-area: 5 / 1 / 6 / 3; }
.hero-grid__cell.is-e9    { grid-area: 5 / 3 / 6 / 4; }
.hero-grid__cell.is-e10   { grid-area: 5 / 4 / 6 / 5; }
.hero-grid__cell.is-e11   { grid-area: 5 / 5 / 6 / 6; }
.hero-grid__cell.is-e12   { grid-area: 5 / 6 / 6 / 7; }
.hero-grid__deco          { grid-area: 1 / 1 / 3 / 4; }

/* ------------------------------------------------------------ cells */
.hero-grid__meta {
  font-size: 2.2em;
  font-weight: 500;
  line-height: 1.05;
}
.hero-grid__meta { max-width: 7em; }

/* White dot with the pixel arrow (arrow cell). */
.hero-grid__dot {
  display: grid;
  place-items: center;
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  background-color: var(--white);
}
.hero-grid__dot-icon { width: 1.5em; }
/* The pixel arrow is drawn pointing up-right. */
.hero-grid__dot-icon.is-down-left { transform: rotate(180deg); }
/* The arrow sits at the bottom right of its cell, pointing down to the video. */
.hero-grid__cell.is-arrow { align-items: flex-end; }

.hero-grid__cell.is-title {
  gap: 2.4em;
  padding: 3.2em 3.6em;
}
.hero-grid__logos {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.6em 3.2em;
  margin-bottom: auto; /* logos at the top of the cell, headline at the bottom */
}
/* The headline is the page h1: no heading margin or weight. */
.page-hero__title.hero-grid__title {
  margin: 0;
  font-size: .6em; /* three lines within half the grid */
  font-weight: 400;
}

/* Stay Updated: the site's CTA box (.cta-block > .cta-wrapper > .btn-animate-chars.cta.yellow,
   as in the home page's closing call to action), filling its cell. Its hover (the yellow box
   grows to fill the cell) is the site interaction on .cta-block. The wrapper is a button (it
   opens the email pop-up); atn-custom.css resets the button defaults. */
.hero-grid__cell.is-cta {
  --cta-inset: 2em;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: 0;
}
/* The same inset on all four sides (instead of the usual 97% × 59%). */
.hero-grid__cell.is-cta .cta-wrapper {
  width: calc(100% - var(--cta-inset) * 2);
  height: calc(100% - var(--cta-inset) * 2);
}

/* Video box: the background loop, cover-cropped to the cell. */
.hero-grid__cell.is-video {
  padding: 0;
  overflow: hidden;
  background-color: var(--darker-2);
  cursor: pointer;
}
.hero-grid__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--darker-2);
}
.backgroud-video.hero-grid__video {
  position: absolute;
  inset: 0;
}

/* Scroll expansion (src/scripts/components/hero-expand.js, desktop only). The script sets
   --hx-x / --hx-y (the cell's offset in the grid), --hx-w / --hx-h (the grid's size) and scrubs
   --hx-p from 0 (the cell) to 1 (the whole grid, inside the frame and its gutters); the stage
   interpolates between the two. The cell lets it overflow and sits above the other cells while
   it grows; the grid clips the cells being pushed out (the frame draws the outer lines). */
.hero-grid__cells.is-expand-ready { overflow: clip; }
.hero-grid__cell.is-video.is-expandable {
  z-index: 3;
  overflow: visible;
}
.is-expandable > .hero-grid__stage {
  inset: auto;
  left: calc(var(--hx-x) * var(--hx-p) * -1);
  top: calc(var(--hx-y) * var(--hx-p) * -1);
  width: calc(100% + (var(--hx-w) - 100%) * var(--hx-p));
  height: calc(100% + (var(--hx-h) - 100%) * var(--hx-p));
}
/* The film (Vimeo, src/scripts/components/hero-film.js): hidden over the loop until the box is
   clicked (.is-film-active), then shown with its own controls. The iframe covers the stage at any
   size the stage grows to (16:9 film; container units, overriding the player script's inline
   sizing, which only updates on window resize). */
.hero-grid__cell.is-video[data-hero-film-trigger] { cursor: pointer; }
.hero-grid__cell.is-video.is-film-active { cursor: auto; }
.hero-grid__film {
  position: absolute;
  inset: 0;
  z-index: 1;
  container-type: size;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.is-film-active .hero-grid__film {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease;
}
.hero-grid__film .vimeo-player {
  position: absolute;
  inset: 0;
}
.hero-grid__film .vimeo-player__iframe {
  top: 50%;
  left: 50%;
  width: max(100cqw, 100cqh * 16 / 9) !important;
  height: max(100cqh, 100cqw * 9 / 16) !important;
  transform: translate(-50%, -50%);
}
.is-film-active .hero-grid__video-label {
  opacity: 0;
  pointer-events: none;
}
.hero-grid__video-label {
  transition: opacity .3s ease;
  position: absolute;
  left: 2.4em;
  bottom: 2.4em;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.2em;
}
.hero-grid__play {
  display: grid;
  place-items: center;
  width: 4.4em;
  height: 4.4em;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--black);
}
.hero-grid__play svg { width: 1.8em; height: 1.8em; margin-left: .2em; }

/* Globe behind the top-right cells, cropped by its area. Its outline, like every grid child's,
   lands on the cells' own lines. */
.hero-grid__deco {
  position: relative;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.globe.hero-grid__globe {
  position: absolute;
  width: 62%;
  left: -14%;
  top: 8%;
  color: var(--darker-1);
}

/* ------------------------------------------------------------ tablet */
@media screen and (max-width: 991px) {
  .hero-grid { padding-top: 6.5em; }
  .hero-grid__cells {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 16em 16em auto 12em auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .hero-grid__cell.is-e0    { grid-area: 1 / 1 / 2 / 3; }
  .hero-grid__cell.is-e1    { grid-area: 1 / 3 / 2 / 4; }
  .hero-grid__cell.is-e2    { grid-area: 1 / 4 / 2 / 5; }
  .hero-grid__cell.is-date  { grid-area: 2 / 1 / 3 / 3; }
  .hero-grid__cell.is-where { grid-area: 2 / 3 / 3 / 5; }
  .hero-grid__cell.is-title { grid-area: 3 / 1 / 4 / 5; }
  .hero-grid__cell.is-cta   { grid-area: 4 / 1 / 5 / 4; }
  .hero-grid__cell.is-e9    { grid-area: 4 / 4 / 5 / 5; }
  .hero-grid__cell.is-video { grid-area: 5 / 1 / 6 / 5; aspect-ratio: 16 / 9; }
  .hero-grid__deco          { grid-area: 1 / 3 / 2 / 5; }
  .hero-grid__cell.is-e3,
  .hero-grid__cell.is-e4,
  .hero-grid__cell.is-e5,
  .hero-grid__cell.is-e6,
  .hero-grid__cell.is-e7,
  .hero-grid__cell.is-e8,
  .hero-grid__cell.is-e10,
  .hero-grid__cell.is-e11,
  .hero-grid__cell.is-e12,
  .hero-grid__cell.is-arrow { display: none; }

  .hero-grid__meta { font-size: 3.2em; }
  .hero-grid__cell.is-title { min-height: 0; padding: 6em 3.6em 4em; }
  .page-hero__title.hero-grid__title { font-size: 4.3em; }
  .globe.hero-grid__globe { width: 70%; left: auto; right: -10%; top: 10%; }
}

/* ------------------------------------------------------------ mobile landscape */
@media screen and (max-width: 767px) {
  .page-hero__title.hero-grid__title { font-size: 3.3em; }
}

/* ------------------------------------------------------------ mobile portrait */
@media screen and (max-width: 479px) {
  .hero-grid { padding-top: 7.8em; }
  .hero-grid__cells {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 13em 13em auto 10em auto;
  }
  .hero-grid__cell { padding: 1.6em; }
  .hero-grid__cell.is-e0    { grid-area: 1 / 1 / 2 / 2; }
  .hero-grid__cell.is-e1    { grid-area: 1 / 2 / 2 / 3; }
  .hero-grid__cell.is-date  { grid-area: 2 / 1 / 3 / 2; }
  .hero-grid__cell.is-where { grid-area: 2 / 2 / 3 / 3; }
  .hero-grid__cell.is-title { grid-area: 3 / 1 / 4 / 3; padding: 4em 1.6em 3em; gap: 2em; }
  .hero-grid__cell.is-cta   { grid-area: 4 / 1 / 5 / 3; padding: 0; }
  .hero-grid__cell.is-video { grid-area: 5 / 1 / 6 / 3; }
  .hero-grid__deco          { grid-area: 1 / 2 / 2 / 3; }
  .hero-grid__cell.is-e2,
  .hero-grid__cell.is-e9 { display: none; }

  .hero-grid__meta { font-size: 2em; }
  .hero-grid__dot { width: 3.2em; height: 3.2em; }
  .page-hero__title.hero-grid__title { font-size: 2.2em; }
  .hero-grid__logos { gap: 1.4em 2.2em; }
  .hero-grid__video-label { left: 1.6em; bottom: 1.6em; }
  .hero-grid__play { width: 3.6em; height: 3.6em; }
  .globe.hero-grid__globe { width: 110%; left: auto; right: -40%; top: 5%; }
}