/* ============================================================
   components.css — componenti riutilizzabili (metodologia BEM)
   ============================================================ */

/* --------------------------- pulsanti ---------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.button--primary:hover {
  background: var(--color-accent-dark);
  color: var(--color-on-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

.button--secondary {
  background: var(--color-bg);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}

.button--secondary:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

.button--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

.button--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
  background: var(--color-bg-alt);
}

.button--light {
  background: var(--color-on-accent);
  color: var(--color-accent-deep);
}

.button--light:hover {
  background: var(--color-bg-alt);
}

.button--small {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Varianti usate solo dalla libreria componenti per rendere
   confrontabili gli stati senza dipendere dal puntatore. */
.button--preview-hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.button--preview-focus {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.button--preview-active {
  transform: translateY(0);
  box-shadow: none;
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
}

.button--full {
  width: 100%;
}

.button[disabled],
.button--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.button--arrow::after {
  content: "→";
  font-family: var(--font-family);
  font-size: 0.9em;
  transition: transform var(--transition-fast);
}

.button--arrow:hover::after {
  transform: translateX(3px);
}

/* ------------------------- etichette ----------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 5px var(--space-3) 3px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-family: var(--font-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge--demo {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.badge--neutral {
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
}

/* ---------------------------- card ------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .card:has(.card__link):hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-lift);
    transform: translateY(-3px);
  }
}

.card:has(.card__link):focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-elevated);
}

.card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-3);
  padding: var(--space-5);
}

.card__eyebrow {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

.card__title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.card__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  flex-grow: 1;
}

.card__link {
  align-self: flex-start;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__link:hover {
  color: var(--color-accent-deep);
  text-decoration: underline;
}

.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Card servizio: variante con riquadro icona */
.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.service-card__icon svg {
  width: 1.625rem;
  height: 1.625rem;
}

/* Card in evidenza (es. primo servizio) */
.service-card--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-rest), 0 0 0 1px var(--color-accent);
}

/* Card caso studio */
.case-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Card statistica: mai numeri inventati, solo affermazioni */
.stat-card {
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
}

.stat-card__label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.stat-card__statement {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  line-height: var(--leading-tight);
}

/* ------------------------ pannello CTA --------------------- */

.cta-panel {
  --color-focus-ring: var(--color-surface-dark-link);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background:
    var(--gradient-sheen),
    linear-gradient(135deg, var(--color-accent-deep) 0%, var(--color-accent-dark) 100%);
  color: var(--color-on-accent);
}

@media (min-width: 768px) {
  .cta-panel {
    padding: var(--space-9);
  }
}

.cta-panel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .cta-panel__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.cta-panel__title {
  margin: 0 0 var(--space-3);
  color: var(--color-on-accent);
  font-family: var(--font-family);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  max-width: 22em;
}

.cta-panel__text {
  margin: 0;
  color: var(--color-on-accent);
  max-width: 34em;
}

.cta-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  flex-shrink: 0;
}

/* Il pulsante principale si distingue anche dal pannello petrolio. */
.cta-panel .button--primary {
  background: var(--color-on-accent);
  color: var(--color-accent-deep);
}

.cta-panel .button--primary:hover {
  background: var(--color-bg-alt);
  color: var(--color-accent-deep);
}

.cta-panel__actions .button--secondary {
  background: transparent;
  color: var(--color-on-accent);
  border-color: var(--color-surface-dark-border-strong);
}

.cta-panel__actions .button--secondary:hover {
  background: var(--color-accent-deep);
}

/* --------------------------- callout ----------------------- */

.callout {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  margin-bottom: var(--space-5);
}

.callout__title {
  margin: 0;
  font-size: var(--text-base);
}

.callout p {
  margin: 0;
  color: var(--color-text-muted);
}

