/* =========================================================================
   Kara skin v3 — LAYOUT : container, grille, sections. Mobile-first.
   ========================================================================= */

.kara-sg .ks-container {
  width: 100%;
  max-width: var(--ks-container);
  margin-inline: auto;
  padding-inline: var(--ks-gutter);
}
.kara-sg .ks-container--narrow { max-width: var(--ks-container-narrow); }

/* Sections : rythme vertical généreux (l'espace comme luxe) */
.kara-sg .ks-section { padding-block: var(--ks-space-8); }
.kara-sg .ks-section--tight { padding-block: var(--ks-space-7); }

/* Bandes sombres premium */
.kara-sg .ks-band-forest { background: var(--ks-forest); color: var(--ks-on-dark); }
.kara-sg .ks-band-forest h1, .kara-sg .ks-band-forest h2,
.kara-sg .ks-band-forest h3, .kara-sg .ks-band-forest h4 { color: #fff; }
.kara-sg .ks-band-forest .ks-kicker { color: var(--ks-mint); }
.kara-sg .ks-band-forest .ks-lead { color: var(--ks-on-dark-soft); }
.kara-sg .ks-band-forest-2 { background: var(--ks-forest-2); color: var(--ks-on-dark); }
.kara-sg .ks-band-surface { background: var(--ks-surface); }

/* Grille fluide réutilisable */
.kara-sg .ks-grid { display: grid; gap: var(--ks-space-5); }
.kara-sg .ks-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.kara-sg .ks-grid--2 { grid-template-columns: 1fr; }
.kara-sg .ks-grid--3 { grid-template-columns: 1fr; }
.kara-sg .ks-grid--4 { grid-template-columns: 1fr; }

.kara-sg .ks-stack > * + * { margin-top: var(--ks-space-4); }
.kara-sg .ks-cluster { display: flex; flex-wrap: wrap; gap: var(--ks-space-3); align-items: center; }

/* Mesure de lecture (alignement gauche, magazine) */
.kara-sg .ks-measure { max-width: var(--ks-measure); }
.kara-sg .ks-measure-sm { max-width: var(--ks-measure-sm); }

/* ---- Breakpoints (mobile-first) -------------------------------------- */
@media (min-width: 640px) {
  .kara-sg .ks-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .kara-sg .ks-section { padding-block: var(--ks-space-9); }
  .kara-sg .ks-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .kara-sg .ks-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .kara-sg .ks-grid--4 { grid-template-columns: repeat(4, 1fr); }
}