/* Styling for the page blocks in tcupcore/blocks.py.
 *
 * Colours and fonts come from the site, through bootstrap's own custom
 * properties. The two variables below are the extra knobs these blocks
 * add, both with usable defaults.
 */

:root {
  /* Darkens a hero's background so light type stays readable over it,
   * whatever the picture turns out to be. */
  --tcup-hero-scrim: rgba(0, 0, 0, 0.4);

  /* Secondary face, used for the small subheadings in a blocklist. */
  --tcup-font-alt: inherit;
}

/* ---- Hero ------------------------------------------------------------ */

.heroblock {
  position: relative;
  /* A stacking context of its own, so the background video below can be
   * put behind the scrim without disappearing behind the page. */
  isolation: isolate;
}

/* Absolutely positioned so it stays out of the flow - and, since a hero
 * with a background is a flex container, out of the flex layout too,
 * rather than becoming an item alongside the content. */
.heroblock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tcup-hero-scrim);
  pointer-events: none;
}

/* Lift the content into the positioned layer so it paints over the scrim
 * rather than under it. */
.heroblock > * {
  position: relative;
}

/* The background video goes the other way - behind the scrim, so it is
 * darkened like a background image would be. */
.heroblock > video {
  z-index: -1;
}

/* Bootstrap's font scale stops at 2.5rem, which is meagre for a title
 * across a full-width picture. clamp covers a wider range without needing
 * a breakpoint for each step. */
.heroblock h1 {
  font-size: clamp(2rem, 5.5vw, 4.25rem);
}

/* The cue at the foot of a hero: a thin rule, centred, hinting that there
 * is more below. It positions against the section, which fills the hero. */
.btn-down {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3.75rem;
  height: 3.75rem;
  padding: 0 1.8rem;
  z-index: 1;
}

.btn-down::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 2px;
  background-color: currentcolor;
}

/* ---- Spacing between blocks ------------------------------------------
 *
 * Blocks set their own, rather than leaning on a rule for every section on
 * the page, so a page can mix them with sections of its own without
 * everything having to agree about spacing.
 */

.contentblock,
.textboxblock,
.blocklist {
  padding-top: 3.5rem;
}

/* ---- Text box -------------------------------------------------------- */

/* The short rule under a heading, rather than one spanning the box. */
hr.short {
  width: 4.20873rem;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.2;
}

/* ---- Block list ------------------------------------------------------ */

.font-alt {
  font-family: var(--tcup-font-alt) !important;
}

/* A companion panel that stays put while the list beside it scrolls. */
.sticky {
  position: sticky;
  top: 150px;
}