/* ==========================================================================
   ImperialFood - Tecnologia Triplo Strato (T.L.T.)
   Stili specifici della pagina. Si appoggia a tokens.css + components.css
   (caricare dopo). Tre breakpoint del progetto: 0 / 768 / 1024.
   I tre colori "strato" riprendono quelli del diagramma triplo-strato.jpg
   (nucleo ambra, strato intermedio azzurro, strato esterno bruno).
   ========================================================================== */

:root {
  --tlt-core:  #F2A93B;   /* nucleo - vitalità */
  --tlt-mid:   #1A6FC2;   /* strato intermedio - nutrimento */
  --tlt-outer: #8A5A2B;   /* strato esterno - appetibilità */
}

/* Superfici del browser: selezione nel colore del brand */
.tlt-page ::selection { background: var(--color-blue); color: var(--color-cream); }
.tlt-page .bg-blue ::selection,
.tlt-page .tlt-hero ::selection { background: var(--color-cream); color: var(--color-blue-deep); }

/* ---------- 1. Hero: testo + crocchetta in sezione ---------- */
.tlt-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 0;
  color: var(--color-cream);
  background: linear-gradient(155deg, var(--color-blue-deep) 0%, var(--color-blue) 62%, var(--color-blue-bright) 125%);
}
.tlt-hero > .container { position: relative; z-index: 2; }
.tlt-hero .breadcrumbs a { color: inherit; }
.tlt-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.tlt-hero__text { padding-bottom: 40px; }
.tlt-hero h1 {
  font-size: var(--fs-display-lg);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 24px 0 0;
  text-wrap: balance;
}
.tlt-hero h1 em { font-style: italic; }
.tlt-hero .lead { max-width: 52ch; margin-top: 24px; color: rgba(242, 234, 222, 0.9); }
.tlt-hero .flex { margin-top: 32px; }

/* La foto: cornice arrotondata in alto, appoggiata al bordo inferiore della hero */
.tlt-hero__media {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--color-blue);
}
.tlt-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; display: block; }

/* Onde concentriche del brand (stessa animazione della home), centrate sulla crocchetta */
.tlt-hero .hero__ripples span {
  background: radial-gradient(circle at var(--tlt-rip-x, 50%) var(--tlt-rip-y, 92%),
    transparent calc(var(--rip-r) - var(--rip-w)),
    var(--rip-c) calc(var(--rip-r) - var(--rip-w)),
    var(--rip-c) var(--rip-r),
    transparent var(--rip-r));
  --rip-c: rgba(242, 234, 222, 0.16);
}

@media (min-width: 768px) {
  .tlt-hero { padding-top: 150px; }
  .tlt-hero__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
  .tlt-hero { padding-top: 176px; --tlt-rip-x: 74%; --tlt-rip-y: 70%; }
  .tlt-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: end; }
  .tlt-hero__text { padding-bottom: 72px; }
  .tlt-hero__media { aspect-ratio: 4 / 5; margin: 0 0 0 auto; }
}

/* ---------- 2. Fascia dei tre strati: legenda + indice delle fasi ---------- */
.tlt-layers { background: var(--color-cream); border-bottom: 1px solid var(--color-line); }
.tlt-layers__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.tlt-layer {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-color) var(--ease-soft);
}
.tlt-layers__list > li:first-child .tlt-layer { border-top: 0; }
.tlt-layer__dot {
  width: 14px; height: 14px; margin-top: 7px; border-radius: 50%;
  background: var(--layer);
  box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 4px var(--layer);
}
.tlt-layer__name { font-family: var(--font-display); font-weight: var(--weight-title); font-size: var(--fs-h3); line-height: 1.2; margin: 0; }
.tlt-layer__fn { display: block; margin-top: 6px; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-blue); }
.tlt-layer__phase { display: block; margin-top: 10px; font-size: var(--fs-body); color: var(--color-ink-soft); }
.tlt-layer__phase .arrow { display: inline-block; transition: transform var(--dur-hover) var(--ease-soft); }
.tlt-layer:hover .tlt-layer__name { color: var(--color-blue); }
.tlt-layer:hover .tlt-layer__phase .arrow { transform: translateX(4px); }
.tlt-layer:focus-visible { outline: 2px solid var(--color-blue-bright); outline-offset: 4px; border-radius: var(--radius-sm); }

@media (min-width: 1024px) {
  .tlt-layers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tlt-layer { border-top: 0; border-left: 1px solid var(--color-line); padding: 36px 32px; }
  .tlt-layers__list > li:first-child .tlt-layer { border-left: 0; padding-left: 0; }
  .tlt-layers__list > li:last-child .tlt-layer { padding-right: 0; }
}

