/* ================================================================
   ANDREA · Social Media AI — CSS dedicato
   Stili propri della pagina di Andrea. Non condiviso con altri colleghi.
   Usa le variabili --omni-* definite in style.css.
   ================================================================ */

/* ---------- HERO (layout editoriale, struttura come Enzo) ---------- */
.and-hero {
  background: var(--omni-darker);
  padding: 120px 5% 100px;
  position: relative;
  overflow: hidden;
}

/* Titoli sezione: bilanciamento automatico delle righe per evitare a capo
   antiestetici (es. "in un flusso solo." da solo sulla seconda riga). Il
   browser distribuisce le parole su righe simmetriche. Stessa logica anche
   sui sub: se sono brevi stanno su una riga, altrimenti vanno a capo bilanciati. */
.and-hero ~ section .section-title,
.and-hero ~ section .section-sub,
section.section-darker .section-title,
section.section-darker .section-sub,
section.section-light .section-title,
section.section-light .section-sub {
  text-wrap: balance;
}

/* I 3 titoli più lunghi (Cosa fa, Settimana, Addestramento): scendiamo
   leggermente col font in modo che entrino tutti su una sola riga invece
   di andare a capo. Mantengono comunque presenza editoriale. */
#cosa-fa .section-title,
#settimana .section-title,
#addestramento .section-title {
  font-size: clamp(34px, 3.7vw, 56px);
}
/* Grid principale: testo a sinistra, foto a destra. Stesso pattern di .enzo-hero-inner */
.and-hero-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.and-hero-text {
  min-width: 0;
}
.and-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--omni-lime);
  margin-bottom: 18px;
}
/* Nome più contenuto rispetto a prima: deve stare nella colonna sinistra (650px ca.)
   senza traboccare. "Andrea" ha 6 lettere quindi più caratteri di "Enzo". */
.and-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(72px, 10vw, 144px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--omni-white);
  margin: 0 0 32px;
}
.and-claim {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--omni-offwhite);
  max-width: 540px;
  margin: 0 0 36px;
}
.and-cta-row { margin-bottom: 44px; }
.and-facts {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.and-facts > div {
  padding-right: 36px;
  margin-right: 36px;
  border-right: 1px solid rgba(200, 224, 102, 0.2);
}
.and-facts > div:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}
.and-fact-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 42px;
  line-height: 1;
  color: var(--omni-lime);
}
.and-fact-lbl {
  font-size: 13px;
  color: var(--omni-olive-2);
  margin-top: 8px;
  max-width: 120px;
}

/* Foto · grande come Enzo, riempie la cella della grid */
.and-hero-visual {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--omni-deepest);
}
.and-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  /* Zoom CSS: l'immagine viene scalata dentro il contenitore (che ha overflow: hidden),
     così i bordi vengono ritagliati e Andrea appare più vicino senza cambiare dimensioni della cella */
  transform: scale(1.25);
  transform-origin: 50% 30%;
}
/* ---------- FLUSSO (cosa fa) ---------- */
.and-flow {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 56px;
}
.and-flow-step {
  flex: 1;
  background: var(--omni-dark);
  padding: 32px 24px;
  position: relative;
}
.and-flow-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--omni-olive-2);
  letter-spacing: 0.1em;
}
.and-flow-icon {
  color: var(--omni-lime);
  margin: 18px 0 16px;
  display: inline-block;
  transform-origin: center;
}
.and-flow-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--omni-white);
  margin: 0 0 10px;
}
.and-flow-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--omni-offwhite);
  margin: 0;
}
.and-flow-arrow {
  display: flex;
  align-items: center;
  font-size: 28px;
  color: var(--omni-orange);
  font-weight: 700;
}

/* ---------- DAL BRIEF AL POST ---------- */
.and-transform {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 56px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.and-brief {
  background: var(--omni-white);
  border: 1px solid rgba(31, 31, 31, 0.10);
  padding: 28px;
}
.and-brief-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--omni-olive);
  margin-bottom: 16px;
}
.and-brief-msg {
  background: var(--omni-beige);
  padding: 18px 20px;
}
.and-brief-msg p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--omni-dark);
  font-style: italic;
}
.and-transform-arrow { color: var(--omni-orange); display: flex; justify-content: center; }

/* Post simulato */
.and-post {
  background: var(--omni-white);
  border: 1px solid rgba(31, 31, 31, 0.10);
  overflow: hidden;
}
.and-post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(31, 31, 31, 0.08);
}
.and-post-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--omni-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: var(--omni-dark);
}
.and-post-name { font-weight: 800; font-size: 14.5px; color: var(--omni-dark); }
.and-post-time { font-size: 12px; color: var(--omni-olive); }
.and-post-body { padding: 18px; }
.and-post-body p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--omni-dark);
}
.and-post-tags { color: var(--omni-orange); font-weight: 600; }
.and-post-actions {
  display: flex;
  gap: 24px;
  padding: 14px 18px;
  border-top: 1px solid rgba(31, 31, 31, 0.08);
  font-size: 14px;
  color: var(--omni-olive);
}

