/* ===========================
   🎨 DESIGN TOKENS (light)
   =========================== */
:root {
  --bg: #f8f9fb;                 /* sfondo pagina */
  --fg: #0e1116;                 /* testo principale */
  --muted: #5e6a7a;              /* testo attenuato */
  --card: #ffffff;               /* sfondo card */
  --ring: #f2ae5e;               /* CodeCorn gold (bordi/accento) */
  --accent: #2ec4b6;             /* teal secondario */
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* ombra card */
  --alert: #ff6b6b;                 /* rosso corallo */
  --alert-ink: #1a1a1a;             /* inchiostro su alert chiaro */
  --alert-ring: rgba(255, 107, 107, .25);
  --ring-rgb: 242, 174, 94;   /* #f2ae5e */
  --accent-rgb: 46, 196, 182; /* #2ec4b6 */
}

/* ===========================
   🌓 Preferenza dark (di sistema)
   =========================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f14;
    --fg: #e6e9ef;
    --muted: #9aa4b2;
    --card: #0f141b;
    --accent: #62d6c7;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }
}

/* ===========================
   🌓 Toggle forzato dal JS
   =========================== */
[data-theme="light"] {
  --bg: #f8f9fb;
  --fg: #0e1116;
  --muted: #5e6a7a;
  --card: #ffffff;
  --accent: #2ec4b6;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] {
  --bg: #0b0f14;
  --fg: #e6e9ef;
  --muted: #9aa4b2;
  --card: #0f141b;
  --accent: #62d6c7;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --ring-rgb: 242, 174, 94;   /* stesso ring in dark */
  --accent-rgb: 98, 214, 199; /* teal leggermente diverso in dark */
}

/* ===========================
   🔤 Base tipografica + background
   =========================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  /* sfondo con due chiazze soft + tinta base */
  background:
    radial-gradient(60vmax 60vmax at 10% 10%, rgba(242, 174, 94, 0.09), transparent 60%),
    radial-gradient(60vmax 60vmax at 90% 20%, rgba(46, 196, 182, 0.12), transparent 60%),
    var(--bg);
  background-repeat: no-repeat, no-repeat, no-repeat; /* ← stop a qualsiasi tiling */
}

/* ===========================
   🧱 Layout principale (centra la card)
   =========================== */
.wrap {
  min-height: 100%;
  display: grid;
  place-items: center;                   /* centra orizz/vert */
  padding: clamp(16px, 3vw, 48px);       /* resposive padding */
}

/* ===========================
   💳 Card contenitore
   =========================== */
.card {
  width: min(980px, 94vw);               /* non superare 980px */
  background: var(--card);
  border-radius: 24px;
  border: 2px solid color-mix(in hsl, var(--ring) 28%, transparent); /* bordo soft */
  box-shadow: var(--shadow);
  padding: clamp(18px, 2.8vw, 36px);
  position: relative;
}

/* ===========================
   📌 Header card: badge + toggle
   =========================== */
.topbar{
  display: flex;
  align-items: center;                    /* allinea verticalmente */
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.badge {
  display: inline-block;
  border: 1px solid color-mix(in hsl, var(--accent) 40%, transparent);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
}

/* ===========================
   🏷️ Titoli e lead
   =========================== */
h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
}
.lead {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

/* ===========================
   🔀 Split (illustrazione + dettagli)
   - Mobile: colonna invertita (dettagli sopra, illust sotto)
   - Desktop (≥1024px): riga con illust 20% + dettagli 80%
   =========================== */
.split{
  display: flex;
  flex-direction: column-reverse;         /* mobile: invertito */
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(12px, 2vw, 18px);
}

/* ===========================
   🖼️ Illustrazione: frame + crop
   - overflow: hidden => taglia i bordi dell'immagine
   - display: grid => img 100%/100% si ancora bene
   =========================== */
.illust {
  background: linear-gradient(180deg, color-mix(in hsl, var(--accent) 14%, transparent), transparent);
  border: 1px dashed color-mix(in hsl, var(--ring) 40%, transparent);
  border-radius: 20px;
  padding: clamp(8px, 1.4vw, 14px);

  /* 🔽 aggiunte per il crop */
  overflow: hidden;          /* nasconde la parte ritagliata dell'immagine */
  display: grid;             /* crea un contesto per far “stirare” il figlio */
  margin: 0;                 /* già gestito da .split */
}

/* L'immagine riempie SEMPRE il box .illust
   - width/height 100% => occupa tutto il contenitore
   - object-fit: cover => mantiene proporzioni e CROPA l'eccesso
   - object-position: center => crop centrato
*/
img.hero {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ❤️ il trucco per il crop */
  object-position: center;   /* centra il soggetto */
  display: block;
  border-radius: inherit;    /* segue gli angoli del contenitore */
}

/* ===========================
   🗂️ Blocco diagnostico (details/summary)
   =========================== */
.ctx {
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in hsl, var(--ring) 40%, transparent);
}
.ctx > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--fg);
  outline: none;
  list-style: none;                       /* rimuove marker default */
}
.ctx > summary::-webkit-details-marker { display: none; }
.ctx > summary::before {
  content: "▾ ";
  color: color-mix(in hsl, var(--accent) 70%, var(--ring) 30%);
  font-weight: 900;
}

