/*
 * 2026 archive: event pages (src/components/archive/ArchiveEventPage.astro) and their talk cards
 * (src/components/archive/TalkCard.astro). The talk pages keep their own Webflow styles.
 *
 * Wireframe level: layout, hierarchy and spacing on the site's type scale, colours and line system.
 * Lines follow atn-system.css: rows are .block-inner with is-line-* utilities; cells side by side
 * sit in an .is-divided grid flush inside the row (.archive-row has no padding), so every
 * separator is one line. Cells never draw their own borders.
 */

/* ---------------------------------------------------------------- rows */
/* Clears the fixed site header and the progress nav under it (.progress-nav: its top padding plus
   its 6.5em / 6em bar, per breakpoint, in atn-summit.webflow.css). Section links scroll each
   section to just below both bars. */
.page-wrapper.archive-page { --archive-top: 12.9em; padding-top: calc(var(--archive-top) + 2.6em); }
.archive-page [data-progress-nav-anchor] { scroll-margin-top: var(--archive-top); }
@media screen and (max-width: 991px) {
  .page-wrapper.archive-page { --archive-top: 11.1em; padding-top: var(--archive-top); }
}
@media screen and (max-width: 479px) {
  .page-wrapper.archive-page { --archive-top: 11em; }
}

/* Progress nav (Influence Day's component), toned down: a grey cell marks the section in view
   and its label turns from grey to white. */
.progress-nav__indicator.is-archive {
  border: 0;
  background-color: var(--darker-3);
}
.progress-nav.is-archive .btn-animate-chars__text {
  color: var(--lighter-1);
  transition: color .4s ease;
}
.progress-nav.is-archive .progress-nav__btn:hover .btn-animate-chars__text,
.progress-nav.is-archive .progress-nav__btn.is--active .btn-animate-chars__text {
  color: var(--white);
}
/* Phones: a long label ("Talks & Speakers") wraps onto two lines instead of being cut off. */
@media screen and (max-width: 479px) {
  .progress-nav.is-archive .btn-animate-chars,
  .progress-nav.is-archive .btn-animate-chars__text {
    white-space: normal;
    text-align: center;
    line-height: 1.1;
  }
  .progress-nav.is-archive .btn-animate-chars { padding: 0 .4em; }
}
.block-inner.archive-row {
  display: block;
  padding: 0;
}

/* ------------------------------------------------------- shared pieces */
/* "ATN Archive" in the intro label links back to /archive. */
.archive-label-link {
  color: inherit;
  text-decoration: none;
}
.archive-label-link:hover { color: var(--white); }
.archive-link {
  color: var(--white);
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-size: 1.4em;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: var(--line-width);
}
.archive-link:hover { color: var(--yellow); }
dd .archive-link { font-size: 1em; }
.archive-copy {
  max-width: 62ch;
  margin: 1.6em 0 0;
  color: var(--lighter-2);
  font-size: 1.6em;
  line-height: 1.5;
}
.archive-button {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1em 1.6em;
  border: 0;
  background-color: var(--darker-3);
  color: var(--white);
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-size: 1.5em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.archive-button:hover { background-color: var(--darker-1); }
.archive-button.is-primary {
  background-color: var(--yellow);
  color: var(--black);
}
.archive-button.is-primary:hover { background-color: var(--white); }
.archive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-top: 2.4em;
}
.archive-links__item:focus-visible,
.archive-button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--yellow);
}

/* Section headings: the home page's large heading (.is-h2) with its pixel letters (.is-h2-pixel). */
.archive-title .is-h2,
.archive-head__title .is-h2 { margin: 0; }

/* A section heading on its own row (Highlights). */
.block-inner.archive-title {
  justify-content: flex-start;
  padding: 4.8em 3.6em 4em;
}

/* Two cells: a heading and its text (Talks & Speakers). */
.archive-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.archive-head__title,
.archive-head__body { padding: 4em 3.6em; }
.archive-head__text {
  max-width: 46em;
  margin: 0;
}
.archive-head__text + .archive-head__text { margin-top: 1em; }

