/*
 * DOUT / NEWS desktop "default" package -- editorial HOMEPAGE presentation
 * (Prompt 1455; Prompt 1457 corrects hierarchy/proportions/typography/whitespace/
 * rhythm per visual review against design/news.doutlab/main_page.png; Prompt 1466
 * splits this out of the former monolithic style.css so Article detail and the
 * compatibility list no longer download homepage-only CSS).
 *
 * Loaded ONLY by the editorial-home state of pages/news_list.html, alongside
 * common.css (tokens/shell/shared editorial primitives -- kicker, byline, region
 * heading, editorial-link -- all reused unmodified from there, never redefined
 * here). Scoped entirely under `.dn-*` classes (never `.news-list--desktop`/
 * `.dn-compat`), so it cannot interact with the compatibility browse/filter
 * presentation (news-list.css) and is not loaded on that page at all.
 */

/* =========================================================================
 * 1. Home composition
 * ========================================================================= */

.dn-editorial-home .site-main {
  padding: 0;
}

.dn-home {
  display: flex;
  flex-direction: column;
  font-family: var(--dn-font-body);
  /* ONE owner (this padding) for masthead->hero and lower-grid->footer spacing.
     * Each band below owns its OWN top spacing via its own padding-top +
     * border-top -- never gap here plus padding there for the same seam.
     * .dn-editorial-home neutralizes the generic .site-main padding above, so
     * this is the only top/bottom space before the hero/after Focus. */
  padding: var(--space-5, 24px) 0 var(--space-6, 32px);
}

/* =========================================================================
 * 2. Lead (hero: lead story + editorial briefing)
 * ========================================================================= */

.dn-home__hero {
  display: grid;
  gap: var(--space-4, 16px);
  align-items: stretch;
}

/* An explicit modifier/state, decided once in pages/news_list.html from the real
 * active_agent_briefing flag -- never an empty include silently leaving a blank
 * grid track. */
.dn-home__hero--with-briefing {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
}

.dn-home__hero--solo {
  grid-template-columns: minmax(0, 1fr);
}

.dn-lead {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.dn-lead__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.dn-lead__media {
  display: block;
  margin-bottom: var(--space-3, 12px);
}

.dn-lead__media img {
  display: block;
  width: 100%;
  aspect-ratio: 17 / 8;
  object-fit: cover;
  border-radius: 2px;
  background: var(--dn-surface-panel);
}

.dn-home__hero--solo .dn-lead__media img {
  aspect-ratio: 21 / 8;
}

.dn-lead__headline {
  margin: 0 0 var(--space-3, 12px);
  font-family: var(--dn-font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.13;
  letter-spacing: -0.018em;
  color: var(--dn-text-primary);
}

.dn-home__hero--with-briefing .dn-lead__headline {
  max-width: none;
}

.dn-home__hero--solo .dn-lead__headline {
  font-size: 38px;
  max-width: 50ch;
}

.dn-lead__headline a:hover {
  color: var(--dn-accent-primary);
}

.dn-lead__dek {
  margin: 0 0 var(--space-4, 16px);
  max-width: none;
  font-size: 16px;
  line-height: 1.45;
  color: var(--dn-text-secondary);
}

.dn-lead__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4, 16px);
  margin-top: auto;
  margin-bottom: 20px;
  padding-top: var(--space-2, 8px);
}

/* Editorial action link (shared shape: common.css's `.dn-editorial-link`) --
 * only this component's own size/weight/color/hover are declared here. */
.dn-lead__more {
  font-size: 14px;
  font-weight: 600;
  color: var(--dn-text-primary);
  white-space: nowrap;
}

.dn-lead__more:hover {
  color: var(--dn-accent-primary);
}

/* =========================================================================
 * 3. Briefing
 * ========================================================================= */

/* Approved LIGHT editorial column: a left rule + left padding reads as an
 * editorial sidebar/pull-column, deliberately never a filled/bordered/rounded
 * panel (no dark intelligence panel, no generic rounded SaaS card). */
.dn-briefing {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px;
  border: 1px solid var(--dn-rule-subtle);
  border-radius: 2px;
}

.dn-briefing__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 12px);
}

.dn-briefing__eyebrow {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin: 0;
  font-family: var(--dn-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--dn-text-secondary);
}

.dn-briefing__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--dn-rule-subtle);
}

.dn-briefing__date {
  flex: 0 0 auto;
  font-family: var(--dn-font-mono);
  font-size: 11px;
  color: var(--dn-text-secondary);
  white-space: nowrap;
}

.dn-briefing__title {
  margin: 14px 0 6px;
  font-family: var(--dn-font-serif);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--dn-text-primary);
}

.dn-briefing__attribution {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 12px);
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--dn-text-secondary);
}