/* === Modalità cattura: evita color-mix/gradienti non supportati da html2canvas === */
details.ctx.capture-mode {
  /* bordo e bg semplici, niente gradienti */
  border: 1px dashed rgba(var(--ring-rgb), .40) !important;
  background: rgba(0, 0, 0, 0) !important;
}
details.ctx.capture-mode > summary::before {
  color: rgba(var(--accent-rgb), .9) !important;
}
details.ctx.capture-mode .kv .v {
  background: rgba(var(--accent-rgb), .10) !important;
  border: 1px solid rgba(var(--accent-rgb), .30) !important;
}
/* ===========================
   🔑🔧 Key–Value grid (righe k/v)
   =========================== */
.kv {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.kv .row {
  display: grid;
  grid-template-columns: 170px 1fr;      /* chiave fissa + valore fluido */
  gap: 12px;
  align-items: start;
}
.kv .row.full { grid-template-columns: 170px 1fr; }
.kv .k {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.kv .v {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 8px;
  background: color-mix(in hsl, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in hsl, var(--accent) 30%, transparent);
  user-select: all;                       /* copiare rapido */
  word-break: break-word;                 /* UA lunghi */
}
.kv .v.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
}

/* ===========================
   🚩 Stile bandierina
   =========================== */
.flag {
  /* leggermente più grande del testo per staccare */
  font-size: 18px;
  line-height: 1;
  margin-right: 6px;
}

/* ===========================
   ☑️ CTA (bottoni)
   =========================== */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(14px, 2vw, 22px);
}
.btn {
  appearance: none;
  cursor: pointer;
  border: 2px solid var(--ring);
  background: var(--ring);
  color: #1a1a1a;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 15px;
  transition: transform 0.06s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 8px 20px rgba(242, 174, 94, 0.22);
  text-decoration: none;
  display: inline-block;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: saturate(1.1); }
.btn.btn-outline {
  background: transparent;
  color: var(--fg);
  border-color: color-mix(in hsl, var(--accent) 60%, var(--ring) 40%);
  box-shadow: none;
}

.btn-alert{
  background: var(--alert);
  border-color: var(--alert);
  color: #fff;
  box-shadow: 0 8px 20px var(--alert-ring);
}
.btn-alert:hover{ transform: translateY(-1px); }
.btn-alert:active{ transform: translateY(0); filter: saturate(1.05); }

/* 💡 lieve “lampeggio” (pulse a respiro) */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--alert-ring); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}
.attention{
  animation: pulseGlow 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .attention{ animation: none; }
}

/* 📝 messaggio stato */
.hint{
  color: var(--muted);
  margin-left: 8px;
}

/* ===========================
   🛰️ Toggle tema (ora nella topbar)
   =========================== */
.mode {
  border: 1px solid color-mix(in hsl, var(--ring) 40%, transparent);
  background: transparent;
  color: var(--fg);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}

/* ===========================
   🦶 Footer
   =========================== */
footer {
  margin-top: clamp(20px, 3.2vw, 36px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* ===========================
   📱 Responsive (≤640px)
   - righe k/v in una colonna
   =========================== */
@media (max-width: 640px) {
  .kv .row, .kv .row.full { grid-template-columns: 1fr; }
  .kv .k { margin-bottom: 2px; }
  h1 {
    font-size: clamp(20px, 4vw, 44px);
    margin-top: 5px;
  }
}

/* ===========================
   🖥️ Breakpoint "lg" (≥1024px)
   - affianca illustrazione (20%) e dettagli (80%)
   =========================== */
@media (min-width: 1024px){
  .split{
    flex-direction: row;                 /* desktop: affiancati */
    align-items: stretch;     /* <— NECESSARIO per far matchare le altezze */

  }
  .illust{
    flex: 0 0 20%;                       /* 20% fisso per illustrazione */
    min-width: 160px;                    /* evita collasso eccessivo */
    max-width: 280px;                    /* opzionale: non esagerare */
  }
  .ctx{
    flex: 1 1 0;                         /* resto dello spazio */
  }
}

/* ===========================
   📱 Mobile/Tablet (<1024px)
   - .split è in colonna -> serve dare un'ALTEZZA al riquadro
   - usiamo un'altezza fluida per avere sempre un’area da riempire
   =========================== */
@media (max-width: 1023px){
  .split{
    flex-direction: column-reverse;   /* dettagli sopra, illust sotto */
  }
  .illust{
    /* altezza “elastica”: abbastanza grande ma non enorme */
    height: clamp(200px, 40vw, 420px);
    /* in alternativa: aspect-ratio verticale
       aspect-ratio: 3 / 5;  */
  }
}

/* ===========================
   📏 Ultra-narrow (≤321px)
   - comfort verticale (niente center forzato)
   =========================== */
@media (max-width: 321px) {
  .wrap{
    padding-block: calc(16px + env(safe-area-inset-top, 0px))
                   calc(20px + env(safe-area-inset-bottom, 0px));
    place-items: start;
    align-content: start;
    min-height: auto;
  }
  .card{
    width: 100%;
    margin-block: 10px;
    padding: 14px;
    border-radius: 18px;
  }
  .cta{ margin-top: 12px; gap: 10px; }
  .btn{ padding: 9px 12px; font-size: 14px; }
  .kv .row, .kv .row.full{ grid-template-columns: 1fr; }
  .kv .k{ margin-bottom: 2px; }
}