/* ==========================================================================
   Connect sessions hero
   After stripesessions.com: a large title with date and venue on the right, a panel
   with the looping background video that runs almost to the edges of the screen, and
   the "Over Connect" part with a statement that darkens on scroll, the buttons and a
   video spot. Like the example, everything sits on one grid with a 16px margin, at most
   1696px wide: 24 columns on desktop, 12 on tablets, 8 on phones, so the title, the
   date, "Over Connect" and the text all line up with the edges of the panel.
   Allerta and Amiko, magenta buttons with the grey hover, 9px corners.
   ========================================================================== */

.csh {
  --csh-accent-rgb: 236, 0, 140;
  --csh-bg: #f1f4f9;                 /* Mavim mist */
  --csh-ink: #03060c;                /* Connect dark ground */
  --csh-text: #333333;               /* title, date and venue, "Over Connect" and the statement */
  --csh-muted: #b9c0cc;              /* the statement before it darkens */
  --csh-meta: #505356;               /* Mavim graphite */
  --csh-tile: #e3e8f1;               /* panel while the video loads */
  --csh-ghost: #03060c;

  /* The grid of this hero, measured on the example: a 16px margin, at most 1696px
     wide (centred on larger screens), and font sizes that grow with the screen. */
  --csh-edge: 16px;                  /* margin to the edge of the screen */
  --csh-wide: 1696px;                /* widest the grid gets */
  --csh-cols: 8;                     /* 12 on tablets, 24 on desktop (see below) */
  --csh-gap: 32px;                   /* title, date and panel; 48px on desktop */
  --csh-h2: clamp(3rem, 1rem + 3.125vw, 3.75rem);         /* 48px to 60px */
  --csh-statement: clamp(1.5rem, 0.9rem + 1.25vw, 2rem);  /* 24px to 32px */

  position: relative;
  isolation: isolate; /* keeps the module's layers inside, so the site menu stays on top */
  container: csh / inline-size;
  /* Full width, whatever column the module sits in (--csh-vw is set by module.js). */
  width: 100vw;
  width: var(--csh-vw, 100vw);
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-left: calc(50% - var(--csh-vw, 100vw) / 2);
  margin-right: 0;
  padding: clamp(48px, 5.2vw, 80px) 0 clamp(56px, 5.2vw, 80px);
  background: var(--csh-bg);
  color: var(--csh-text);
  font-family: "Amiko", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Breakpoints as in the example: screens from 768px and 1280px wide. The section is
   measured without the scrollbar, so the thresholds are 16px lower. */
@container csh (min-width: 752px) {
  .csh__inner {
    --csh-cols: 12;
  }
}

@container csh (min-width: 1264px) {
  .csh__inner {
    --csh-cols: 24;
    --csh-gap: 48px;
  }
}

.csh--wit {
  --csh-bg: #ffffff;
  --csh-tile: #f1f4f9;
}

.csh--donker {
  --csh-bg: #03060c;
  --csh-ink: #ffffff;
  --csh-text: #ffffff;
  --csh-muted: #3a404c;
  --csh-meta: rgba(255, 255, 255, 0.72);
  --csh-tile: #11141b;
  --csh-ghost: #ffffff;
}

.csh,
.csh *,
.csh *::before,
.csh *::after {
  box-sizing: border-box;
}

.csh ::selection {
  background: rgb(var(--csh-accent-rgb));
  color: #fff;
}

.csh__inner {
  max-width: calc(var(--csh-wide) + 2 * var(--csh-edge));
  margin: 0 auto;
  padding: 0 var(--csh-edge);
}

/* The head and the "Over Connect" part share the same columns, so they line up. */
.csh__head,
.csh__about {
  display: grid;
  grid-template-columns: repeat(var(--csh-cols), minmax(0, 1fr));
  column-gap: 0;
}

/* Mavim fonts, also when the site's theme forces its own on headings, text and buttons
   (the Connect theme sets Poppins, with !important). */
.csh .csh__title,
.csh .csh__about-title,
.csh .csh__statement {
  font-family: "Allerta", sans-serif !important;
  font-weight: 400 !important;
}

.csh .csh__meta,
.csh .csh__meta dd,
.csh .csh__btn,
.csh .csh__hint {
  font-family: "Amiko", sans-serif !important;
}

/* --- Title with date and venue ---------------------------------------------
   The head is a container, so the title can size itself to its columns:
   --csh-chars is the length of the longest | line (module.html) and an Allerta letter
   is about 0.53em wide. --csh-title-cols is the share of the width the title gets. */

.csh__head {
  container: csh-head / inline-size;
  row-gap: var(--csh-gap);
  --csh-title-cols: 1;
  /* 80px at 1024, 100px from about 1536; never wider than its columns. */
  --csh-title-size: min(clamp(3.75rem, 2.4rem + 4.1vw, 6.25rem), calc(100cqw * var(--csh-title-cols) / (var(--csh-chars, 12) * 0.53)));
}

.csh__title-box {
  grid-column: 1 / -1;
  min-width: 0;
}

.csh .csh__title {
  margin: 0;
  padding: 0;
  max-width: none;
  font-style: normal;
  /* Phones: the lines flow and balance. */
  font-size: clamp(2.75rem, 14cqw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: none;
  text-wrap: balance;
  color: var(--csh-text);
}

/* From tablets on every | starts a new line, and the longest line fits its columns. */
@container csh (min-width: 752px) {
  .csh .csh__title {
    font-size: var(--csh-title-size);
    line-height: 0.9;
  }

  .csh__line {
    display: block;
  }
}

/* Date and venue: below the title on phones and tablets, beside it on desktop.
   No visible labels (they're for screen readers). */
.csh .csh__meta {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 3fr 5fr;    /* phones: date over 3 of 8 columns */
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.2;
  color: var(--csh-text);
}

@container csh (min-width: 752px) {
  .csh .csh__meta {
    grid-template-columns: 2fr 10fr; /* tablets: date over 2 of 12 columns */
  }
}

/* Desktop: title over columns 1-17, date from column 18, venue from column 21. The
   date and venue end level with the first line of the title. */
@container csh (min-width: 1264px) {
  .csh__head {
    --csh-title-cols: 17 / 24;
  }

  .csh__title-box {
    grid-column: 1 / 18;
  }

  .csh .csh__meta {
    grid-column: 18 / -1;
    grid-template-columns: 3fr 4fr;
    align-self: start;
    margin-top: max(0px, calc(var(--csh-title-size) * 0.9 - 2.4em));
  }
}

.csh .csh__meta-item {
  margin: 0;
  padding: 0 16px 0 0;
}

.csh .csh__meta dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.csh .csh__meta dd {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* --- Panel with the background video, across all columns ------------------------ */

.csh__stage {
  position: relative;
  margin-top: var(--csh-gap);
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: 9px;
  background: var(--csh-tile);
}

/* The video sits a little zoomed in and settles as you scroll (module.js sets --csh-zoom). */
.csh__zoom {
  position: absolute;
  inset: 0;
  transform: scale(var(--csh-zoom, 1));
  transform-origin: 50% 50%;
}

.csh .csh__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* --- Over Connect ------------------------------------------------------------------
   Phones: stacked. Tablets: heading over columns 1-4, the rest over 5-12.
   Desktop: heading over columns 1-7, the rest over 9-21, and 9-20 from 1536px. */

.csh__about {
  row-gap: 32px;
  margin-top: 64px;
}

.csh__about > * {
  grid-column: 1 / -1;
  min-width: 0;
}

@container csh (min-width: 752px) {
  .csh .csh__about > .csh__about-title {
    grid-column: 1 / 5;
    padding-right: 24px;             /* room before the text column */
  }

  .csh__about > .csh__about-body {
    grid-column: 5 / -1;
  }
}

/* Up to a 1536px screen the text runs one column further (9-21), as in the example. */
@container csh (min-width: 1264px) {
  .csh .csh__about > .csh__about-title {
    grid-column: 1 / 8;
  }

  .csh__about > .csh__about-body {
    grid-column: 9 / 22;
  }
}

@container csh (min-width: 1520px) {
  .csh__about > .csh__about-body {
    grid-column: 9 / 21;
  }
}

.csh .csh__about-title {
  margin: 0;
  padding: 0;
  font-size: var(--csh-h2);
  font-style: normal;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: none;
  text-wrap: balance;
  color: var(--csh-text);
}

.csh .csh__statement {
  margin: 0;
  padding: 0;
  font-size: var(--csh-statement);
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--csh-text);
}

/* Darkens as it scrolls past, like a line being read (module.js sets --csh-reveal from
   0 to 1). Without JavaScript, or with reduced motion, it simply stays dark. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .csh.is-fx .csh__statement {
    background-image: linear-gradient(175deg, var(--csh-text) calc(var(--csh-reveal, 1) * 114% - 14%), var(--csh-muted) calc(var(--csh-reveal, 1) * 114%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.csh__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* Same buttons as the other Connect modules. */
.csh .csh__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: none;
  text-decoration: none;
  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear, transform 0.15s linear;
}

.csh .csh__btn--primary {
  border: 1px solid rgb(var(--csh-accent-rgb));
  background: rgb(var(--csh-accent-rgb));
  color: #fff;
}

.csh .csh__btn--ghost {
  border: 1px solid var(--csh-ghost);
  background: transparent;
  color: var(--csh-ghost);
}

.csh .csh__btn:hover,
.csh .csh__btn:focus-visible {
  border-color: #999;
  background: #999;
  color: #fff;
  text-decoration: none;
  transform: scale(1.05);
}

.csh .csh__btn:focus-visible {
  outline: 2px solid var(--csh-ink);
  outline-offset: 3px;
}

/* --- Video spot, as wide as the text ---------------------------------------------- */

.csh__spot {
  position: relative;
  margin-top: 48px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 9px;
  background: var(--csh-tile);
}

.csh .csh__spot-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
  background: #000;
}