.dn-briefing__agent {
  color: var(--dn-text-primary);
  font-weight: 600;
}

.dn-briefing__role::before {
  content: "\00b7";
  margin-right: var(--space-3, 12px);
}

.dn-briefing__body {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 12;
  margin: 0;
  font-family: var(--dn-font-serif);
  font-size: 16px;
  line-height: 1.48;
  color: var(--dn-text-primary);
}

/* Editorial action link (shared shape: common.css's `.dn-editorial-link`) --
 * only this component's own size/weight/color/hover/positioning are declared
 * here (margin-top: auto pins it to the column's bottom edge). */
.dn-briefing__more {
  font-size: 14px;
  font-weight: 600;
  color: var(--dn-text-primary);
  margin-top: auto;
  padding-top: 14px;
}

.dn-briefing__more:hover {
  color: var(--dn-accent-primary);
}

/* =========================================================================
 * 4. Secondary (two editorial teasers, not independent cards)
 * ========================================================================= */

.dn-secondary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5, 24px);
  padding-top: var(--space-5, 24px);
  padding-bottom: var(--space-5, 24px);
  border-top: 1px solid var(--dn-rule-subtle);
}

.dn-secondary {
  display: grid;
  grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
  gap: var(--space-4, 16px);
  align-items: stretch;
}

.dn-secondary--no-media {
  grid-template-columns: minmax(0, 1fr);
}

/* Central hairline separator -- a border on the second column, not a
 * background/shadow/rounded card on either. */
.dn-secondary:not(:first-child) {
  border-left: 1px solid var(--dn-rule-subtle);
  padding-left: var(--space-5, 24px);
}

.dn-secondary__media {
  display: block;
  height: 100%;
  margin: 0;
}

.dn-secondary__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 148px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--dn-surface-panel);
}

/* Missing-image state: the media block above is simply absent (see
 * secondary_story_card.html's `{% if article.image_url %}`) -- with no
 * fixed-width media column ever reserved beside it, the text body naturally
 * expands to the column's full width instead of leaving a phantom gap or
 * breaking the grid. */
.dn-secondary__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  min-height: 100%;
}

.dn-secondary__headline {
  margin: 0;
  font-family: var(--dn-font-serif);
  font-size: 18px;
  line-height: 1.24;
  font-weight: 600;
  color: var(--dn-text-primary);
}

.dn-secondary__headline a:hover {
  color: var(--dn-accent-primary);
}

.dn-secondary__dek {
  margin: 0;
  font-size: 13px;
  line-height: 1.42;
  color: var(--dn-text-secondary);
}

.dn-secondary__body .dn-byline {
  margin-top: auto;
  padding-top: 2px;
}

/* =========================================================================
 * 5. Latest (newsroom stream)
 * ========================================================================= */

.dn-home__lower {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  gap: var(--space-5, 24px);
  align-items: stretch;
  padding-top: var(--space-5, 24px);
  border-top: 1px solid var(--dn-rule-subtle);
}

.dn-latest {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dn-latest__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dn-latest__item {
  display: grid;
  grid-template-columns: 48px 104px minmax(0, 1fr);
  align-items: first baseline;
  column-gap: var(--space-3, 12px);
  min-height: 52px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dn-rule-subtle);
}

.dn-latest__item:last-child {
  border-bottom: 0;
}

.dn-latest__time {
  font-family: var(--dn-font-mono);
  font-size: 11px;
  line-height: 1.3;
  color: var(--dn-text-secondary);
}

.dn-latest__meta {
  font-family: var(--dn-font-mono);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--dn-text-secondary);
  overflow-wrap: anywhere;
}

.dn-latest__headline {
  min-width: 0;
  font-family: var(--dn-font-serif);
  font-size: 15px;
  line-height: 1.34;
  color: var(--dn-text-primary);
}

.dn-latest__headline:hover {
  color: var(--dn-accent-primary);
}

/* =========================================================================
 * 6. Home responsive
 * ========================================================================= */

@media (max-width: 900px) {
  .dn-home__hero--with-briefing {
    grid-template-columns: 1fr;
  }

  .dn-home__lower {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dn-secondary-row {
    grid-template-columns: 1fr;
  }

  .dn-secondary:not(:first-child) {
    border-left: 0;
    padding-left: 0;
    margin-top: var(--space-5, 24px);
    padding-top: var(--space-5, 24px);
    border-top: 1px solid var(--dn-rule-subtle);
  }
}

@media (max-width: 1080px) {
  .dn-secondary {
    grid-template-columns: minmax(130px, 32%) minmax(0, 1fr);
  }

  .dn-secondary--no-media {
    grid-template-columns: minmax(0, 1fr);
  }
}