/* ==========================================================================
   Space Weather Portal INGV — stylesheet unico e responsive
   ========================================================================== */

:root {
  --bg: #1b1b1f;
  --bg-panel: #1f1f26;;
  --bg-panel-alt: #22222a;
  --border: rgba(255, 255, 255, .12);
  --border-soft: rgba(255, 255, 255, .11);
  --text: #f2f1ee;
  --text-dim: rgba(255, 255, 255, .7);
  --text-dimmer: rgba(255, 255, 255, .45);
  --text-faint: rgba(255, 255, 255, .35);
  --accent: #4aa8c0;
  --accent-hover: #7cc6d8;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --gap-page: 30px;
}

@media (max-width: 640px) {
  :root { --gap-page: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--text);
}

img { max-width: 100%; display: block; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

button { font-family: inherit; }

/* ---------------------------------------------------------------------- */
/* Layout                                                                  */
/* ---------------------------------------------------------------------- */

.page { background: var(--bg); padding-bottom: 44px; overflow-x: hidden; }

.container { width: 95%; margin: 0 auto; }

@media (min-width: 1024px) {
  .container { min-width: 970px; }
}

.page-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  max-width: 85%;
}

.page-title__main {
  font: 700 24px/1.2 var(--font-sans);
  letter-spacing: -.01em;
  color: var(--accent);
  white-space: nowrap;
}

.page-title__tagline {
  font: 700 18px/1.5 var(--font-sans);
  color: rgba(255, 255, 255, .88);
}

.bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px 30px;
  padding: 7px var(--gap-page);
  background: #fff;
}

/* Balances the logo/meta column widths with an invisible spacer so the
   middle (title) column is truly centered on the page, not just on the
   leftover space between the logo and the Contatti/EN block. */
.bar--home { grid-template-columns: auto 1fr auto 123px; }
.bar--home::after { content: ""; grid-column: 4; grid-row: 1; }

/* The logo image is wrapped in a link to roma2.ingv.it; display:contents
   keeps that wrapper out of the grid so .bar__logo still occupies the grid
   cell directly, exactly as when the img was a bare grid item. */
.bar > a:has(.bar__logo) { display: contents; }

.bar__logo {
  grid-column: 1;
  grid-row: 1;
  height: 108px;
  width: auto;
  margin: 0;
}


.bar__meta {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  font: 12.5px/1 var(--font-sans);
  color: #3a3a40;
  justify-self: end;
}

.bar__lang {
  font: 700 13px var(--font-mono);
  letter-spacing: .04em;
  color: var(--text);
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, .28);
  padding: 8px 14px;
  text-decoration: none;
  cursor: pointer;
}
.bar__lang:hover { color: var(--accent); border-color: var(--accent); }

.hero__meta {
  display: flex;
  align-items: center;
  flex: none;
  gap: 22px;
  font: 12.5px/1 var(--font-sans);
  color: #3a3a40;
}

/* Footer replicated from roma2.ingv.it: black info block (logo + four
   contact columns) followed by a grey legal-links bar. */
.footer-roma2 {
  margin-top: 30px;
  background: #000;
}

.footer-roma2__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
  padding: 48px var(--gap-page) 40px;
}

.footer-roma2__logo { display: block; height: 80px; width: auto; }

.footer-roma2__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-roma2__col strong {
  display: block;
  font: 700 11.5px var(--font-mono);
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 10px;
}

.footer-roma2__col p {
  margin: 0 0 4px;
  font: 14px/1.5 var(--font-sans);
  color: rgba(255, 255, 255, .85);
}

.footer-roma2__col a {
  color: #8ecfe0;
  text-decoration: none;
}
.footer-roma2__col a:hover { text-decoration: underline; }

.footer-roma2__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 14px var(--gap-page);
  background: #9a9a9a;
  font: 12px var(--font-sans);
  color: #fff;
  text-align: center;
}

.footer-roma2__legal a { color: #fff; text-decoration: none; }
.footer-roma2__legal a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .footer-roma2__top { padding: 32px var(--gap-page) 28px; gap: 28px; }
  .footer-roma2__cols { gap: 28px; }
}

