/* ═══════════════════════════════════════════════════════════════
   LAWRYSE — HOMEPAGE (W3)

   Built to Alice's approved mockup: white canvas, dark hero, one card
   system, red as accent. Every value is a token from style.css.
   ═══════════════════════════════════════════════════════════════ */

.lw-main { min-width: 0; display: flex; flex-direction: column; gap: var(--lw-s7); }

/* ── Chips ───────────────────────────────────────────────────────── */

.lw-chip {
  display: inline-block;
  padding: var(--lw-s1) var(--lw-s3);
  border-radius: 4px;
  font-size: var(--lw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lw-chip--solid { background: var(--lw-red); color: #fff; }
.lw-chip--light { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* ── Tagline banner (Alice, 2026-09-21) ─────────────────────────────
   A fixed masthead strip above the hero — deliberately compact ("shouldn't
   be too large"), one row on desktop, stacking on mobile. ── */

.lw-tagline-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lw-s5);
  padding: var(--lw-s5) var(--lw-s6);
  border-radius: var(--lw-radius);
  background: var(--lw-canvas);
  border: 1px solid var(--lw-border);
}
.lw-tagline-banner__headline {
  margin: 0;
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-xl);
  line-height: var(--lw-lh-tight);
  font-weight: 700;
}
.lw-tagline-banner__headline span { display: inline; }
.lw-tagline-banner__navy { color: var(--lw-navy); }
.lw-tagline-banner__red { color: var(--lw-red); }
.lw-tagline-banner__subhead {
  margin: var(--lw-s1) 0 0;
  color: var(--lw-muted);
  font-size: var(--lw-fs-base);
}
.lw-tagline-banner__cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lw-s1);
  padding: var(--lw-s3) var(--lw-s5);
  border-left: 1px solid var(--lw-border);
  text-decoration: none;
}
.lw-tagline-banner__cta-kicker {
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lw-red);
}
.lw-tagline-banner__cta-label {
  font-size: var(--lw-fs-base);
  font-weight: 600;
  color: var(--lw-navy);
}
.lw-tagline-banner__cta:hover .lw-tagline-banner__cta-label { color: var(--lw-red); }

@media (max-width: 767px) {
  .lw-tagline-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--lw-s4) var(--lw-s5);
  }
  .lw-tagline-banner__headline { font-size: var(--lw-fs-lg); }
  .lw-tagline-banner__cta {
    border-left: none;
    border-top: 1px solid var(--lw-border);
    padding: var(--lw-s3) 0 0;
    width: 100%;
  }
}

/* ── Hero ────────────────────────────────────────────────────────── */

.lw-hero {
  border-radius: var(--lw-radius);
  overflow: hidden;
  background: var(--lw-ink);
}

.lw-hero__lead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  padding: var(--lw-s7) var(--lw-s6);
  background-size: cover;
  background-position: center;
}
/* Scrim so white text stays legible on any photograph. */
.lw-hero__lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,0.25) 0%, rgba(20,20,20,0.88) 100%);
}
.lw-hero__lead--empty { background: var(--lw-ink); min-height: 300px; }

.lw-hero__body { position: relative; z-index: 1; max-width: 640px; }

.lw-hero__title {
  margin: var(--lw-s4) 0 var(--lw-s3);
  font-size: var(--lw-fs-2xl);
  line-height: var(--lw-lh-tight);
  color: #fff;
}
.lw-hero__title a { color: #fff; }
.lw-hero__title a:hover { color: var(--lw-pink); }

.lw-hero__standfirst {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--lw-fs-md);
  margin-bottom: var(--lw-s3);
}
.lw-hero__meta {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--lw-fs-xs);
  margin-bottom: var(--lw-s5);
}

