/* ── Icon Carousel ──────────────────────────────────────────────────
 * A horizontally scrollable row of feature cards with prev/next
 * controls. The gallery is full-bleed to the right edge of the
 * viewport so that, once there are enough cards to scroll, a partial
 * card is always visible at the right to signal the carousel is
 * scrollable.
 * ------------------------------------------------------------------ */

/* Let the block span the full content width so the gallery can bleed
 * all the way to the right edge of the viewport. */
.section .icon-carousel-wrapper {
  max-width: none;
}

.icon-carousel {
  --icon-carousel-inset: var(--spacing-300);
  padding: var(--spacing-600) 0;
  box-sizing: border-box;
}

.icon-carousel-header {
  max-width: 553px;
  margin-bottom: var(--spacing-500);
  margin-inline: var(--icon-carousel-inset);
}

.icon-carousel-header h1,
.icon-carousel-header h2,
.icon-carousel-header h3,
.icon-carousel-header h4 {
  font-size: var(--heading-font-size-m);
  font-weight: var(--heading-font-weight);
  line-height: 1.04;
  margin: 0 0 var(--spacing-100) 0;
  color: var(--color-gray-800);
}

/* Specificity bump to (0,0,2,1): overrides main .section p { margin: spacing/500 0 } */
.icon-carousel .icon-carousel-header p {
  font-size: var(--body-font-size-m);
  color: var(--text-color-secondary);
  margin: 0;
  line-height: 1.3;
}

.icon-carousel-gallery-wrap {
  position: relative;
  /* The gallery's focus ring is a sibling overlay, not an outline on the
     gallery itself, since the gallery's own box is static and can't track
     scroll position. It needs this wrapper's box to reach the true
     viewport edge (matching the gallery's own bleed) for its `right: 30px`
     to be measured from the window edge rather than the page's max-width. */
  margin-inline-end: calc(50% - 50vw);
}

.icon-carousel-gallery {
  display: flex;
  gap: var(--spacing-100);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Trailing inset mirrors the leading one so the last card stops flush
     with the viewport margin instead of bleeding past it once scrolled. */
  padding-inline: var(--icon-carousel-inset);
  scroll-padding-inline: var(--icon-carousel-inset);
}

.icon-carousel-gallery::-webkit-scrollbar {
  display: none;
}

.icon-carousel-gallery:focus-visible {
  /* The visible ring is the sibling .icon-carousel-gallery-ring overlay below. */
  outline: none;
}

.icon-carousel-gallery-ring {
  position: absolute;
  /* A literal 2px gap between a thin ring and the card reads as touching,
     not separated, so the visible offset is doubled to 4px. */
  top: -4px;
  bottom: -4px;
  left: calc(var(--icon-carousel-inset) - 4px);
  right: 30px;
  border: 2px solid var(--color-focus-ring-strong);
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
}

/* Once scrolled, cards reach the gallery's own left edge, but the ring
   doesn't follow them down to a 2px hug — it keeps the same 30px gap from
   the window edge as the right side, instead of hugging the flush card. */
.icon-carousel-gallery-wrap--scrolled .icon-carousel-gallery-ring {
  left: 30px;
}

.icon-carousel-gallery:focus-visible ~ .icon-carousel-gallery-ring {
  opacity: 1;
}

.icon-carousel-card {
  flex: 0 0 auto;
  width: 310px;
  min-height: 200px;
  background-color: var(--color-gray-100);
  border-radius: 16px;
  padding: var(--spacing-400);
  box-sizing: border-box;
  scroll-snap-align: start;
}

.icon-carousel-card-icon {
  width: 36px;
  height: 36px;
  background-color: var(--color-black);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-500);
  overflow: hidden;
  flex-shrink: 0;
}

.icon-carousel-card-icon picture,
.icon-carousel-card-icon img {
  width: 20px;
  height: 20px;
  display: block;
}

.icon-carousel-card-body h1,
.icon-carousel-card-body h2,
.icon-carousel-card-body h3,
.icon-carousel-card-body h4,
.icon-carousel-card-body h5,
.icon-carousel-card-body h6 {
  font-size: var(--heading-font-size-xs);
  font-weight: 700;
  margin: 0 0 var(--spacing-100) 0;
  color: var(--color-gray-800);
  line-height: 1.3;
}

