/* Kompas Blocks - front-end styles.
   Every Kompas Blocks row is rendered inside the theme's own
   ".km2-acf-block.km2-acf-text" wrapper (see class-acf-integration.php for
   why). That wrapper carries theme rules with !important (720px max-width,
   forced h2/h3/p font sizes) meant for plain article text - real content
   blocks need to opt back out. The overrides below use extra class
   specificity (never touching the theme's own CSS files) so they always
   win regardless of stylesheet load order. */

.km2-acf-block.km2-acf-text:has(.kb-block) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.km2-acf-block.km2-acf-text .kb-block {
  --kb-bg: var(--page-bg, #fff);
  --kb-text: var(--ink, #111);
  --kb-accent: var(--accent, #ff184c);
  max-width: 720px;
  margin: 34px auto;
  color: var(--kb-text);
}

/* Shared full-bleed breakout geometry - Full-screen Hero always has it,
   Stats Counter/Big Headline opt in via "Full width background". Kept
   separate from padding (added below, only for the two blocks that need
   it - Hero manages its own inner padding via .kb-hero-content) so the two
   concerns don't fight when a block carries both this class and its own
   dedicated full-bleed rule (e.g. .kb-fullscreen-hero). */
.km2-acf-block.km2-acf-text .kb-block.kb-full-bleed {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.km2-acf-block.km2-acf-text .kb-block.kb-stats-counter.kb-full-bleed,
.km2-acf-block.km2-acf-text .kb-block.kb-big-headline.kb-full-bleed {
  padding: 40px clamp(20px, 5vw, 40px);
}
.kb-full-bleed .kb-stats-inner,
.kb-full-bleed .kb-headline-inner {
  max-width: 720px;
  margin-inline: auto;
}

/* "stick to each other": when two full-bleed blocks (Full-screen Hero, or
   Stats Counter/Big Headline with the "Full width background" toggle on)
   are placed back to back, their vertical margins would otherwise leave a
   visible white gap between two edge-to-edge sections. Zero the touching
   margins so consecutive full-bleed blocks read as one continuous section;
   non-adjacent or non-full-bleed blocks keep their normal spacing. */
.km2-acf-block.km2-acf-text:has(> .kb-block.kb-full-bleed):has(+ .km2-acf-block.km2-acf-text > .kb-block.kb-full-bleed) .kb-block.kb-full-bleed {
  margin-bottom: 0;
}
.km2-acf-block.km2-acf-text:has(> .kb-block.kb-full-bleed) + .km2-acf-block.km2-acf-text:has(> .kb-block.kb-full-bleed) .kb-block.kb-full-bleed {
  margin-top: 0;
}

/* Shared title/paragraph resets for every block, at high enough specificity
   to beat the theme's own forced h2/h3/p/li font-size rules. Each
   selector's real font-size is set HERE directly (not via a separate
   lower-specificity rule elsewhere) - two competing !important rules on the
   same property never "layer", only the highest-specificity one is ever
   applied, so a generic inherit-then-override pattern silently drops the
   override. Learned the hard way: every block's font-size control was
   broken this exact way until this rule was rewritten.

   h2 needs an extra specificity boost beyond the others: title-system.css
   has "body.single .km2-article .km2-content .km2-acf-text h2{font-size:
   1.2rem!important}" (2 type selectors + 4 classes) which beats a plain
   4-class selector - matched by adding the "body" and "h2" type selectors
   plus the block's own wrapper class to every h2 rule below, so it always
   wins on specificity alone rather than depending on stylesheet order. */
.km2-acf-block.km2-acf-text .kb-block li {
  line-height: 1.1 !important;
  margin: 0 0 .4em;
}
body .km2-acf-block.km2-acf-text .kb-block h2 {
  line-height: 1.1 !important;
  margin: 0 0 .4em;
  font-family: var(--font-heading, inherit);
  font-weight: var(--km2-title-weight, 700);
}
body .km2-acf-block.km2-acf-text .kb-block.kb-big-headline h2.kb-headline-title { font-size: var(--kb-title-size, 36px) !important; letter-spacing: -.01em; }
body .km2-acf-block.km2-acf-text .kb-block.kb-fullscreen-hero h2.kb-hero-heading { font-size: var(--kb-heading-size, 56px) !important; color: #fff; }
body .km2-acf-block.km2-acf-text .kb-block.kb-stats-counter h2.kb-stats-title,
body .km2-acf-block.km2-acf-text .kb-block.kb-list-items h2.kb-list-title,
body .km2-acf-block.km2-acf-text .kb-block.kb-picture-gallery h2.kb-gallery-title { font-size: 24px !important; margin-bottom: .6em; }
body .km2-acf-block.km2-acf-text .kb-block.kb-info-block h2.kb-info-title { font-size: var(--kb-info-title-size, 18px) !important; margin: 0 !important; }

.km2-acf-block.km2-acf-text .kb-block p {
  line-height: 1.5 !important;
}
.km2-acf-block.km2-acf-text .kb-block .kb-headline-subtitle { font-size: inherit; margin: .5em 0 0; max-width: 640px; opacity: .82; }
.km2-acf-block.km2-acf-text .kb-block .kb-hero-subheading { font-size: 17px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, .88); max-width: 640px; }

html[data-theme="dark"] .km2-acf-block.km2-acf-text .kb-block {
  --kb-bg: var(--page-bg, #1c1e21);
  --kb-text: var(--ink, #edeef0);
}

/* ---------- Big Headline ---------- */
.kb-big-headline {
  padding: 8px 0;
}
.kb-big-headline.kb-align-center {
  text-align: center;
}
.kb-headline-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: var(--kb-accent);
  border-radius: 3px;
}
.kb-big-headline.kb-align-center .kb-headline-subtitle {
  margin-inline: auto;
}

/* ---------- Stats Counter ---------- */
.kb-stats-counter {
  padding: 28px 0;
  text-align: center;
}
.kb-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px;
}
.kb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.kb-stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: var(--kb-number-size, 64px) !important;
  font-weight: 800;
  line-height: 1;
  color: var(--kb-accent);
  font-variant-numeric: tabular-nums;
}
.kb-stat-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .72;
}

/* ---------- Full-screen Hero ---------- */
.km2-acf-block.km2-acf-text .kb-block.kb-fullscreen-hero {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.kb-fullscreen-hero {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.kb-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--kb-overlay, .4));
}
.kb-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: 60px clamp(20px, 5vw, 40px);
}
.kb-hero-cta {
  display: inline-block;
  margin-top: 24px;
  padding: 13px 28px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: var(--kb-accent);
  border-radius: 3px;
  transition: transform .2s var(--ease, ease), opacity .2s ease;
}
.kb-hero-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  opacity: .92;
}

