/* Super Stubborn — Story
   GEGENEREERD uit de mockup (sectie `story`) door port_to_wp.py.
   Gedeelde componenten en tokens staan in assets/css/superstubborn.css. */

.ssx-story{ overflow-x:clip; }

.ssx-story-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--ss-sp-8);
  align-items:center;
}
@media (min-width:900px){
  .ssx-story-grid{
    grid-template-columns:minmax(0, 0.82fr) minmax(0, 1fr);
    gap:clamp(var(--ss-sp-7), 7vw, var(--ss-sp-10));
  }
}

/* ---- Media column ---- */
.ssx-story-media{ position:relative; min-width:0; }
.ssx-story-photo{
  border-radius:var(--ss-r-lg);
  box-shadow:var(--ss-shadow-md);
}
.ssx-story-sig{
  margin-top:var(--ss-sp-5);
  letter-spacing:0.3em;
}

@media (min-width:900px){
  /* Media column breathes slightly narrower; capped so it never bleeds */
  .ssx-story-media{ max-width:440px; }
}

/* ---- Copy column ---- */
.ssx-story-copy{
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-5);
  min-width:0;
}
.ssx-story-title{
  margin-block:var(--ss-sp-2);
  max-width:14ch;
}
.ssx-story-prose{
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-4);
  margin-top:var(--ss-sp-2);
}
.ssx-story-lead{ max-width:42ch; }

.ssx-story-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--ss-sp-5);
  margin-top:var(--ss-sp-4);
}
/* Editorial sign-off — tracked micro-caps, NOT the serif italic (that
   accent is spent once, on the headline word). Copper, quiet. */
.ssx-story-mark{
  font-family:var(--ss-body);
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:0.28em;
  font-weight:700;
  color:var(--ss-copper);
  position:relative;
  padding-left:0.9em;
  line-height:1;
}
.ssx-story-mark::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:0.4em;
  height:0.4em;
  border-radius:50%;
  background:var(--ss-orange);
}