/* ==========================================
   HOTEL LEADERS NETWORK - design refinements
   Loaded only on the hln branch (client-functions.php). Every rule targets a class
   that already exists in the Bricks templates or Gutenberg content (`.frontpage-hero`,
   `.ambassadors`, `.sponsors`, `.icon-box`, block classes), so each block below can
   be moved into Bricks (element CSS / global class) or a Gutenberg block style
   without changing markup. Colours and spacing come from Core Framework tokens.

   Bricks prints its global-class CSS inline AFTER this file, so selectors are
   prefixed with `body` to outrank same-specificity Bricks rules.
   ========================================== */

/* ---- Browser surfaces ---- */
::selection {
  background: var(--secondary);
  color: var(--primary);
}

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
}

/* ---- Hero: YouTube background ----
   The embed draws its own title bar, share button, "more videos" tile and captions.
   Oversizing the iframe pushes that chrome outside the section (overflow hidden), and
   a navy scrim, solid at the bottom edge, keeps the blue wordmark and the button
   readable on a blue stage and hides any caption that still peeks in. */
body .frontpage-hero.brxe-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body .frontpage-hero .bricks-background-video-wrapper iframe {
  pointer-events: none;
  scale: 1.55;
  transform-origin: 50% 18%;
}

body .frontpage-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    hsl(198 100% 13.5% / 0.55) 0%,
    hsl(198 100% 13.5% / 0.28) 38%,
    hsl(198 100% 13.5% / 0.7) 80%,
    hsl(198 100% 13.5% / 1) 100%
  );
}

body .frontpage-hero > .brxe-container {
  position: relative;
  z-index: 2;
}

body .frontpage-hero .brxe-svg {
  filter: drop-shadow(0 2px 20px hsl(198 100% 8% / 0.55));
}

/* ---- Inner page hero (page title over a photo) ----
   Titles sat straight on busy event photos (slides, screens, faces). A navy veil plus
   a soft shadow makes the h1 readable on every edition page. */
body .page-hero.brxe-section {
  position: relative;
  isolation: isolate;
}

body .page-hero.brxe-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    hsl(198 100% 13.5% / 0.58) 0%,
    hsl(198 100% 13.5% / 0.72) 100%
  );
}

body .page-hero > .brxe-container {
  position: relative;
  z-index: 1;
}

body .page-hero__title {
  text-shadow: 0 2px 24px hsl(198 100% 8% / 0.6);
  text-wrap: balance;
}

/* ---- Contrast ----
   The brand blue (--secondary) is 3.0:1 on white: fine for large marks and for text on
   navy, too weak for body links and small labels on light grounds, and white text on
   it fails AA. Same hue, darker, for those cases only. */
body {
  --nmr-blue-text: hsl(198 100% 30%);
  --nmr-blue-fill: hsl(198 100% 34%);
}

body .brxe-post-content a:not(.wp-element-button):not(.wp-block-button__link):not(.bricks-button):not(:where(.bg-primary, .bg-dark, .has-primary-background-color) *),
body .brxe-post-content .wp-block-columns h3.text-secondary {
  color: var(--nmr-blue-text);
}

body .bricks-button.bricks-background-secondary,
body .wp-block-button__link.has-secondary-background-color {
  background-color: var(--nmr-blue-fill);
  color: var(--light);
}

body .bricks-button.bricks-background-secondary:hover,
body .bricks-button.bricks-background-secondary:focus-visible {
  background-color: var(--primary);
}

/* ---- Key facts strip (what / when / theme / where) ---- */
@media (min-width: 782px) {
  body .wp-block-columns:has(> .wp-block-column > .icon-box) > .wp-block-column + .wp-block-column {
    border-left: 1px solid hsl(198 100% 44% / 0.35);
    padding-left: var(--space-l);
  }
}

body .icon-box .content h3 {
  letter-spacing: 0.12em;
}

body .icon-box .content p {
  font-size: var(--text-l);
  font-weight: 600;
  color: var(--light);
}

/* ---- Reading measure and heading scale ---- */
body .brxe-post-content p.has-text-align-center {
  max-width: 62ch;
  margin-inline: auto;
  text-wrap: pretty;
}

body .brxe-post-content h2.wp-block-heading {
  font-size: var(--text-3xl);
  letter-spacing: 0.06em;
  text-wrap: balance;
}

body .brxe-post-content h3.wp-block-heading {
  text-wrap: balance;
}

/* Left-aligned copy under a centred heading (edition pages) ran the full 1280px, about
   150 characters a line. Keep a readable column, centred under its heading. */
