/* WeVote redesign — index/welcome HERO styles (kit WV.hero shell + per-module
   bodies). Split out of components.css to keep that file lean. Loaded after
   components.css and Tailwind, so `.hero .hero-deco` keeps its absolute position.
   Shared `.chev` / `.is-open .chev` stay in components.css (used elsewhere). */

/* hero: chevron points up when expanded, down when collapsed */
.hero:not(.is-collapsed) .hero-toggle .chev { transform: rotate(180deg); }

/* hero collapse — max-height based (robust, no grid-fr dependency) */
.hero-body {
  overflow: hidden;
  transition: max-height .34s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
  max-height: 1000px; opacity: 1;
}
.hero.is-collapsed .hero-body { max-height: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-body { transition: none; } }

/* hero: warm accent glow + tinted decoration so the panel reads as an
   inviting "moment", not a flat white box. Kept subtle + token-driven.
   Light mode only — in dark mode the hero panel stays clean (no green wash). */
html:not(.dark) .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(135% 130% at 92% -25%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 46%),
    radial-gradient(120% 120% at 50% 125%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 42%);
}
.hero > * { position: relative; z-index: 1; }
/* `.hero .hero-deco` (specificity 0,2,0) so it survives both `.hero > *` and
   the community hero's `.comm-hero > *` relative-position override — the inline
   `absolute` utility loses because our kit CSS loads after Tailwind. */
.hero .hero-deco { position: absolute; top: -2.25rem; right: -1.75rem; z-index: 0; }

/* hero body is a container so inner panels respond to the COLUMN width,
   not the viewport — keeps the aside correct in narrow feed columns + mobile */
.hero-body { container-type: inline-size; }
/* next-election + ballot aside: stacks by default, goes side-by-side when its
   own column is wide enough */
.hero-next { display: flex; flex-direction: column; gap: 10px; }
.hero-next__info { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.hero-next__btn { justify-content: space-between; width: 100%; }
@container (min-width: 460px) {
  .hero-next { flex-direction: row; align-items: center; gap: 12px; }
  .hero-next__btn { justify-content: center; width: auto; flex: none; }
}

/* feature cards: compact icon+label row when narrow (saves vertical space on
   mobile), roomy icon-over-text card when the column is wide */
.hero-feat { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
.hero-feat__sub { display: none; }
@container (min-width: 520px) {
  .hero-feat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
  .hero-feat__sub { display: block; }
}
/* feature row: hidden on mobile (saves space), shown once the column is roomy */
.hero-feats { display: none; gap: 10px; overflow-x: auto; }
@container (min-width: 560px) { .hero-feats { display: flex; } }

/* proposals hero stat bar (kit proposals module) — 2 cols on mobile, 4 when
   the column is roomy; hairline grid lines via the 1px gap + bg trick. */
.prop-statbar {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden;
}
@media (min-width: 640px) { .prop-statbar { grid-template-columns: repeat(4, 1fr); } }
.prop-statbar > div { background: var(--paper); }
.prop-stat__num {
  font-family: "Poppins", sans-serif; font-weight: 700; letter-spacing: -.02em;
  font-size: 24px; line-height: 1.05; color: var(--accent-ink);
}
.prop-stat__label {
  font-size: 12px; color: var(--muted); line-height: 1.2; margin-top: 2px;
}

/* home hero photo feature strip (kit home module) — a horizontal row of cards
   that grow to fill the hero, then scroll sideways when the column is narrow. */
.home-feats {
  display: flex; gap: 12px; overflow-x: auto;
  padding-bottom: 4px; scroll-snap-type: x proximity;
}
.home-feats > * { flex: 1 0 150px; min-width: 150px; max-width: 230px; scroll-snap-align: start; }
.home-feat {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline); background: var(--paper);
  border-radius: 14px; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.home-feat:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.home-feat .home-feat__media { position: relative; width: 100%; aspect-ratio: 16 / 10; display: block; border-radius: 14px 14px 0 0; overflow: hidden; }
.home-feat .home-feat__media picture { display: block; width: 100%; height: 100%; }
.home-feat .home-feat__body { padding: 9px 11px 11px; }
.home-feat .home-feat__label { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--accent-ink); }
.home-feat .home-feat__sub { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--muted); }

/* community hero photo cards (kit community module) — larger than home's, with
   a hover gradient over the image. */
.comm-feats { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.comm-feats > * { flex: 1 1 200px; min-width: 190px; max-width: 320px; scroll-snap-align: start; }
.comm-feat {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline); background: var(--paper);
  border-radius: 16px; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.comm-feat:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.comm-feat .comm-feat__media { position: relative; width: 100%; aspect-ratio: 16 / 10; display: block; background: var(--sunken); border-radius: 16px 16px 0 0; overflow: hidden; }
.comm-feat .comm-feat__media picture { display: block; width: 100%; height: 100%; }
.comm-feat .comm-feat__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--accent) 14%, transparent)); opacity: 0; transition: opacity .18s ease; }
.comm-feat:hover .comm-feat__media::after { opacity: 1; }
.comm-feat .comm-feat__body { padding: 12px 14px 14px; }
.comm-feat .comm-feat__label { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--accent-ink); letter-spacing: -.005em; }
.comm-feat .comm-feat__sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }

/* community hero: a touch more emerald presence (light mode only). */
html:not(.dark) .comm-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(680px 220px at 88% -40%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
.comm-hero > * { position: relative; z-index: 1; }