/* The three-item strip beneath the hero. */
.lw-hero__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.lw-hero__strip-item {
  display: flex;
  flex-direction: column;
  gap: var(--lw-s2);
  padding: var(--lw-s5);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.lw-hero__strip-item:first-child { border-left: 0; }
.lw-hero__strip-item:hover { background: rgba(255, 255, 255, 0.04); }

.lw-hero__strip-kicker {
  color: var(--lw-red);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lw-hero__strip-title {
  color: #fff;
  font-size: var(--lw-fs-sm);
  font-weight: 500;
  line-height: var(--lw-lh-snug);
}
.lw-hero__strip-more { color: var(--lw-red); font-size: var(--lw-fs-xs); font-weight: 600; }

@media (max-width: 767px) {
  .lw-hero__strip { grid-template-columns: minmax(0, 1fr); }
  .lw-hero__strip-item { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
  .lw-hero__lead { min-height: 320px; padding: var(--lw-s6) var(--lw-s5); }
}

/* ── Sections ────────────────────────────────────────────────────── */

.lw-sec__head {
  display: flex;
  align-items: baseline;
  gap: var(--lw-s4);
  flex-wrap: wrap;
  margin-bottom: var(--lw-s5);
}
.lw-sec__title { margin: 0; font-size: var(--lw-fs-xl); }
.lw-sec__sub { margin: 0; color: var(--lw-muted); font-size: var(--lw-fs-sm); flex: 1 1 auto; }
.lw-sec__more { font-size: var(--lw-fs-sm); font-weight: 600; white-space: nowrap; }
.lw-sec__note { margin-top: var(--lw-s4); font-size: var(--lw-fs-xs); color: var(--lw-muted); }

/* ── Grid ────────────────────────────────────────────────────────── */

.lw-grid { display: grid; gap: var(--lw-s5); }
.lw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Archives run three-up: the column is the same width as the homepage's but
   carries a lead card above the grid, and four across under it reads as a
   denser page than the front page itself. */
.lw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Homepage sections that show exactly two articles, one row (Alice, 2026-08-03). */
.lw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .lw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lw-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lw-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .lw-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .lw-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* Cards sit in a bordered container on the homepage, per the mockup. */
.lw-grid .lw-card {
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius);
  overflow: hidden;
  padding-bottom: var(--lw-s4);
}
.lw-grid .lw-card__media { border-radius: 0; }
.lw-grid .lw-card__kicker,
.lw-grid .lw-card__title,
.lw-grid .lw-card__excerpt,
.lw-grid .lw-card__meta { margin-inline: var(--lw-s4); }
.lw-grid .lw-card__meta {
  margin-top: auto;
  padding-top: var(--lw-s3);
  border-top: 1px solid var(--lw-border);
}

/* ── Placeholders ────────────────────────────────────────────────────
   Visibly placeholder up close. Deliberately NOT fabricated people —
   see the placeholder policy note in inc/blocks.php.                  */

.lw-card--placeholder { opacity: 0.85; }
.lw-card__media--empty {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    45deg,
    var(--lw-field), var(--lw-field) 10px,
    #EDEDED 10px, #EDEDED 20px
  );
}
.lw-avatar-ph {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--lw-border-strong);
  display: block;
}
.lw-card--placeholder .lw-card__title { color: var(--lw-muted); font-weight: 500; }

/* The .lw-laria explainer-band rules were deleted with the band itself
   (Alice, 2026-08-11) — see inc/blocks.php. Deleted rather than left behind:
   orphaned CSS for a removed block is what makes the next person think the
   block still exists.                                                    */

/* ── Partners ────────────────────────────────────────────────────── */

.lw-partners {
  display: flex;
  align-items: center;
  gap: var(--lw-s5);
  flex-wrap: wrap;
  padding: var(--lw-s5) 0;
  border-top: 1px solid var(--lw-border);
  border-bottom: 1px solid var(--lw-border);
}
.lw-partners__title { margin: 0; font-size: var(--lw-fs-md); white-space: nowrap; }
.lw-partners__row { display: flex; gap: var(--lw-s5); flex: 1 1 auto; flex-wrap: wrap; }
.lw-partners__slot {
  width: 110px; height: 28px;
  border-radius: 4px;
  background: var(--lw-field);
}
.lw-partners__cta { font-size: var(--lw-fs-sm); font-weight: 600; white-space: nowrap; }

