/* Super Stubborn — Pijlers
   HANDGESCHREVEN (dit blok komt niet uit de mockup). Bouwt op de tokens en
   componenten uit assets/css/superstubborn.css. */

.ssx-pillars__head{
  display:grid;
  gap:var(--ss-sp-5);
  max-width:60ch;
}

.ssx-pillars__title{ margin:0; }
.ssx-pillars__intro{ margin:0; color:var(--ss-text-muted); }
.ssx-pillars__rule{ margin:var(--ss-sp-7) 0 0; }

.ssx-pillars__grid{
  list-style:none;
  margin:0;
  padding:0;
  /* De counter zorgt dat de nummering blijft kloppen als er een item bij of af
     gaat — geen nummers in de content dus. */
  counter-reset:pijler;
}

.ssx-pillars__item{
  counter-increment:pijler;
}

.ssx-pillars__num::before{
  content:counter(pijler, decimal-leading-zero);
  font-size:var(--ss-fs-label);
  letter-spacing:.22em;
  font-weight:700;
  color:var(--ss-orange);
}

.ssx-pillars__item-title{
  margin:0;
  font-family:var(--ss-display);
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:var(--ss-fs-h3);
  font-weight:700;
  line-height:1.15;
  color:var(--ss-beige);
}

.ssx-pillars__text{
  margin:0;
  color:var(--ss-text-muted);
  max-width:46ch;
}

/* ---- Vorm: cards ------------------------------------------------------- */
.ssx-pillars--cards .ssx-pillars__grid{
  display:grid;
  gap:var(--ss-sp-7) var(--ss-sp-6);
  margin-top:var(--ss-sp-8);
}

.ssx-pillars--cards .ssx-pillars__item{
  display:grid;
  gap:var(--ss-sp-3);
  /* Streep boven elk item: rustiger dan kaders, en het houdt de kolommen
     visueel op één lijn ook als de teksten verschillend lang zijn. */
  padding-top:var(--ss-sp-5);
  border-top:1px solid var(--ss-hairline);
}

.ssx-pillars--cards .ssx-pillars__body{
  display:grid;
  gap:var(--ss-sp-3);
}

@media (min-width:760px){
  .ssx-pillars--cards.ssx-pillars--cols-2 .ssx-pillars__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .ssx-pillars--cards.ssx-pillars--cols-3 .ssx-pillars__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (min-width:1080px){
  .ssx-pillars--cards.ssx-pillars--cols-3 .ssx-pillars__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* Bij twee kolommen is er ruimte voor een grotere kop — dat past bij missie en
   visie, waar de tekst langer is en het er maar twee zijn. */
@media (min-width:760px){
  .ssx-pillars--cols-2 .ssx-pillars__item-title{ font-size:var(--ss-fs-h2); }
  .ssx-pillars--cols-2 .ssx-pillars__text{ max-width:52ch; }
}

/* ---- Vorm: list -------------------------------------------------------- */
.ssx-pillars--list .ssx-pillars__grid{
  margin-top:var(--ss-sp-7);
  display:grid;
}

.ssx-pillars--list .ssx-pillars__item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--ss-sp-5);
  align-items:baseline;
  padding:var(--ss-sp-5) 0;
  border-bottom:1px solid var(--ss-hairline);
}
.ssx-pillars--list .ssx-pillars__item:first-child{
  border-top:1px solid var(--ss-hairline);
}

.ssx-pillars--list .ssx-pillars__num{
  /* Vaste breedte houdt de tekstkolom recht, ook bij nummer 10 en hoger. */
  min-width:2.5rem;
}

.ssx-pillars--list .ssx-pillars__text{
  font-size:var(--ss-fs-lead);
  line-height:1.45;
  color:var(--ss-text);
  max-width:60ch;
}

.ssx-pillars--bare .ssx-pillars__num{ display:none; }

/* ---- Witte variant ----------------------------------------------------- */
/* Zelfde omslag als de witte secties op de homepage (story, products,
   bestsellers, instagram). Die staan in de gegenereerde bundle-CSS vast op hun
   eigen classnamen, dus voor een nieuw blok moet het hier staan. Verander je de
   witte wereld, verander hem dan op beide plekken. */
.ssx-pillars--light{
  background:#FFFFFF;
  color:#171310;
  --ss-beige:#171310;
  --ss-text:#171310;
  --ss-white:#171310;
  --ss-text-muted:rgba(23,19,16,0.62);
  --ss-text-faint:rgba(23,19,16,0.42);
  --ss-hairline:rgba(23,19,16,0.16);
  --ss-panel:#F4EFE6;
  --ss-panel-2:#E7DCCC;
}