/* Event sites on a desktop: the layer over site.css and the components' stylesheets
 * from 1100px. Linked with media="(min-width: 1100px)" (web/site.py
 * Assets.DESKTOP_MEDIA), so a phone neither waits for it nor applies it; after the
 * components' stylesheets and before the template's, whose own sites/{name}.desktop.css
 * composes its hero.
 *
 * One container. Everything on the page -- a header bar's contents, the hero's
 * text and button, the sections, the chips, the grid, the footer -- shares one pair
 * of edges: --page-max (1440px, gutters included), centred, with 32px gutters. Those
 * are fixed here (:root:root, above a template's own tokens). A band that runs to
 * the window's edges (a cover, a header bar, the numbers' strip) pads its contents
 * to the same edges with --edge. Only running text is narrower: --measure, about
 * 70 characters a line.
 *
 * The hero is a band --hero-band tall (16:6 of the container's width inside its
 * gutters, 516px from 1440px): the cover across it, or the brand's color without
 * one, the title at --title-size (56 to 72px, the template's), and the template
 * places the title, the date and the search button over it or beside it. */

:root {
  --gallery-gap: 12px;
  --results-cols: 5;
  --title-size: 64px;
  --lead-size: 20px;
  --chip-size: 15px;
  --measure: 70ch;
}
:root:root {
  --gutter: 32px;
  --page-max: 1440px;
  --wide-max: 1440px;
  /* Resolved where it is used: on a band as wide as the window, the padding that
     puts its contents on the container's edges; on anything the container's width
     or narrower, the gutter. */
  --edge: max(var(--gutter), (100% - var(--page-max)) / 2 + var(--gutter));
  --hero-band: calc((min(100vw, var(--page-max)) - 2 * var(--gutter)) * 6 / 16);
}

/* The container is the wide width: the grid and the chips over it fill their
   section, which a template keeps at the container's width. */
:root .gallery, :root .moments, :root .sessions { --wide-w: 100%; }

/* --- The hero ----------------------------------------------------------------- */

:root .hero { min-height: var(--hero-band); }
:root .hero__title { font-size: var(--title-size); line-height: 1; }
:root .hero__eyebrow { font-size: 14px; }
:root .hero__date { font-size: 17px; }
:root .hero__scrim { height: 55%; }
/* The logo and the monogram tile grow with the band. */
:root .hero__logo { top: 32px; left: var(--edge); width: 72px; height: 72px; padding: 6px; }
:root .hero__logo--monogram { font-size: 22px; }
:root .hero__monogram { width: 96px; height: 96px; font-size: 34px; }
:root .hero__emblem { height: 80px; max-width: 320px; padding: 8px; }
/* The search button keeps a control's width beside the title, on one line. */
:root .cta .cta__button { min-width: 320px; min-height: 60px; font-size: 18px; white-space: nowrap; }

/* --- Sections ------------------------------------------------------------------ */

:root .text-block__body { max-width: var(--measure); font-size: 17px; }
:root .moment-chip { min-height: 44px; font-size: var(--chip-size); }
:root .moment-chip__cover { width: 34px; height: 34px; }
:root .chip { min-height: 40px; padding: 0 16px; font-size: var(--chip-size); }

/* Partners: one row at the container's width, the logos themselves with no tile
   behind each, sized by tier (a gold partner's 56px tall, the rest 36px), each in a slot of
   fixed width (200px, 280px for gold and the evening sponsor): the logos are lazy and have no
   size of their own until they load, so a slot sized by its logo would move the others. Tiered
   (Corporate), the gold group and the rest side by side, each under its label.
   (Every rule here is raised by :root: over a template's phone tiles and pills,
   and over a component's stylesheet that loads after it, deferred. A template may draw the strip
   in the first screen, Corporate's under the hero: its whole layout is here, so nothing moves
   when components/sponsors.css arrives.) */
:root .sponsors .sponsors__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 16px 56px; }
:root .sponsors .sponsors__item { flex: none; display: flex; min-width: 0; max-width: none; }
:root .sponsors .sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 44px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 600 15px/1.2 var(--sans);
  color: var(--muted);
}
:root .sponsors .sponsor img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
:root .sponsors :is(.sponsors__item--gold, .sponsors__item--evening) .sponsor { width: 280px; height: 64px; font-size: 19px; }
:root .sponsors--tiered { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 72px; }
:root .sponsors--tiered .sponsors__title--gold { grid-area: 1 / 1; }
:root .sponsors--tiered .sponsors__row--gold { grid-area: 2 / 1; }
:root .sponsors--tiered .sponsors__row + .sponsors__title { grid-area: 1 / 2; margin-top: 0; }
:root .sponsors--tiered .sponsors__title + .sponsors__row:not(.sponsors__row--gold) { grid-area: 2 / 2; }