/* ==========================================================================
   news.css — the public Știri page and every article's own page.
   --------------------------------------------------------------------------
   Loaded by stiri.php only, after style.css, and it adds nothing to the other
   eight pages. Everything here is built out of the tokens style.css already
   defines, so an article looks like the rest of the site without restating a
   single colour.

   Every rule is prefixed .nws- because stiri.php is the only file that will
   ever use them, and a name that cannot collide is worth more here than a
   short one.
   ========================================================================== */

/* Both languages are printed into the page and one is hidden with the
   `hidden` attribute (see the inline script at the foot of stiri.php). A
   display value set by any later rule would beat the browser's own default
   for [hidden], and both languages would show at once — which is exactly how
   this goes wrong when nobody states it. So state it. */
[data-lang][hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   The list
   -------------------------------------------------------------------------- */
.nws-list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.nws-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.nws-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
  color: inherit;
}

.nws-card__pic {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream);
}
.nws-card__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.nws-card:hover .nws-card__pic img { transform: scale(1.03); }

/* An article with no photograph. Rather than a grey box or a card that starts
   with its headline while its neighbours start with a picture, it gets the
   same block of space filled with the site's own gold wash — so a row of
   cards keeps one baseline whether or not anyone attached an image. */
.nws-card__pic--none {
  background: linear-gradient(135deg, var(--gold-wash), var(--cream));
  border-bottom: 1px solid var(--line);
}

.nws-card__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.35rem, 2.6vw, 1.75rem);
}

.nws-card__meta {
  display: block;
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75rem;
}

.nws-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: .55rem;
  text-wrap: balance;
}
.nws-card:hover .nws-card__title { color: var(--gold); }

/* Three lines, then an ellipsis. A summary is meant to be two or three lines
   and the editor's hint says so, but a card in a grid cannot be allowed to
   grow to whatever someone pastes into it. */
.nws-card__sum {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .975rem;
  color: var(--body-soft);
}

.nws-card__more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.15rem;
  font-size: .85rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--gold);
}
.nws-card__more::after {
  content: "→";
  transition: transform .3s var(--ease);
}
.nws-card:hover .nws-card__more::after { transform: translateX(4px); }

/* The featured article. On a wide screen it takes the full row and turns on
   its side, which is the whole of the emphasis: no second colour, no badge,
   just more room. Below 860px it is an ordinary card again, because a
   side-by-side layout on a phone is two cramped columns and no emphasis. */
@media (min-width: 860px) {
  .nws-card--featured {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .nws-card--featured .nws-card__pic {
    flex: 0 0 52%;
    aspect-ratio: auto;
  }
  .nws-card--featured .nws-card__text {
    justify-content: center;
    padding: clamp(1.75rem, 3.2vw, 3rem);
  }
  .nws-card--featured .nws-card__title { font-size: clamp(1.8rem, 3vw, 2.4rem); }
  .nws-card--featured .nws-card__sum {
    -webkit-line-clamp: 4;
    line-clamp: 4;
    font-size: 1.06rem;
  }
}

/* --------------------------------------------------------------------------
   One article
   -------------------------------------------------------------------------- */
.nws-article { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section-y); }

/* The category and the date sit on one line under the back link. It borrows
   .eyebrow for its size and colour; the separating dot needs air on both
   sides that the flex gap does not give it. */
.nws-meta { flex-wrap: wrap; }
.nws-dot { opacity: .55; margin-inline: .1rem; }

.nws-back {
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.nws-back a { color: var(--body-soft); text-decoration: none; }
.nws-back a:hover { color: var(--gold); }
.nws-back--end {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  margin-bottom: 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.nws-author {
  font-size: .9rem;
  color: var(--body-soft);
  margin-top: 1.15rem;
}

.nws-figure {
  margin: clamp(2rem, 4vw, 3rem) auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.nws-figure img {
  width: 100%;
  max-height: 34rem;
  object-fit: cover;
}

/* The body is the one place on this site where the words arrive as HTML
   somebody typed, so it styles elements rather than classes. */
.nws-body { font-size: 1.0625rem; }
.nws-body h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 2.25em; }
.nws-body h3 { margin-top: 2em; }
.nws-body h2:first-child,
.nws-body h3:first-child { margin-top: 0; }
.nws-body img {
  border-radius: var(--radius-lg);
  margin-block: 1.75rem;
}
.nws-body blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.nws-body a { text-decoration: underline; }
.nws-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 2.5rem;
}

.nws-gallery {
  display: grid;
  gap: clamp(.75rem, 1.5vw, 1.15rem);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
.nws-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.nws-videolink { margin-top: clamp(2rem, 4vw, 2.75rem); }

@media (prefers-reduced-motion: reduce) {
  .nws-card,
  .nws-card__pic img,
  .nws-card__more::after { transition: none; }
  .nws-card:hover { transform: none; }
  .nws-card:hover .nws-card__pic img { transform: none; }
  .nws-card:hover .nws-card__more::after { transform: none; }
}

/* ------------------------------------------------------- the category row */
/* Only ever rendered when two or more categories are live. Chips rather than
   a <select>: on the list page the whole point is seeing what the sections
   ARE, which a closed dropdown hides. */
.nws-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.nws-chip {
  padding: .5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 550;
  color: var(--body-soft);
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.nws-chip:hover { color: var(--ink); border-color: var(--gold); }
.nws-chip.is-on {
  background: var(--gold-wash);
  border-color: var(--gold);
  color: var(--ink);
}

/* ------------------------------------------------------------- share row */
.nws-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.nws-share__label {
  margin-right: .35rem;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--body-soft);
}
.nws-share__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 550;
  color: var(--body-soft);
  text-decoration: none;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.nws-share__btn:hover { color: var(--ink); border-color: var(--gold); }
.nws-share__btn svg { width: 17px; height: 17px; flex: none; }

/* --------------------------------------------------------- what to read next */
.nws-related {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.nws-related__h {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}
/* Three abreast at most, and never the full-width featured treatment: this is
   a footnote to the article above it, not a second news page. */
.nws-list--related { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.nws-list--related .nws-card__pic { aspect-ratio: 16 / 9; }