/* layout.css - glue between Bootstrap (css/vendor/bootstrap-lite.css: container, row, col-*, g-*, carousel)
   and the site design. Loaded after the page CSS. */

/* columns may shrink (long tables / words must not push the page wider) */
.row > * { min-width: 0; }

/* ---------- Carousel: keep one height (tallest slide) so the page does not jump while autoplaying ---------- */
.carousel-stack .carousel-inner { display: grid; }
.carousel-stack .carousel-item { display: block; grid-area: 1 / 1; float: none; margin: 0; visibility: hidden; }
.carousel-stack .carousel-item.active,
.carousel-stack .carousel-item-next,
.carousel-stack .carousel-item-prev { visibility: visible; }

/* ---------- Hero slider ---------- */
.grid4 img { height: auto; aspect-ratio: 11 / 6; }
@media (min-width: 992px) {
  /* the 4 fixed pictures are shown whole (11:6 like every product photo) and centred next to the text */
  .hero .row > .col-lg-6:last-child { display: flex; align-items: center; }
  .grid4 { width: 100%; }
  .grid4 img { height: auto; aspect-ratio: 11 / 6; }
}
.hero-title { font-family: var(--hf); margin: 22px 0 20px; line-height: 1.05; letter-spacing: -.01em; font-weight: 900; min-height: 2.1em; }
.hero-title i { font-style: normal; color: var(--red); }
.hl .carousel { flex: 1; display: flex; flex-direction: column; }
.hl .carousel-inner { flex: 1; }
.hero-ctl { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 30px 0 0; }

/* round arrow buttons (Bootstrap's prev/next normally sit on top of the slide) */
.carousel-control-prev.cb,
.carousel-control-next.cb { position: static; width: 44px; height: 44px; padding: 0; opacity: 1; display: grid; place-items: center; color: var(--ink); }
.carousel-control-prev.cb:hover,
.carousel-control-next.cb:hover { color: var(--red); opacity: 1; }

/* dots */
.hero-ctl .carousel-indicators { position: static; margin: 0; padding: 0; display: flex; gap: 8px; justify-content: center; flex: 1 1 auto; }
.hero-ctl .carousel-indicators [data-bs-target] {
  box-sizing: border-box; width: 14px; height: 14px; margin: 0; padding: 0; text-indent: 0;
  border: 0; border-radius: 50%; background: var(--line); opacity: 1; cursor: pointer;
}
.hero-ctl .carousel-indicators [data-bs-target].active { background: var(--red); }

/* ---------- Cards that live inside columns fill the column height ---------- */
.row > [class*="col"] > .pc,
.row > [class*="col"] > .tq { height: 100%; }

/* ---------- Text sliders (hero, testimonials): old text fades out FIRST, then the new text fades in ----------
   Bootstrap's default cross-fade shows both slides at once, so the two texts overlap while sliding. */
@media (prefers-reduced-motion: no-preference) {
  .carousel-stack .carousel-item {
    translate: 0 16px;
    transition: opacity .3s ease, translate .3s ease;
  }
  .carousel-stack .carousel-item.active,
  .carousel-stack .carousel-item-next.carousel-item-start,
  .carousel-stack .carousel-item-prev.carousel-item-end { translate: 0 0; }
  /* outgoing slide fades away quickly (Bootstrap would keep it fully visible until the end) */
  .carousel-stack .carousel-item.active.carousel-item-start,
  .carousel-stack .carousel-item.active.carousel-item-end { transition: opacity .3s ease, translate .3s ease; }
  /* incoming slide waits until the outgoing one has gone */
  .carousel-stack .carousel-item-next.carousel-item-start,
  .carousel-stack .carousel-item-prev.carousel-item-end {
    transition: opacity .45s ease .3s, translate .45s ease .3s;
  }
}

/* ---------- Header over the page-banner image (inner pages) ----------
   At the top the header is transparent and sits on the banner photo; after scrolling it turns solid. */
.has-banner header {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0;
  background: transparent; backdrop-filter: none;
}
.has-banner header.scrolled {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
}
/* banner starts at the very top: add the header height to its top padding */
.has-banner .ph { padding-top: calc(clamp(70px, 11vw, 120px) + 100px); }
@media (max-width: 1000px) { .has-banner .ph { padding-top: calc(50px + 92px); } }

/* ---------- Product pictures are shown whole (all product photos are 11:6), never cut ---------- */
.pc img { aspect-ratio: 11 / 6; height: auto; object-fit: cover; }
/* ---------- Application tiles: picture on top (shown whole), title below it - nothing is written over the photo ---------- */
.ac { aspect-ratio: auto; background: #fff; border: 1px solid var(--line); }
.ac a { display: flex; flex-direction: column; height: 100%; }
.ac img { height: auto; aspect-ratio: 11 / 6; object-fit: cover; }
.ac img.fit-contain { object-fit: contain; background: #fff; }
.ac figcaption { position: static; padding: 16px 18px 18px; }
.ac h3 { color: var(--ink); margin: 0; }
.ac p { display: block; margin: 6px 0 0; color: var(--mut); }   /* subtitle was almost invisible (light grey on white) and hidden on phones */