/* Layout-modifiers via field_tup_article_layout (left/right + half/third/quarter)
   The base flex layout lives in the template via Tailwind utilities. */
.tup-article[class*="-left"]  .tup-article-media { order: 0; }
.tup-article[class*="-left"]  .tup-article-body  { order: 1; }
.tup-article[class*="-right"] .tup-article-media { order: 1; }
.tup-article[class*="-right"] .tup-article-body  { order: 0; }

@media (min-width: 768px) {
  .tup-article[class*="-third"]   .tup-article-media { width: 33.333%; }
  .tup-article[class*="-third"]   .tup-article-body  { flex: 1; }
  .tup-article[class*="-quarter"] .tup-article-media { width: 25%; }
  .tup-article[class*="-quarter"] .tup-article-body  { flex: 1; }
}

/* Margin onder headings in rich-text body. Size/line-height/weight komen
 * uit de globale type-schaal (input.css) zodat de Figma-spec gevolgd
 * wordt — eerder zaten hier hardcoded `font-size: 42px / 28px` regels
 * die op mobiel niet kleiner werden. */
.tup-article-body-inner h1,
.tup-article-body-inner h2,
.tup-article-body-inner h3 {
  color: var(--color-base-content, #000);
  margin: 0 0 1.5rem;
}

/* Alleen component-specifieke tekststijl; de verticale ritmiek (p/ul/ol-
 * marges) komt centraal uit het "Rich-text body-typografie"-blok in
 * input.css (.tup-article-body-inner). */
.tup-article-body-inner p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 26px;
  color: var(--color-base-content, #000);
}

.tup-article-body-inner a:not(.btn-rdz) {
  color: var(--color-primary, #801c7f);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Knoppen in artikel-body krijgen wat lucht boven de paragraaf erboven.
 * Vorm/kleur/spacing tussen knoppen onderling worden geregeld door de
 * `.btn-rdz*` utility-classes in het theme (één bron van waarheid). */
.tup-article-body-inner .btn-rdz {
  margin-top: 1rem;
}

.tup-article-media img,
.tup-article-media picture {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* === Article (always overlap-style) ===
 * The card overlaps the image. The image break-out (extending to the
 * viewport edge) is opt-in via .tup-article--breakout. */
.tup-article-overlap {
  display: grid;
  max-width: 1440px;
  margin-inline: auto;
}

.tup-article-overlap__media img,
.tup-article-overlap__media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tup-article-overlap__media {
  position: relative;
  z-index: 1;
}

.tup-article-overlap__card {
  position: relative;
  z-index: 2;
  padding: 2rem;
  /* Mobiel: kaart heeft horizontale marge (smaller dan de full-width
   * image) en negatieve top-margin zodat 'ie een stukje IN de image
   * overlapt — conform Figma 506:923. Op lg+ regelt het grid dit zelf
   * (zie media query onderaan dit blok). */
  margin: -60px 1.875rem 0;
}

/* Purple card: invert text + button colors for contrast. */
.tup-article-overlap__card.bg-accent-purple,
.tup-article-overlap__card.bg-accent-purple .tup-article-body-inner h1,
.tup-article-overlap__card.bg-accent-purple .tup-article-body-inner h2,
.tup-article-overlap__card.bg-accent-purple .tup-article-body-inner h3,
.tup-article-overlap__card.bg-accent-purple .tup-article-body-inner p {
  color: #fff;
}

.tup-article-overlap__card.bg-accent-purple .tup-article-body-inner a:not(.btn-rdz) {
  color: #fff;
}

/* In een paarse kaart wordt de primaire knop geel (zichtbaar contrast met
 * de paarse achtergrond). Hover keert om naar wit met paarse tekst. */
.tup-article-overlap__card.bg-accent-purple .tup-article-body-inner a.btn-rdz-primary {
  background: #ffcd1c;
  color: #000;
}
.tup-article-overlap__card.bg-accent-purple .tup-article-body-inner a.btn-rdz-primary:hover {
  background: #fff;
  color: var(--color-primary, #801c7f);
}

@media (min-width: 1024px) {
  .tup-article-overlap {
    --tup-overlap: clamp(60px, 10vw, 150px);
    grid-template-columns: 1fr 1fr;
    /* Buffer rows of var(--tup-overlap) above and below the card, with the
       image spanning all 3 rows. That gives the image the same overhang
       above/below the card without any negative margins, so the article
       wrapper stays exactly its own size and the gap to adjacent paragraphs
       remains untouched. */
    grid-template-rows: var(--tup-overlap) auto var(--tup-overlap);
    min-height: 500px;
  }

  .tup-article-overlap__media {
    grid-row: 1 / 4;
    overflow: hidden;
  }

  .tup-article-overlap__card {
    grid-row: 2 / 3;
    padding: 3rem 3.5rem;
    align-self: center;
    /* Mobiel margin reset — desktop-overlap zit in het grid. */
    margin: 0;
  }

  /* Both halves are 50% of the container; the image extends `--tup-overlap`
     past its column boundary into the card column so the card visually
     overlaps the image by that amount. */

  /* Image left: image extends into right column. */
  .tup-article-overlap:not([class*="-right"]) .tup-article-overlap__media,
  .tup-article-overlap[class*="-left"] .tup-article-overlap__media {
    grid-column: 1 / 2;
    margin-right: calc(-1 * var(--tup-overlap));
  }
  .tup-article-overlap:not([class*="-right"]) .tup-article-overlap__card,
  .tup-article-overlap[class*="-left"] .tup-article-overlap__card {
    grid-column: 2 / 3;
  }

  /* Image right: image extends into left column. */
  .tup-article-overlap[class*="-right"] .tup-article-overlap__media {
    grid-column: 2 / 3;
    margin-left: calc(-1 * var(--tup-overlap));
  }
  .tup-article-overlap[class*="-right"] .tup-article-overlap__card {
    grid-column: 1 / 2;
  }

  /* Break-out variant: image ALSO extends to the viewport edge on its outer side,
     capped at the equivalent of a 1920px outer container (-300px = (1920-1440)/2
     past the container outer edge + 60px container padding-inline). */
  .tup-article-overlap.tup-article--breakout:not([class*="-right"]) .tup-article-overlap__media,
  .tup-article-overlap.tup-article--breakout[class*="-left"] .tup-article-overlap__media {
    margin-left: max(calc(50% - 50vw), -300px);
  }
  .tup-article-overlap.tup-article--breakout[class*="-right"] .tup-article-overlap__media {
    margin-right: max(calc(50% - 50vw), -300px);
  }
}

/* Mobile break-out: full-bleed image edge-to-edge.
   Desktop margins are set per layout side inside the @media block above. */
@media (max-width: 1023px) {
  .tup-article-overlap.tup-article--breakout .tup-article-overlap__media {
    margin-inline: calc(50% - 50vw);
  }
}