/* ==========================================================================
   EQUIDEM DESIGN SYSTEM - CARDS (components/cards.css)
   Dossier cards, civic KPI blocks and membership certificates.
   ========================================================================== */

.c-card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: none;
  border: 1px solid var(--color-border-subtle);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.c-card--interactive {
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.c-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--color-border);
  box-shadow: var(--shadow-card-hover);
}

/* ---- Homepage level 1: lead inchiesta + radar manifestazioni -------------
   Two surfaces with different editorial weight: the lead is a dossier page,
   the radar is a civic agenda on warm paper. Colour stays in the metadata,
   never in a full-bleed block. */
.c-card--lead {
  padding: var(--space-6);
}

.c-lead__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.c-lead__reading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-subheader);
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.c-lead__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-header);
  font-weight: var(--font-weight-display);
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

.c-lead__title a {
  color: var(--color-text-heading);
  text-decoration: none;
}

.c-lead__title a:hover,
.c-lead__title a:focus {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.c-lead__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface-alt);
}

.c-lead__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-lead__media-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 3px var(--space-2);
  border-radius: var(--radius-xs);
  background-color: rgba(11, 37, 69, 0.92);
  color: var(--color-text-inverse);
  font-family: var(--font-subheader);
  font-size: 0.64rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
}

.c-lead__standfirst {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}

.c-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.c-meta-row li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.c-lead__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ---- Civic radar: upcoming demonstrations ------------------------------- */
.c-card--radar {
  padding: var(--space-5);
  background-color: var(--color-civic-sand);
  border-color: var(--color-border);
}

.c-radar__head {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.c-radar__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-subheader);
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--color-civic-crimson);
}

.c-radar__pulse {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background-color: currentColor;
  box-shadow: 0 0 0 3px rgba(158, 42, 43, 0.16);
}

.c-radar__heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-header);
  font-weight: var(--font-weight-display);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}

.c-radar__count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.c-radar__badge {
  padding: 2px var(--space-2);
  border: 1px solid rgba(11, 37, 69, 0.24);
  border-radius: var(--radius-xs);
  background-color: var(--color-primary-light);
  font-family: var(--font-subheader);
  font-size: 0.64rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

.c-radar__cities {
  letter-spacing: 0.02em;
}

.c-radar__list {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.c-radar__item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.45);
}

.c-radar__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.c-radar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: 0.68rem;
}

.c-radar__city {
  font-family: var(--font-subheader);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

.c-radar__date {
  color: var(--color-text-muted);
}

.c-radar__event {
  margin: 0 0 var(--space-1);
  font-family: var(--font-subheader);
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.c-radar__event a {
  color: var(--color-text-heading);
  text-decoration: none;
}

.c-radar__event a:hover,
.c-radar__event a:focus {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-radar__route {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}

.c-radar__live {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-family: var(--font-subheader);
  font-size: 0.64rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--color-civic-crimson);
}

.c-radar__empty {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.c-radar__more {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* ---- Data Studio banner (homepage action bridge) ------------------------
   Same high-contrast band as the video strip: dark institutional navy, crimson
   rule on top, so the two "tools" sections read as one family.
   Laid out on two columns: the pitch with its single action on the left, a
   carousel of real outputs on the right. Wide side gutters keep the content
   sitting well inside the band instead of clinging to its edges, and the two
   columns are pulled together (tighter gap, carousel slightly wider than the
   pitch) so the copy and the posters read as one block. */
.c-studio-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-10);
  border-top: 3px solid var(--color-civic-crimson);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

/* Left column: the pitch. Centred against the carousel so the two columns
   share the same optical middle instead of hanging from the top edge. */
.c-studio-banner__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.c-studio-banner__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-subheader);
  font-size: 0.66rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.c-studio-banner__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-header);
  font-weight: var(--font-weight-display);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  color: var(--color-text-inverse);
}

/* Half a screen wide at most: the measure is what makes it readable now that
   the pitch owns a column of its own, but it still leans towards the carousel
   instead of stopping halfway through its column. */
.c-studio-banner__lead {
  max-width: 48ch;
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: rgba(255, 255, 255, 0.82);
}

