.regia {
  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--passo-6), 9vh, var(--passo-12)) var(--passo-8);
  overflow-x: clip;
}

.regia__sfondo {
  position: absolute;
  z-index: var(--z-sfondo);
  top: 0;
  inset-inline: 0;
  height: min(100%, 880px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(125% 100% at 50% 0%, rgba(0, 0, 0, 1) 38%, rgba(0, 0, 0, 0.5) 68%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(125% 100% at 50% 0%, rgba(0, 0, 0, 1) 38%, rgba(0, 0, 0, 0.5) 68%, rgba(0, 0, 0, 0) 100%);
}

.regia__sfondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 60%;
  opacity: 0.6;
  filter: saturate(0.9);
}

.regia__sfondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    var(--fondo) 0%,
    color-mix(in srgb, var(--fondo) 72%, transparent) 34%,
    color-mix(in srgb, var(--fondo) 0%, transparent) 82%
  );
}

.regia__sfondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  var(--linea) 0 1px, rgba(0, 0, 0, 0) 1px 72px),
    repeating-linear-gradient(to bottom, var(--linea) 0 1px, rgba(0, 0, 0, 0) 1px 72px);
  opacity: 0.75;
}

.regia__griglia {
  position: relative;
  z-index: var(--z-contenuto);
  width: min(100%, calc(var(--max-larghezza) + var(--margine) * 2));
  margin-inline: auto;
  padding-inline: var(--margine);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--passo-4), 6vh, var(--passo-8));
}

@media (min-width: 900px) {
  .quadro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    column-gap: clamp(var(--passo-4), 3.5vw, var(--passo-8));
  }

  .quadro__occhiello   { grid-column: 1 / -1; grid-row: 1; }
  .quadro__titolo      { grid-column: 1; grid-row: 2; }
  .quadro__sottotitolo { grid-column: 1; grid-row: 3; }
  .quadro__azioni      { grid-column: 1; grid-row: 4; }

  .quadro__stato {
    grid-column: 2;
    grid-row: 2 / 5;
    align-self: start;
  }
}

.quadro__occhiello {
  display: flex;
  align-items: center;
  gap: var(--passo-2);
  margin: 0;
  color: var(--testo-tenue);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.quadro__occhiello::before {
  content: "";
  flex: none;
  width: var(--passo-3);
  height: 1px;
  background-color: var(--ciano);
}

.quadro__occhiello::after {
  content: "";
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    var(--linea-forte),
    color-mix(in srgb, var(--linea-forte) 0%, transparent)
  );
}

.quadro__titolo {
  margin-block: var(--passo-3) 0;
  font-size: clamp(2.25rem, 1.15rem + 5vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  padding-bottom: 0.08em;
  overflow-wrap: break-word;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .quadro__titolo {
    background-image: var(--grad-titolo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.quadro__sottotitolo {
  margin-block: var(--passo-3) 0;
  max-width: 52ch;
  color: var(--testo-medio);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
}

.quadro__stato {
  position: relative;
  margin-top: var(--passo-4);
  padding: var(--passo-3);
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background-color: var(--pannello);
  background-image: var(--grad-pannello);
}

@media (min-width: 900px) {
  .quadro__stato { margin-top: 0; }
}

.quadro__stato::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 14px;
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--ciano) 55%, transparent);
  border-right-width: 0;
  border-bottom-width: 0;
  border-start-start-radius: 5px;
  pointer-events: none;
}

.stato__riga {
  display: flex;
  align-items: center;
  gap: var(--passo);
  margin: 0;
  padding-bottom: var(--passo-2);
  border-bottom: 1px solid var(--linea);
  color: var(--testo);
  font-family: var(--font-mono);
  font-size: var(--t-piccolo);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

#spia-grande { --spia-d: 13px; }

.stato__dati {
  margin: 0;
  padding-top: var(--passo-2);
}

.stato__dati dt {
  color: var(--testo-tenue);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.stato__dati dd {
  margin: 0;
  margin-top: calc(var(--passo) * 0.5);
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
}

.stato__dati dd + dt {
  margin-top: var(--passo-2);
  padding-top: var(--passo-2);
  border-top: 1px solid var(--linea);
}

.conto {
  display: block;
  color: var(--ciano);
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

#ultima { color: var(--testo); }

.quadro__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo-2);
  margin-top: var(--passo-4);
}

.quadro__dati {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--linea);
  background-color: color-mix(in srgb, var(--pannello) 55%, transparent);
}

.dato {
  display: flex;
  flex-direction: column;
  gap: calc(var(--passo) * 0.75);
  padding: var(--passo-3) var(--passo-2);
  border-left: 1px solid var(--linea);
}

.dato:nth-child(odd) { border-left: 0; }

.dato:nth-child(n + 3) { border-top: 1px solid var(--linea); }

@media (min-width: 760px) {
  .quadro__dati { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .dato:nth-child(odd) { border-left: 1px solid var(--linea); }
  .dato:first-child { border-left: 0; }
  .dato:nth-child(n + 3) { border-top: 0; }

  .dato { padding: var(--passo-4) var(--passo-3); }
}

.dato__valore {
  color: var(--testo);
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.02em;
  line-height: 1;
}

.dato__etichetta {
  color: var(--testo-tenue);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.regia__scorri {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: var(--passo-6) auto 0;
  padding: var(--passo);
  color: var(--testo-tenue);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
  transition: color var(--durata) var(--curva);
}

.regia__scorri:hover { color: var(--ciano); }

.regia__scorri svg {
  width: 18px;
  height: 18px;
  animation: scorri-giu 2.6s var(--curva) infinite;
}

@keyframes scorri-giu {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}