/* =========================================================================
   news.css — News page: a Maupe of balls winds down the page as a
   timeline, entries hang alternately left and right of its bends.
   The snake itself is drawn by site/js/news-maupe.js.
   ========================================================================= */

/* ---------- Intro ---------------------------------------------------------- */

/* Tighter than the regular section rhythm: intro and timeline belong
   together, the wave is the only divider needed. */
.news-intro {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: calc(clamp(1.5rem, 4vw, 3rem) + var(--wave-height));
}
.news-journey { padding-top: clamp(1.5rem, 4vw, 3rem); }

.news-intro__title {
  font-size: clamp(2.3rem, 1.2rem + 4.6vw, 5rem);
  line-height: 1.02;
  color: var(--ink);
  max-width: 13ch;
  margin-bottom: .45em;
  overflow-wrap: break-word;
}

.news-intro__lead {
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem);
  line-height: 1.5;
  max-width: 44ch;
}

/* ---------- Timeline ------------------------------------------------------- */

/* The list heading is for screen readers only; sighted readers get the
   intro. Same 1px technique as .carousel__status. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.journey {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 4vw, 2rem);
}

.journey__stop { position: relative; z-index: 1; }

.journey__maupe {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

/* The route ahead: a dotted line the Maupe crawls along. */
.journey__trail {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 75%, transparent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0 16;
}

/* Wide screens: cards alternate sides, the eye zig-zags down the page
   together with the Maupe. The gap between cards is where the trail
   crosses over — keep it open, or the Maupe slips behind a card. */
@media (min-width: 48.0625rem) {
  .journey { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .journey__stop { width: 46%; }
  .journey__stop:nth-child(even) { align-self: flex-end; }
}

/* Narrow screens: the Maupe runs down a lane on the left. */
@media (max-width: 48rem) {
  .journey__stop { padding-left: 2.9rem; }
}

/* Calm timeline (Leichte Sprache): one column everywhere, so the eye never
   has to search where the next entry starts. Same lane as on phones. */
.journey[data-calm] { max-width: 48rem; }

/* A wider lane than on phones: the Maupe keeps clear of the cards. */
.journey[data-calm] .journey__stop {
  width: auto;
  align-self: stretch;
  padding-left: clamp(3.25rem, 2.5rem + 2vw, 4rem);
}

/* ---------- Entry card ----------------------------------------------------- */

.news-entry {
  --head: var(--yellow);
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #fff;
  border-radius: clamp(1.1rem, 2.4vw, 1.75rem);
  box-shadow: 0 1rem 2.4rem -1.4rem color-mix(in srgb, var(--deep) 55%, transparent);
  transition: box-shadow .5s ease;
}

.news-entry[data-head="green"]  { --head: var(--green); }
.news-entry[data-head="purple"] { --head: var(--purple); }
.news-entry[data-head="blue"]   { --head: var(--blue); }
.news-entry[data-head="red"]    { --head: var(--red); }

/* Colored cap: the head color of the entry, like the Maupe's swappable heads. */
.news-entry::before {
  content: "";
  position: absolute;
  top: 0; left: clamp(1.25rem, 3vw, 2rem);
  width: 3.5rem; height: .45rem;
  border-radius: 0 0 999px 999px;
  background: var(--head);
  transition: width .5s ease;
}

/* The Maupe has passed this entry: the ring closes and the cap stretches. */
.news-entry.is-reached {
  box-shadow:
    0 0 0 3px var(--head),
    0 1.2rem 2.6rem -1.4rem color-mix(in srgb, var(--deep) 60%, transparent);
}
.news-entry.is-reached::before { width: 6rem; }

.news-entry__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem .75rem;
  margin: .4rem 0 .8rem;
  font-size: clamp(.88rem, .84rem + .2vw, 1rem);
  font-weight: 600;
  color: var(--ink);
}

.news-entry__tag {
  padding: .15em .85em;
  border: 2px solid var(--head);
  border-radius: 999px;
  font-weight: 500;
}

.news-entry__title {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: var(--heading-weight);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 .55em;
  overflow-wrap: break-word;
}

.news-entry p { max-width: none; }

.news-entry__media { margin-top: 1.25rem; }
.news-entry__title + .news-entry__media { margin: 0 0 1.25rem; }

.news-entry__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 1rem;
}

/* Logos and graphics: shown whole on their own background color instead of
   being cropped like a photo. Set the color per image with --logo-bg. */
.news-entry img.is-logo {
  object-fit: contain;
  padding: 6%;
  background: var(--logo-bg, #fff);
}

.news-entry__link {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: 1.1rem;
  font-weight: 600;
  text-underline-offset: .2em;
}
.news-entry__link svg {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.news-entry__link:hover svg { transform: translateX(3px); }

/* ---------- Carousel inside a card ----------------------------------------- */

/* Same markup and script as the main page, but held within the card:
   one image fills the width, no bleed to the window edge. */
.news-entry .gallery { margin-top: 1.25rem; }
.news-entry__title + .gallery { margin: 0 0 1.25rem; }

.news-entry .carousel__viewport {
  --slide-w: 100%;
  --gutter: 0px;
  padding-block: 0;
  border-radius: 1rem;
}

.news-entry .slide {
  border-radius: 1rem;
  box-shadow: none;
}

.news-entry .slide:not(.is-active) img { opacity: 1; transform: none; }

.news-entry .carousel__controls { margin-top: .9rem; }

/* ---------- Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .news-entry,
  .news-entry::before,
  .news-entry__link svg { transition: none; }
}