/* =================================================================
   mobile.css — adattamenti SOLO per mobile/tablet
   Caricato DOPO styles.css.

   VINCOLO: il desktop (>= 992px) NON è toccato. Ogni regola qui vive
   esclusivamente dentro media query `max-width`, quindi a >= 992px
   questo file non produce alcun effetto.
   ================================================================= */

/* =====================================================================
   TABLET & MOBILE  (<= 991.98px)
   ===================================================================== */
@media (max-width: 991.98px) {

  /* ---------------- HEADER: menu hamburger ---------------- */
  .header-inner { gap: 10px; padding: 11px 20px; }
  .logo { order: 1; }

  .nav-toggle {
    display: inline-flex; order: 2; margin-left: auto;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--line2); border-radius: 10px;
    cursor: pointer;
  }
  .nav-toggle:hover { border-color: var(--accent-line); }
  .nav-toggle__bar {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text);
    transition: transform .25s ease, opacity .2s ease;
  }
  .site-header.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .site-header.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Pannello a discesa: riusa .main-nav e .header-actions, niente DOM duplicato */
  .main-nav {
    order: 3; flex-basis: 100%; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    display: none;
  }
  .header-actions {
    order: 4; flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 10px;
    display: none; margin: 6px 0 8px;
  }
  .site-header.is-open .main-nav,
  .site-header.is-open .header-actions { display: flex; }
  .site-header.is-open { background: var(--bg); }

  .nav-link { padding: 14px 6px; font-size: 15px; border-top: 1px solid var(--line); }
  .theme-toggle { width: 100%; padding: 13px; font-size: 13.5px; }
  .header-actions .btn--cta { display: block; text-align: center; padding: 14px; font-size: 15px; }

  /* ---------------- HERO ---------------- */
  .hero { padding: 96px 0 56px; }
  .hero-inner { gap: 34px; }
  .hero-text { flex-basis: 100%; }
  .hero-media { flex-basis: 100%; min-width: 0; width: 100%; max-width: 360px; }
  .profile-img { height: auto; aspect-ratio: 35 / 43; }   /* era height:430px fissa */
  .media-accent { display: none; }                         /* decorativo che sporgeva */

  /* ---------------- NUMERI: griglia 2 colonne ---------------- */
  .numbers { padding: 48px 0; scroll-margin-top: 72px; }
  .numbers-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; margin-top: 28px; }

  /* ---------------- SEZIONI: spaziature ridotte ---------------- */
  .section { padding: 64px 0 0; scroll-margin-top: 64px; }
  .contact { padding: 64px 0 72px; }
  .section-title br { display: none; }                     /* niente a-capo forzati su mobile */
  .feature-grid, .skills-grid { margin-top: 30px; }
  .edu-row { margin-top: 30px; }
  .feature-card, .skill-card, .edu-card { padding: 24px; }

  /* ---------------- TIMELINE ---------------- */
  .timeline { padding-left: 24px; margin-top: 32px; }
  .exp-card { padding: 22px 20px; }
  .exp-card::before { left: -30px; }                       /* dot resta sulla linea */

  /* ---------------- CONTATTI: info SOTTO il form ---------------- */
  .contact-grid { flex-direction: column; gap: 26px; margin-top: 36px; }
  .contact-form { order: 1; padding: 22px; }
  .contact-info { order: 2; }
  .subject-toggle { gap: 6px; }
  .subject-btn { padding: 13px 10px; }                     /* target ~44px */

  /* ---------------- Tap target dei link testuali ---------------- */
  .text-link { display: inline-block; padding: 7px 0; }

  /* Animazioni infinite ridotte se l'header è chiuso non serve nulla qui */
}

/* =====================================================================
   PHONE  (<= 600px)
   ===================================================================== */
@media (max-width: 600px) {
  .hero-title { font-size: clamp(33px, 9vw, 44px); }       /* abbassa il min (era 42px) */
  .hero-lead { font-size: 16.5px; }
  .lead-text { font-size: 17px; }
  .section { padding: 56px 0 0; }
  .hero { padding: 88px 0 48px; }
  .clients-list { gap: 12px 22px; }
  .client { font-size: 17px; }
  .exp-head { gap: 6px 12px; }
}

/* =====================================================================
   PHONE PICCOLO  (<= 400px)
   ===================================================================== */
@media (max-width: 400px) {
  .container, .hero-inner { padding-left: 16px; padding-right: 16px; }
  .header-inner { padding-left: 16px; padding-right: 16px; }
  .footer-inner { padding-left: 16px; padding-right: 16px; }
  .numbers-grid { gap: 20px 14px; }
  .contact-form, .feature-card, .skill-card, .edu-card { padding: 20px; }
}

/* =====================================================================
   TASK 2 — Parte bassa più compatta su mobile (lista contatti + footer)
   Riduce SOLO gap/margini/padding verticali. Desktop >= 992px invariato.
   I target principali (bottone "Scarica CV", input del form) restano >= 44px.
   ===================================================================== */
@media (max-width: 991.98px) {
  /* Lista contatti: meno spazio vuoto tra le voci */
  .contact-info { gap: 12px; }
  .contact-grid { gap: 22px; margin-top: 28px; }
  .contact { padding-bottom: 52px; }
  .btn--cv { margin-top: 4px; }            /* resta ~45px di altezza */
  /* Footer più compatto */
  .site-footer { padding: 18px 0; }
  .footer-inner { gap: 6px 18px; }
}
@media (max-width: 600px) {
  .contact-info { gap: 10px; }
  .contact { padding-bottom: 44px; }
  .site-footer { padding: 16px 0; }
}