/* ============================================================
   Rita Berrada Portfolio — mobile.css
   Breakpoints: tablet ≤768px, mobile ≤480px
   ============================================================ */

/* ---- Tablet ≤768px ---- */
@media (max-width: 768px) {
  /* Header */
  .nav { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero { padding: 5rem 0 3rem; min-height: auto; }
  .hero__container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .hero__content { order: 2; }
  .hero__image-wrap { order: 1; }
  .hero__name { font-size: 2.5rem; }
  .hero__image { width: 220px; height: 220px; }
  .hero__image-bg { width: 250px; height: 250px; }
  .hero__ctas { justify-content: center; }
  .hero__socials { justify-content: center; }

  /* About */
  .about__grid { grid-template-columns: 1fr; }
  .about__stats { flex-direction: row; justify-content: center; min-width: unset; }
  .stat { min-width: 120px; }

  /* What's New */
  .whats-new__grid { grid-template-columns: 1fr; }

  /* Skills */
  .skills__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  /* Projects */
  .projects__grid { grid-template-columns: repeat(2, 1fr); }

  /* Education */
  .edu-timeline {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .edu-timeline__connector { display: none; }
  .edu-timeline__item--left .edu-card { border-left: 4px solid var(--primary); border-right: none; }
  .edu-timeline__item--right .edu-card { border-left: 4px solid var(--accent); border-right: none; }

  /* Contact */
  .contact__grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Footer */
  .footer .container { flex-direction: column; text-align: center; }

  /* Sections */
  .section-title { font-size: 1.8rem; }
  .experience { padding: 3.5rem 0; }
  .projects { padding: 3.5rem 0; }
  .education { padding: 3.5rem 0; }
  .contact { padding: 3.5rem 0; }
  .about { padding: 3.5rem 0; }
  .whats-new { padding: 3.5rem 0; }
  .skills { padding: 3.5rem 0; }
}

/* ---- Mobile ≤480px ---- */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }

  /* Hero */
  .hero__name { font-size: 2rem; }
  .hero__tagline { font-size: 1.1rem; }
  .hero__image { width: 180px; height: 180px; }
  .hero__image-bg { width: 200px; height: 200px; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  /* Projects */
  .projects__grid { grid-template-columns: 1fr; }

  /* Stats */
  .about__stats { flex-wrap: wrap; gap: 1rem; }
  .stat { flex: 1; min-width: 90px; }

  /* Filter buttons */
  .projects__filters { gap: 0.4rem; }
  .filter-btn { font-size: 0.8rem; padding: 0.35rem 0.9rem; }

  /* Skill tabs */
  .skills__tab-btn { font-size: 0.8rem; padding: 0.35rem 0.9rem; }

  /* Timeline */
  .timeline { padding-left: 1.75rem; }
  .timeline__dot { left: -1.75rem; }
  .timeline__header { flex-direction: column; align-items: flex-start; }
  .timeline__period { align-self: flex-start; }

  /* Section titles */
  .section-title { font-size: 1.6rem; }

  /* Scroll-to-top */
  .scroll-top { bottom: 1rem; right: 1rem; }

  /* Modal */
  .modal__content { padding: 1.75rem; }
  .modal__actions { flex-direction: column; }
  .modal__actions .btn { width: 100%; justify-content: center; }

  /* Contact */
  .contact__item { flex-direction: column; gap: 0.5rem; }
  .contact__icon { width: 36px; height: 36px; }
}

/* ---- Touch feedback ---- */
@media (hover: none) {
  .btn:active { transform: scale(0.98); }
  .project-card:active { transform: scale(0.98); }
  .featured-card:active { transform: scale(0.98); }
  .skill-item:active { transform: scale(0.98); }
}

/* ---- iOS Safari viewport fix ---- */
@supports (-webkit-touch-callout: none) {
  .hero { min-height: calc(var(--vh, 1vh) * 100); }
}