/* ---------------------------------------------------------------------- */
/* Page navigation / breadcrumb                                           */
/* ---------------------------------------------------------------------- */

.pagenav {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  padding: 24px var(--gap-page) 15px;
  border-bottom: 1px solid var(--border-soft);
}
.pagenav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--bg-panel);
  z-index: -1;
}

.pagenav__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  min-height: 88px;
}

.pagenav__crumbs {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 700 15.5px/1.3 var(--font-mono);
  letter-spacing: .2em;
  color: var(--accent);
  flex-wrap: wrap;
}

.pagenav__crumbs a { color: inherit; text-decoration: none; }
.pagenav__crumbs a:hover { color: var(--accent-hover); }
.pagenav__crumbs .current { color: var(--accent); }
.pagenav__crumbs .sep { color: rgba(255, 255, 255, .25); }

.pagenav__links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font: 13.5px/1.3 var(--font-mono);
  letter-spacing: .08em;
  margin-top: 34px;
}
.pagenav__links .sep { color: rgba(255, 255, 255, .25); }

.photo-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.photo-carousel {
  display: flex;
  gap: 8px;
  flex: 1;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.photo-carousel__nav {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .75);
  background: rgba(15, 17, 20, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  cursor: pointer;
}
.photo-carousel__nav:hover { color: #fff; background: rgba(15, 17, 20, .85); border-color: var(--accent); }

.photo-carousel__item {
  position: relative;
  flex: 0 0 calc((100% - 24px) / 4);
  height: 110px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #101418;
  cursor: zoom-in;
}

.photo-carousel__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.photo-carousel__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 17, 20, 0) 45%, rgba(15, 17, 20, .68) 100%),
    linear-gradient(90deg, rgba(15, 17, 20, .35), rgba(15, 17, 20, 0) 18%, rgba(15, 17, 20, 0) 82%, rgba(15, 17, 20, .35));
  pointer-events: none;
}

.photo-carousel__item:hover img,
.photo-carousel__item:focus-visible img {
  transform: scale(1.06);
}

.photo-carousel__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .photo-carousel__item { flex: 0 0 calc((100% - 8px) / 2); height: 90px; }
}

.pagenav__time {
  font: 13.5px/1.3 var(--font-mono);
  color: var(--accent);
  white-space: nowrap;
  justify-self: end;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 10.5px/1.3 var(--font-mono);
  color: var(--accent);
}

.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* Home page top nav (inline links) */
.topnav {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  padding: 24px var(--gap-page) 15px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 22px;
}
.topnav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--bg-panel);
  z-index: -1;
}

.topnav__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
}

.topnav__brand {
  font: 700 15.5px/1.3 var(--font-mono);
  letter-spacing: .2em;
  color: var(--accent);
  justify-self: start;
}


.topnav__links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font: 13.5px/1.3 var(--font-mono);
  letter-spacing: .08em;
  margin-top: 34px;
}

.topnav__links .sep { color: rgba(255, 255, 255, .25); }

.topnav__time {
  font: 13.5px/1.3 var(--font-mono);
  color: var(--accent);
  white-space: nowrap;
  justify-self: end;
}

/* Generic reset-styled inline text buttons */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, .88);
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  text-decoration: none;
}
.link-btn:hover { color: var(--accent); }