.callout--info {
  border-color: var(--color-alert-info-border);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.callout--info .callout__title,
.callout--info p,
.callout--info strong {
  color: var(--color-accent-text);
}

.callout--warning {
  border-color: var(--color-alert-warning-border);
  background: var(--color-warning-soft);
}

.callout--warning p,
.callout--warning strong,
.callout--demo p,
.callout--demo strong {
  color: var(--color-warning-text);
}

.callout--demo {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
  border-style: dashed;
}

.callout--warning .callout__title,
.callout--demo .callout__title {
  color: var(--color-warning);
}

/* ------------------------- tabella dati -------------------- */

.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.table-wrap table {
  margin: 0;
  min-width: 560px;
}

/* --------------------------- accordion --------------------- */

.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.accordion__item + .accordion__item {
  border-top: 1px solid var(--color-border);
}

.accordion__header {
  margin: 0;
}

.accordion__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 0;
  border-radius: 0;
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.accordion__button:hover {
  background: var(--color-bg-alt);
}

.accordion__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent-text);
  transition: transform var(--transition-fast);
}

.accordion__icon::before {
  content: "";
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
}

.accordion__button[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
  background: var(--color-accent-soft);
}

.accordion__panel {
  padding: var(--space-3) var(--space-5) var(--space-5);
  color: var(--color-text-muted);
}

.accordion__panel p:last-child {
  margin-bottom: 0;
}

/* Senza JavaScript l'accordion è aperto; con JS il pannello
   viene nascosto e gestito via aria-expanded.              */
html.js .accordion__panel {
  display: block;
}

html.js .accordion__panel {
  display: none;
}

html.js .accordion__panel.is-open:not([hidden]) {
  display: block;
}

/* ----------------------------- tabs ------------------------ */

.tabs {
  margin-bottom: var(--space-5);
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-1);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: fit-content;
  max-width: 100%;
}

.tabs__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  cursor: pointer;
}

.tabs__button:active {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

.tabs__button:hover {
  color: var(--color-ink);
}

.tabs__button[aria-selected="true"] {
  background: var(--color-bg);
  color: var(--color-accent-text);
  box-shadow: var(--shadow-sm);
}

.tabs__panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

/* Senza JS: i pannelli sono visibili in sequenza. */
html.js .tabs__panel[hidden] {
  display: none;
}

/* --------------------------- form -------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  font-size: var(--text-base);
}

.form-field__required {
  color: var(--color-error);
  font-weight: var(--font-weight-bold);
}

.form-field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-field__input,
.form-field__select,
.form-field__textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-family: var(--font-family);
  font-size: var(--text-base);
  color: var(--color-ink);
}

.form-field__textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field__input::placeholder,
.form-field__textarea::placeholder {
  color: var(--color-text-faint);
}

.form-field__input:hover,
.form-field__select:hover,
.form-field__textarea:hover {
  border-color: var(--color-accent);
}

.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.form-field--error .form-field__input,
.form-field--error .form-field__select,
.form-field--error .form-field__textarea {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-ring);
}

.form-field__error {
  display: none;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

.form-field--error .form-field__error {
  display: flex;
}

.form-field--error .form-field__error::before {
  content: "!";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: var(--color-on-accent);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
}

.form-field__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.form-field__checkbox input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-accent);
}

.form-field__checkbox .form-field__label {
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
}

.form-summary {
  display: none;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  background: var(--color-error-soft);
  color: var(--color-error);
}

.form-summary a {
  color: inherit;
}

.form-summary.is-visible {
  display: block;
}

.form-summary__title {
  margin: 0 0 var(--space-2);
  color: var(--color-error);
  font-size: var(--text-base);
}

.form-summary__list {
  margin: 0;
  padding-left: var(--space-5);
}

.form-summary__list li {
  font-size: var(--text-sm);
}

.form-status {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.form__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --------------------- brief progressivo ------------------ */

.brief-disclosure {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-rest);
}

.brief-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.brief-disclosure__summary::-webkit-details-marker {
  display: none;
}