/* Specificity bump to (0,0,2,1): overrides main .section p { margin: spacing/500 0 } */
.icon-carousel .icon-carousel-card-body p {
  font-size: var(--body-font-size-s);
  color: var(--text-color-secondary);
  margin: 0;
  line-height: 1.3;
}

/* ── Controls ───────────────────────────────────────────────────────
 * The prev/next control comes from the shared gallery widget
 * (scripts/widgets/gallery/gallery.js), which already handles paging,
 * the IntersectionObserver, and hiding itself when all cards fit. Its
 * base styles live in the widget's gallery.css; the rules below only
 * re-skin the buttons to match this block's design. */
.icon-carousel .gallery-control {
  padding-top: var(--spacing-500);
  padding-inline: var(--icon-carousel-inset);
}

.icon-carousel .gallery-control button {
  width: var(--spacing-500);
  height: var(--spacing-500);
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 150ms ease-out;
}

.icon-carousel .gallery-control button svg {
  display: block;
  width: 100%;
  height: 100%;
}

.icon-carousel .gallery-control button:hover:not(:disabled) {
  box-shadow:
    0 0 2px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

.icon-carousel .gallery-control button:focus-visible {
  outline: 2px solid var(--color-background-accent-default);
  outline-offset: 2px;
}

/* ── Tablet (M) ≥ 600px ─────────────────────────────────────────── */
@media (min-width: 600px) {
  .icon-carousel {
    --icon-carousel-inset: var(--spacing-500);
  }

  .icon-carousel-card {
    width: 415px;
  }
}

/* ── Desktop (L) ≥ 1200px ───────────────────────────────────────── */
@media (min-width: 1200px) {
  .icon-carousel {
    /* Flat 40px through 1680px viewport width, then scales so the content
       area stays capped at 1600px. */
    --icon-carousel-inset: max(var(--spacing-600), calc((100vw - 1600px) / 2));
    padding: var(--spacing-900) 0;
  }

  .icon-carousel-header h1,
  .icon-carousel-header h2,
  .icon-carousel-header h3,
  .icon-carousel-header h4 {
    font-size: var(--heading-font-size-l);
  }

  .icon-carousel .icon-carousel-header p {
    font-size: var(--body-font-size-l);
  }

  .icon-carousel-card-body h1,
  .icon-carousel-card-body h2,
  .icon-carousel-card-body h3,
  .icon-carousel-card-body h4,
  .icon-carousel-card-body h5,
  .icon-carousel-card-body h6 {
    font-size: var(--heading-font-size-s);
  }

  .icon-carousel .icon-carousel-card-body p {
    font-size: var(--body-font-size-m);
  }
}

/* ── no-subcopy variant ─────────────────────────────────────────── */

.icon-carousel.no-subcopy .icon-carousel-header p {
  display: none;
}

/* ── dark variant ───────────────────────────────────────────────── */

.icon-carousel.dark {
  background-color: var(--color-black);
}

.icon-carousel.dark .icon-carousel-header h1,
.icon-carousel.dark .icon-carousel-header h2,
.icon-carousel.dark .icon-carousel-header h3,
.icon-carousel.dark .icon-carousel-header h4 {
  color: var(--color-white);
}

.icon-carousel.dark .icon-carousel-header p {
  color: var(--color-gray-350);
}

/* Card background in dark mode is 14% transparency white (transparent-white/200). */
.icon-carousel.dark .icon-carousel-card {
  background-color: rgba(255, 255, 255, 0.14);
}

.icon-carousel.dark .icon-carousel-card-icon {
  background-color: var(--color-white);
}

.icon-carousel.dark .icon-carousel-card-body h1,
.icon-carousel.dark .icon-carousel-card-body h2,
.icon-carousel.dark .icon-carousel-card-body h3,
.icon-carousel.dark .icon-carousel-card-body h4,
.icon-carousel.dark .icon-carousel-card-body h5,
.icon-carousel.dark .icon-carousel-card-body h6 {
  color: var(--color-white);
}

.icon-carousel.dark .icon-carousel-card-body p {
  color: var(--color-white);
}

/* The widget's control SVG is a white circle with a dark chevron, so the
   buttons need no dark-mode override — they stay legible on the black bg. */