/* ══════════════════════════════════════
   Compact article cards — front page
   Scoped to the "Articles Compact Grid"
   classy_paragraphs class (slnt-articles-compact-grid)
   applied by the editor to the View Display
   paragraph that hosts the articles_listing /
   view_display_front_page block.

   Deliberately a different look from the event
   compact cards (event-compact.css): those are
   open, line-topped rows of facts; these are
   filled, section-coloured rectangles with the
   topic's hero tile pattern showing at the top
   and white text starting just beneath it. The
   filled rectangle is what marks where one item
   starts and ends — there is no top rule, so
   the kicker can sit last without ambiguity.
   ══════════════════════════════════════ */

/* ── Grid: 4 per row at ≥1000px, 2 at 500–999px, 1 below ──
   Modern Views renders rows directly inside the views-view wrapper as
   <div class="views-row">…</div> with no .view-content layer, so we
   target the wrapper that holds those rows.

   Breakpoints are grid-specific (as with the events grid); the
   site-wide 799px breakpoint is left untouched. Never use 100vw for
   full-bleed here — it includes the scrollbar width. */
.slnt-articles-compact-grid [class*="js-view-dom-id-"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem; /* filled cards need air before the CTA below */
}

@media (max-width: 999px) {
  .slnt-articles-compact-grid [class*="js-view-dom-id-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 499px) {
  .slnt-articles-compact-grid [class*="js-view-dom-id-"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Rows stretch to the tallest card in the row; let the card fill it. */
.slnt-articles-compact-grid .views-row {
  display: flex;
  min-width: 0;
}

/* ── Card fill colours ──
   White text must reach WCAG AA (4.5:1). Cards use a deeper stop of
   each section colour than the section base (customsolent.theme
   _customsolent_topic_section_colors) so the filled rectangles carry
   weight and the white text has headroom. White-on-card ratios:

     culture  #6D28D9   7.1
     sectors  #1D4ED8   6.7
     living   #065F46   7.7
     explore  #9A3412   7.3
     about    #475569   7.6
     (none)   #2C4F6E   8.6   — solent-blue, no primary topic

   Text never sits on the tile band (see padding-top below), so the
   solid figure is the one that matters. If a section colour changes,
   re-check before editing these. */
.slnt-article-compact-card {
  --card-bg: var(--solent-blue, #2c4f6e);
  --card-fade: 6rem; /* depth of the tile band = where the title starts */
}
.slnt-article-compact-card[data-section="culture"] { --card-bg: #6d28d9; }
.slnt-article-compact-card[data-section="sectors"] { --card-bg: #1d4ed8; }
.slnt-article-compact-card[data-section="living"]  { --card-bg: #065f46; }
.slnt-article-compact-card[data-section="explore"] { --card-bg: #9a3412; }
.slnt-article-compact-card[data-section="about"]   { --card-bg: #475569; }

/* ── The card ──
   Background layers, top to bottom:
     1. fade: transparent → card colour over --card-fade
     2. the topic's hero tile, scaled to 70% of its hero size so more
        than one row of icons shows in the band. The 12% opacity is
        baked into the SVGs and reads too faint at this size, so the
        tile is layered twice (≈23%).
     3. the solid card colour

   Every title starts at the same height — directly under the tile
   band, roughly a third of the way down — so the eye scans along a
   row in a straight line instead of hunting up and down. Text runs
   downward from there; the kicker is pinned to the bottom edge.
   padding-top equals the fade depth, so text is always on solid
   colour; a long title makes the card (and its row) taller. */
.slnt-article-compact-card {
  position: relative; /* containing block for the stretched link */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  min-height: 17rem;
  box-sizing: border-box;
  padding: var(--card-fade) 0.9rem 0.9rem;
  /* Square corners, like the white event boxes above them. */
  color: #fff;
  background-color: var(--card-bg);
  background-image:
    linear-gradient(to bottom, transparent 0, transparent calc(var(--card-fade) * 0.35), var(--card-bg) var(--card-fade)),
    var(--card-tile, none),
    var(--card-tile, none);
  background-repeat: no-repeat, repeat, repeat;
  background-size: auto, 84px 72.74px, 84px 72.74px;
}

/* ── Title + the card's main link ── */
.slnt-article-compact__title {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.4rem 0;
  overflow-wrap: anywhere;
}

/* Beat .layout-content's magenta-underline rule on body links. */
.layout-content a.slnt-article-compact__link,
.layout-content a.slnt-article-compact__link:hover {
  color: #fff;
  text-decoration: none;
  text-decoration-color: transparent;
}

/* Stretch the link over the whole rectangle. */
.slnt-article-compact__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.layout-content .slnt-article-compact-card:hover a.slnt-article-compact__link,
.layout-content a.slnt-article-compact__link:focus-visible {
  text-decoration: underline;
  text-decoration-color: #fff;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.slnt-article-compact-card {
  transition: box-shadow 0.15s;
}

.slnt-article-compact-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* Focus ring goes round the whole card, not just the title text. Dark
   ring on the off-white page (16:1), with the 2px offset gap keeping
   it distinct from the card colour. */
.slnt-article-compact__link:focus-visible {
  outline: none;
}

.slnt-article-compact__link:focus-visible::after {
  outline: 3px solid var(--text, #1a1a1a);
  outline-offset: 2px;
}

/* ── Summary — standfirst or trimmed body, clamped to three lines so
   uneven lengths don't make the rows ragged. ── */
.slnt-article-compact__summary {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 0.9375rem; /* 15px — see the note in event-compact.css */
  line-height: 1.4;
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Guaranteed air above the bottom-pinned kicker when the text fills
   the card. */
.slnt-article-compact__summary:not(:last-child),
.slnt-article-compact__title:not(:last-child) {
  margin-bottom: 0.8rem;
}

.slnt-article-compact__title + .slnt-article-compact__summary {
  margin-top: -0.4rem; /* keep title→summary tight */
}

/* ── Kicker (topic trail) — last in the card, raised above the
   stretched link so its topic links stay independently clickable. ── */
.slnt-article-compact-card .slnt-topic-trail {
  position: relative;
  z-index: 1;
  margin: auto 0 0 0; /* pin to the bottom edge of the card */
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.slnt-article-compact-card .slnt-topic-trail__ancestors {
  margin-bottom: 0;
}

.slnt-article-compact-card .slnt-topic-trail .slnt-topic-trail__ancestor {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.slnt-article-compact-card .slnt-topic-trail__separator {
  font-size: 0.8rem;
  color: #fff;
  margin: 0 0.3rem;
}

.slnt-article-compact-card .slnt-topic-trail__ancestor:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Narrow phones: one column, so a shorter tile band is enough ── */
@media (max-width: 499px) {
  .slnt-article-compact-card {
    --card-fade: 4.5rem;
    min-height: 0;
  }
}

/* ── Phones/tablets: .slnt-section-listing adds 1.2rem side padding at
   ≤799px, which insets the grid from the heading above it and wastes
   width. Drop it for this grid so cards align with the heading. ── */
@media (max-width: 799px) {
  .slnt-articles-compact-grid.slnt-section-listing {
    padding-left: 0;
    padding-right: 0;
  }
}