.text-link {
  display: inline-block;
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  padding: 0 0 5px;
  font: 700 14.5px/1.35 var(--font-sans);
  text-decoration: none;
}
.text-link:hover { color: #fff; border-bottom-color: var(--accent); }
.text-link--plain { border-bottom: 0; padding-bottom: 0; }

/* ---------------------------------------------------------------------- */
/* Hero (sala di monitoraggio)                                            */
/* ---------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
  padding: 7px var(--gap-page);
}

.hero__logo {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 108px;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.hero--home {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
.hero--home .hero__logo {
  grid-column: 1;
  grid-row: 1;
  height: 96px;
  max-height: none;
  width: 549px;
  max-width: none;
}
.hero--home .page-title { grid-column: 2; grid-row: 1; }
.hero--home .hero__meta { grid-column: 3; grid-row: 1; justify-self: end; }

@media (max-width: 900px) {
  .hero { flex-wrap: wrap; justify-content: center; padding: 18px var(--gap-page); }
  .hero__logo { max-height: 90px; }
  .hero__meta { flex-basis: 100%; justify-content: center; }
  .bar { grid-template-columns: 1fr auto; }
  .bar--home::after { content: none; }
  .hero--home { grid-template-columns: 1fr; justify-items: center; }
  .hero--home .hero__logo { grid-column: 1; grid-row: 1; height: 60px; width: 343px; }
  .hero--home .hero__meta { grid-column: 1; grid-row: 2; justify-self: center; }
  .hero--home .page-title { grid-column: 1; grid-row: 3; }
  .hero--home::after { content: none; }
  .pagenav__row, .topnav__row { flex-direction: column; align-items: center; gap: 14px; min-height: 0; }
  .page-title { position: static; transform: none; max-width: none; }
}

/* ---------------------------------------------------------------------- */
/* Tabs (sala di monitoraggio)                                            */
/* ---------------------------------------------------------------------- */

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  margin: 52px var(--gap-page) 0;
}

.tab {
  cursor: pointer;
  background: rgba(74, 168, 192, .05);
  border: 0;
  padding: 20px 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  border-bottom: 2px solid transparent;
  transition: background .25s ease;
  color: rgba(255, 255, 255, .68);
}

.tab:hover { background: rgba(74, 168, 192, .09); }

.tab.is-active {
  background: rgba(74, 168, 192, .14);
  color: #fff;
  border-bottom-color: var(--accent);
}

.tab__label { font: 400 17px/1.25 var(--font-sans); letter-spacing: -.01em; }
.tab__meta { font: 11px/1.4 var(--font-mono); color: rgba(255, 255, 255, .42); }

@media (max-width: 900px) {
  .tabs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tabs { grid-template-columns: 1fr; }
}

/* Dashboard panel */
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.panel-head__title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.panel-head__title h2 {
  margin: 0;
  font: 400 22px/1.2 var(--font-sans);
  color: var(--text);
  letter-spacing: -.015em;
}

.panel-head__sources {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font: 12.5px var(--font-mono);
  color: var(--text-dimmer);
  white-space: nowrap;
}

.panel-head__sources a {
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.panel-head__sources a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.dashboard {
  border: 1px solid var(--border);
}

.dashboard__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  font: 10px var(--font-mono);
  letter-spacing: .16em;
  color: var(--text-dimmer);
}

.dashboard__zoom {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.dashboard__image {
  display: block;
  width: 100%;
  background: #111;
  cursor: zoom-in;
}

.dashboard__zoom-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  cursor: pointer;
  color: #fff;
  background: rgba(10, 11, 13, .6);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
}
.dashboard__zoom-btn:hover { background: rgba(10, 11, 13, .85); border-color: #fff; }

.dashboard--empty {
  height: 420px;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 10px, transparent 10px 20px);
  text-align: center;
}
.dashboard--empty[hidden] { display: none; }

.dashboard--empty__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 0 20px;
}

.dashboard--empty__badge {
  font: 10.5px var(--font-mono);
  letter-spacing: .16em;
  color: var(--text-dimmer);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 7px 12px;
}

.dashboard--empty__hint {
  font: 12.5px/1.5 var(--font-sans);
  color: rgba(255, 255, 255, .45);
  max-width: 420px;
}

