/* ============================================================
   OCEX Banner - mosaic + carousel (Embla)
   Quiet controls: thin line dots, arrows only on hover.
   ============================================================ */

.ocex-bn { position: relative; margin: 0 0 20px; }
.ocex-bn-vp { overflow: hidden; border-radius: 6px; }
.ocex-bn-tray { display: flex; }

.ocex-bn-slide { position: relative; flex: 0 0 100%; min-width: 0; display: block; box-sizing: border-box; }
.ocex-bn-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- mosaic: 1 large tile on the left + 2 small ones on the right ------
   The image fills the tile with absolute positioning, so the content
   cannot stretch the grid rows: the ratio of the small tiles defines the
   rows and the large tile spans exactly the two rows plus the gap - the
   bottom edges line up. */
@media (min-width: 768px) {
  .ocex-bn--mosaic .ocex-bn-tray {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0; /* the tiles touch each other; the outer rounding comes from .ocex-bn-vp */
  }
  .ocex-bn--mosaic .ocex-bn-slide {
    flex: none;
    position: relative;
    /* The tile ratio comes from the REAL ratio of the image (--ocex-bn-ar, set by the
       controller on the root element) - a fixed 16/5 cut the sides of 3.6:1 banners
       on desktop, as a fixed 16/6 once did on mobile (see below). The grid stays
       consistent with any shared ratio: the large tile spans two rows, so its ratio
       is the same. */
    aspect-ratio: var(--ocex-bn-ar, 16 / 5);
    overflow: hidden;
    border-radius: 0;
  }
  .ocex-bn--mosaic .ocex-bn-slide.is-big { grid-row: span 2; aspect-ratio: auto; }
  .ocex-bn--mosaic .ocex-bn-slide img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  /* state before JS: the 4th and later banners are not shown in the grid (JS moves
     them into the large tile as layers) - only for the DIRECT children of the tray! */
  .ocex-bn--mosaic .ocex-bn-tray > .ocex-bn-slide:nth-child(n+4) { display: none; }
  /* large tile with a switcher: the 1st and the 4th+ banners are layers, opacity cross-fade */
  .ocex-bn-big { grid-row: span 2; position: relative; overflow: hidden; }
  .ocex-bn-big .ocex-bn-slide {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    aspect-ratio: auto;
    display: block;
    opacity: 0;
    transition: opacity .6s ease;
  }
  .ocex-bn-big .ocex-bn-slide.on { opacity: 1; }
  /* no paging in the mosaic on desktop - the controls stay hidden */
  .ocex-bn--mosaic .ocex-bn-arrow, .ocex-bn--mosaic .ocex-bn-dots { display: none; }
}

/* on mobile the mosaic is a carousel too: the tiles are full-width pages */
@media (max-width: 767px) {
  /* FULL width on mobile.

     It used to be 88% so that 12% of the next tile peeked in - but that is not a
     neutral strip, it is the CUT-OFF CAPTION OF THE NEIGHBOURING IMAGE, which looks
     like an overflow. Verified with screenshots. The dots show that the strip can be
     paged, so the peek is not needed.

     Lesson for gaps: NEVER a margin (it falls outside the slide width, but the carousel
     steps the strip by the width -> every page drifts); if a gap is needed, use padding
     with border-box. A negative container margin is forbidden: it shifts the whole strip left. */
  .ocex-bn--mosaic .ocex-bn-slide { flex: 0 0 100%; margin-right: 0; padding-right: 0; }

  /* The WIDTH is fixed, the HEIGHT follows it.

     A 16/6 ratio used to be forced on the image, but the banner images are 16/5 (3.20:1).
     object-fit: cover took the difference from both sides, i.e. it cut the START and END
     of the image: measured box 360x135 = 2.67:1 vs. image 1366x427 = 3.20:1 -> 83% of the
     image was visible, 8.5% lost on each side. On a banner with text this cuts the edge
     of the text.

     height: auto + aspect-ratio: auto -> the image shows COMPLETELY, in its own ratio. */
  .ocex-bn--mosaic .ocex-bn-slide img,
  .ocex-bn--carousel .ocex-bn-slide img {
    border-radius: 6px;
    aspect-ratio: auto;
    height: auto;
  }
  /* with images of different ratios the strip follows the tallest one - the shorter
     ones sit centred, not stuck to the top of the box */
  .ocex-bn-tray { align-items: center; }
}

/* --- carousel preset --------------------------------------------------- */
.ocex-bn--carousel .ocex-bn-slide { flex: 0 0 100%; }
@media (max-width: 767px) {
  /* the same rule as in the mosaic: the gap is padding, not margin */
  .ocex-bn--carousel .ocex-bn-slide { flex: 0 0 100%; margin-right: 0; padding-right: 0; }
}

