/* =============================================================================
   Conferences & Beyond carousel — docs/components/carousel.md (controls),
   docs/components/card.md § Tile (image tile) for the slide, sections.md
   § Tile carousel block for the shell, motion.md for every transition.

   This is a bespoke vanilla carousel, not Embla. An inline IIFE at the end of
   index.html (owned by W4.1) measures the viewport, writes each card's pixel
   width inline and translates the track. Two of its constants are NOT ours:

     * `var GAP = 28`  — the step it translates by is `cardWidth + 28`, so the
       CSS gap below is locked to 28px. Changing it makes the track drift.
     * `visibleCount()` switches at 960 / 640px, not at our 1200 / 900 / 600.
       Harmless for the CSS (the script sizes the cards itself), but it means
       the card count changes at viewport widths the design system never names.

   Both are reported to W4.1; do not "fix" them here.
   ============================================================================= */

.cb {
  /* Geometry locals. The old --cb-* colour locals are gone; these two are the
     only survivors and are renamed out of the flagged set. */
  --carousel-gap: 28px;          /* locked to `var GAP = 28` in the page script */
  --carousel-card-height: 645px; /* card.md image tile: 330 x 645 */
  --carousel-arrow-size: 44px;   /* carousel.md § Prev/Next hit area */

  /* The block above it (#process) is white, so the carousel takes the division
     card ground to keep the alternation (page-guidelines.md item 1). */
  background-color: var(--color-division-card-bg);
  padding-block: var(--section-padding-y);
  padding-inline: var(--content-padding);
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Centred heading — sections.md § Centered heading
   --------------------------------------------------------------------------- */
.cb__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 920px;
  margin: 0 auto var(--gap-section-sm);
  text-align: center;
}

/* The markup carries .kicker, which supplies the whole scale (globals.css,
   including its 1200px step). Only the colour override is local. */
.cb__eyebrow {
  margin: 0;
  color: var(--color-primary-darkest);
}

/* An <h2>; the size and colour come from globals.css so the heading level is
   not restyled locally (page-guidelines.md § Visual Consistency). */
.cb__title {
  margin: 0;
}

/* The markup carries .body-large; same story as the eyebrow. */
.cb__sub {
  margin: 0;
  color: var(--color-text-gray);
}

/* ---------------------------------------------------------------------------
   Frame
   --------------------------------------------------------------------------- */
.cb__stage {
  position: relative;
  max-width: var(--content-max-width);
  margin-inline: auto;
  /* carousel.md: the arrows sit inline beside the slides, never on top of
     them. The stage reserves an arrow-wide gutter on each side, so the
     viewport — and every card the page script sizes from it — is narrower. */
  padding-inline: calc(var(--carousel-arrow-size) + var(--space-4));
}

/* The padding/negative-margin pair gives the hover lift and the tile shadow
   room to render without being clipped. The page script subtracts this
   padding again when it sizes the cards, so it must stay symmetrical. */
.cb__viewport {
  overflow: hidden;
  padding: var(--space-5);
  margin: calc(var(--space-5) * -1);
}

.cb__track {
  display: flex;
  gap: var(--carousel-gap);
  will-change: transform;
  /* carousel.md § Slide change: the track slides in the direction of travel. */
  transition: transform var(--duration-moderate) var(--ease-standard);
}

/* ---------------------------------------------------------------------------
   Slide — card.md § Tile (image tile)
   --------------------------------------------------------------------------- */
.cb-card {
  position: relative;
  flex: 0 0 auto;              /* width is written inline by the page script */
  height: var(--carousel-card-height);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-primary-darkest);
  box-shadow: var(--shadow-tile);
  transition: transform var(--duration-moderate) var(--ease-standard);
}

/* Image tile hover: lift only, shadow unchanged (card.md § Hover Motion). */
.cb-card:hover {
  transform: var(--lift-lg);
  z-index: 10;
}

.cb-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay — card.md § Tile (image tile): black 60% → 40% at mid-height → solid
   at the foot, as on the live InsurTech conference cards, so white titles and
   copy hold contrast over bright photographs (CR-005). No rgba token exists
   for these steps, so they are mixed from --color-black. */