/* Hand-over to the pill list: says whose data the studio holds, then lets the
   pills enumerate what can be explored. */
.c-studio-banner__themes-intro {
  max-width: 44ch;
  margin: var(--space-5) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: rgba(255, 255, 255, 0.72);
}

/* What the tool can produce, one pill per data source. */
.c-studio-banner__themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.c-studio-banner__theme {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius-pill);
  font-family: var(--font-subheader);
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

/* One action only: open the studio. Same button family as the infographic
   cards at the bottom of the homepage, retuned for the dark band. It closes the
   left column, right under the themes. */
.c-studio-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.c-studio-banner__actions .btn-primary {
  border-color: var(--color-bg-surface);
  background-color: var(--color-bg-surface);
  color: var(--color-primary);
}

.c-studio-banner__actions .btn-primary:hover,
.c-studio-banner__actions .btn-primary:focus,
.c-studio-banner__actions .btn-primary:active {
  border-color: var(--color-civic-sand);
  background-color: var(--color-civic-sand);
  color: var(--color-primary-dark);
}

/* ---- Data Studio carousel (right column) --------------------------------
   Three real archive outputs, rotated on every request: proof of what the
   studio builds before the visitor opens it. A native scroll container with
   scroll-snap, so it drags on touch and scrolls from the keyboard even without
   JavaScript; homepage.js only adds the arrows and their end states. */
.c-studio-banner__gallery {
  min-width: 0;
}

/* Label on the left, arrows on the right, clear of the cards' top edge. */
.c-studio-banner__gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.c-studio-banner__examples-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-subheader);
  font-size: 0.66rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Without JavaScript the buttons never appear: it's the script that reveals
   them, and only when the track really overflows. */
.c-studio-banner__nav {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.c-studio-banner__nav[hidden] {
  display: none;
}

.c-studio-banner__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-circle);
  background-color: transparent;
  font-size: 0.82rem;
  line-height: 1;
  color: var(--color-text-inverse);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
}

.c-studio-banner__nav-btn:hover:not(:disabled) {
  border-color: var(--color-bg-surface);
  background-color: rgba(255, 255, 255, 0.12);
}

.c-studio-banner__nav-btn:focus-visible {
  outline: 2px solid var(--color-civic-sand);
  outline-offset: 2px;
}

/* At either end the arrow dims but stays in place, so the head never reflows. */
.c-studio-banner__nav-btn:disabled {
  opacity: 0.32;
  cursor: default;
}

/* The track. --studio-gap is shared with the card width, so "one and a slice"
   stays exact at any column width; the small vertical padding is where the
   hover lift lives, because a scrolling box clips whatever overflows it. */
.c-studio-banner__examples-list {
  --studio-gap: var(--space-4);
  display: flex;
  gap: var(--studio-gap);
  margin: 0;
  padding: var(--space-1) 0 var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.34) transparent;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.c-studio-banner__examples-list::-webkit-scrollbar {
  height: 6px;
}

.c-studio-banner__examples-list::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.34);
}

.c-studio-banner__examples-list::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Focusable only once it overflows (homepage.js adds the tabindex): from there
   the arrow keys walk the cards without stealing a tab stop otherwise. */
.c-studio-banner__examples-list:focus-visible {
  outline: 2px solid var(--color-civic-sand);
  outline-offset: 2px;
}

/* The frames are links into the editor, so say it out loud once. */
.c-studio-banner__examples-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: rgba(255, 255, 255, 0.7);
}

/* One poster plus a clear slice of the next: the slice is the invitation to
   scroll, and the card stays wide enough to recognise the output. */
.c-studio-banner__example {
  flex: 0 0 62%;
  min-width: 0;
  scroll-snap-align: start;
}

/* The last card snaps to its END edge, not its start. In a track that shows one
   poster and a slice there is no room to left-align the third one, so anchoring
   it to the right edge is what makes the final step actually reachable instead
   of bouncing back to the second card. */
.c-studio-banner__example:last-child {
  scroll-snap-align: end;
}