/* --- arrows: desktop only, on hover only ------------------------------- */
.ocex-bn-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: #2b3440;
  font-size: 15px;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s;
  z-index: 2;
  padding: 0;
}
.ocex-bn-prev { left: 12px; }
.ocex-bn-next { right: 12px; }
.ocex-bn:hover .ocex-bn-arrow, .ocex-bn-arrow:focus-visible { opacity: 1; }
.ocex-bn-arrow:hover { background: #fff; }
.ocex-bn-arrow[disabled] { opacity: 0 !important; cursor: default; }
@media (max-width: 767px), (hover: none) {
  .ocex-bn-arrow { display: none; }
}

/* --- line dots --------------------------------------------------------- */
.ocex-bn-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 9px;
  /* air below the dots so they do not stick to the next block */
  padding-bottom: .5em;
}
.ocex-bn-dot {
  width: 18px;
  height: 3px;
  border: none;
  border-radius: 2px;
  background: rgba(0, 0, 0, .18);
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.ocex-bn-dot.on { background: var(--dide, #ed1e24); } /* the theme's accent colour; without it the old red */

/* --- dark mode --------------------------------------------------------- */
[data-ocex-theme="dark"] .ocex-bn-dot { background: rgba(255, 255, 255, .22); }
[data-ocex-theme="dark"] .ocex-bn-dot.on { background: var(--dide, #ed1e24); }
[data-ocex-theme="dark"] .ocex-bn-arrow { background: rgba(38, 42, 51, .82); color: #dfe4ea; }
[data-ocex-theme="dark"] .ocex-bn-arrow:hover { background: #262a33; }

/* ============================================================
   mosaic5 - STATIC grid of 5 tiles (a classic shop home-page mosaic).
   No JS, no Embla: a grid at every width.
   Every rule targets the module's full-name container class
   (.ocex-banner--mosaic5, .ocex-banner--captions) - this section does
   not affect the old presets (mosaic, carousel).

   Desktop: 5 equal column units (40 / 20 / 40):
       a a b c c     a = large, b = narrow-tall, c = wide,
       a a b d e     d + e = two small squares
   The row height comes from an invisible square (::before, in the place
   of "d"): 1 row = 1 column unit, so d/e are squares, a ~ square,
   b ~ 1:2, c ~ 2:1 - even when the group has fewer than 5 images.
   The images fill the tile with object-fit: cover.
   ============================================================ */
.ocex-banner--mosaic5 .ocex-bn-tray {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "a a b c c"
    "a a b d e";
  gap: 10px;
}
.ocex-banner--mosaic5 .ocex-bn-tray::before {
  content: "";
  grid-area: d;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}
.ocex-banner--mosaic5 .ocex-bn-slide {
  flex: none;
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--ocex-banner-radius, 6px);
}
.ocex-banner--mosaic5 .ocex-bn-slide:nth-child(1) { grid-area: a; }
.ocex-banner--mosaic5 .ocex-bn-slide:nth-child(2) { grid-area: b; }
.ocex-banner--mosaic5 .ocex-bn-slide:nth-child(3) { grid-area: c; }
.ocex-banner--mosaic5 .ocex-bn-slide:nth-child(4) { grid-area: d; }
.ocex-banner--mosaic5 .ocex-bn-slide:nth-child(5) { grid-area: e; }
.ocex-banner--mosaic5 .ocex-bn-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
/* slight zoom on hover - only with a real mouse, and only if the visitor did not ask for reduced motion */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ocex-banner--mosaic5 a.ocex-bn-slide:hover img { transform: scale(1.04); }
}

/* mobile (<=767): the old mobile layout - the large (2/3) + the narrow (1/3) on top,
   below it the wide one at FULL width (in its own ratio), at the bottom the two small ones half-half */
@media (max-width: 767px) {
  .ocex-banner--mosaic5 .ocex-bn-tray {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "a a a a b b"
      "c c c c c c"
      "d d d e e e";
    align-items: normal; /* the mobile .ocex-bn-tray { align-items: center } is not wanted here: b and e should stretch to the row */
  }
  .ocex-banner--mosaic5 .ocex-bn-tray::before { content: none; }
  .ocex-banner--mosaic5 .ocex-bn-slide:nth-child(1),
  .ocex-banner--mosaic5 .ocex-bn-slide:nth-child(4) { aspect-ratio: 1 / 1; }
  .ocex-banner--mosaic5 .ocex-bn-slide:nth-child(3) { aspect-ratio: var(--ocex-banner-tile-ar, 2 / 1); }
}

/* --- caption label (instance option "Show titles as captions", default OFF) ---
   The banner image title in the top-left corner of the tile: uppercase, bold,
   dark, on a semi-transparent background (Journal-style tile). The whole tile is
   the link; on hover the label takes the theme's accent colour (--dide), if any. */
.ocex-banner--captions .ocex-banner-caption {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: 3px;
  background: var(--ocex-banner-caption-bg, rgba(22, 30, 40, .72));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .03em;
  text-transform: uppercase;
  pointer-events: none;
  transition: background-color .2s ease;
}
.ocex-banner--captions a.ocex-bn-slide:hover .ocex-banner-caption,
.ocex-banner--captions a.ocex-bn-slide:focus-visible .ocex-banner-caption {
  background: var(--dide, rgba(22, 30, 40, .92));
}
@media (max-width: 767px) {
  .ocex-banner--captions .ocex-banner-caption {
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 8px;
    font-size: 12px;
  }
}