.cb-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-black) 60%, transparent) 0%,
    color-mix(in srgb, var(--color-black) 40%, transparent) 50%,
    var(--color-black) 100%
  );
}

/* Per-image fits. The two event photos are letterboxed logos rather than
   full-bleed scenes, so they are contained on a dark plate. --midfit is the third
   framing, moved here from css/pages/home.css. */
.cb-card--midfit .cb-card__img {
  object-position: center 30%;
}

.cb-card--topfit .cb-card__img,
.cb-card--bett .cb-card__img {
  object-fit: contain;
  object-position: top center;
  transform-origin: top center;
}

.cb-card--topfit .cb-card__img {
  transform: scale(1.5);
}

.cb-card--bett .cb-card__img {
  transform: scale(1.4) translateX(-15px);
  -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 50%, transparent 90%);
  mask-image: linear-gradient(to bottom, var(--color-black) 50%, transparent 90%);
}

.cb-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-10);
  color: var(--color-white);
}

/* typographyKicker, white */
.cb-card__type {
  margin: 0;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 140%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* typographyH4, white — an <h3>, so the size is set here deliberately. */
.cb-card__name {
  margin: 0;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 130%;
  color: var(--color-white);
}

/* badge.md § edtech variant: division accent fill, --color-primary-darkest
   text. The EdTech accent is light, so white text here would fail AA. */
.cb-card__year {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius-pill);
  background-color: var(--color-accent);
  color: var(--color-primary-darkest);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 16px;
  text-transform: uppercase;
}

/* typographyBodyRegular, white, pinned to the bottom of the tile. */
.cb-card__desc {
  margin: auto 0 0;
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  color: var(--color-white);
}

/* ---------------------------------------------------------------------------
   Arrows — carousel.md § Prev/Next, motion.md § Carousel rotate and paginator.
   44px circular hit area, no resting fill, hover tint + scale(1.08), and the
   caret nudges 3px in its own direction (motion.md names 3px for carousels,
   not the 5px --nudge-arrow used by text links).
   --------------------------------------------------------------------------- */
.cb__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: var(--carousel-arrow-size);
  height: var(--carousel-arrow-size);
  border: none;
  border-radius: var(--border-radius-pill);
  background-color: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

.cb__arrow:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-50%) scale(1.08);
}

.cb__arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.cb__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Both carets carry .icon.icon--24, which sizes them; what is left here is the
   transition that drives the 3px hover nudge below. */
.cb__arrow svg {
  transition: transform var(--duration-base) var(--ease-standard);
}

.cb__arrow--prev { left: 0; }
.cb__arrow--next { right: 0; }

.cb__arrow--prev:hover svg { transform: translateX(-3px); }
.cb__arrow--next:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   Paginator — carousel.md § Dot Indicators, motion.md.
   10px dots, the active one grows to 28px and turns --color-primary.
   --------------------------------------------------------------------------- */
.cb__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--gap-section-lg);
}

.cb__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: var(--border-radius-pill);
  /* Slate blue, not --color-border: the grey border token is 1.07:1 on the
     division card ground and the dots vanished. --color-text-gray is 5.1:1
     (WCAG 1.4.11 needs 3:1); the active pill stays the darker primary. */
  background-color: var(--color-text-gray);
  cursor: pointer;
  transition:
    width var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard);
}

.cb__dot.is-active {
  width: 28px;
  background-color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cb { --carousel-card-height: 560px; }
  .cb-card__body { padding: var(--space-8); }
}

@media (max-width: 600px) {
  .cb { --carousel-card-height: 480px; }
  /* As the Embla carousels: no arrows on phones — swipe and the dots — so the
     single card gets the full width back. */
  .cb__stage { padding-inline: 0; }
  .cb__arrow { display: none; }
  .cb-card__body { padding: var(--space-6); }
  .cb-card__name { font-size: 1.125rem; }
  .cb-card__desc { font-size: 0.875rem; }
  .cb__dots { margin-top: var(--gap-section-sm); }
}