/* =========================================================
   RIGHITTO.CH — FOGLIO DI STILE
   ---------------------------------------------------------
   I commenti indicano a quale parte di index.html si riferisce
   ogni gruppo di regole.

   Questa versione mantiene invariata la grafica del mockup
   originale: sono stati aggiunti soltanto i commenti.
   ========================================================= */


/* =========================================================
   1. VARIABILI GENERALI DEL SITO
   ---------------------------------------------------------
   Colori e larghezza massima usati in tutta la pagina.
   Modificando questi valori si cambia l'aspetto globale.
   ========================================================= */

:root {
  --paper: #f3f1ea;   /* Colore di sfondo generale della pagina */
  --ink: #171715;     /* Colore principale del testo */
  --muted: #67655f;   /* Testo secondario / meno evidente */
  --line: #d5d1c5;    /* Linee e bordi */
  --accent: #d8ad16;  /* Giallo: colore di accento */
  --dark: #24231f;    /* Sfondo scuro della sezione Tingenia */
  --white: #fffef9;   /* Bianco caldo dei riquadri */
  --max: 1180px;      /* Larghezza massima del contenuto */
}


/* =========================================================
   2. IMPOSTAZIONI GENERALI
   ---------------------------------------------------------
   Valgono per tutta la pagina HTML.
   ========================================================= */

/* Fa sì che padding e bordi siano compresi nelle dimensioni */
* {
  box-sizing: border-box;
}

/* Scorrimento morbido quando si cliccano Profilo,
   Collegamenti o Contatti nel menu */
html {
  scroll-behavior: smooth;
}

/* Corpo generale della pagina */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

/* Tutti i collegamenti ereditano il colore del testo circostante */
a {
  color: inherit;
}


/* =========================================================
   3. TESTATA / MENU SUPERIORE
   ---------------------------------------------------------
   HTML:
   <header class="site-header">
     logo MR + menu Profilo / Collegamenti / Contatti
   </header>
   ========================================================= */

/* Barra superiore */
.site-header {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

/* Cerchio nero con le iniziali "MR" */
.brand {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -.04em;
}

/* Menu di navigazione in alto a destra */
nav {
  display: flex;
  gap: 28px;
}

/* Testo dei link Profilo / Collegamenti / Contatti */
nav a {
  text-decoration: none;
  font-size: .92rem;
}

/* Sottolineatura dei link quando ci si passa sopra col mouse */
nav a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}


/* =========================================================
   4. HERO — PARTE INIZIALE DELLA PAGINA
   ---------------------------------------------------------
   HTML:
   <section class="hero">
     colonna sinistra: nome, titolo, pulsanti
     colonna destra: fotografia
   </section>
   ========================================================= */

/* Contenitore generale del blocco iniziale */
.hero {
  width: min(calc(100% - 48px), var(--max));
  margin: 34px auto 96px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  min-height: 690px;
  background: var(--white);
}

/* Colonna sinistra della hero */
.hero-copy {
  padding: 80px 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Piccola scritta maiuscola "righitto.ch"
   Usata anche in altre sezioni per piccole intestazioni */
.eyebrow {
  margin: 0 0 18px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* Nome "Marzio Righitto" */
h1 {
  margin: 0;

  /* Dimensione del nome:
     4.2rem = minimo
     8vw    = dimensione dinamica in base allo schermo
     7.6rem = massimo */
  font-size: clamp(3.6rem, 7vw, 6.5rem);

  /* Distanza verticale tra "Marzio" e "Righitto" */
  line-height: .84;

  /* Spaziatura tra le lettere */
  letter-spacing: -.075em;

  /* Spessore del carattere */
  font-weight: 700;
}

/* Titolo:
   "Ingegnere in geomatica ETH
    Ingegnere geometra patentato" */
.hero-role {
  margin: 36px 0 0;
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
  line-height: 1.3;
  font-weight: 700;
}

/* Frase:
   "Territorio, misurazione, geodati e professione." */
.hero-intro {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.06rem;
}

/* Contenitore dei due pulsanti sotto la presentazione */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* Aspetto generale dei pulsanti */
.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
}

/* Pulsante nero "Collegamenti geomatica" */
.button.primary {
  background: var(--ink);
  color: var(--white);
}

/* Effetto giallo passando col mouse sui pulsanti */
.button.secondary:hover,
.button.primary:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}


/* =========================================================
   5. FOTOGRAFIA NELLA HERO
   ---------------------------------------------------------
   HTML:
   <figure class="hero-photo-wrap">
     <img class="hero-photo">
     <figcaption>...</figcaption>
   </figure>
   ========================================================= */

