/* ══════════════════════════════════════════════════════════
   FONT-FACE
   ══════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Raleway-Thin';
  src: url('../assets/fonts/Raleway/static/Raleway-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway-ThinItalic';
  src: url('../assets/fonts/Raleway/static/Raleway-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../assets/fonts/Raleway/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../assets/fonts/Raleway/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════════
   CSS RESET & VARIABLES
   ══════════════════════════════════════════════════════════ */
/*
  :root — Definisce le variabili CSS globali riutilizzabili in tutto il foglio di stile.
  Questo evita di ripetere valori e rende il tema facilmente modificabile.
*/
:root {
  /* Colori brand Lena Lashes */
  --primary: #30423E;        /* Verde scuro — colore principale del brand */
  --secondary: #009E9C;      /* Teal/verde acqua — colore secondario */
  --cta: #C4A882;            /* Sabbia/beige — colore per i bottoni call-to-action */
  --cta-hover: #b0956f;      /* Versione più scura del CTA per l'hover */
  --white: #FFFFFF;
  --off-white: #FAFAFA;      /* Bianco sporco per sfondi alternativi */
  --light-gray: #F5F5F7;     /* Grigio chiarissimo stile Apple */
  --text-dark: #1d1d1f;      /* Nero morbido per testo principale */
  --text-secondary: #6e6e73; /* Grigio per testo secondario */
  --text-on-dark: #F5F5F7;   /* Testo chiaro su sfondo scuro */

  /* Tipografia — Raleway è il font display (locale), DM Sans come fallback web */
  --font-display: 'Raleway-Thin', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spaziature coerenti */
  --section-padding: clamp(80px, 10vw, 140px);  /* Padding verticale responsivo */
  --content-max: 1200px;                          /* Larghezza max del contenuto */
  --grid-gap: clamp(16px, 2vw, 24px);            /* Gap della griglia responsivo */
}

/*
  * — Reset universale: box-sizing: border-box fa sì che padding e bordi
  siano inclusi nelle dimensioni dell'elemento (più intuitivo).
*/
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
  html — scroll-behavior: smooth abilita lo scrolling fluido quando si clicca
  un link ad àncora (es. #servizi). -webkit-font-smoothing migliora il rendering font su macOS.
*/
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden; /* Evita scroll orizzontale da animazioni */
}

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

a {
  text-decoration: none;
  color: inherit;
}

/* ══════════════════════════════════════════════════════════
   NAVBAR — Sticky, minimalista, stile Apple
   ══════════════════════════════════════════════════════════ */
/*
  .navbar — Position fixed + backdrop-filter per l'effetto vetro smerigliato.
  z-index alto per stare sopra a tutto il contenuto.
*/
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255,255,255,0.72);           /* Sfondo semi-trasparente */
  backdrop-filter: saturate(180%) blur(20px);    /* Effetto vetro smerigliato Apple */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);    /* Linea sottile di separazione */
  transition: background 0.3s ease;
}

.navbar__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;                                   /* Altezza compatta della navbar */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*
  .navbar__logo — Logo SVG del brand nella navbar.
*/
.navbar__logo {
  display: flex;
  align-items: center;
}
.navbar__logo-img {
  height: 36px;
  width: auto;
}

/*
  .navbar__links — Menu orizzontale con flexbox.
  gap: 32px distanzia i link uniformemente.
*/
.navbar__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;                               /* Rimuove i bullet delle <li> */
}
.navbar__links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.navbar__links a:hover {
  opacity: 1;                                     /* Più visibile all'hover */
}

/*
  .navbar__cta — Bottone CTA nella navbar, pill-shaped con border-radius.
*/
.navbar__cta {
  background: var(--primary);
  color: var(--white) !important;
  opacity: 1 !important;
  padding: 8px 20px;
  border-radius: 980px;                           /* Bordo completamente arrotondato (pill) */
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s ease;
}
.navbar__cta:hover {
  background: var(--secondary);
}

/* Hamburger per mobile — nascosto su desktop */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.navbar__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ══════════════════════════════════════════════════════════
   HERO SECTION — Full viewport, statement tipografico
   ══════════════════════════════════════════════════════════ */
/*
  .hero — min-height: 100svh occupa almeno tutta l'altezza del viewport.
  svh = "small viewport height", tiene conto delle barre del browser mobile.
  display: flex + align/justify center per centrare il contenuto.
*/
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

/*
  .hero::before — Gradiente radiale sottile di sfondo.
  Crea un alone luminoso dietro il testo dell'hero, per dare profondità.
*/
.hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0,158,156,0.06) 0%, transparent 70%);
  pointer-events: none;   /* Non interferisce con i click */
}