/* ---------- Reveal animations ---------- */
.kb-anim {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
}
.kb-anim-none { opacity: 1; }
.kb-anim-fade-up { transform: translateY(28px); }
.kb-anim-fade-in { transform: none; }
.kb-anim-zoom-in { transform: scale(.92); }
.kb-anim-slide-left { transform: translateX(-40px); }
.kb-anim-slide-right { transform: translateX(40px); }

.kb-anim.kb-in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .kb-anim {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .kb-fullscreen-hero { min-height: 90vh; }
  .kb-hero-content { padding: 36px 20px; }
}

/* ---------- List Items ---------- */
.kb-list-items {
  padding: 8px 0;
}
.kb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kb-list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.kb-list-marker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1 !important;
  color: #fff;
  background: var(--kb-accent);
  border-radius: 50%;
}
.kb-list-style-checkmark .kb-list-marker::before {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.kb-list-style-bulleted .kb-list-marker {
  width: 8px;
  height: 8px;
  margin-top: 8px;
  background: var(--kb-accent);
}
.kb-list-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kb-list-item-title {
  font-size: var(--kb-item-size, 17px) !important;
  font-weight: 700;
  line-height: 1.35 !important;
}
.kb-list-item-description {
  font-size: 14px !important;
  line-height: 1.5 !important;
  opacity: .74;
}

/* ---------- Info Block ---------- */
.kb-info-block {
  padding: 4px 0;
}
.kb-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kb-info-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--kb-accent);
}
.kb-info-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}
.kb-info-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kb-accent);
  color: #fff;
}
.kb-info-text {
  margin-top: 8px;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
.kb-info-text p {
  margin: 0 0 .8em;
}
.kb-info-text p:last-child {
  margin-bottom: 0;
}
.kb-info-text a {
  color: var(--kb-accent);
  text-decoration: underline;
}

/* ---------- Video ---------- */
.kb-video {
  margin: 0;
  padding: 0;
}
.kb-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--kb-video-ratio, 16/9);
  background: #000;
  overflow: hidden;
  border-radius: 2px;
}
.kb-video-frame iframe,
.kb-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.kb-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  background: none;
}
.kb-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kb-video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  transition: transform .2s var(--ease, ease), background .2s ease;
}
.kb-video-play-icon svg {
  width: 26px;
  height: 26px;
  margin-left: 2px;
}
.kb-video-play:hover .kb-video-play-icon,
.kb-video-play:focus-visible .kb-video-play-icon {
  background: var(--kb-accent);
  transform: translate(-50%, -50%) scale(1.08);
}
.kb-video-caption {
  font-size: var(--kb-video-caption-size, 14px) !important;
  line-height: 1.5 !important;
  color: var(--muted, #686f78);
  margin: 8px 0 0;
}

/* ---------- Picture Gallery ---------- */
.kb-picture-gallery {
  padding: 8px 0;
}
.kb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--kb-gallery-columns, 3), 1fr);
  gap: 12px;
}
.kb-gallery-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.kb-gallery-link {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
/* Specificity-boosted like .kb-ba-media img above: the theme's
   ".km2-content img{width:100%;height:auto}" is an equal-specificity tie
   with a plain ".kb-gallery-item img" rule, which is not safe to leave to
   stylesheet load order. */
.km2-acf-block.km2-acf-text .kb-block .kb-gallery-item img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  transition: transform .4s var(--ease, ease);
}
.kb-gallery-link:hover img {
  transform: scale(1.05);
}
.kb-gallery-caption {
  padding: 8px 2px 0;
  font-size: var(--kb-caption-size, 14px) !important;
  line-height: 1.4 !important;
  opacity: .68;
}