.c-studio-banner__example-frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-surface);
  box-shadow: var(--shadow-lg);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.c-studio-banner__example-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The crop is a door into the editor, not just a picture: reveal the action on
   hover/focus. Screen readers get the same message from .visually-hidden, so
   the pill itself is decorative. */
.c-studio-banner__example-cta {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-civic-crimson);
  font-family: var(--font-subheader);
  font-size: 0.66rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-inverse);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.c-studio-banner__example-frame:hover .c-studio-banner__example-cta,
.c-studio-banner__example-frame:focus-visible .c-studio-banner__example-cta {
  opacity: 1;
  transform: translateY(0);
}

/* The poster is a door into the editor, not just a picture: the lift and the
   brighter border do the pointing. No big shadow — on the navy band it would
   be invisible, and the track would clip it anyway. */
.c-studio-banner__example-frame:hover,
.c-studio-banner__example-frame:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-bg-surface);
}

/* No hover on touch screens: the hint under the carousel does the explaining. */
@media (max-width: 767.98px) {
  .c-studio-banner__example-cta {
    display: none;
  }

  /* On phones the peer is a sliver: enough to promise more, not enough to
     shrink the poster being read. */
  .c-studio-banner__example {
    flex-basis: 78%;
  }
}

/* Smallest screens: tighter band, one full-width call to action. */
@media (max-width: 575.98px) {
  .c-studio-banner {
    padding: var(--space-4);
  }

  .c-studio-banner__title {
    font-size: var(--font-size-lg);
  }

  .c-studio-banner__actions {
    width: 100%;
  }

  .c-studio-banner__actions .btn {
    flex: 1 1 auto;
  }
}

/* Motion is decoration here: honour the OS setting for the scroll and the lift
   alike. */
@media (prefers-reduced-motion: reduce) {
  .c-studio-banner__examples-list {
    scroll-behavior: auto;
  }

  .c-studio-banner__example-frame {
    transition: none;
  }

  .c-studio-banner__example-frame:hover,
  .c-studio-banner__example-frame:focus-visible {
    transform: none;
  }
}

/* ---- Homepage level 4: the civic register (typed feed) ------------------ */
.c-feed__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
}

.c-feed__lead {
  max-width: 68ch;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.c-feed__total {
  margin: 0;
  font-family: var(--font-subheader);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.c-feed__total strong {
  font-size: var(--font-size-md);
  color: var(--color-text-heading);
}

.c-feed__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.c-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-surface);
  font-family: var(--font-subheader);
  font-size: 0.74rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subheading);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.c-filter-chip:hover,
.c-filter-chip:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.c-filter-chip.is-active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.c-filter-chip__count {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.c-feed__empty {
  margin: var(--space-6) 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ---- Media: uniform 16:9 boxes, no distortion -------------------------- */
.c-article-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-surface-alt);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Legacy hook kept: the fixed height is replaced by the 16:9 ratio. */
.c-article-media--fixed {
  height: auto;
}

.c-article-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}

.c-article-image--contain {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.c-article-category {
  display: block;
  width: fit-content;
  max-width: calc(100% - 2 * var(--space-4));
  margin: var(--space-3) var(--space-4) 0;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background-color: var(--color-bg-surface-alt);
  font-family: var(--font-subheader);
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

.c-article-date {
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.c-infographic-card {
  max-width: 24rem;
  /* Nested inside a feed card: no second elevation, no second surface. */
  box-shadow: none;
  background-color: transparent;
}

.c-caption {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* ---- Editorial read link (replaces oversized "Leggi" buttons) ---------- */
.c-link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-subheader);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast), gap var(--transition-fast);
}

.c-link-cta i {
  transition: transform var(--transition-fast);
}

.c-link-cta:hover,
.c-link-cta:focus {
  color: var(--color-primary-hover);
  border-bottom-color: currentColor;
  text-decoration: none;
}

.c-link-cta:hover i,
.c-link-cta:focus i {
  transform: translateX(3px);
}

/* ---- Feed cards (shared shell, one per content type) ------------------- */
.feed-item[hidden] {
  display: none !important;
}

.feed-card {
  overflow: hidden;
}

/* Type modifiers: a 3px accent rule is enough to tell the families apart
   without reintroducing the coloured blocks the old grid relied on. */
.feed-card--event {
  border-top: 3px solid var(--color-civic-crimson);
}

.feed-card--data {
  border-top: 3px solid var(--color-civic-forest);
}

.feed-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-bg-surface-alt);
  border-bottom: 1px solid var(--color-border-subtle);
}