/*
  .hero__eyebrow — Testo piccolo sopra il titolo (pattern Apple).
  text-transform: uppercase e letter-spacing ampio per stile label.
*/
.hero__eyebrow {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--secondary);
  margin-bottom: 20px;
  position: relative;      /* Necessario per stare sopra al ::before */
}

/*
  .hero__title — Titolo principale dell'hero.
  clamp() rende il font-size responsivo: min 42px, preferito 7vw, max 96px.
  letter-spacing negativo per compattezza da "display heading".
*/
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--primary);
  max-width: 900px;
  margin-bottom: 24px;
  position: relative;
}

.hero__subtitle {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.5;
  margin-bottom: 40px;
  position: relative;
}

/*
  .hero__actions — Contenitore per i bottoni CTA dell'hero.
  flex-wrap: wrap per andare a capo su schermi piccoli.
*/
.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

/*
  .btn — Bottone generico. border-radius: 980px per forma pill.
  transition per animazione fluida di colore e trasformazione.
*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 980px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
}
.btn--primary {
  background: var(--cta);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--cta-hover);
  transform: scale(1.02);  /* Leggero ingrandimento all'hover */
}
.btn--outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn--outline:hover {
  background: var(--primary);
  color: var(--white);
}
/* Freccia decorativa dentro il bottone */
.btn__arrow {
  transition: transform 0.25s ease;
}
.btn:hover .btn__arrow {
  transform: translateX(3px);  /* La freccia si sposta a destra all'hover */
}

/* ══════════════════════════════════════════════════════════
   SECTION — Contenitore generico per le sezioni
   ══════════════════════════════════════════════════════════ */
.section {
  padding: var(--section-padding) 24px;
}
.section--gray {
  background: var(--light-gray);   /* Sfondo grigio alternato per ritmo visivo */
}
.section--dark {
  background: var(--primary);
  color: var(--text-on-dark);
}
.section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

/*
  .section__label — Etichetta sopra il titolo della sezione.
  Stesso pattern "eyebrow" dell'hero ma riutilizzabile.
*/
.section__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--secondary);
  margin-bottom: 12px;
}
.section--dark .section__label {
  color: var(--cta);               /* Su sfondo scuro, label in color CTA */
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.section__desc {
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.5;
  margin-bottom: 56px;
}
.section--dark .section__desc {
  color: rgba(245,245,247,0.7);    /* Testo più trasparente su sfondo scuro */
}

/* ══════════════════════════════════════════════════════════
   FULL-WIDTH SERVICE CARD — Sezione trattamento a tutta larghezza
   Stile Apple: immagine grande + testo sovrapposto/affiancato
   ══════════════════════════════════════════════════════════ */
/*
  .showcase — Contenitore per un trattamento "hero-style".
  min-height: 80vh per dare respiro visivo.
  background-size: cover per coprire tutto lo spazio disponibile.
  position: relative per posizionare l'overlay.
*/
.showcase {
  min-height: 80vh;
  display: flex;
  align-items: flex-end;            /* Testo posizionato in basso */
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
  .showcase::after — Overlay gradiente scuro dal basso.
  Migliora la leggibilità del testo bianco sull'immagine.
*/
.showcase::after {
  content: '';
  position: absolute;
  inset: 0;                        /* Shorthand per top/right/bottom/left: 0 */
  background: linear-gradient(
    to top,
    rgba(48,66,62,0.85) 0%,        /* Quasi opaco in basso */
    rgba(48,66,62,0.3) 50%,
    transparent 100%                /* Trasparente in alto */
  );
}

/*
  .showcase__content — Contenuto testuale dentro la showcase.
  z-index: 1 per stare sopra all'overlay (::after).
*/
.showcase__content {
  position: relative;
  z-index: 1;
  padding: 60px clamp(24px, 5vw, 80px);
  max-width: 680px;
}

.showcase__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 16px;
}

.showcase__desc {
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  margin-bottom: 28px;
}

/*
  .showcase__link — Link "Scopri di più" con freccia, stile Apple.
  Niente sfondo, solo testo colorato e freccia animata.
*/
.showcase__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--cta);
  transition: gap 0.25s ease;
}
.showcase__link:hover {
  gap: 10px;                       /* La freccia "si allontana" all'hover */
}

/* ══════════════════════════════════════════════════════════
   GRID DI TRATTAMENTI — 2 colonne con card
   ══════════════════════════════════════════════════════════ */