/* ── Sidebar widget variants ─────────────────────────────────────── */

.lw-widget--accent { background: var(--lw-red); border-color: var(--lw-red); color: #fff; }
.lw-widget--dark   { background: var(--lw-ink); border-color: var(--lw-ink); color: #fff; }

.lw-widget__title--plain { border-bottom: 0; padding-bottom: 0; color: inherit; }
.lw-widget--accent .lw-widget__title,
.lw-widget--dark   .lw-widget__title { color: #fff; }

.lw-widget__lede { font-size: var(--lw-fs-sm); color: inherit; opacity: 0.9; }

.lw-widget__badge {
  margin: var(--lw-s3) 0 0;
  font-size: var(--lw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lw-muted);
}
.lw-widget--accent .lw-widget__badge,
.lw-widget--dark   .lw-widget__badge { color: rgba(255,255,255,0.7); }

/* Poll */
.lw-poll__intro { margin-bottom: var(--lw-s3); }
.lw-poll__q { font-size: var(--lw-fs-sm); font-weight: 500; color: var(--lw-ink); }
/* Option rows (.lw-poll__opts/.lw-poll__dot) moved to components.css
   2026-09-23 — the vote pop-up opens on pages that never load home.css. */
.lw-poll__submit { margin-top: var(--lw-s3); }

.lw-poll__status {
  margin: var(--lw-s2) 0 0;
  font-size: var(--lw-fs-xs);
  color: var(--lw-muted);
}
.lw-poll__status.is-error { color: var(--lw-red); }

/* Results (revealed once closed) */
.lw-poll__results { margin: var(--lw-s3) 0 0; padding: 0; list-style: none; }
.lw-poll__result { margin: 0 0 var(--lw-s3); }
.lw-poll__result-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--lw-s2);
  font-size: var(--lw-fs-sm);
}
.lw-poll__result-label { color: var(--lw-ink); }
.lw-poll__result-pct { font-weight: 700; color: var(--lw-red); flex: none; }
.lw-poll__result-bar {
  display: block;
  margin-top: 4px;
  height: 6px;
  border-radius: 3px;
  background: var(--lw-border);
  overflow: hidden;
}
.lw-poll__result-bar span {
  display: block;
  height: 100%;
  background: var(--lw-red);
  border-radius: inherit;
}

/* Public Voices */
.lw-pv { margin: 0; padding: 0; list-style: none; }
.lw-pv__item { padding: var(--lw-s3) 0; border-top: 1px solid var(--lw-border); }
.lw-pv__item:first-child { border-top: 0; padding-top: 0; }
.lw-pv__q { display: block; font-size: var(--lw-fs-sm); font-weight: 500; color: var(--lw-ink); text-decoration: none; }
.lw-pv__q:hover { color: var(--lw-red); }

/* A widget badge that is also a link (real Public Voices CTA, W5) — same
   quiet type treatment as the "coming soon" badge, but invites the click
   it now actually leads somewhere real. */
.lw-widget__badge--link {
  display: inline-block;
  color: var(--lw-red);
  text-decoration: none;
}
.lw-widget__badge--link:hover { color: var(--lw-red-dark); text-decoration: underline; }

/* Events */
.lw-events { margin: 0; padding: 0; list-style: none; }
.lw-events__item {
  display: flex; gap: var(--lw-s4); align-items: flex-start;
  padding: var(--lw-s3) 0;
  border-top: 1px solid var(--lw-border);
  margin: 0;
}
.lw-events__item:first-child { border-top: 0; padding-top: 0; }
.lw-events__date {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--lw-radius-sm);
  background: var(--lw-pink-soft);
}
.lw-events__body { display: flex; flex-direction: column; gap: var(--lw-s1); }
.lw-events__title { font-size: var(--lw-fs-sm); font-weight: 500; color: var(--lw-ink); }
.lw-events__meta  { font-size: var(--lw-fs-xs); color: var(--lw-muted); }