.feed-card__media--data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background-color: var(--color-civic-sand);
}

.feed-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-card__media--data img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.feed-card__type {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-base);
}

.feed-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.feed-card__kicker {
  margin: 0;
  font-family: var(--font-subheader);
  font-size: 0.66rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.feed-card__title {
  margin: 0;
  font-family: var(--font-subheader);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-heading);
}

.feed-card__title a {
  color: inherit;
  text-decoration: none;
}

.feed-card__title a:hover,
.feed-card__title a:focus {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.feed-card__excerpt {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}

.feed-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg-surface-alt);
}

.feed-card__foot--actions {
  justify-content: flex-start;
}

.feed-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.feed-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-subheader);
  font-size: 0.7rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
}

.feed-card__more:hover,
.feed-card__more:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Event head: calendar badge + kicker/title, aligned on the first baseline. */
.feed-card__event-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.feed-card__event-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.c-date-badge {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  padding: var(--space-1) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  line-height: 1;
}

.c-date-badge__day {
  font-family: var(--font-header);
  font-size: 1.2rem;
  font-weight: var(--font-weight-display);
  color: var(--color-primary);
}

.c-date-badge__month {
  margin-top: 2px;
  font-family: var(--font-subheader);
  font-size: 0.6rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.feed-card__when {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-subheading);
}

/* Event cards have no media, so the body carries the full editorial payload:
   summary, topics and provenance fill the same height as the other cards. The
   body grows with the card and the provenance line sits on the footer rule, so
   the extra space reads as breathing room instead of a hollow card. */
.feed-card--event .feed-card__body {
  flex: 1 1 auto;
}

.feed-card__event-summary {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border-subtle);
}

.feed-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feed-card__tag {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-surface-alt);
  font-family: var(--font-subheader);
  font-size: 0.66rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-text-subheading);
}

.feed-card__event-source {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: auto 0 0;
  padding-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.c-event-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2);
  border: 1px solid rgba(158, 42, 43, 0.28);
  border-radius: var(--radius-pill);
  background-color: var(--color-danger-light);
  font-family: var(--font-subheader);
  font-size: 0.62rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-civic-crimson);
}

/* ---- Civic KPI blocks ("I numeri della politica") ---------------------- */
.c-stat-card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  height: 100%;
}

.c-stat-kpi {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
}

.c-stat-kpi__label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-subheader);
  font-size: 0.7rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.c-stat-kpi__value {
  margin: 0 0 var(--space-3);
  font-family: var(--font-header);
  font-weight: var(--font-weight-display);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  font-variant-numeric: tabular-nums;
}

.c-stat-kpi__value-total {
  font-size: 0.52em;
  color: var(--color-text-muted);
  letter-spacing: 0;
}

.c-stat-kpi__meter {
  display: block;
  height: 6px;
  margin-bottom: var(--space-2);
  background-color: var(--color-bg-canvas);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.c-stat-kpi__meter > span {
  display: block;
  height: 100%;
  width: var(--meter-value, 0%);
  background-color: var(--color-primary);
}

.c-stat-kpi__meter-caption {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-text-subheading);
}

.c-stat-kpi__context {
  margin: 0 0 var(--space-4);
  font-size: 0.9rem;
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}

.c-stat-kpi__note {
  margin: auto 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--color-border-strong);
  background-color: var(--color-bg-surface-alt);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* ---- Membership certificates (quota associativa) ----------------------- */
.pricing-container {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
  flex-wrap: wrap;
  align-items: stretch;
  margin: var(--space-6) 0 var(--space-4);
}

.c-pricing-card {
  position: relative;
  flex: 1 1 280px;
  max-width: 380px;
  min-width: 260px;
  cursor: pointer;
  padding: 3.75rem var(--space-6) var(--space-6);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: none;
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

/* Certificate header band: reads as a membership record, not a SaaS plan. */
.c-pricing-card::before {
  content: "Quota sociale annuale";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.45rem var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background-color: var(--color-bg-surface-alt);
  font-family: var(--font-subheader);
  font-size: 0.64rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

.c-pricing-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.c-pricing-card.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.12);
  transform: translateY(-2px);
}