/*
  .treatments-grid — CSS Grid a 2 colonne con gap.
  repeat(2, 1fr) crea 2 colonne di ugual larghezza.
*/
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

/*
  .treat-card — Singola card della griglia.
  aspect-ratio: 4/5 forza un rapporto 4:5 (verticale).
  overflow: hidden per tagliare l'immagine che fa zoom all'hover.
*/
.treat-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--light-gray);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.treat-card:hover {
  transform: scale(0.98);          /* Leggero "press" all'hover */
}

/*
  .treat-card__img — L'immagine di sfondo della card.
  object-fit: cover per coprire tutta la card mantenendo le proporzioni.
  transition: transform per lo zoom fluido all'hover.
*/
.treat-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.treat-card:hover .treat-card__img {
  transform: scale(1.05);          /* Zoom sull'immagine all'hover */
}

/*
  .treat-card__overlay — Gradiente scuro in basso per leggibilità testo.
*/
.treat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
}

.treat-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(20px, 3vw, 36px);
  z-index: 1;
}

.treat-card__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 8px;
}

.treat-card__teaser {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  margin-bottom: 16px;
  /* Tronca a 2 righe */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.treat-card__cta {
  font-size: 15px;
  font-weight: 600;
  color: var(--cta);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ══════════════════════════════════════════════════════════
   SPLIT SECTION — Due metà affiancate (immagine + testo)
   ══════════════════════════════════════════════════════════ */
/*
  .split — Grid a 2 colonne uguali. min-height per dare respiro.
*/
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 85vh;
}

.split__media {
  position: relative;
  overflow: hidden;
}
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
  .split__content — Lato testuale della split section.
  display: flex + flex-direction: column + justify-content: center
  per centrare verticalmente il contenuto.
*/
.split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 100px);
}

.split__content .section__title {
  font-size: clamp(28px, 3.5vw, 48px);
}

/* ══════════════════════════════════════════════════════════
   CORSI (ACCADEMIA) — Banner con sfondo scuro
   ══════════════════════════════════════════════════════════ */
.academy-banner {
  text-align: center;
  padding: var(--section-padding) 24px;
  background: var(--primary);
  color: var(--text-on-dark);
}
.academy-banner .section__inner {
  max-width: 800px;
}
.academy-banner .section__title {
  color: var(--white);
  margin-bottom: 20px;
}
.academy-banner .section__desc {
  color: rgba(245,245,247,0.7);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

/* ══════════════════════════════════════════════════════════
   FOOTER — Minimale, multicolonna
   ══════════════════════════════════════════════════════════ */
.footer {
  background: var(--text-dark);
  color: rgba(255,255,255,0.6);
  padding: 60px 24px 40px;
  font-size: 13px;
}
.footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}
.footer__brand span {
  color: var(--secondary);
}
.footer__col h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}
.footer__col a {
  display: block;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
  transition: color 0.2s ease;
}
.footer__col a:hover {
  color: var(--white);
}
.footer__divider {
  grid-column: 1 / -1;              /* span su tutte le colonne */
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 20px 0 16px;
}
.footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__socials {
  display: flex;
  gap: 16px;
}
.footer__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  transition: all 0.2s ease;
  margin-bottom: 0;
}
.footer__socials a:hover {
  background: var(--secondary);
  color: var(--white);
}

/* ══════════════════════════════════════════════════════════
   SCROLL ANIMATIONS — Fade-in all'ingresso nel viewport
   ══════════════════════════════════════════════════════════ */
/*
  [data-animate] — Elementi con attributo data-animate partono invisibili
  e traslati verso il basso di 30px.
  Quando JavaScript aggiunge la classe .is-visible, tornano visibili.
*/
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Adattamenti mobile e tablet
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Su tablet le grid da 2 colonne restano ma con aspect ratio ridotto */
  .treatments-grid {
    gap: 12px;
  }
  .treat-card {
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 768px) {
  /* Navbar: nascondi i link e mostra l'hamburger */
  .navbar__links {
    display: none;
  }
  .navbar__hamburger {
    display: flex;
  }

  /* La grid trattamenti va a 1 colonna su mobile */
  .treatments-grid {
    grid-template-columns: 1fr;
  }

  /* Le split section diventano verticali */
  .split {
    grid-template-columns: 1fr;
  }
  .split__media {
    min-height: 50vh;
  }

  /* Footer a 2 colonne su mobile */
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .footer__inner {
    grid-template-columns: 1fr;
  }
  .treat-card {
    aspect-ratio: 3 / 4;
    border-radius: 14px;
  }
}

/*h1 maiuscoli */
h1 {
    text-transform: uppercase;
}