body .brxe-post-content .wp-block-group:has(> h2.has-text-align-center) > p:not(.has-text-align-center) {
  max-width: 72ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* Image beside text (speakers, location, video + text): centre the shorter side
   against the taller one instead of leaving empty space under the text. */
@media (min-width: 782px) {
  /* !important: core sets `align-items: normal !important` on every Columns block. */
  body .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child):has(figure) {
    align-items: center !important;
  }
}

/* Rows of four or more people/facts: two-up on phones instead of one photo per screen. */
@media (max-width: 781px) {
  body .wp-block-columns:has(> .wp-block-column:nth-child(4)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l) var(--space-m);
  }

  body .wp-block-columns:has(> .wp-block-column:nth-child(4)) > .wp-block-column {
    flex-basis: auto !important;
    min-width: 0;
  }

  body .wp-block-columns:has(> .wp-block-column:nth-child(4)) > .wp-block-column:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - var(--space-m) / 2);
    justify-self: center;
  }
}

/* Value propositions: three statements in one row, with air above them. */
body .brxe-post-content .wp-block-columns:has(> .wp-block-column > h3.text-secondary) {
  margin-top: var(--space-xl);
}

body .brxe-post-content .wp-block-columns h3.text-secondary {
  font-size: var(--text-l);
  letter-spacing: 0.06em;
}

body .brxe-post-content .wp-block-columns h3.text-secondary + p {
  max-width: 34ch;
  margin-inline: auto;
}

/* ---- About band: video + accordion ----
   The YouTube embed is a 16:9 video in WordPress' 4:3 wrapper (black bars). */
body .wp-block-embed-youtube.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
  padding-top: 56.25%;
}

body .wp-block-embed-youtube .wp-block-embed__wrapper {
  border-radius: var(--radius-m);
  overflow: hidden;
}

body .bg-surface > .wp-block-columns {
  align-items: center !important;
}

/* ---- Raad van Advies ----
   auto-fit left a 5+2 grid. A centred flex wrap gives 4+3 with the last row centred
   on wide screens, and a compact portrait-left list on phones. */
body .ambassadors.brxe-block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl);
}

body .ambassadors__card.brxe-block {
  flex: 0 1 calc((100% - 3 * var(--space-xl)) / 4);
  min-width: 14rem;
  transition: box-shadow 0.4s ease-out, translate 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

body .ambassadors__card.brxe-block:hover,
body .ambassadors__card.brxe-block:focus-visible {
  translate: 0 -4px;
  box-shadow: 0 14px 28px -12px var(--shadow);
}

body .ambassadors__image.brxe-image {
  transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body .ambassadors__card.brxe-block:hover .ambassadors__image {
  scale: 1.03;
}

body .ambassadors__name.brxe-heading {
  text-wrap: balance;
}

@media (max-width: 640px) {
  body .ambassadors.brxe-block {
    gap: var(--space-s);
  }

  body .ambassadors__card.brxe-block {
    flex: 1 1 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: var(--space-m);
    row-gap: 0;
    padding: var(--space-s);
  }

  body .ambassadors__card .ambassadors__image {
    grid-row: 1 / span 2;
    width: 5.5rem;
    height: 5.5rem;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 0;
  }

  body .ambassadors__card .ambassadors__name {
    align-self: end;
  }

  body .ambassadors__card .text-s {
    align-self: start;
  }
}

/* ---- Partners ----
   An empty level (no sponsors for that year) must not print its heading plus
   "Geen sponsoren gevonden". Hide the whole level; the intro copy with the
   "become a partner" contact link stays, and gets room above the footer when the
   levels after it are hidden. */
body .brxe-post-content .wp-block-group:has(> .sponsors > .bricks-posts-nothing-found) {
  display: none !important;
}

body .brxe-post-content .wp-block-group:has(+ .wp-block-group > .sponsors > .bricks-posts-nothing-found) {
  padding-bottom: var(--space-3xl);
}

body .sponsors > .bricks-posts-nothing-found {
  display: none;
}

/* Logo walls: five across, with an incomplete last row centred instead of hugging the
   left edge (7 logos gave 5+2 on the left, 16 gave a single orphan). */
body .sponsors.brxe-block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

body .sponsors.brxe-block > * {
  flex: 0 1 calc((100% - 4 * var(--space-xl)) / 5);
  min-width: 9rem;
}

@media (prefers-reduced-motion: reduce) {
  body .ambassadors__card.brxe-block,
  body .ambassadors__image.brxe-image {
    transition: none;
  }

  body .ambassadors__card.brxe-block:hover,
  body .ambassadors__card.brxe-block:focus-visible,
  body .ambassadors__card.brxe-block:hover .ambassadors__image {
    translate: none;
    scale: none;
  }
}