/* =========================================================
   SAIRA WALI — RESPONSIVE.CSS
   Loaded AFTER css/style.css.

   This file contains ONLY responsive overrides. It does not
   redefine colors, fonts, or the base desktop layout — those
   stay exactly as defined in style.css. Rules here only kick
   in at the widths noted in each section below, and only
   change the specific properties needed to keep the layout
   comfortable at that width.

   Breakpoint map:
     ≥1440px        Large desktop   — no overrides (desktop as-is)
     1200–1439px    Standard desktop — no overrides (desktop as-is)
     992–1199px     Small desktop/laptop
     768–991px      Tablet landscape
     576–767px      Tablet portrait / large mobile
     375–575px      Mobile
     <375px         Small mobile
     + a short-viewport landscape pass for phones/tablets rotated sideways
   ========================================================= */


/* =========================================================
   SMALL DESKTOP / LAPTOP  (max-width: 1199px)
   - The 7-item nav + CTA gets tight below 1200px, so the
     hamburger menu takes over here instead of at the very
     last moment. Standard/large desktop (1200px+) is
     untouched and keeps the full horizontal nav.
   - Everything else at this size still matches the desktop
     grid/column counts in style.css — only spacing is trimmed
     slightly so cards don't feel cramped.
   ========================================================= */
@media (max-width: 1199px) {
  html,
  body{
    overflow-x: clip;
  }
  .container{ padding: 0 1.5rem; }

  .hero-grid{ gap: 2.5rem; }

  .services-grid,
  .project-grid{ gap: 1px; } /* keep hairline grid seams consistent */
  .site-header{
    margin-top: 6px;
  }
}


/* =========================================================
   TABLET LANDSCAPE  (max-width: 991px)
   - Hero stays a two-column layout but with tighter spacing
     and a smaller portrait so nothing feels crowded.
   - Card grids move from 3 → 2 columns where the desktop
     default was 3 (Services). Projects was already 2, so it
     is left alone here.
   ========================================================= */
@media (max-width: 991px) {
  html,
  body{
    overflow-x: clip;
  }
  .hero{ padding: 4rem 0 3.5rem; }
  .hero-grid{ gap: 2rem; }
  .hero-photo-frame{ width: min(260px, 60vw); }

  .services-grid{ grid-template-columns: 1fr 1fr; }

  .skills-cols{ gap: 2rem; }

  .section{ padding: 4rem 0; }
}


/* =========================================================
   TABLET PORTRAIT / LARGE MOBILE  (max-width: 767px)
   - This is where two-column sections stack to one column:
     hero, about, skills, and contact. At this width a
     side-by-side layout for these sections leaves each
     column too narrow to read comfortably.
   - Services and Projects stay 2-column here (only mobile
     collapses them further, below).
   - Timeline indent is reduced so dates/bullets have more
     room and nothing crowds the left edge.
   ========================================================= */