/* ---------------------------------------------------------------------- */
/* Tiles grid (home page)                                                  */
/* ---------------------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 var(--gap-page) 30px;
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: #101418;
  transition: transform .32s ease, box-shadow .32s ease;
}

.tile__link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.tile__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.tile__bg {
  position: absolute;
  inset: -40px;
  filter: blur(3px);
  transition: filter .4s ease;
  transform: scale(1.08);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tile:hover .tile__bg { filter: blur(0); }
.tile--hero .tile__bg { filter: blur(1.5px); }

.tile__gradient { position: absolute; inset: 0; }
.tile__gradient--h { background: linear-gradient(90deg, rgba(15, 17, 20, .9) 0%, rgba(15, 17, 20, .55) 58%, rgba(15, 17, 20, .2) 100%); }
.tile__gradient--v { background: linear-gradient(180deg, rgba(15, 17, 20, .25), rgba(15, 17, 20, .9)); }
.tile__gradient--v-soft { background: linear-gradient(180deg, rgba(15, 17, 20, .32), rgba(15, 17, 20, .88)); }

.tile__tint {
  position: absolute;
  inset: 0;
  background: rgba(27, 27, 31, 0);
  transition: background .32s ease;
}
.tile:hover .tile__tint { background: rgba(27, 27, 31, 0); }

.tile__info-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  cursor: pointer;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 0;
  color: rgba(255, 255, 255, .75);
  background: rgba(15, 17, 20, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile__info-btn::before {
  content: "?";
  font: 700 17px/1 var(--font-sans);
}
.tile__info-btn:hover { color: #fff; background: rgba(15, 17, 20, .85); border-color: var(--accent); }

.tile__badge-logo {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  height: 40px;
  width: auto;
  max-width: calc(100% - 28px);
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

/* Logos with no background of their own (transparent PNG): a plain
   box-shadow would show up as a dark rectangle around the invisible
   padding, so a chip gets a real white backing instead, and a glow gets a
   shape-following drop-shadow instead of a boxed one. */
.tile__badge-logo--chip {
  height: 48px;
  padding: 6px 10px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

.tile__badge-logo--glow {
  height: 62px;
  box-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
}

.tile--hero {
  grid-column: span 4;
  height: 370px;
}
.tile--hero:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .42); }

.tile__hero-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(90px, 20vw, 150px);
  margin: 28px 0 20px;
}

@media (max-width: 640px) {
  .tile__hero-logo { margin: 16px 0; }
}

.tile--half {
  grid-column: span 2;
  height: 276px;
}
.tile--half:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, .36); }

.tiles__quarters {
  grid-column: span 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

.tiles__section-title {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font: 700 15.5px/1.3 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.tile--quarter {
  flex: 0 0 calc(50% - 5px);
  height: 276px;
}
.tile--quarter:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .32); }

/* Nelle mattonelle piccole il link di apertura copre l'intera mattonella,
   compresa l'area sotto il pulsante "?": un click leggermente impreciso su
   quel pulsante finiva per aprire la mattonella invece di aprire l'info.
   Disattivando il link sull'area immagine e riattivandolo solo sul testo, un
   click mancato vicino al "?" non naviga più per errore. */
.tile--quarter .tile__link { pointer-events: none; }
.tile--quarter .tile__link .tile__kicker,
.tile--quarter .tile__link .tile__title--half,
.tile--quarter .tile__link .tile__desc {
  pointer-events: auto;
  cursor: pointer;
}

.tile__content {
  position: absolute;
  inset: 0;
  padding: 24px 26px;
  display: grid;
  align-content: center;
}

.tile__content--hero { padding: 32px 36px; display: flex; flex-direction: column; justify-content: space-between; }

.tile__content--half { grid-template-rows: auto auto auto; gap: 6px; }

.tile__content--quarter { padding: 17px 19px; grid-template-rows: auto auto; gap: 6px; }

.tile__kicker {
  font: 700 11.5px var(--font-mono);
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 9px;
}
.tile__content--quarter .tile__kicker { font-size: 11px; color: rgba(255, 255, 255, .5); margin-bottom: 0; }

.tile__title--hero {
  margin: 0 0 12px;
  font: 700 40px/1.1 var(--font-sans);
  color: #fff;
  letter-spacing: -.022em;
}

.tile__title--half {
  margin: 0;
  align-self: start;
  font: 700 26px/1.15 var(--font-sans);
  color: #fff;
  letter-spacing: -.015em;
}

.tile__title--quarter {
  margin: 0;
  align-self: start;
  font: 700 16.5px/1.2 var(--font-sans);
  color: #fff;
}