/* Contenitore della fotografia */
.hero-photo-wrap {
  margin: 0;
  position: relative;
  overflow: hidden;
  min-height: 690px;
  background: #cfc9b8;
}

/* Fotografia di Marzio */
.hero-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  /* Punto della fotografia mantenuto al centro del ritaglio */
  object-position: 50% 42%;
}

/* Riquadro nero sopra la foto:
   "Geomatica, territorio e qualche metro in più di orizzonte." */
.hero-photo-wrap figcaption {
  position: absolute;
  left: 26px;
  bottom: 24px;
  max-width: 310px;
  padding: 10px 12px;
  background: rgba(23,23,21,.82);
  color: white;
  font-size: .78rem;
}


/* =========================================================
   6. STRUTTURA GENERALE DELLE SEZIONI
   ---------------------------------------------------------
   Usata da:
   - Profilo
   - Collegamenti geomatica
   - Contatti
   ========================================================= */

/* Larghezza e spazio inferiore delle sezioni */
.section {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto 110px;
}

/* Testata di ogni sezione:
   numero 01/02/03 + titolo + eventuale descrizione */
.section-heading {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px 24px;
  margin-bottom: 42px;
}

/* Numeri 01 / 02 / 03 */
.section-number {
  margin: 0;
  font-size: .82rem;
  color: var(--muted);
}

/* Titoli principali:
   "Profilo"
   "Collegamenti geomatica"
   "Contatti" */
h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.05em;
}

/* Descrizione sotto il titolo della sezione Collegamenti */
.section-heading > p:last-child {
  grid-column: 2;
  margin: 4px 0 0;
  color: var(--muted);
  max-width: 620px;
}


/* =========================================================
   7. SEZIONE "PROFILO"
   ---------------------------------------------------------
   HTML:
   <section class="profile section" id="profilo">
   ========================================================= */

/* Blocco contenente i paragrafi della presentazione */
.profile-text {
  margin-left: 114px;
  max-width: 800px;
}

/* Paragrafi normali del profilo */
.profile-text p {
  font-size: 1.04rem;
  margin: 0 0 18px;
}

/* Primo paragrafo del profilo, più grande */
.profile-text .lead {
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -.02em;
}

/* Testo grigio, usato per l'ultimo paragrafo del profilo */
.muted {
  color: var(--muted);
}


/* =========================================================
   8. FASCIA "TINGENIA"
   ---------------------------------------------------------
   HTML:
   <section class="work-strip">
   Attività professionale
   Tingenia ingegneria e geomatica SA
   ========================================================= */

/* Fascia scura a tutta larghezza */
.work-strip {
  margin: 0 0 110px;
  padding: 62px max(24px, calc((100vw - var(--max))/2));
  background: var(--dark);
  color: var(--white);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}

/* Titolo "Tingenia ingegneria e geomatica SA" */
.work-strip h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  max-width: 780px;
}

/* Testo "Ingegneria, geomatica e misurazioni in Ticino." */
.work-strip p:not(.eyebrow) {
  margin: 14px 0 0;
  color: #c8c5bb;
}

/* Link "Visita tingenia.ch" */
.text-link {
  color: var(--white);
  text-underline-offset: 6px;
  white-space: nowrap;
}


/* =========================================================
   9. SEZIONE "COLLEGAMENTI GEOMATICA"
   ---------------------------------------------------------
   HTML:
   <div class="link-grid">
     Professione
     Formazione
     Geodati e territorio
     Misurazione ufficiale
   </div>
   ========================================================= */

/* Griglia dei quattro riquadri */
.link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-left: 114px;
}

/* Singolo riquadro:
   Professione / Formazione / Geodati / Misurazione ufficiale */
.link-group {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 28px;
}

/* Titolo del singolo riquadro */
.link-group h3 {
  margin: 0 0 18px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Singolo collegamento:
   IGS, GEOSUISSE, swisstopo, geo.admin.ch, ecc. */
.link-group a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}

/* Freccia ↗ visualizzata a destra di ogni collegamento */
.link-group a::after {
  content: "↗";
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 1.05rem;
}

/* Nome principale del sito, es. "IGS" */
.link-group a span {
  font-weight: 800;
}

/* Descrizione piccola sotto il nome del sito */
.link-group a small {
  color: var(--muted);
}

/* Sottolineatura del nome passando col mouse */
.link-group a:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* =========================================================
   10. SEZIONE "CONTATTI"
   ---------------------------------------------------------
   HTML:
   <div class="contact-card">
     Marzio Righitto
     Tingenia...
     e-mail
     sito Tingenia
   </div>
   ========================================================= */

