/* =============================================================================
   /notizie/ — two editorial streams
   design_handoff_infordata_theme/PAGINE-NUOVE.md, section 4.

   Loaded only on the pages that carry the [infordata_notizie] shortcode, after
   assets/infordata-redesign.css, whose tokens it uses throughout. Markup comes
   from converta-child/inc/notizie.php, so every selector here is one this file
   owns: no ADJUST guesses, no !important except where Elementor's own page
   styles have to be undone.

   Dark mode follows the same convention as the redesign sheet: values under
   html[data-theme="dark"], not wired to prefers-color-scheme.
   ========================================================================== */

/* --- 1. Stream accents ----------------------------------------------------
   Purple is the brand, green is sustainability and research. Each stream sets
   four tokens and every component below reads only those, so a card, a pill,
   a tab and a column rule never disagree about which stream they belong to. */
.inf-nidx--soluzioni {
  --inf-nidx-accent: var(--inf-brand-500);
  --inf-nidx-text: var(--inf-link);
  --inf-nidx-surface: var(--inf-brand-50);
  --inf-nidx-border: var(--inf-brand-200);
}
.inf-nidx--ricerca {
  --inf-nidx-accent: var(--inf-eco-500);
  --inf-nidx-text: var(--inf-eco-text);
  --inf-nidx-surface: var(--inf-eco-surface);
  --inf-nidx-border: var(--inf-eco-border);
}
.inf-nidx--tutte {
  --inf-nidx-accent: var(--inf-faint);
  --inf-nidx-text: var(--inf-body);
  --inf-nidx-surface: var(--inf-sunken);
  --inf-nidx-border: var(--inf-border);
}
/* The brand ramp's pale end stays pale in dark mode — it is only overridden at
   500/600 — so the purple pill surfaces need their own dark values. The eco
   tokens already have them in the redesign sheet.

   Mixed from the token rather than written as a literal. These started life as
   rgba(201,114,184,…), the dark #C972B8 of the day they were written, and went
   stale the moment the ramp moved to #964494/#B982B7. color-mix keeps them on
   whatever the brand is; patch-01 already uses it in this codebase. */
html[data-theme="dark"] .inf-nidx--soluzioni {
  --inf-nidx-surface: color-mix(in srgb, var(--inf-brand-500) 14%, transparent);
  --inf-nidx-border: color-mix(in srgb, var(--inf-brand-500) 34%, transparent);
}

.inf-nidx {
  font-family: var(--inf-sans);
  color: var(--inf-body);
  background: var(--inf-card);
}

/* The theme insets Elementor content by 40px on .content-col, inside a
   .container-fluid / .row pair whose 15px and -15px cancel out. The block
   carries its own 1240px measure and 24px gutter, so on this page the inset
   comes off and the measure is the only thing setting the margins. Scoped by
   the body class, and specific enough not to need !important. */
.inf-notizie-index .inner-content-row > .content-col {
  padding-left: 0;
  padding-right: 0;
}
/* The intro heading's measure is NOT set here. It lives on its Elementor
   container (1a35e7a: boxed, 1240px, 24px gutter), which is the control built
   for it. From a stylesheet it would have to outrank
   `.elementor.elementor .e-con > .elementor-widget { max-width:100% }` —
   double-classed at 0,4,0 on purpose — and every selector that wins that is
   one nobody should have to read. The builder is the right layer for geometry.
*/

/* --- 2. Controls: search and the three tabs -------------------------------
   The band, the panel and the active tab all sit on the card surface, exactly
   as in the prototype: the tab is read from its border and its shadow, not
   from a change of colour, and it covers the 1px rule below it. */
.inf-nidx__controls > * {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 24px;
}

.inf-nidx__search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 20px;
}
.inf-nidx__search-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--inf-faint);
  margin-right: 2px;
}
.inf-nidx__search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  max-width: 420px;
}
.inf-nidx__search-icon {
  position: absolute;
  left: 12px;
  color: var(--inf-muted);
  pointer-events: none;
}
.inf-nidx__search-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 38px;
  font-family: var(--inf-sans);
  font-size: 15px;
  color: var(--inf-text);
  background: var(--inf-sunken);
  border: 1px solid var(--inf-border);
  border-radius: var(--inf-r-control);
}
.inf-nidx__search-input::placeholder { color: var(--inf-faint); }
.inf-nidx__search-go {
  min-height: 44px;
  padding: 10px 18px;
  font-family: var(--inf-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--inf-on-brand);
  background: var(--inf-brand-500);
  border: 1px solid var(--inf-brand-500);
  border-radius: var(--inf-r-control);
  cursor: pointer;
}
.inf-nidx__search-go:hover { background: var(--inf-brand-600); border-color: var(--inf-brand-600); }