/* Full screen bottom left; pause and sound bottom right. */
.csh__spot-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.csh__spot-group {
  display: flex;
  gap: 8px;
}

/* --- Round video buttons (spot and background) ------------------------------------ */

.csh .csh__ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(3, 6, 12, 0.42);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.15s linear;
}

.csh .csh__ctrl:hover,
.csh .csh__ctrl:focus-visible {
  background: rgb(var(--csh-accent-rgb));
}

.csh .csh__ctrl:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.csh__ctrl svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.csh__ctrl .csh__stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.csh .csh__ctrl--corner {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
}

.csh__icon-play,
.csh__icon-sound,
.csh__ctrl.is-paused .csh__icon-pause,
.csh__ctrl.is-on .csh__icon-muted {
  display: none;
}

.csh__ctrl.is-paused .csh__icon-play,
.csh__ctrl.is-on .csh__icon-sound {
  display: block;
}

/* --- Editor hint ------------------------------------------------------------------- */

.csh .csh__hint {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 30rem;
  margin: 0;
  padding: 10px 14px;
  border: 1px dashed rgb(var(--csh-accent-rgb));
  border-radius: 9px;
  font-size: 13px;
  text-align: center;
  color: var(--csh-meta);
  transform: translate(-50%, -50%);
}

.csh__about .csh__hint {
  position: static;
  margin-top: 32px;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .csh .csh__btn {
    transition: none;
  }

  .csh .csh__btn:hover,
  .csh .csh__btn:focus-visible {
    transform: none;
  }
}