.brief-disclosure__summary > span:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.brief-disclosure__summary strong {
  font-family: var(--font-family);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.brief-disclosure__summary small {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.brief-disclosure__summary:hover {
  background: var(--color-bg-alt);
}

.brief-disclosure__icon {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-fast);
}

.brief-disclosure[open] .brief-disclosure__icon {
  transform: rotate(225deg) translate(-2px, -2px);
}

.brief-disclosure__body {
  padding: var(--space-6) var(--space-5);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 480px) {
  .brief-disclosure__summary,
  .brief-disclosure__body {
    padding-inline: var(--space-4);
  }
}

/* --------------------------- alert ------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.alert__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  color: inherit;
}

.alert strong {
  color: inherit;
}

.alert p {
  margin: 0;
  font-size: var(--text-sm);
}

.alert--info {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  border: 1px solid var(--color-alert-info-border);
}

.alert--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border: 1px solid var(--color-alert-warning-border);
}

.alert--error {
  background: var(--color-error-soft);
  color: var(--color-error);
  border: 1px solid var(--color-alert-error-border);
}

.alert--success {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid var(--color-alert-success-border);
}

/* ------------------------- pagination ---------------------- */

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

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  background: var(--color-bg);
}

.pagination__link:active {
  background: var(--color-accent-soft);
}

.pagination__list {
  display: contents;
}

.pagination__link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
}

.pagination__link--current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.pagination__link--current:hover {
  color: var(--color-on-accent);
}

.pagination__link--current:active {
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
}

/* ------------------------- filtri -------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.filters__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
}

.filters__button:active {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

.filters__button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
}

.filters__button[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.filters__status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

html.js [data-sectors].is-filtered-out {
  display: none;
}

.filters__empty {
  display: none;
  color: var(--color-text-muted);
}

html.js .filters__empty.is-visible {
  display: block;
}

/* --------------------------- step -------------------------- */

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step-list__item {
  counter-increment: step;
  position: relative;
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.step-list__item::before {
  content: counter(step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.step-list__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.step-list__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Timeline orizzontale (metodo, percorsi utente) */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: process;
}

@media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .process-steps--6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

.process-steps__item {
  counter-increment: process;
  position: relative;
  padding-top: var(--space-7);
}

.process-steps__item::before {
  content: counter(process, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.process-steps__title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-lg);
}

.process-steps__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ------------------------- icon list ----------------------- */

.icon-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.icon-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.icon-list__item::before {
  content: "";
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
}

.icon-list__item::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-text);
}

/* --------------------------- figure ------------------------ */

.figure {
  margin: 0 0 var(--space-6);
}

.figure img {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.figure__caption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------------------- banner dimostrativo ----------------- */

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  font-size: var(--text-sm);
}

.demo-banner__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-warning);
}

.demo-banner p {
  margin: 0;
}

/* -------------------- card profilo (chi sono) -------------- */

.person-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
}

@media (min-width: 768px) {
  .person-card {
    flex-direction: row;
    align-items: center;
  }
}

.person-card__photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.person-card__name {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xl);
}

.person-card__name-link {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

.person-card__name-link:hover {
  color: var(--color-accent-deep);
}

.person-card__name-link:empty {
  display: block;
  min-width: 9em;
  min-height: 1.15em;
}

.public-data--profile-heading:empty {
  min-height: 1.08em;
}

.person-card__role {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ----------------------- lista contatti -------------------- */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-list__item {
  margin: 0;
}

.contact-list__label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-family);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.contact-list__value {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

/* ----------------------- checklist pagina ------------------ */

.checklist {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  counter-reset: check;
}

.checklist__item {
  counter-increment: check;
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.checklist__item::before {
  content: counter(check, decimal-leading-zero);
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-family: var(--font-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
}

/* Il canvas ampio non deve allungare le righe di testo e i moduli. */
@media (min-width: 1921px) {
  .card__text,
  .callout p,
  form[data-form-name] {
    max-width: 70ch;
  }
}

.checklist__item--done {
  border-color: var(--color-border);
  background: var(--color-bg-alt);
}

.checklist__item--done::before {
  content: "✓";
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* --------------------------- FAQ --------------------------- */

.faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .faq {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ------------------------ legenda demo --------------------- */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Collegamenti editoriali: pochi passi pertinenti, gestiti nel CMS. */
.related-links {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.related-links__title {
  margin: 0;
  font-size: var(--text-xl);
}

.related-links__list {
  margin: 0;
  padding-left: var(--space-5);
}

.related-links__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 768px) {
  .related-links {
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-7);
  }
}