.inf-nidx__tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 20px;
  border-bottom: 1px solid var(--inf-border);
}
/* Tab shape: open towards the bottom, and the active one merges with the panel
   under it by covering that 1px rule. */
.inf-nidx__tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--inf-muted);
  text-decoration: none;
}
.inf-nidx__tab:hover { color: var(--inf-text); text-decoration: none; }
.inf-nidx__tab.is-active {
  background: var(--inf-card);
  border-color: var(--inf-border);
  box-shadow: var(--inf-shadow-sm);
  color: var(--inf-text);
}
.inf-nidx__tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--inf-nidx-accent);
  flex: none;
}
.inf-nidx__tab-count {
  font-family: var(--inf-mono);
  font-size: 12.5px;
  color: var(--inf-faint);
}

/* --- 3. Split overview: one column per stream ---------------------------- */
.inf-nidx__split,
.inf-nidx__grid-wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding: 40px 24px 64px;
}
.inf-nidx__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.inf-nidx__column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.inf-nidx__column-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--inf-nidx-accent);
}
.inf-nidx__column-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--inf-text);
}
.inf-nidx__column-hint {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--inf-muted);
}
.inf-nidx__column-all {
  align-self: start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--inf-border);
  border-radius: var(--inf-r-control);
  background: var(--inf-card);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--inf-text);
  text-decoration: none;
  box-shadow: var(--inf-shadow-sm);
}
.inf-nidx__column-all:hover {
  border-color: var(--inf-nidx-accent);
  color: var(--inf-nidx-text);
  text-decoration: none;
}

/* --- 4. Cards -------------------------------------------------------------
   One anchor per card, so the whole tile is a single tab stop and a single
   link for a screen reader. */
.inf-ncard {
  background: var(--inf-card);
  border: 1px solid var(--inf-border);
  border-radius: var(--inf-r-card);
  box-shadow: var(--inf-shadow-sm);
  overflow: hidden;
}
.inf-ncard__link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.inf-ncard__link:hover { text-decoration: none; color: inherit; }
.inf-ncard__media {
  display: block;
  overflow: hidden;
  background: var(--inf-sunken);
}
/* Scoped through .inf-ncard__media so the height beats the theme's
   `.elementor img { height: auto }` (0-1-1), which outranks a lone class and
   left every card image at its natural aspect: short ones letterboxed against
   the sunken background, tall ones running to 640px inside a 190px box. */
.inf-ncard__media .inf-ncard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.inf-ncard__media .inf-nidx__thumb--empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--inf-sunken), var(--inf-border));
}
.inf-ncard__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.inf-ncard__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.inf-ncard__title {
  margin: 0;
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -.015em;
  color: var(--inf-text);
  text-wrap: pretty;
}
.inf-ncard__date {
  font-size: 12.5px;
  color: var(--inf-muted);
}
/* Project tag, in mono — the spec's "tag progetto". */
.inf-ncard__tag {
  font-family: var(--inf-mono);
  font-size: 12.5px;
  color: var(--inf-muted);
}
.inf-ncard__cat {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--inf-nidx-text);
}
.inf-pill {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--inf-nidx-surface);
  border: 1px solid var(--inf-nidx-border);
  color: var(--inf-nidx-text);
}
.inf-ncard__more {
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--inf-nidx-text);
}

/* Featured card: image band, then the meta block. */
.inf-ncard--featured { border-top: 3px solid var(--inf-nidx-accent); }
.inf-ncard--featured .inf-ncard__media { height: 190px; }
.inf-ncard--featured .inf-ncard__body { padding: 22px; }
.inf-ncard--featured .inf-ncard__title { font-size: 21px; }

/* Compact row: 96px thumbnail beside the text. */
.inf-ncard--row { border-left: 3px solid var(--inf-nidx-accent); }
.inf-ncard--row .inf-ncard__link {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
}
.inf-ncard--row .inf-ncard__media {
  height: 72px;
  border-radius: 10px;
}
.inf-ncard--row .inf-ncard__body { gap: 5px; }
.inf-ncard--row .inf-ncard__title { font-size: 15px; font-weight: 600; }
.inf-ncard--row .inf-ncard__meta { gap: 9px; font-size: 12.5px; }

