/* ============================================================
   IconBadge — Small circular icon container
   ============================================================ */

.icon-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           1.625rem;  /* 26px */
  height:          1.625rem;
  border-radius:   var(--radius-full);
  flex-shrink:     0;
  color:           var(--foreground);
}

/* ---- Size ------------------------------------------------- */

.icon-badge[data-size="md"] { width: 2rem; height: 2rem; }  /* 32px */

@media (max-width: 767px) {
  .icon-badge[data-mobile-size="sm"] { width: 1.625rem; height: 1.625rem; }
}


/* ---- Typography ------------------------------------------- */

.icon-badge[data-typography="label"] {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
}


/* ---- Color variants --------------------------------------- */

.icon-badge[data-variant="card"]        { background: var(--card); }
.icon-badge[data-variant="bg"]          { background: var(--background); }
.icon-badge[data-variant="teal"]        { background: color-mix(in srgb, var(--color-brand-blue-400) 40%, transparent); }
.icon-badge[data-variant="teal-active"] { background: color-mix(in srgb, var(--color-brand-blue-400) 60%, var(--background)); }

/* ============================================================
   Eyebrow — icon + label kicker. See Eyebrow.tsx.
   ============================================================ */

.eyebrow {
  display:      inline-flex;
  align-items:  center;
  gap:          0.5rem;            /* 8px */
  height:       36px;
  padding:      5px 0;
  width:        fit-content;       /* never stretch in a column-flex parent */
  font-size:    var(--font-size-sm);
  line-height:  var(--line-height-sm);
  font-weight:  var(--font-weight-regular);
  color:        var(--muted-foreground);
  white-space:  nowrap;
  box-sizing:   border-box;
}

.eyebrow[data-variant="active"] {
  color:       var(--foreground);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   LogoReel — infinite-scroll logo carousel with edge fades.
   Relies on --background from the parent context for fade colour.
   Design tokens from src/styles/tokens.css.
   ============================================================ */

.logo-reel {
  --logo-reel-edge-fade-width: 200px;
  --logo-reel-gap: 3.5rem;
  --logo-reel-logo-height: 4rem;
  --logo-reel-logo-max-height: none;
  --logo-reel-logo-max-width: none;
  --logo-reel-logo-slot-width: auto;
  --logo-reel-track-height: auto;
  --logo-reel-track-min-height: 0;
  --logo-reel-pad-y: var(--spacing-6);   /* 24px above + below the logo row */
  /* Room above the row for group-label pills. 0 unless a logo carries a
     `label`, in which case the component sets `data-has-labels`. */
  --logo-reel-label-space: 0px;

  position: relative;
  width:    100%;
  padding:  calc(var(--logo-reel-pad-y) + var(--logo-reel-label-space)) 0 var(--logo-reel-pad-y);
  overflow: hidden;
}

/* Pill height (24px) + the 10px it clears the logo row by. */
.logo-reel[data-has-labels] {
  --logo-reel-label-space: 34px;
}

/* ---- Edge fades ----
   Two mechanisms, picked by `edgeFade` (see LogoReel.tsx):

   `wash` — an opaque gradient in `--background` painted OVER the logos. The
   default, and what every consumer on a flat surface uses.

   `mask` — the reel itself is masked, so the logos fade to transparent and the
   backdrop shows through unchanged. Required over a textured backdrop: a wash
   there is a flat patch of colour sitting on top of the texture, visible as a
   smooth rectangle the width of the fade. */

/* Left and right wash fades — colour inherits from parent section */
.logo-reel[data-edge-fade="wash"]::before,
.logo-reel[data-edge-fade="wash"]::after {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  width:          var(--logo-reel-edge-fade-width);
  pointer-events: none;
  z-index:        1;
}

.logo-reel[data-edge-fade="wash"]::before {
  left:       0;
  background: linear-gradient(to right, var(--background) 30%, transparent);
}

.logo-reel[data-edge-fade="wash"]::after {
  right:      0;
  background: linear-gradient(to left, var(--background) 30%, transparent);
}

/* Masked edges. The reel's own box is masked rather than the scroller, which
   translates — a mask on a moving element would travel with it. */
.logo-reel[data-edge-fade="mask"] {
  -webkit-mask-image: linear-gradient(to right,
                        transparent,
                        #000 var(--logo-reel-edge-fade-width),
                        #000 calc(100% - var(--logo-reel-edge-fade-width)),
                        transparent);
          mask-image: linear-gradient(to right,
                        transparent,
                        #000 var(--logo-reel-edge-fade-width),
                        #000 calc(100% - var(--logo-reel-edge-fade-width)),
                        transparent);
}

/* Scroller — flex row of 4 identical tracks; animates to exactly -25% (= 1 track width). */
.logo-reel__scroller {
  display:   flex;
  width:     max-content;
  animation: logo-reel-scroll var(--logo-reel-duration) linear infinite;
}

/* Each track holds all logos once. padding-right = gap so the trailing space is baked in,
   making each track's width identical to (logos + n gaps). -25% lands flush on track 2. */
.logo-reel__track {
  display:       flex;
  align-items:   center;
  gap:           var(--logo-reel-gap);
  height:        var(--logo-reel-track-height);
  min-height:    var(--logo-reel-track-min-height);
  padding-right: var(--logo-reel-gap);
  flex-shrink:   0;
}

@keyframes logo-reel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .logo-reel {
    --logo-reel-track-height: auto;
  }

  .logo-reel::before,
  .logo-reel::after {
    display: none;
  }

  .logo-reel[data-edge-fade="mask"] {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .logo-reel__scroller {
    animation: none;
    width: 100%;
  }

  .logo-reel__track[aria-hidden="true"] {
    display: none;
  }

  .logo-reel__track:not([aria-hidden="true"]) {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }

  /* The wrapped fallback has no single row for a hanging pill or a group rule
     to sit against, so both are dropped and the extra top padding with them. */
  .logo-reel[data-has-labels] {
    --logo-reel-label-space: 0px;
  }

  .logo-reel__label,
  .logo-reel__divider {
    display: none;
  }
}

.logo-reel__wrap {
  position:    relative;
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       var(--logo-reel-logo-slot-width);
  flex-shrink: 0;
}

/* Group label — a pill hung above the logo that opens the group, left-aligned
   with it. Absolute so it never widens the slot or shifts the row's rhythm. */
.logo-reel__label {
  position:      absolute;
  left:          0;
  bottom:        calc(100% + 10px);
  padding:       var(--spacing-1) 0.875rem;   /* 4px 14px — 14 is off the spacing scale */
  background:    var(--card);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);     /* 12px */
  line-height:   var(--line-height-xs);   /* 16px */
  font-weight:   var(--font-weight-medium);
  color:         var(--muted-foreground);
  white-space:   nowrap;
}

