/* OCEX Hero Banner - full-width hero with live HTML text.
   Desktop (768px and up): the text sits over the calm side of the image, lined up with the
   page container, on a soft shade for legibility. Phones: the text moves below the image,
   so the picture is never covered or cropped. Controls follow OCEX Banner: thin line dots,
   arrows only on hover. Own namespace only (.ocex-hero...); the single page-level rule is
   the overflow-x clip on pages that show a full-width hero (the OCEX Rows technique). */

.ocex-hero {
  position: relative;
  /* 100cqw inside = the width of the page container: a full-width hero lines its text up with it */
  container-type: inline-size;
  margin: 0 0 30px;
}

/* --- full width: break out of the page container ----------------------- */
.ocex-hero--full .ocex-hero-frame {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 100vw includes the vertical scrollbar, so the frame overhangs the viewport by its width:
   clip it on the page level, but only on pages that show a full-width hero. clip (unlike
   hidden) creates no scroll container, so position: sticky keeps working. */
html:has(.ocex-hero--full) {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html:has(.ocex-hero--full) { overflow-x: hidden; }
}

/* An OCEX Rows cell clips its own sideways overflow (against stray third-party modules), which
   cut the breakout back to the cell on the live homepage: a cell that holds a full-width hero
   lets it through. The page-level clip above still keeps the page from scrolling sideways. */
.ocex-row-cell:has(.ocex-hero--full) {
  overflow-x: visible;
}

/* --- slider ------------------------------------------------------------- */
.ocex-hero-frame { position: relative; }
.ocex-hero-vp { overflow: hidden; }
.ocex-hero-tray {
  display: flex;
  touch-action: pan-y pinch-zoom;
}
.ocex-hero-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
}

/* --- image -------------------------------------------------------------- */
.ocex-hero-media {
  position: relative;
  /* a set width: with an auto width, aspect-ratio would carry a max height over to the width and the
     box would get narrower instead of cropping the image */
  width: 100%;
  aspect-ratio: var(--ocex-hero-ar, 2 / 1);
  /* optional limit for very wide screens: the image is cropped evenly at the top and bottom */
  max-height: var(--ocex-hero-max, none);
  overflow: hidden;
  background: #eef0f3;
}
.ocex-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* --- text --------------------------------------------------------------- */
/* the theme's h2 look (padding, accent bar on the left, light colour in dark mode) is left off: the
   hero has its own type. Two classes, so it beats the theme's [data-ocex-theme="dark"] h2 colour. */
.ocex-hero .ocex-hero-title {
  margin: 0 0 .35em;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: clamp(22px, 1.7vw + 13px, 48px);
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
}
.ocex-hero-text {
  margin: 0;
  font-size: clamp(15px, .45vw + 11px, 19px);
  line-height: 1.5;
}
/* two classes here as well: the theme's [data-ocex-theme="dark"] a colour would win over one */
.ocex-hero .ocex-hero-btn {
  display: inline-block;
  margin-top: 1.1em;
  padding: .75em 1.6em;
  border-radius: 6px;
  background: var(--dide, #ed1e24);
  color: #fff;
  font-size: clamp(15px, .3vw + 12px, 17px);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: none;
  transition: filter .15s;
  -webkit-user-drag: none;
}
.ocex-hero .ocex-hero-btn:hover,
.ocex-hero .ocex-hero-btn:focus {
  color: #fff;
  text-decoration: none;
  filter: brightness(.9);
}

/* With a link the whole slide is clickable: the button (or an empty link when the slide has no
   button label) stretches over the slide. Embla swallows the click that ends a drag. */
.ocex-hero-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ocex-hero-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- desktop: the text over the image ----------------------------------- */
@media (min-width: 768px) {
  /* "Fill the screen": the image box ends at the bottom of the first screen, so nothing hangs below
     it. --ocex-hero-top (everything above the hero) comes from the small script after the hero
     markup. The box only ever shrinks (the image is cropped evenly at the top and bottom), never
     below 360px, and a max height in px still applies. */
  .ocex-hero--fit .ocex-hero-media {
    max-height: min(var(--ocex-hero-max, 9999px), max(360px, calc(100vh - var(--ocex-hero-top, 0px))));
  }
  /* tablets: svh = the screen with the browser bars shown */
  @supports (height: 100svh) {
    .ocex-hero--fit .ocex-hero-media {
      max-height: min(var(--ocex-hero-max, 9999px), max(360px, calc(100svh - var(--ocex-hero-top, 0px))));
    }
  }
  .ocex-hero-copy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 48px;
    pointer-events: none;
  }
  /* a full-width hero lines its text up with the page content (without container units: 48px) */
  .ocex-hero--full .ocex-hero-copy {
    padding-left: max(24px, (100vw - 100cqw) / 2);
    padding-right: max(24px, (100vw - 100cqw) / 2);
  }
  .ocex-hero-slide--right .ocex-hero-copy { justify-content: flex-end; }
  .ocex-hero-box {
    width: 42%;
    min-width: 320px;
    max-width: 600px;
    pointer-events: auto;
  }
  .ocex-hero-slide--light .ocex-hero-box {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  }
  .ocex-hero-slide--dark .ocex-hero-box { color: #161b22; }

  /* soft shade on the text side, for legibility on any image */
  .ocex-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .ocex-hero-slide--light .ocex-hero-media::after {
    background: linear-gradient(90deg, rgba(12, 16, 22, .55) 0%, rgba(12, 16, 22, .3) 35%, rgba(12, 16, 22, 0) 62%);
  }
  .ocex-hero-slide--light.ocex-hero-slide--right .ocex-hero-media::after {
    background: linear-gradient(270deg, rgba(12, 16, 22, .55) 0%, rgba(12, 16, 22, .3) 35%, rgba(12, 16, 22, 0) 62%);
  }
  .ocex-hero-slide--dark .ocex-hero-media::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .5) 35%, rgba(255, 255, 255, 0) 62%);
  }
  .ocex-hero-slide--dark.ocex-hero-slide--right .ocex-hero-media::after {
    background: linear-gradient(270deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .5) 35%, rgba(255, 255, 255, 0) 62%);
  }
}