/* Grid card. */
.inf-ncard--grid { border-top: 3px solid var(--inf-nidx-accent); }
.inf-ncard--grid .inf-ncard__link { display: flex; flex-direction: column; }
.inf-ncard--grid .inf-ncard__media { height: 132px; flex: none; }
.inf-ncard--grid .inf-ncard__body { padding: 18px; flex: 1; }
.inf-ncard--grid .inf-ncard__title { font-size: 16px; }
.inf-ncard__tag--foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--inf-border);
  font-size: 12.5px;
  color: var(--inf-faint);
}

@media (prefers-reduced-motion: no-preference) {
  .inf-ncard { transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease; }
  .inf-ncard:hover { transform: translateY(-3px); box-shadow: var(--inf-shadow-md); }
}
.inf-ncard:focus-within { box-shadow: var(--inf-focus), var(--inf-shadow-sm); }
.inf-ncard__link:focus-visible { outline: none; box-shadow: none; }

/* --- 5. Filtered view: chips, result count, grid, pagination ------------- */
.inf-nidx__grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.inf-nidx__chips {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.inf-nidx__chips-label {
  margin-right: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inf-faint);
}
.inf-nidx__chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--inf-border);
  border-radius: 999px;
  background: var(--inf-card);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--inf-body);
  text-decoration: none;
}
.inf-nidx__chip:hover {
  border-color: var(--inf-brand-300);
  color: var(--inf-link);
  text-decoration: none;
}
.inf-nidx__chip.is-active {
  background: var(--inf-brand-50);
  border-color: var(--inf-brand-200);
  color: var(--inf-link);
}
html[data-theme="dark"] .inf-nidx__chip.is-active {
  background: color-mix(in srgb, var(--inf-brand-500) 14%, transparent);
  border-color: color-mix(in srgb, var(--inf-brand-500) 34%, transparent);
}

.inf-nidx__results {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 13.5px;
  color: var(--inf-muted);
}
.inf-nidx__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: var(--inf-r-control);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--inf-link);
  text-decoration: none;
}
.inf-nidx__clear:hover { background: var(--inf-sunken); text-decoration: none; }

.inf-nidx__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.inf-nidx__empty {
  margin: 0;
  padding: 40px 0;
  font-size: 16.5px;
  color: var(--inf-muted);
}

.inf-nidx__pager {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 8px;
}
.inf-nidx__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--inf-border);
  border-radius: var(--inf-r-control);
  background: var(--inf-card);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--inf-body);
  text-decoration: none;
}
.inf-nidx__pager a.page-numbers:hover {
  border-color: var(--inf-brand-300);
  color: var(--inf-link);
  text-decoration: none;
}
.inf-nidx__pager .page-numbers.current {
  background: var(--inf-brand-500);
  border-color: var(--inf-brand-500);
  color: var(--inf-on-brand);
}
.inf-nidx__pager .page-numbers.dots { border-color: transparent; background: transparent; }

/* --- 6. The page around the block ----------------------------------------
   The intro heading's size, weight, casing and alignment now live in
   _elementor_data — it was a 48px uppercase display line in a 100px band,
   bigger than the H1 above it once the redesign layer had brought that down —
   so nothing needs overriding here beyond the colour. */
.inf-notizie-index .elementor-element-df35c4e .elementor-heading-title {
  color: var(--inf-body);
  max-width: 62ch;
  /* The gutter lives here, not on the container. A boxed container centres its
     inner box inside its own inline padding, so padding there moves the whole
     1240 measure rather than insetting the text within it — which left the
     intro starting 24px left of the columns at 1440 and 10px right of them
     below 1240. On the title it insets the text at every width. */
  padding-inline: 24px;
}

/* --- 7. Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
  .inf-nidx__split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
  .inf-nidx__controls > *,
  .inf-notizie-index .elementor-element-df35c4e .elementor-heading-title { padding-inline: 18px; }
  .inf-nidx__split,
  .inf-nidx__grid-wrap { padding: 28px 18px 48px; }
  .inf-nidx__search { gap: 8px; }
  .inf-nidx__search-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .inf-nidx__search-field { max-width: none; flex-basis: 100%; }
  .inf-nidx__search-go { width: 100%; }
  .inf-nidx__tabs { gap: 4px; }
  .inf-nidx__tab { padding: 10px 12px; font-size: 13.5px; }
  .inf-nidx__tab-label { max-width: 13ch; }
  .inf-ncard--featured .inf-ncard__media { height: 160px; }
  .inf-ncard--featured .inf-ncard__body { padding: 18px; }
  .inf-ncard--featured .inf-ncard__title { font-size: 19px; }
  .inf-ncard--row .inf-ncard__link { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .inf-ncard--row .inf-ncard__media { height: 60px; }
  .inf-nidx__grid { grid-template-columns: minmax(0, 1fr); }
}