.tile__lead {
  margin: 0 0 12px;
  max-width: 540px;
  font: 17px/1.55 var(--font-sans);
  color: #fff;
}
.tile__lead p { margin: 0; }

.tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: var(--accent);
  color: #fff;
  font: 600 15px/1 var(--font-sans);
}

.tile__desc {
  margin: 0;
  font: 700 14.5px/1.45 var(--font-sans);
  color: #fff;
}

@media (max-width: 1024px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile--hero { grid-column: span 2; }
  .tiles__quarters { grid-column: span 2; }
}

@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr; padding: 0 var(--gap-page) 24px; }
  .tile--hero, .tile--half { grid-column: span 1; height: auto; min-height: 300px; }
  .tiles__quarters { grid-column: span 1; }
  .tile--quarter { height: auto; min-height: 160px; flex-basis: 100%; }
  .tile__title--hero { font-size: 28px; }

  /* .tile__link/.tile__content normally stretch (inset:0) to match a fixed
     tile height, which on mobile clips longer descriptions since height:auto
     has no in-flow content to size from. .tile__link becomes a normal-flow
     box so its height comes from its content. .tile__content stays
     "position: relative" rather than static: relative still counts toward
     that flow-based sizing, but (unlike static) it keeps painting in the
     same later paint layer as the still-absolute .tile__bg/gradient/tint,
     so the text doesn't end up hidden underneath them. */
  .tile__link { position: static; }
  .tile__content { position: relative; }

  /* The nav-link rows use flex-wrap with a plain "|" text separator between
     items; with the longer link labels (mostly on the STORM page) that wrap
     to 2+ lines at phone widths, the separator can end up stranded alone on
     its own line. Stacking each link on its own row avoids that. */
  .pagenav__links, .topnav__links { flex-direction: column; align-items: center; }
  .pagenav__links .sep, .topnav__links .sep { display: none; }

  /* Same wrap-orphaning issue as the links row above, but for the "HOME /
     SALA DI MONITORAGGIO" breadcrumb: at narrow widths the "/" can land
     alone on its own line between the two wrapped labels. */
  .pagenav__crumbs { flex-direction: column; }
  .pagenav__crumbs .sep { display: none; }
}

/* ---------------------------------------------------------------------- */
/* People table (chi siamo)                                                */
/* ---------------------------------------------------------------------- */

.people-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--border);
  border: 1px solid var(--border);
}

.people-table th {
  background: var(--bg-panel);
  padding: 12px 16px;
  font: 10px var(--font-mono);
  letter-spacing: .16em;
  color: var(--text-dimmer);
  text-align: left;
}

.people-table td {
  background: var(--bg);
  padding: 14px 16px;
  font: 400 14px/1.35 var(--font-sans);
  color: var(--text);
  vertical-align: middle;
}

.people-table td.role,
.people-table td.unit { font-size: 13px; color: var(--text-dim); }

.photo-placeholder {
  width: 64px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 12px);
  font: 8.5px var(--font-mono);
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .35);
}

.table-note {
  margin: 14px 0 0;
  font: 10.5px/1.5 var(--font-mono);
  color: var(--text-faint);
}

.lead-text {
  margin: 0;
  max-width: 900px;
  font: 400 19px/1.45 var(--font-sans);
  color: rgba(255, 255, 255, .82);
}

@media (max-width: 768px) {
  .people-table, .people-table thead, .people-table tbody, .people-table th, .people-table td, .people-table tr {
    display: block;
  }
  .people-table thead { display: none; }
  .people-table tr {
    border: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .people-table td {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-soft);
  }
  .people-table td::before {
    content: attr(data-label);
    flex: 0 0 130px;
    font: 10px var(--font-mono);
    letter-spacing: .1em;
    color: var(--text-dimmer);
  }
  .photo-placeholder { width: 48px; height: 60px; }
}