/* ---------- LA SETTIMANA ---------- */
.and-week {
  display: grid;
  /* 12 colonne come unità: prima riga = 4 elementi × 3 col = 12,
     seconda riga = 3 elementi × 4 col = 12 → i 3 sotto sono 4/3 più larghi. */
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 56px;
}
.and-week > .and-day:nth-of-type(-n+4) { grid-column: span 3; }
.and-week > .and-day:nth-of-type(n+5)  { grid-column: span 4; }
/* Il sub della settimana ha più spazio per stare su una riga sola */
.and-week-sub { max-width: 1100px; }
.and-day { display: flex; flex-direction: column; gap: 10px; }
.and-day-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--omni-lime);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.and-day-card {
  background: var(--omni-dark);
  padding: 26px 22px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--omni-offwhite);
  flex: 1;
  border-top: 3px solid var(--omni-olive);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.and-day-tag {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--omni-olive-2);
}
.and-day-feed { border-top-color: var(--omni-lime); }
.and-day-feed .and-day-tag { color: var(--omni-lime); }
.and-day-story { border-top-color: var(--omni-orange); }
.and-day-story .and-day-tag { color: var(--omni-orange-2); }
.and-day-reel { border-top-color: var(--omni-pink); }
.and-day-reel .and-day-tag { color: var(--omni-pink); }
.and-day-rest { border-top-color: var(--omni-olive-2); }
.and-week-note {
  text-align: center;
  margin-top: 32px;
  font-size: 16px;
  color: var(--omni-offwhite);
  font-weight: 500;
}

/* ---------- ADDESTRAMENTO + AVATAR (2 colonne asimmetriche) ---------- */
.and-train-grid {
  display: grid;
  /* Sinistra (testo) molto più larga, destra (video) compatta:
     ~80% / 20% per dare spazio al copy. Il video resta sui suoi 280px. */
  grid-template-columns: 4fr 1fr;
  gap: 0;
  align-items: start;
  position: relative;
}
/* Separatore verticale al confine reale tra le 2 colonne (40% della larghezza) */
.and-train-grid::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 80%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(31, 31, 31, 0.15) 15%,
    rgba(31, 31, 31, 0.15) 85%,
    transparent 100%
  );
  transform: translateX(-0.5px);
}
.and-train-text {
  padding-right: 48px;
}
.and-avatar {
  padding-left: 48px;
  display: grid;
  /* Sub-grid: testo a sinistra, video di fianco a destra (verticalmente affiancato) */
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.and-avatar-text {
  min-width: 0;
}
.and-train-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--omni-offwhite);
  margin: 0 0 20px;
}

/* Video Avatar · player verticale, centrato nella colonna destra */
.and-train-grid > .and-avatar-video {
  align-self: center;
  justify-self: center;
}
.and-avatar-video {
  position: relative;
  aspect-ratio: 9/16;
  width: 280px;
  flex-shrink: 0;
  margin: 0;
  background: var(--omni-deepest);
  overflow: hidden;
}
.and-avatar-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.and-train-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.and-train-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--omni-offwhite);
  margin-bottom: 16px;
  line-height: 1.45;
}
.and-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--omni-lime);
  color: var(--omni-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.and-check svg { display: block; }

/* ---------- GARANZIE · confronto "temi / realtà" ---------- */
.and-vs {
  margin-top: 56px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.and-vs-head {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px;
  margin-bottom: 8px;
}
.and-vs-head-fear,
.and-vs-head-real {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 4px;
}
.and-vs-head-fear { color: var(--omni-pink); }
.and-vs-head-real { color: var(--omni-lime); }
.and-vs-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px;
  margin-bottom: 14px;
}
.and-vs-fear,
.and-vs-real {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
}
.and-vs-fear {
  background: rgba(200, 130, 130, 0.08);
  border-left: 3px solid var(--omni-pink);
}
.and-vs-real {
  background: var(--omni-dark);
  border-left: 3px solid var(--omni-lime);
}
.and-vs-fear p,
.and-vs-real p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.and-vs-fear p { color: var(--omni-offwhite); font-style: italic; }
.and-vs-real p { color: var(--omni-offwhite); }
.and-vs-x {
  flex-shrink: 0;
  color: var(--omni-pink);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
.and-vs-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--omni-lime);
  color: var(--omni-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.and-vs-check svg { display: block; }

/* ---------- LINGUE (riusa .lang-list/.lang-pill/.lang-flag di style.css) ---------- */
.and-lang-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* ---------- PREZZO ---------- */
.and-price-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  align-items: start;
}
.and-price-card {
  background: var(--omni-dark);
  padding: 40px;
  border: 1px solid rgba(200, 224, 102, 0.20);
}
.and-price-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--omni-lime);
}
.and-price-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.95;
  color: var(--omni-white);
  margin: 8px 0 16px;
}
.and-price-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 4.5vw, 56px);
  color: var(--placeholder-red);
  margin-bottom: 28px;
}
.and-price-list { list-style: none; padding: 0; margin: 0 0 32px; }
.and-price-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--omni-offwhite);
  margin-bottom: 14px;
  line-height: 1.45;
}
.and-price-list svg { color: var(--omni-lime); flex-shrink: 0; margin-top: 2px; }
.and-price-cta { width: 100%; justify-content: center; }