/* --- phones: the text below the image ----------------------------------- */
@media (max-width: 767px) {
  .ocex-hero-copy { padding: 14px 0 2px; }
  .ocex-hero--full .ocex-hero-copy {
    padding-left: 15px;
    padding-right: 15px;
    padding-left: max(15px, (100vw - 100cqw) / 2);
    padding-right: max(15px, (100vw - 100cqw) / 2);
  }
}

/* --- arrows: desktop only, on hover only -------------------------------- */
.ocex-hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: #2b3440;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .18s;
}
.ocex-hero-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ocex-hero-prev { left: 16px; }
.ocex-hero-next { right: 16px; }
/* a full-width frame overhangs the viewport by half a scrollbar on each side: keep ~16px visible */
.ocex-hero--full .ocex-hero-prev { left: 24px; }
.ocex-hero--full .ocex-hero-next { right: 24px; }
.ocex-hero:hover .ocex-hero-arrow,
.ocex-hero-arrow:focus-visible { opacity: 1; }
.ocex-hero-arrow:hover { background: #fff; }
.ocex-hero-arrow[hidden] { display: none; }
@media (max-width: 767px), (hover: none) {
  .ocex-hero-arrow { display: none; }
}

/* --- line dots: a 3px bar inside a taller, easier to tap button ---------- */
/* background-color only: the background shorthand would reset the content-box clip */
.ocex-hero-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 4px 0 0;
}
.ocex-hero-dot {
  width: 18px;
  height: 19px;
  padding: 8px 0;
  border: 0;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, .18);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color .15s;
}
.ocex-hero-dot.on { background-color: var(--dide, #ed1e24); }

/* desktop: the dots sit on the image, near its bottom edge; a light bar with a thin dark halo
   (drop-shadow follows the painted 3px bar) shows on light and dark pictures alike */
@media (min-width: 768px) {
  .ocex-hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 2;
    padding: 0;
    pointer-events: none;
  }
  .ocex-hero-dot {
    background-color: rgba(255, 255, 255, .9);
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .55));
    pointer-events: auto;
  }
}

/* --- dark mode ---------------------------------------------------------- */
[data-ocex-theme="dark"] .ocex-hero-media { background: #262a33; }
/* phones only: there the dots sit on the page; on desktop they are on the image in both themes */
@media (max-width: 767px) {
  [data-ocex-theme="dark"] .ocex-hero-dot { background-color: rgba(255, 255, 255, .22); }
  [data-ocex-theme="dark"] .ocex-hero-dot.on { background-color: var(--dide, #ed1e24); }
}
[data-ocex-theme="dark"] .ocex-hero-arrow { background: rgba(38, 42, 51, .82); color: #dfe4ea; }
[data-ocex-theme="dark"] .ocex-hero-arrow:hover { background: #262a33; }