/* ===== Responsive Fixes by Laura (mobile-first tweaks) ===== */

/* General container padding on tablets/phones */
@media (max-width: 992px) {
  section { padding: 2rem 5%; min-height: auto; }
  header { padding: 1.2rem 6%; }
}

/* Navbar touch target & spacing */
@media (max-width: 768px) {
  header .logo { font-size: 1.7rem; }
  header .navbar { width: 85%; }
  header .navbar ul li { width: auto; margin: .4rem 0; }
  header .navbar ul li a { font-size: 1.8rem; padding: 1rem 1.2rem; }
}

/* Home (Hero) */
@media (max-width: 992px) {
  .home { gap: 1rem; }
  .home .content h2 { font-size: 3.8rem; }
  .home .content p { font-size: 2rem; }
}
@media (max-width: 768px) {
  .home { flex-direction: column-reverse; align-items: center; text-align: center; }
  .home .content { padding-top: 0; }
  .home .content h2 { font-size: 3.2rem; }
  .home .content h2 span { font-size: 3.2rem; }
  .home .content p { font-size: 1.7rem; }
  .home .btn { position: static; display: inline-flex; margin: 1.2rem 0 0 0; }
  .socials { margin-top: 1.6rem; }
  .social-icons a { width: 40px; height: 40px; line-height: 40px; font-size: 1.6rem; }
  .home .image img { width: 220px; margin: 1rem auto 0 auto; }
}
@media (max-width: 450px) {
  .home .content h2 { font-size: 2.6rem; }
  .home .content p { font-size: 1.55rem; }
  .home .image img { width: 200px; margin: 0.6rem auto 0 auto; }
}

/* About */
@media (max-width: 768px) {
  .about .row { padding: 1.2rem; }
  .about .row .content { padding: 1.2rem; }
  .about .row .image img { width: 65%; margin: 1rem auto; }
}
@media (max-width: 450px) {
  .about .row .content h3 { font-size: 2.1rem; }
  .about .row .content p { font-size: 1.4rem; }
}

/* Skills grid */
@media (max-width: 992px) {
  .skills .container { width: 96%; }
}
@media (max-width: 768px) {
  .skills .container .row { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: 0.5rem; }
  .skills .container .bar .info span { font-size: 1.7rem; }
}

/* Education cards */
@media (max-width: 768px) {
  .education .box-container .box { width: 100%; }
  .education .box-container .box .content h3 { font-size: 2rem; }
  .education .box-container .box .content p { font-size: 1.35rem; }
}
@media (max-width: 450px) {
  .education .qoute { font-size: 1.35rem; }
}

/* Experience timeline fine-tuning for very small screens */
@media (max-width: 480px) {
  .experience .timeline::after { left: 26px; }
  .experience .container { padding-left: 6rem; }
  .experience .container::before { left: 56px; }
}
@media (max-width: 360px) {
  .experience .timeline::after { left: 22px; }
  .experience .container { padding-left: 5.2rem; padding-right: 1.2rem; }
  .experience .container::before { left: 50px; }
}

/* Work section cards */
@media (max-width: 768px) {
  .work .box-container { margin: 1rem 0; gap: 1rem; }
  .work .box-container .box { flex: 1 1 100%; height: auto; }
  .work .box-container .box .content { position: static; }
  .work .desc { margin: 1.2rem; }
}

/* Contact */
@media (max-width: 992px) {
  .contact .container { margin: 1.2rem 1rem; }
}
@media (max-width: 900px) {
  .contact .content form { width: 100%; margin-right: 0; }
}
@media (max-width: 600px) {
  .form-group .field { margin: 0.6rem 0; }
  form .message { margin: 0.6rem 0; }
  form .button-area { float: none; justify-content: flex-end; }
}

/* Footer */
@media (max-width: 768px) {
  .footer .box-container { padding: 0 1rem; }
  .footer .box-container .box { margin: 1.2rem 0.8rem; }
}
@media (max-width: 450px) {
  .footer .box-container .box h3 { font-size: 2rem; }
  .footer .box-container .box p,
  .footer .box-container .box a { font-size: 1.35rem; }
}

/* Prevent horizontal scroll on small screens */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
}