/* Team box */
.and-team-box {
  background: var(--omni-darker);
  padding: 40px;
  border: 1px solid rgba(200, 224, 102, 0.12);
}
.and-team-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--omni-lime);
  margin-bottom: 16px;
}
.and-team-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.1;
  color: var(--omni-white);
  margin: 0 0 16px;
}
.and-team-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--omni-offwhite);
  margin: 0 0 24px;
}
.and-team-roster { list-style: none; padding: 0; margin: 0 0 28px; }
.and-team-roster li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: var(--omni-offwhite);
  margin-bottom: 14px;
  line-height: 1.45;
}
.and-team-roster svg { color: var(--omni-lime); flex-shrink: 0; margin-top: 2px; }
.and-team-roster strong { color: var(--omni-white); }
.and-team-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--omni-lime);
  font-weight: 700;
  text-decoration: none;
}
.and-team-cta:hover { color: var(--omni-white); }

/* ---------- FAQ ---------- */
.and-faq {
  max-width: 820px;
  margin: 48px auto 0;
}
.and-faq-item {
  border-bottom: 1px solid rgba(31, 31, 31, 0.12);
}
.and-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--omni-dark);
  list-style: none;
}
.and-faq-item summary::-webkit-details-marker { display: none; }
.and-faq-chev {
  flex-shrink: 0;
  color: var(--omni-orange);
  transition: transform 0.25s ease;
}
.and-faq-item[open] .and-faq-chev { transform: rotate(180deg); }
.and-faq-body {
  padding: 0 0 24px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--omni-olive);
  max-width: 92%;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
  .and-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .and-hero-visual { aspect-ratio: 4/5; max-width: 420px; margin: 0 auto; order: -1; }
  .and-name { font-size: clamp(64px, 18vw, 96px); }
  .and-flow { flex-direction: column; }
  .and-flow-arrow { transform: rotate(90deg); justify-content: center; padding: 4px 0; }
  .and-transform { grid-template-columns: 1fr; }
  .and-transform-arrow { transform: rotate(90deg); }
  .and-week { grid-template-columns: repeat(2, 1fr); }
  .and-train-grid { grid-template-columns: 1fr; gap: 40px; }
  .and-train-grid::before { display: none; }
  .and-train-text { padding-right: 0; }
  .and-avatar { padding-left: 0; grid-template-columns: 1fr; gap: 24px; }
  .and-avatar-video { width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
  .and-guarantees { grid-template-columns: repeat(2, 1fr); }
  .and-vs-head { display: none; }
  .and-vs-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 20px; }
  .and-vs-fear { flex-direction: column; gap: 6px; }
  .and-vs-real { flex-direction: column; gap: 6px; }
  .and-vs-fear::before {
    content: "Quello che temi";
    font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--omni-pink);
  }
  .and-vs-real::before {
    content: "Come lavora Andrea";
    font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--omni-lime);
  }
  .and-lang-block { grid-template-columns: 1fr; gap: 40px; }
  .and-price-layout { grid-template-columns: 1fr; max-width: 600px; }
}

@media (max-width: 600px) {
  .and-hero { padding: 110px 6% 72px; }
  .and-facts { gap: 28px; }
  .and-week { grid-template-columns: 1fr; }
  .and-guarantees { grid-template-columns: 1fr; }
  .and-flow-step { padding: 28px 22px; }
}

/* ================================================================
   OVERRIDE LEGGIBILITÀ — sezioni rese chiare (alternanza sfondi)
   ================================================================ */
.section-light .and-week-note { color: var(--omni-olive); }

/* Override and-vs (sezione garanzie) su fondo chiaro: la colonna "temi"
   ha sfondo rosa pallido, il testo bianco va scurito per leggibilità. */
.section-light .and-vs-fear p { color: var(--omni-dark); }
.section-light .and-train-bullets li { color: var(--omni-dark); }
.section-light .and-train-lead { color: var(--omni-olive); }