/* ---------- Before / After ---------- */
.kb-before-after {
  padding: 8px 0;
}
.kb-ba-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.kb-ba-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* The theme has ".km2-content img{width:100%;height:auto}" in main.css -
   equal specificity (one class + one type selector) to a plain
   ".kb-ba-media img" rule, so which one wins came down to stylesheet load
   order and silently lost here: the image rendered at "height:auto" (its
   intrinsic aspect ratio) instead of filling the frame, leaving the
   "before" layer showing through underneath whenever the two images had
   different aspect ratios. Confirmed live by reading the actual computed
   height (matched width * intrinsic ratio, not the frame height) - three
   different attempts at the sizing technique (percentage, auto+inset,
   plain JS-measured px) all produced the identical wrong number before
   the real cause (a losing specificity tie, not a sizing-technique
   problem) was found. Fixed by qualifying the selector with the same
   .km2-acf-block.km2-acf-text .kb-block prefix used elsewhere in this
   file, plus !important, so it wins regardless of load order. */
.km2-acf-block.km2-acf-text .kb-block .kb-ba-media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--kb-ba-frame-width, 100%) !important;
  height: var(--kb-ba-frame-height, 100%) !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
}
/* Labels are FIXED at the corners (BEFORE always top-left, AFTER always
   top-right - see markup in class-before-after.php) - not tied to the
   handle position. For a label to always correctly describe the content
   underneath it at any drag position, the image spatially on the left must
   always be "before" and the image spatially on the right must always be
   "after". That requires "after" anchored to the RIGHT edge, narrowing
   inward as the handle moves left (before visible 0%->pos%, after visible
   pos%->100%) - the only geometry consistent with fixed corner labels.
   (A later attempt anchored "after" to the left instead, on the theory
   that matched some other slider's convention better - that broke the
   label/content correspondence at every position except exactly 50% and
   was reverted back to this.) */
.kb-ba-after {
  left: auto;
  right: 0;
  width: calc(100% - var(--kb-ba-pos, 50%));
}
.km2-acf-block.km2-acf-text .kb-block .kb-ba-after img {
  left: auto !important;
  right: 0 !important;
}
.kb-ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--kb-ba-pos, 50%);
  width: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kb-ba-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
.kb-ba-handle-grip {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.kb-ba-handle-grip::before,
.kb-ba-handle-grip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
}
.kb-ba-handle-grip::before {
  left: 9px;
  border-right: 7px solid var(--kb-accent, #ff184c);
}
.kb-ba-handle-grip::after {
  right: 9px;
  border-left: 7px solid var(--kb-accent, #ff184c);
}
.kb-ba-label {
  position: absolute;
  top: 14px;
  padding: 5px 10px;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff !important;
  background: rgba(0, 0, 0, .55);
  border-radius: 3px;
  pointer-events: none;
}
.kb-ba-label-before { left: 14px; }
.kb-ba-label-after { right: 14px; }

@media (max-width: 640px) {
  .kb-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Picture Gallery lightbox ---------- */
body.kb-lightbox-locked {
  overflow: hidden;
}
.kb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, .92);
  padding: 40px;
}
.kb-lightbox.kb-lightbox-open {
  display: flex;
}
.kb-lightbox-figure {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.kb-lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.kb-lightbox-caption {
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  text-align: center;
}
.kb-lightbox-close,
.kb-lightbox-prev,
.kb-lightbox-next {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.kb-lightbox-close:hover,
.kb-lightbox-prev:hover,
.kb-lightbox-next:hover {
  background: rgba(255, 255, 255, .24);
}
.kb-lightbox-close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
}
.kb-lightbox-prev,
.kb-lightbox-next {
  top: 50%;
  width: 52px;
  height: 52px;
  font-size: 30px;
  line-height: 1;
  transform: translateY(-50%);
}
.kb-lightbox-prev { left: 20px; }
.kb-lightbox-next { right: 20px; }

@media (max-width: 640px) {
  .kb-lightbox { padding: 16px; }
  .kb-lightbox-prev, .kb-lightbox-next { width: 40px; height: 40px; font-size: 22px; }
  .kb-lightbox-close { width: 36px; height: 36px; font-size: 20px; top: 10px; right: 10px; }
}

/* ---------- Story article shell ---------- */
/* Deliberately not using the theme's own ".km2-shell" class here: it's only
   guaranteed to resolve to the real content width when it's a direct child
   of ".km2-main" (confirmed in KompasMedia-2.0's title-system.css history),
   and this wrapper sits a level deeper (inside <article>). Self-contained
   width/centering avoids relying on that ancestry constraint. */
.kb-story-shell {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(14px, 3vw, 24px);
}