/* ── House advertising units ─────────────────────────────────────── */

.lw-house { display: flex; flex-direction: column; gap: var(--lw-s3); align-items: flex-start; }
.lw-house__kicker {
  font-size: var(--lw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lw-red);
}
.lw-house__title { margin: 0; font-size: var(--lw-fs-md); }
.lw-house__text  {
  margin: 0;
  font-size: var(--lw-fs-sm);
  /* Clamped so the 3 rotating HOMEPAGE_BANNER creatives (2026-08-03) read
     as the same size regardless of how long each one's copy is. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lw-house--dark {
  background: var(--lw-ink);
  color: #fff;
  /* Alice, 2026-08-03: "does not need such wide spaces... keep banners
     more or less the same consistent size" — trimmed from s5 (24px). */
  padding: var(--lw-s4);
  border-radius: var(--lw-radius-sm);
  width: 100%;
}
.lw-house--dark .lw-house__title { color: #fff; }
.lw-house--dark .lw-house__text  { color: rgba(255,255,255,0.8); }

.lw-house--accent {
  background: var(--lw-pink-soft);
  padding: var(--lw-s4);
  border-radius: var(--lw-radius-sm);
  width: 100%;
}

/* The homepage banner house unit runs wide. */
.lw-ad--homepage-banner .lw-house--dark {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lw-s5);
}
.lw-ad--homepage-banner .lw-house__text { max-width: 52ch; }

/* ── Expert Insights cards ───────────────────────────────────────── */

.lw-expert__media {
  position: relative;
  aspect-ratio: 4 / 5;
  /* The 4:5 portrait ratio was fine at the old 4-up width; at 2-up
     (Alice, 2026-08-03) the same ratio against a much wider column
     ballooned into a ~460px-tall box — "huge spaces". Capped so it stops
     scaling purely by column width. */
  max-height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--lw-ink);
}
.lw-expert__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Monogram fallback until portraits are dropped into assets/img/demo/. */
.lw-expert__monogram {
  font-size: var(--lw-fs-2xl);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.04em;
}

/* Name plate over the portrait, as in the approved mockup. */
.lw-expert__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--lw-s5) var(--lw-s4) var(--lw-s3);
  background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,0.9) 60%);
  color: #fff;
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  line-height: var(--lw-lh-snug);
}

/* The badge that makes a member attorney stand out (MASTER §21.1.1). */
.lw-badge-member {
  display: inline-block;
  margin-right: var(--lw-s2);
  padding: 2px var(--lw-s2);
  border-radius: 3px;
  background: var(--lw-pink-soft);
  color: var(--lw-red-dark);
  font-size: var(--lw-fs-xs);
  font-weight: 600;
}

/* ── Sidebar article search (Alice, 2026-08-01) ──────────────────── */

.lw-search__form { display: flex; flex-direction: column; gap: var(--lw-s3); }
.lw-search__input { width: 100%; }
.lw-search__submit { width: 100%; }

.lw-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lw-s2);
  margin: var(--lw-s4) 0 0;
  padding: 0;
  list-style: none;
}
.lw-search__chips li { margin: 0; padding: 0; border: 0; }
.lw-search__chips .lw-card__kicker { margin: 0; }
.lw-search__chips a:hover { background: var(--lw-pink); }

/* Deep Teal — the guide's "occasional splash". Used in exactly one place
   so the red-and-navy identity stays recognisable (guide §2). */
.lw-search .lw-widget__title { border-bottom-color: var(--lw-teal); }