/* ---------- 3. Le tre fasi: numero, testo, schema dello strato costruito ---------- */
.tlt-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.tlt-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "num" "fig" "body";
  gap: 20px;
  padding: 40px 0;
  border-bottom: 1px solid var(--color-line);
  scroll-margin-top: 110px;
}
.tlt-step__num { grid-area: num; }
.tlt-step__num b {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-title);
  font-size: var(--fs-num-lg);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-blue);
}
.tlt-step__num span {
  display: block; margin-top: 10px;
  font-family: var(--font-ui); font-size: var(--fs-ui); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-ink-soft); opacity: 0.8;
}
.tlt-step__body { grid-area: body; }
.tlt-step__body h3 { font-size: var(--fs-card-title); letter-spacing: -0.015em; margin: 0 0 14px; }
.tlt-step__body p { margin: 0; max-width: 62ch; color: var(--color-ink-soft); }
.tlt-step__fig { grid-area: fig; width: 132px; }
.tlt-step__fig svg { display: block; width: 100%; height: auto; }

@media (min-width: 768px) {
  .tlt-step { grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: "num body" "num fig"; column-gap: 32px; padding: 48px 0; }
  .tlt-step__fig { width: 160px; }
}
@media (min-width: 1024px) {
  .tlt-step { grid-template-columns: 200px minmax(0, 1fr) 240px; grid-template-areas: "num body fig"; column-gap: 56px; padding: 72px 0; }
  .tlt-step__num { position: sticky; top: 120px; align-self: start; }
  .tlt-step__num b { font-size: var(--fs-display-lg); }
  .tlt-step__fig { width: 100%; justify-self: end; align-self: center; }
}

/* Schema a cerchi concentrici: anelli spenti = non ancora costruiti */
.tlt-ring { fill: none; stroke: var(--color-line); stroke-width: 1.5; }
.tlt-ring--on { stroke: none; }
.tlt-ring--core.tlt-ring--on  { fill: var(--tlt-core); }
.tlt-ring--mid.tlt-ring--on   { fill: var(--tlt-mid); }
.tlt-ring--outer.tlt-ring--on { fill: var(--tlt-outer); }

/* ---------- 4. Anatomia: schema grande + legenda interattiva ---------- */
.tlt-anatomy__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.tlt-anatomy__fig { width: min(100%, 420px); margin: 0 auto; }
.tlt-anatomy__fig svg { display: block; width: 100%; height: auto; }
.tlt-anatomy__fig .tlt-ring { stroke: var(--color-line-light); }
.tlt-anatomy__fig .tlt-sep { fill: none; stroke: rgba(242, 234, 222, 0.45); stroke-width: 1; }
.tlt-anatomy h2 { margin: 0; }
.tlt-anatomy .tlt-anatomy__intro { margin: 16px 0 8px; color: rgba(242, 234, 222, 0.85); max-width: 52ch; }

.tlt-legend { list-style: none; margin: 0; padding: 0; }
.tlt-legend > li { border-top: 1px solid var(--color-line-light); }
.tlt-legend__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 16px;
  padding: 18px 0;
  color: var(--color-cream);
  text-decoration: none;
  transition: opacity var(--dur-color) var(--ease-soft);
}
.tlt-legend__dot { width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; background: var(--layer); box-shadow: 0 0 0 3px var(--color-blue), 0 0 0 4px var(--layer); }
.tlt-legend__name { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-ui); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.tlt-legend__desc { display: block; margin-top: 6px; font-size: var(--fs-lead); line-height: 1.4; }
.tlt-legend__go { display: inline-block; margin-top: 8px; font-family: var(--font-ui); font-size: var(--fs-ui); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.tlt-legend__row:hover .tlt-legend__go { opacity: 1; }
.tlt-legend__row:focus-visible { outline: 2px solid var(--color-cream); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Passando su una voce della legenda, lo schema mette a fuoco quello strato */
.tlt-anatomy .tlt-ring--on { transition: opacity var(--dur-color) var(--ease-soft); }
.tlt-anatomy:has(.tlt-legend__row:hover) .tlt-ring--on { opacity: 0.28; }
.tlt-anatomy:has(.tlt-legend__row[data-layer="outer"]:hover) .tlt-ring--outer,
.tlt-anatomy:has(.tlt-legend__row[data-layer="mid"]:hover)   .tlt-ring--mid,
.tlt-anatomy:has(.tlt-legend__row[data-layer="core"]:hover)  .tlt-ring--core { opacity: 1; }
.tlt-anatomy:has(.tlt-legend__row:hover) .tlt-legend__row:not(:hover) { opacity: 0.55; }

@media (min-width: 1024px) {
  .tlt-anatomy__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 96px; }
  .tlt-anatomy__fig { margin: 0; width: min(100%, 480px); }
}

/* ---------- 5. Benefici: tre colonne tipografiche (pillars-grid del design system) ---------- */
.tlt-benefits .pillar h3 { font-size: var(--fs-card-title); letter-spacing: -0.015em; }
.tlt-benefits .pillar .tlt-pillar__layer { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: var(--fs-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-soft); }
.tlt-benefits .pillar .tlt-pillar__layer i { width: 10px; height: 10px; border-radius: 50%; background: var(--layer); }

/* ---------- 6. Chiusura ---------- */
.tlt-close .lead { margin: 0; }
.tlt-close .flex { margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  .tlt-hero .hero__ripples { display: none; }
  .tlt-anatomy .tlt-ring--on, .tlt-legend__row, .tlt-layer__phase .arrow { transition: none; }
}