/* ============================================================
   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);
}

/* ============================================================
   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-benefits {
  width: 100%;
  padding: 4rem 0;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family-default);
}

.partner-benefits__layout,
.partner-benefits__rows {
  display: flex;
  flex-direction: column;
}

.partner-benefits__layout {
  gap: 4rem;
}

.partner-benefits__header {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-8) 0 0;
  box-sizing: border-box;
}

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

.partner-benefits__header .hp-heading {
  width: 100%;
  max-width: 584px;
}

/*
 * The bridge wrapper is the same layout idea used by the Hybrid and AIR
 * heroes: a wider canvas plus an inset that tracks the regular 1024px
 * container. Here the canvas tops out at 1256px, which gives each visual the
 * exact 116px side bleed shown in the partner template.
 */
.partner-benefits__bridge {
  width: 100%;
  max-width: 1352px;
  padding-inline: 48px;
  margin-inline: auto;
  box-sizing: border-box;
}

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

.partner-benefits__row {
  --partner-bridge-inset: clamp(0px, calc((100% - 1024px) / 2), 116px);

  display: grid;
  align-items: center;
  gap: 4rem;
  width: 100%;
  box-sizing: border-box;
}

.partner-benefits__row[data-image-side="right"] {
  grid-template-columns: minmax(0, 392fr) minmax(0, 684fr);
  grid-template-areas: "copy visual";
  padding-left: var(--partner-bridge-inset);
}

.partner-benefits__row[data-image-side="left"] {
  grid-template-columns: minmax(0, 684fr) minmax(0, 392fr);
  grid-template-areas: "visual copy";
  padding-right: var(--partner-bridge-inset);
}

.partner-benefits__row[data-has-image="false"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy";
  padding-inline: max(var(--partner-bridge-inset), 32px);
}

.partner-benefits__copy {
  display: flex;
  grid-area: copy;
  min-width: 0;
  flex-direction: column;
  gap: var(--spacing-8);
}

.partner-benefits__copy h3,
.partner-benefits__body,
.partner-benefits__bullets,
.partner-benefits__bullets p {
  margin: 0;
}

.partner-benefits__copy h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-2xl);
}

.partner-benefits__body {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.partner-benefits__body strong,
.partner-benefits__body a,
.partner-benefits__bullets strong,
.partner-benefits__bullets a {
  color: var(--primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.partner-benefits__body a:hover,
.partner-benefits__bullets a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.partner-benefits__body a:focus-visible,
.partner-benefits__bullets a:focus-visible {
  border-radius: 2px;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.partner-benefits__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: 0;
  list-style: none;
}

.partner-benefits__bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.partner-benefits__bullet {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  margin-top: 11px;
  border-radius: var(--radius-full);
  background: var(--muted-foreground-card);
}

.partner-benefits__bullets p {
  min-width: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.partner-benefits__visual {
  grid-area: visual;
  width: 100%;
  aspect-ratio: 1;
  padding: var(--spacing-4);
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}

.partner-benefits__visual-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0.5px solid rgba(40, 40, 37, 0.2);
  border-radius: 12px;
  box-sizing: border-box;
}

.partner-benefits__artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .partner-benefits__bridge {
    padding-inline: 60px;
  }

  .partner-benefits__row,
  .partner-benefits__row[data-image-side="right"],
  .partner-benefits__row[data-image-side="left"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual";
    gap: 3rem;
    padding: 0;
  }

  .partner-benefits__row[data-has-image="false"] {
    grid-template-areas: "copy";
    gap: 0;
  }
}

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

  .partner-benefits__layout {
    gap: 3rem;
  }

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

  .partner-benefits__bridge {
    padding-inline: 2rem;
  }

  .partner-benefits__visual {
    padding: var(--spacing-3);
  }

  .partner-benefits__rows {
    gap: 4rem;
  }

  .partner-benefits__row,
  .partner-benefits__row[data-image-side="right"],
  .partner-benefits__row[data-image-side="left"] {
    gap: var(--spacing-8);
  }

  .partner-benefits__row[data-has-image="false"] {
    gap: 0;
  }

  .partner-benefits__copy {
    gap: var(--spacing-6);
  }

  .partner-benefits__copy h3 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }

  .partner-benefits__body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
}