@media (max-width: 767px) {
  html,
  body{
    overflow-x: clip;
  }
  .section{ padding: 3.25rem 0; }
  .section-head{ margin-bottom: 2rem; }

  /* ---- Hero: stack, text first, photo below ---- */
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .hero-content{ order: 1; }
  .hero-photo-wrap{ order: 2; margin-bottom: 0; }
  .hero-intro{ max-width: 100%; }
  .hero-ctas{ gap: .75rem; }
  
  /* ---- Nav: switch to off-canvas hamburger menu ---- */
  .nav-toggle-label{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
  }

  .nav-links{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    max-width: 320px;
    background: var(--paper);
    border-left: 1px solid var(--line-strong);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    box-shadow: -12px 0 32px -18px rgba(28,27,24,.35);
  }

  .nav-links li{
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .nav-links li:last-child{ border-bottom: none; margin-top: .5rem; }

  .nav-links a{
    display: block;
    width: 100%;
    padding: 1rem 0;
    font-size: 1rem;
  }

  /* CTA becomes a full-width button inside the mobile menu
     instead of hiding — it stays reachable on every device. */
  .nav-links a.nav-cta{
    text-align: center;
    background: var(--ink);
    color: var(--paper);
    border-radius: 2px;
    padding: .9rem 1rem;
  }

  .nav-toggle:checked ~ .nav-links{
    transform: translateX(0);
  }

  /* Simple full-screen scrim behind the open menu, built from
     the label element so no extra markup/JS is required. */
  .nav-toggle:checked ~ .nav-toggle-label::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: -1;
  }

  .nav-toggle-label{ position: relative; z-index: 110; }
  .nav-links{ z-index: 105; }
    .nav-toggle-label{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle-label span{
  width: 22px;
  height: 2px;
  background: var(--ink);
  display: block;
}

  /* ---- About ---- */
  .about-grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* ---- Skills ---- */
  .skills-cols{
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

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

  /* ---- Timeline: tighter left column ---- */
  .timeline{ padding-left: 1.6rem; }
  .timeline-item::before{ left: -1.86rem; }
  .timeline-role{ font-size: 1.1rem; }

  /* ---- Footer ---- */
  .footer-grid{
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .footer-links{
    flex-wrap: wrap;
    gap: 1rem 1.4rem;
  }
  .nav-toggle-label{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle-label span{
  width: 22px;
  height: 2px;
  background: var(--ink);
  display: block;
}
}


/* =========================================================
   MOBILE  (max-width: 575px)
   - Full single-column layout everywhere.
   - Buttons, form fields, and the nav CTA go full-width for
     comfortable tap targets.
   - Long email/phone values are allowed to wrap instead of
     forcing a horizontal scrollbar.
   ========================================================= */
@media (max-width: 575px) {
  html,
  body{
    overflow-x: clip;
  }
  .container{ padding: 0 1.1rem; }

  .section{ padding: 2.75rem 0; }

  /* ---- Hero ---- */
  .hero{ padding: 3rem 0 2.5rem; }
  .hero-photo-frame{ width: min(240px, 72vw); }
  .hero-ctas{
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas .btn{
    justify-content: center;
    width: 100%;
  }

  /* ---- About: stat grid to one column ---- */
  .fact-grid{ grid-template-columns: 1fr; }

  /* ---- Services / Projects: single column ---- */
  .services-grid{ grid-template-columns: 1fr; }
  .project-grid{ grid-template-columns: 1fr; }
  .service-card{ padding: 1.6rem 1.5rem; }
  .project-card{ padding: 1.5rem 1.5rem 1.7rem; }

  /* ---- Certification row ---- */
  .cert-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
  }

  /* ---- Contact: let long values wrap, never overflow ---- */
  .contact-info-item{
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
  }
  .contact-info-item a,
  .contact-info-item .value{
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .contact-form button{
    width: 100%;
    justify-content: center;
  }

  /* ---- Footer ---- */
  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }
  .footer-bottom span{
    word-break: break-word;
    overflow-wrap: anywhere;
  }

}


/* =========================================================
   SMALL MOBILE  (max-width: 374px)
   - Narrowest phones (e.g. older/small-screen devices).
     A few extra pixels are trimmed from padding and the
     hero/eyebrow spacing so nothing feels squeezed against
     the screen edge, without shrinking body text further.
   ========================================================= */
@media (max-width: 374px) {
  
  .container{ padding: 0 .9rem; }

  .hero-photo-frame{ width: min(200px, 68vw); padding: .45rem; }

  .service-card,
  .project-card{ padding: 1.35rem 1.2rem; }

  .tag,
  .skill-tag,
  .social-badge{ font-size: .72rem; padding: .4rem .6rem; }

  .nav-links{ width: 86vw; padding-left: 1.5rem; padding-right: 1.5rem; }
}


/* =========================================================
   SHORT / LANDSCAPE VIEWPORTS  (phones & tablets rotated)
   - Targets short-height screens rather than a width, so it
     applies whenever vertical space is tight in landscape,
     regardless of device. Trims vertical padding so the hero
     doesn't force excessive scrolling, and keeps the mobile
     nav panel scrollable within the viewport height.
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {

  .hero{ padding: 2.25rem 0; }
  .hero-grid{ gap: 1.5rem; }
  .hero-photo-frame{ width: min(180px, 30vh); }

  .section{ padding: 2.5rem 0; }

  .nav-links{ padding-top: 4.5rem; }
}


/* =========================================================
   LARGE DESKTOP  (min-width: 1440px)
   - No structural overrides — the grids and type scale in
     style.css already read comfortably at this width. A
     small gap increase keeps very wide rows from feeling
     tight, without changing the design.
   ========================================================= */
@media (min-width: 1440px) {
  .services-grid,
  .project-grid{ gap: 1px; }
  .hero-grid{ gap: 4rem; }
}

@media (max-width: 767px) {
  .nav-brand img {
    width: 35px;
    height: 35px;
  }
}