/* ------------------------------------------------------- event: intro */
.event-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.event-intro__heading,
.event-intro__text { padding: 4.8em 3.6em; }
.event-intro__heading {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4em;
}
.event-intro__title { margin: 0; }
/* The year's last two digits in the pixel font: digits are cap-height, so 1.07× (the home hero's
   capital match; page-hero.css), on the line without growing it. */
.is-h2-pixel.event-intro__pixel {
  font-size: 1.07em;
  line-height: 0;
}
.event-intro__lead { margin: 0; }
.event-intro__text .archive-button { margin-top: 3.2em; }

/* The event's looping film (bunny-background.js), full width of the frame, cover-cropped. */
.event-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  overflow: hidden;
  background-color: var(--darker-2);
}
.backgroud-video.event-video__player {
  position: absolute;
  inset: 0;
}

.event-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
  margin: 0;
}
.event-facts__item {
  display: flex;
  flex-direction: column;
  gap: .8em;
  padding: 2.4em 3.6em;
}
.event-facts__value {
  margin: 0;
  color: var(--white);
  font-size: 2em;
  line-height: 1.25;
}

/* ------------------------------------------------------- highlights gallery */
/* Four columns; the first photo takes a 2 × 2 block, the next four fill the rest, so five photos
   make two even rows. Photos fill their cells (cover). */
.photo-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 26em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.photo-mosaic__item {
  position: relative;
  overflow: hidden;
  background-color: var(--darker-2);
}
.photo-mosaic__item.is-large {
  grid-column: span 2;
  grid-row: span 2;
}
.photo-mosaic__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------- talks */
/* The list itself is the Talks page's (ScheduleRow, day tabs, filter buttons; their styles are
   in atn-summit.webflow.css, filter-buttons.css, tech-tag-pills.css). */
.archive-count {
  margin: 2em 0 0;
  color: var(--lighter-1);
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-size: 1.4em;
}
/* The day tabs stick below the site header and the progress nav, not just the header. */
.archive-page .tabs-menu { top: var(--archive-top); }

/* ------------------------------------------------------- closing links */
/* Under the Stay Updated box: the 2027 site, the archive, the other archived event. */
.archive-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22em, 1fr));
}
.archive-links__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: end;
  gap: .8em 2em;
  padding: 3.2em 3.6em;
  color: var(--white);
  text-decoration: none;
  transition: background-color .25s ease;
}
.archive-links__item:hover { background-color: var(--darker-3); }
.archive-links__item .is-txt-label { grid-column: 1; }
.archive-links__name {
  grid-column: 1;
  font-size: 2.4em;
  font-weight: 500;
  line-height: 1.1;
}
.archive-links__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.archive-next__text { margin: 0; }

/* ------------------------------------------------------- tablet */
@media screen and (max-width: 991px) {
  .block-inner.archive-title { padding: 3.6em 2.4em 3.2em; }
  .photo-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 24em; }
  .archive-head,
  .event-intro { grid-template-columns: 1fr; }
  .archive-head__title,
  .archive-head__body,
  .event-intro__heading,
  .event-intro__text { padding: 3.2em 2.4em; }
  .archive-head__title { padding-bottom: 2.4em; }
  .event-intro__heading { gap: 2em; }
  .event-facts__item { padding: 2.4em; }
  .archive-links__item { padding: 2.8em 2.4em; }
}

/* ------------------------------------------------------- mobile landscape */
@media screen and (max-width: 767px) {
  .event-facts { grid-template-columns: repeat(2, 1fr); }
  .event-facts__value { font-size: 1.8em; }
}

/* ------------------------------------------------------- mobile portrait */
@media screen and (max-width: 479px) {
  .archive-head__title,
  .archive-head__body,
  .event-intro__heading,
  .event-intro__text { padding: 2.8em 1.6em; }
  .event-facts__item { padding: 2em 1.6em; }
  .block-inner.archive-title { padding: 2.8em 1.6em; }
  .photo-mosaic { grid-auto-rows: 15em; }
  .archive-links__item { padding: 2.4em 1.6em; }
  .archive-links__name { font-size: 2.2em; }
  .archive-link,
  .archive-count { font-size: 1.5em; }
  .archive-copy { font-size: 1.7em; }
  .archive-button { font-size: 1.6em; }
}