/* 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;
}

/* ---- Gallery --------------------------------------------------------- */

.galleryblock .gallery-item {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* A fixed shape per cell, so a grid of mixed portrait and landscape
 * pictures is a grid rather than a staircase. The picture is cropped to
 * it rather than squashed. */
.galleryblock .gallery-frame {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
}

.galleryblock .gallery-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.galleryblock .gallery-item:hover .gallery-frame img {
  transform: scale(1.04);
}

/* Marks a cell as a video rather than a still. Drawn rather than an
 * icon font, so it needs nothing loaded to appear. */
.galleryblock .gallery-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.galleryblock .gallery-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.85rem;
  border-color: transparent transparent transparent #fff;
}

.galleryblock .gallery-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  line-height: 1.3;
}

/* The lightbox. Its contents are sized to the window rather than to
 * themselves, so a tall picture doesn't push the controls off the
 * bottom of the screen. */
.gallerymodal .modal-body {
  text-align: center;
  padding: 0;
  background-color: var(--bs-dark-bg-subtle);
}

.gallerymodal .modal-body img,
.gallerymodal .modal-body video {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
}