.c-pricing-card.active.premium-card {
  border-color: var(--color-civic-crimson);
  box-shadow: 0 0 0 3px rgba(158, 42, 43, 0.14);
}

.c-pricing-card .tier-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.c-pricing-card .price-amount {
  font-family: var(--font-header);
  font-weight: var(--font-weight-display);
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--color-text-heading);
  margin: var(--space-2) 0 var(--space-1);
  font-variant-numeric: tabular-nums;
}

.c-pricing-card .price-currency {
  font-size: var(--font-size-base);
  vertical-align: super;
  color: var(--color-text-muted);
}

.c-pricing-card .price-period {
  font-size: 0.78rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.c-pricing-card .tier-label {
  font-family: var(--font-header);
  font-weight: var(--font-weight-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}

.c-pricing-card .tier-description {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.c-pricing-card .tier-icon {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 1.9rem;
}

.c-pricing-card .tier-benefits {
  list-style: none;
  padding: var(--space-4) 0 0;
  margin: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border-subtle);
  text-align: left;
  font-size: 0.88rem;
}

.c-pricing-card .tier-benefits li {
  padding: 0.3rem 0;
  color: var(--color-text-body);
}

.c-pricing-card .tier-benefits li i {
  color: var(--color-success);
  margin-right: 0.4rem;
}

.recommended-badge {
  position: absolute;
  top: 0.3rem;
  right: var(--space-2);
  left: auto;
  transform: none;
  z-index: 1;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-xs);
  background: var(--color-civic-crimson);
  color: var(--color-text-inverse);
  font-family: var(--font-subheader);
  font-size: 0.6rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.premium-card {
  border-color: var(--color-civic-crimson);
  background-color: var(--color-bg-surface);
}

.premium-card .price-amount {
  color: var(--color-civic-crimson);
}

.premium-card::before {
  background-color: var(--color-danger-light);
  color: var(--color-civic-crimson);
}

.c-quota-note {
  max-width: 720px;
  margin: 0 auto var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-sm);
  background-color: var(--color-success-light);
  font-size: var(--font-size-sm);
  color: var(--color-text-subheading);
  text-align: left;
}

@media (max-width: 992px) {
  .c-card--lead {
    padding: var(--space-5);
  }

  .c-lead__title {
    font-size: clamp(1.35rem, 4vw, 1.8rem);
  }

  /* Stacked: the pitch on top, the carousel across the whole band. The side
     gutters scale with the viewport so the band never looks hollow on a tablet
     nor cramped on a phone. */
  .c-studio-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5) clamp(var(--space-4), 4vw, var(--space-8));
  }
}

/* Tablet only (phones keep the 78% slice set earlier in the file): with the
   whole band to play with, all three posters fit side by side and there is
   nothing left to scroll — homepage.js hides the arrows once it measures no
   overflow. The trailing gap leaves the maths, hence the /3. */
@media (min-width: 768px) and (max-width: 992px) {
  .c-studio-banner__example {
    flex-basis: calc((100% - 2 * var(--studio-gap)) / 3);
  }
}

@media (max-width: 576px) {
  .c-card--lead,
  .c-card--radar {
    padding: var(--space-4);
  }

  .c-lead__head {
    gap: var(--space-2);
  }

  .c-feed__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .c-feed__filters::-webkit-scrollbar {
    display: none;
  }

  .c-filter-chip {
    flex: 0 0 auto;
  }

  .c-studio-banner__actions .btn {
    flex: 1 1 100%;
  }

  /* Tighter gap on phones, and the card width follows it: the two values are
     read from the same custom property, so the peek stays constant. */
  .c-studio-banner__examples-list {
    --studio-gap: var(--space-2);
  }

  .pricing-container {
    flex-direction: column;
    align-items: center;
  }

  .c-pricing-card {
    max-width: 100%;
    width: 100%;
  }
}