/* ==========================================================================
   carousel.css — mobile-only styles for the stacked card DECK that replaces the
   Connectivity (#features) and Private-by-design (#security) card grids on
   phones. carousel.js drives each card's transform/opacity/z-index inline; this
   file only sets the stacking context and layout. Desktop keeps the original
   grid + expandable popout untouched.
   ========================================================================== */
@media (max-width: 760px) {
  /* carousel.js sets [inert] on every non-front deck card. Native inert support
     (Chrome 102+/Firefox 112+/Safari 15.5+) already removes it from hit-testing,
     focus, and the a11y tree — this is only a fallback for older engines that
     parse the attribute but don't act on it, so a peeking card can't still be
     tapped/clicked through. */
  .mcar-deck [inert] {
    pointer-events: none;
  }

  .mcar {
    position: relative;
    /* Security places .mcar in a grid cell; min-width:0 keeps its content from
       forcing the column (and the section) wide. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: var(--s-24);
  }

  /* The card grid, repurposed as the deck: a stacking context with the cards
     absolutely positioned on top of each other. Height is set (and animated)
     inline by carousel.js, tracking the current front card + room for the
     peeking stack, so short cards aren't padded out to match a tall one. */
  .mcar-deck {
    position: relative;
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden; /* a retracting card clips out the bottom edge */
    touch-action: pan-y; /* vertical scroll passes through; JS owns horizontal */
    -webkit-user-select: none;
    user-select: none;
  }

  .mcar-deck > * {
    /* Stacks the cards on top of each other. Intentionally NOT !important: source
       order already beats .glass{position:relative}, and staying non-!important
       lets popout.js's inline position:fixed lift a card out of the deck for both
       the expanded state and the collapse animation. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 !important;
    grid-column: auto !important; /* drop col-3/col-4/col-6 spans */
    grid-row: auto !important; /* drop row-2 */
    transform-origin: center; /* center pivot for the half-circle arc rotation */
    backface-visibility: hidden;
    will-change: transform, opacity;
    /* transform / opacity / z-index / min-height set inline by carousel.js */
  }

  /* An expanded card must leave the deck's absolute/overflow-clipped context and
     rise above the scrim. Its geometry is viewport-relative (set inline by
     popout.js). The higher-specificity selector restores position:fixed on expand;
     z-index !important beats poseAt's inline z-index (100) so the panel sits over
     the scrim. Collapse removes .is-expanded and re-fixes the card via inline
     styles, which win now that the rule above is no longer !important. */
  .mcar-deck > .is-expanded {
    position: fixed;
    z-index: var(--z-popout) !important;
  }

  /* Cards are tap-to-expand in the deck; show the corner hint statically (there's
     no hover on touch). Only the front card's shows — the rest are covered. */
  .mcar-deck .expand-hint {
    opacity: 1;
    transform: scale(1);
    color: var(--accent-text);
  }

}

/* Position dots — deliberately OUTSIDE the mobile media query above: they're a
   shared component. The mobile deck carousel (carousel.js) uses them ≤760px,
   and the Download section's wheel (dl-wheel.js) uses them at every viewport
   width, so scoping them mobile-only would leave the wheel's dots unstyled on
   desktop. */
.mcar-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s-16);
}
/* The button IS the 24x24 tap target (WCAG 2.5.8 minimum); the visible 8px dot
   is drawn on ::before so the hit area can be larger than the dot itself. */
.mcar-dots button {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mcar-dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  opacity: 0.4;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.2s var(--ease-std),
    background-color 0.2s var(--ease-std), transform 0.2s var(--ease-std);
}
.mcar-dots button[aria-current="true"]::before {
  opacity: 1;
  background: var(--accent-text);
  transform: translate(-50%, -50%) scale(1.3);
}