/* Hairline between two labelled groups. Zero-width, so it inherits a full gap
   on each side; it spans the logo row plus the label space above it. */
.logo-reel__divider {
  align-self:  flex-start;
  flex:        0 0 auto;
  width:       0;
  height:      calc(var(--logo-reel-logo-height) + var(--logo-reel-label-space));
  margin-top:  calc(-1 * var(--logo-reel-label-space));
  border-left: 0.75px solid var(--border);
}

/* Optional text item after the last logo. It is not a logo, so it opts out of
   the fixed slot width and sizes to its own copy; everything visual (font,
   colour) is the consumer's call. */
.logo-reel__trailing {
  width:       auto;
  white-space: nowrap;
}

/* Images are @2x — display at half their natural size.
   64px = half of 128px native height. width: auto preserves aspect ratio. */
.logo-reel__img {
  display:    block;
  height:     var(--logo-reel-logo-height);
  max-width:  var(--logo-reel-logo-max-width);
  max-height: var(--logo-reel-logo-max-height);
  width:      auto;
  object-fit: contain;
}

/* Dark scheme — invert monochrome logos */
.logo-reel[data-scheme="dark"] .logo-reel__img {
  filter: invert(1) brightness(0.85);
}


/* ============================================================
   Mobile landscape (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .logo-reel {
    --logo-reel-edge-fade-width: 80px;
    --logo-reel-gap: 2rem;
    --logo-reel-logo-height: 2rem;
    --logo-reel-pad-y: var(--spacing-7);
  }
}

/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


.partner-integrations {
  width: 100%;
  padding: 4rem 0 3rem;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family-default);
}

.partner-integrations__content,
.partner-integrations__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.partner-integrations__content {
  gap: var(--spacing-9);
}

.partner-integrations__header {
  width: 100%;
  gap: var(--spacing-8);
  padding-right: var(--spacing-8);
  box-sizing: border-box;
}

.partner-integrations__header .eyebrow {
  height: 38px;
  padding-block: 1px;
  font-weight: var(--font-weight-medium);
}

.partner-integrations__header .hp-body {
  width: 100%;
  max-width: 772px;
}

.partner-integrations__header .hp-body strong {
  color: var(--primary);
  font-weight: var(--font-weight-bold);
}

/*
 * LogoReel owns the accessible repeated track and motion. This section only
 * adapts its geometry: a viewport-wide reel crossing the regular container,
 * with the 180px logo slots and 24px artwork sizing from the Figma frame.
 */
.partner-integrations .logo-reel {
  --logo-reel-edge-fade-width: clamp(80px, calc((100vw - 1024px) / 2), 244px);
  --logo-reel-gap: 0px;
  --logo-reel-logo-height: auto;
  --logo-reel-logo-max-height: 24px;
  --logo-reel-logo-max-width: 142.219px;
  --logo-reel-logo-slot-width: 180px;
  --logo-reel-track-height: 64px;
  --logo-reel-track-min-height: 64px;

  width: 100vw;
  margin-left: calc((100vw - 100%) / -2);
  padding-block: var(--spacing-6);
}

@media (max-width: 991px) {
  .partner-integrations .logo-reel {
    --logo-reel-edge-fade-width: 60px;
  }
}

@media (max-width: 767px) {
  .partner-integrations {
    padding: 3rem 0;
  }

  .partner-integrations__content {
    gap: var(--spacing-8);
  }

  .partner-integrations__header {
    gap: var(--spacing-6);
    padding-right: 0;
  }

  .partner-integrations .logo-reel {
    --logo-reel-edge-fade-width: 2rem;
    --logo-reel-logo-slot-width: 140px;

    padding-block: var(--spacing-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-integrations .logo-reel {
    --logo-reel-track-height: auto;
  }
}