/* Riquadro giallo dei contatti */
.contact-card {
  margin-left: 114px;
  background: var(--accent);
  padding: 34px;
  display: flex;
  justify-content: space-between;
  gap: 36px;
  align-items: end;
}

/* Nome "Marzio Righitto" nel riquadro contatti */
.contact-card h3 {
  margin: 0;
  font-size: 2rem;
}

/* Testo Tingenia / Mendrisio */
.contact-card p {
  margin: 10px 0 0;
}

/* Colonna a destra con e-mail e sito */
.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Link e-mail e www.tingenia.ch */
.contact-actions a {
  font-weight: 700;
  text-underline-offset: 4px;
}


/* =========================================================
   11. FOOTER — PARTE FINALE DELLA PAGINA
   ---------------------------------------------------------
   HTML:
   © 2026 Marzio Righitto · righitto.ch
   Nessun cookie...
   ========================================================= */

footer {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 26px 0 40px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: .78rem;
}

footer p {
  margin: 0;
}


/* =========================================================
   12. TABLET E SCHERMI MEDI
   ---------------------------------------------------------
   Queste regole entrano in funzione quando la larghezza
   dello schermo è inferiore o uguale a 860 px.
   ========================================================= */

@media (max-width: 860px) {

  /* Riduce lo spazio fra i link del menu */
  nav {
    gap: 16px;
  }

  /* Hero: testo e fotografia passano da due colonne
     a una colonna sopra l'altra */
  .hero {
    grid-template-columns: 1fr;
  }

  /* Riduce i margini interni della parte testuale */
  .hero-copy {
    padding: 58px 34px;
  }

  /* Altezza della fotografia su tablet */
  .hero-photo-wrap {
    min-height: 620px;
  }

  /* Riduce la colonna riservata ai numeri 01/02/03 */
  .section-heading {
    grid-template-columns: 54px 1fr;
  }

  /* Riduce il rientro a sinistra dei contenuti */
  .profile-text,
  .link-grid,
  .contact-card {
    margin-left: 78px;
  }

  /* I riquadri dei collegamenti diventano una sola colonna */
  .link-grid {
    grid-template-columns: 1fr;
  }

  /* La fascia Tingenia dispone testo e link verticalmente */
  .work-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Anche il riquadro Contatti diventa verticale */
  .contact-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-actions {
    align-items: flex-start;
  }
}


/* =========================================================
   13. SMARTPHONE
   ---------------------------------------------------------
   Queste regole entrano in funzione quando la larghezza
   dello schermo è inferiore o uguale a 560 px.
   ========================================================= */

@media (max-width: 560px) {

  /* Riduce i margini laterali generali */
  .site-header,
  .hero,
  .section,
  footer {
    width: min(calc(100% - 28px), var(--max));
  }

  /* Testata più bassa */
  .site-header {
    min-height: 70px;
  }

  /* Nasconde il primo link "Profilo" nel menu mobile */
  nav a:nth-child(1) {
    display: none;
  }

  /* Spazi sopra e sotto la hero */
  .hero {
    margin-top: 16px;
    margin-bottom: 72px;
  }

  /* Margini interni della colonna con nome e titoli */
  .hero-copy {
    padding: 44px 24px;
  }

  /* Dimensione del nome "Marzio Righitto" su smartphone */
  h1 {
    font-size: clamp(3.7rem, 20vw, 5.5rem);
  }

  /* Altezza della fotografia su smartphone */
  .hero-photo-wrap {
    min-height: 520px;
  }

  /* Punto di ritaglio della fotografia su smartphone */
  .hero-photo {
    object-position: 50% 38%;
  }

  /* Didascalia sopra la foto su smartphone */
  .hero-photo-wrap figcaption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-width: none;
  }

  /* Riduce lo spazio dopo ogni sezione */
  .section {
    margin-bottom: 76px;
  }

  /* Numero e titolo delle sezioni passano su una colonna */
  .section-heading {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 28px;
  }

  .section-heading > p:last-child {
    grid-column: 1;
  }

  /* Elimina i rientri laterali dei contenuti */
  .profile-text,
  .link-grid,
  .contact-card {
    margin-left: 0;
  }

  /* Riduce il padding dei riquadri dei link */
  .link-group {
    padding: 22px;
  }

  /* Riduce il padding del riquadro Contatti */
  .contact-card {
    padding: 26px;
  }

  /* Le due righe del footer vengono disposte verticalmente */
  footer {
    flex-direction: column;
  }
}