/* =========================================================
   IMI Styles (single source of truth)
   Order: Tokens → Base → Model Comparison → Media/SMC → Pillars → Spacing
   ========================================================= */

/* ---------- Tokens / widths ---------- */
:root{
  --section-max: 980px;          /* default content width for normal sections */
  --compare-max: 1440px;         /* width target for Model Comparison (bump if needed) */
  --gap-1: clamp(14px, 1.8vw, 22px);
}

/* ---------- Base container padding ---------- */
.imi-wrap{ padding-inline:max(16px,3.2vw); }

/* =========================================================
   MODEL COMPARISON — full-bleed strip + centered inner track
   ========================================================= */
#models.imi-wrap.comparison{
  /* Full-bleed: escape theme’s narrow content column */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: none !important;
  width: auto !important;
  padding-inline: clamp(16px, 2vw, 24px) !important;
  box-sizing: border-box !important;
}
#models .scroll-x{
  /* Re-center content inside the full-bleed strip */
  max-width: min(var(--compare-max), 98vw) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Table: fixed columns; single-line headers; body may wrap */
#models table.compare{
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
#models table.compare thead th{ white-space:nowrap !important; padding:.8rem .9rem !important; }
#models table.compare tbody :is(th,td){
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Friendly 4-col proportions that sum to 100% */
@media (min-width:900px){
  #models table.compare :is(th,td):nth-child(1){ width:34% !important; }           /* Model */
  #models table.compare :is(th,td):nth-child(2){ width:36% !important; }           /* Label Application */
  #models table.compare :is(th,td):nth-child(3),
  #models table.compare :is(th,td):nth-child(4){ width:15% !important; text-align:center !important; } /* Metrics */
}

/* Note text under the table */
#models .compare-note{
  margin:8px 0 0 !important;
  color:#6b7280; font-size:.9rem;
}

/* =========================================================
   MEDIA / Simple Media Carousel (videos clickable, arrows work)
   ========================================================= */
.simple_media_carousel .smc-slide{ position:relative; }
.simple_media_carousel video,
.smc-slide video{
  display:block !important; width:100% !important; height:auto !important;
  pointer-events:auto !important;               /* allow hover/click on video */
}
/* Disable only the overlay/link layer so it doesn't block clicks */
.simple_media_carousel .smc-slide > a,
.simple_media_carousel .smc-overlay{ pointer-events:none !important; }

/* Make Swiper arrows clickable and above overlays */
.simple_media_carousel .swiper-button-next,
.simple_media_carousel .swiper-button-prev{
  pointer-events:auto !important;
  z-index:9999 !important;
  display:flex !important; align-items:center; justify-content:center;
}
.simple_media_carousel .swiper,
.simple_media_carousel .swiper-container{ overflow:visible !important; }

/* =========================================================
   Pillars row — responsive grid, equal-height cards
   ========================================================= */
.imi-pillars .grid-3{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
  gap:clamp(14px,3vw,24px) !important;
  align-items:stretch !important;
}
.imi-pillars .card{
  border:1px solid #e5e7eb; border-radius:16px; background:#fff;
  padding:clamp(16px,3.2vw,22px); box-shadow:0 2px 12px rgba(17,24,39,.06);
  height:100%;
}

/* =========================================================
   Minor spacing polish in model sections
   ========================================================= */
.model-section > * + *{ margin-top:var(--gap-1) !important; }
.model-section > h2 + *{ margin-top:10px !important; }