/* ==========================================================================
   Milkinmelanin — page: Новости (/news/)
   Loaded AFTER main.css. Only compositions that are specific to the news
   archive live here; every colour, font and rhythm value comes from tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Asymmetric archive grid
   A single reading column with a 320px margin rail on the right. The rail
   keeps the page from turning into a uniform card matrix: posts are wide
   editorial plates, the rail is a thin, factual sidebar.
   -------------------------------------------------------------------------- */
.newsgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  column-gap: clamp(1.8rem, 5vw, 4.4rem);
  row-gap: clamp(1.6rem, 3.6vw, 2.6rem);
  align-items: start;
}

.newsmain {
  display: grid;
  gap: clamp(1.6rem, 3.4vw, 2.8rem);
  min-width: 0;
}

.newsrail {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.4rem);
  align-content: start;
}

/* --------------------------------------------------------------------------
   2. News plate — bordered rectangle, hairline divider, no rounding by
   default. The 2px cocoa top rule is the only heavy line in the block.
   -------------------------------------------------------------------------- */
.newsitem {
  position: relative;
  display: grid;
  gap: clamp(1.1rem, 2.8vw, 1.8rem);
  padding: clamp(1.2rem, 3vw, 1.9rem) 0 0;
  border-top: 2px solid var(--cocoa-800);
  transition: transform var(--dur) var(--ease-out);
}
.newsitem:hover { transform: translateY(-3px); }

/* compact variant: same rules, less air, used for the lower part of the log */
.newsitem--plain { padding-top: clamp(1rem, 2.2vw, 1.4rem); }
.newsitem--plain .newsitem__title { font-size: var(--t-lg); }

/* the picture sits beside the copy here, so two plates together stay
   roughly as tall as one lead plate instead of dominating the column */
.newsitem--split { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
.newsitem--split .newsitem__media { aspect-ratio: 5 / 4; align-self: start; }

.newsitem__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg,
      rgba(189, 130, 66, 0.16) 0 12px,
      rgba(189, 130, 66, 0.05) 12px 24px),
    var(--cream-200);
  border: 1px solid var(--line-strong);
}
.newsitem__media--tall { aspect-ratio: 4 / 3; }

.newsitem__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem clamp(0.7rem, 2vw, 1.1rem);
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.newsitem__date { color: var(--clay-600); }

.newsitem__tag {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cocoa-600);
  border-bottom: 2px solid var(--amber-500);
}

.newsitem__title {
  margin-top: 0.6rem;
  font-size: clamp(1.2rem, 0.85rem + 1.4vw, 1.72rem);
  letter-spacing: -0.03em;
  max-width: 30ch;
}
.newsitem__title a { transition: color var(--dur-fast) var(--ease-out); }
.newsitem__title a:hover, .newsitem__title a:focus-visible { color: var(--clay-600); }

.newsitem__text {
  margin-top: 0.8rem;
  max-width: 74ch;
  font-size: var(--t-sm);
  line-height: 1.72;
  color: var(--text-soft);
}

.newsitem__foot {
  margin-top: 1rem;
  padding-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* the lead post of the archive: wider media beside the copy */
.newsitem--lead {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
}
.newsitem--lead .newsitem__body { padding-top: 0.2rem; }
.newsitem--lead .newsitem__title { font-size: clamp(1.4rem, 0.9rem + 2.2vw, 2.3rem); }

/* --------------------------------------------------------------------------
   3. Log rows in the archive
   The homepage index row carries a number, a title and a meta line; the news
   log adds one short annotation (why the entry matters) under the meta line.
   -------------------------------------------------------------------------- */
.index-row__note {
  display: block;
  margin-top: 0.55rem;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   4. Archive digest + rail furniture
   -------------------------------------------------------------------------- */
.digest {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.digest__cell {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
}
.digest__value {
  flex: none;
  min-width: 2.4ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 0.9rem + 1.4vw, 1.8rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--cocoa-800);
}
.digest__label {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-soft);
}
.digest__note {
  margin-top: 0.85rem;
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}
.newsrail .tagrow { margin-top: 0; padding-top: 0; border-top: 0; }

/* resource meter inside the rail card */
.newsrail .meter { margin-top: 0.9rem; }

/* --------------------------------------------------------------------------
   5. Section note blocks — number in the margin, text on the reading grid
   -------------------------------------------------------------------------- */
.secblock {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 4vw, 3.4rem);
  padding-top: clamp(1.4rem, 3.4vw, 2.2rem);
  border-top: 2px solid var(--cocoa-800);
}
.secblock + .secblock { margin-top: clamp(2rem, 5vw, 3.4rem); }

.secblock__num {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--amber-500);
  margin-bottom: 0.6rem;
}
.secblock__title {
  font-size: var(--t-lg);
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.secblock__text {
  font-size: var(--t-base);
  line-height: var(--lead);
  color: var(--text-soft);
}
.secblock__text + .secblock__text { margin-top: 1.05em; }
.secblock__text strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .newsgrid { grid-template-columns: 1fr; }
  .newsrail {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }
  .newsitem--lead { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .newsitem--split { grid-template-columns: 1fr; }
  .newsitem--split .newsitem__media { aspect-ratio: 3 / 2; }
}

@media (max-width: 640px) {
  .secblock { grid-template-columns: 1fr; gap: 0.75rem; }
  .newsitem--lead .newsitem__title,
  .newsitem__title { font-size: 1.22rem; }
  .newsitem__media { aspect-ratio: 3 / 2; }
}