/* ---------------------------------------------------------------------- */
/* Modal                                                                   */
/* ---------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 11, 13, .72);
}
.modal-overlay[hidden] { display: none; }

.modal {
  position: relative;
  width: 900px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  position: sticky;
  top: 0;
  background: #16161a;
}

.modal__kicker {
  font: 9.5px var(--font-mono);
  letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: 9px;
}

.modal__title {
  margin: 0 0 8px;
  font: 400 25px/1.2 var(--font-sans);
  color: var(--text);
  letter-spacing: -.018em;
}

.modal__lead {
  margin: 0;
  max-width: 520px;
  font: 13px/1.5 var(--font-sans);
  color: rgba(255, 255, 255, .6);
}

.modal__close {
  flex: none;
  cursor: pointer;
  background: none;
  font: 11px var(--font-mono);
  color: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 6px 10px;
}
.modal__close:hover { color: #fff; border-color: #fff; }

.modal__body { padding: 22px 30px 40px; }
.modal__body[hidden] { display: none; }

.prose {
  font: 400 14px/1.65 var(--font-sans);
  color: rgba(255, 255, 255, .78);
}

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose p,
.prose ul,
.prose dl { margin: 0 0 16px; }

.prose p { text-align: justify; }

.prose h3 {
  margin: 22px 0 10px;
  font: 500 15px/1.3 var(--font-sans);
  color: var(--text);
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 4px 0 20px;
  border: 1px solid var(--border);
}

.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 7px; }

.prose dt {
  margin-top: 14px;
  font-weight: 600;
  color: var(--text);
}

.prose dd {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .68);
  text-align: justify;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose__note {
  font: 10.5px/1.5 var(--font-mono);
  color: var(--text-faint);
}

@media (max-width: 640px) {
  .modal-overlay { padding: 0; }
  .modal { width: 100%; height: 100%; max-height: 100%; }
}

/* ---------------------------------------------------------------------- */
/* Lightbox (zoom a schermo intero sulle immagini dashboard)               */
/* ---------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 13, .92);
}

.lightbox__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.lightbox__close {
  cursor: pointer;
  background: none;
  font: 11px var(--font-mono);
  color: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 6px 10px;
}
.lightbox__close:hover { color: #fff; border-color: #fff; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, .75);
  background: rgba(15, 17, 20, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
}
.lightbox__nav:hover { color: #fff; background: rgba(15, 17, 20, .85); border-color: var(--accent); }
.lightbox__nav[hidden] { display: none; }
/* Le frecce sono figlie di .lightbox__frame, che si restringe attorno alla
   foto effettivamente renderizzata: posizionarle appena fuori dai suoi bordi
   le tiene vicine all'immagine invece che ai margini dello schermo. */
.lightbox__nav--prev { left: -60px; }
.lightbox__nav--next { right: -60px; }

@media (max-width: 900px) {
  /* Sotto i 900px la foto può occupare quasi tutta la larghezza disponibile:
     un offset negativo la spingerebbe fuori schermo, quindi si torna ad
     ancorare le frecce ai bordi dello schermo (position: fixed ignora
     .lightbox__frame come contenitore). */
  .lightbox__nav { position: fixed; }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
}

@media (max-width: 640px) {
  .lightbox__nav { width: 38px; height: 38px; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
}

.lightbox__frame {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.lightbox__viewport {
  position: relative;
  width: fit-content;
  max-width: 1400px;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}
.lightbox__viewport.is-zoomed { cursor: grab; }
.lightbox__viewport:active { cursor: grabbing; }

.lightbox__image {
  max-width: 100%;
  max-height: 68vh;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .05s linear;
}

.lightbox__caption {
  margin: 0;
  max-width: 1400px;
  padding: 0 24px;
  font: 700 14px/1.4 var(--font-sans);
  color: rgba(255, 255, 255, .82);
  text-align: center;
}
.lightbox__caption:empty { display: none; }

.lightbox__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 11px var(--font-mono);
  color: var(--text-dimmer);
}
.lightbox__controls button {
  cursor: pointer;
  width: 30px;
  height: 30px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .22);
}
.lightbox__controls button:hover { border-color: #fff; }
.lightbox__reset { width: auto !important; padding: 0 12px; }
.lightbox__controls span { min-width: 46px; text-align: center; }

@media (max-width: 640px) {
  .lightbox { padding: 0; }
}