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


/* ============================================================
   HybridDifferenceSection — "Smarter, not smaller" section
   for the /hybrid page.

   Layout:
     Intro block (heading + body) using shared hp-rail/hp-heading.
     3-column card row below, each card: icon top, content bottom.
   ============================================================ */


/* ---- Section shell ---------------------------------------- */

.hdiff-section { background: var(--background); }


/* ---- Content wrapper (intro + cards) ---------------------- */

.hdiff__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;   /* 64px */
}


/* ---- Section intro ----------------------------------------
   Uses the shared .section-header__text (36px heading→body, 800px cap).
   No mobile override here means the 36px gap is kept on small screens
   too (the default drops to 24px), so it is restored below. */


/* ---- Benefit cards ---------------------------------------- */

.hdiff__cards {
  display: flex;
  gap:     0.75rem;  /* 12px */
}

.hdiff__card {
  flex:           1 1 0;
  display:        flex;
  flex-direction: column;
  justify-content: start;
  gap:            2rem;     /* 32px — fallback for justify-between */
  background:     var(--secondary);
  border:         0.5px solid var(--border);
  border-radius:  0.75rem;  /* 12px */
  padding:        1.75rem;  /* 28px */
  overflow:       hidden;
}


/* ---- Card text -------------------------------------------- */

.hdiff__card-content {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;   /* 8px */
}

.hdiff__card-title {
  margin:      0;
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}

.hdiff__card-desc {
  margin:      0;
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-regular);
  color:       var(--muted-foreground);
}


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

@media (max-width: 767px) {
  /* Preserve the original 36px heading→body gap (this section never
     dropped to the 24px mobile default). */
  .hdiff-section .section-header__text { gap: 2.25rem; }

  .hdiff__cards {
    flex-direction: column;
    margin-left:  -1rem;
    margin-right: -1rem;
  }

  /* In a stacked column, flex-basis: 0 is wrong — size to content */
  .hdiff__card {
    flex: none;
  }
}

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