/* ================================================================
   responsive.css
   ─────────────────────────────────────────────────────────────────
   All media queries for the portfolio.
   Breakpoints:
     ≤ 1024px  — tablet landscape, narrow desktop
     ≤  768px  — tablet portrait, large mobile
     ≤  480px  — small mobile
   ================================================================ */


/* ── ≤ 1024px — tablet / narrow desktop ─────────────────────────
   Hero: smaller type, narrower panel, tighter lower strip padding.
   About: collapse split to single column.
   Contact / Footer: single column.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1120px) {
  .nav-container {
    padding: 0 32px;
  }

  .nav-list {
    gap: 20px;
  }

  .nav-link {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }
}

@media (max-width: 1024px) {

  /* Hero meta bar — tighter horizontal padding */
  .hero-meta-bar {
    padding: 80px 32px 14px;
  }

  /* Hero type layer — tighter padding */
  .hero-type-layer {
    padding: 20px 32px 0;
  }

  /* Slightly smaller giant name at this breakpoint */
  .hero-giant-name__row--first {
    font-size: clamp(3.8rem, 11vw, 8rem);
  }

  .hero-giant-name__row--last {
    font-size: clamp(4.2rem, 13vw, 10rem);
  }

  /* Narrower center panel */
  .hero-center-panel {
    width:   clamp(260px, 42vw, 440px);
    padding: 28px 32px 24px;
  }

  /* Adjust lower strip column widths */
  .hero-lower {
    grid-template-columns: 1fr auto 220px;
  }

  .hero-lower__intro {
    padding: 22px 28px 22px 32px;
  }

  .hero-lower__stats {
    padding: 20px 28px;
  }

  /* About: stack panels vertically */
  .am-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  /* Give the image panel a fixed height when stacked */
  .am-left-panel {
    min-height: 480px;
  }

  .am-right-panel {
    padding: 60px 40px;
  }

  /* Contact: single column */
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Footer: stack to single column, centre-aligned */
  .footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__links {
    justify-content: center;
  }
}


/* ── ≤ 768px — tablet portrait / large phone ─────────────────────
   Hero: hide giant name, make panel static, hide decorative shapes.
   Nav: show hamburger, hide link list (replaced by overlay).
   Lab: single column cards.
   About: reduce photo size.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Tighter container gutter */
  .container {
    padding: 0 24px;
  }

  /* ── Hero ─────────────────────────────────────────────────── */

  /* Hide the giant decorative name — too large for small screens */
  .hero-giant-name {
    display: none;
  }

  /* Panel becomes static (not absolutely centred) and full-width */
  .hero-center-panel {
    position:   static;
    transform:  none;
    width:      100%;
    max-width:  420px;
    margin:     0 auto;
    padding:    28px 24px 24px;
    background: rgba(13, 27, 62, 0.85);
  }

  /* Show mobile name inside the panel (was hidden on desktop) */
  .hero-mobile-name {
    display: flex;
  }

  /* Hide decorative geometric shapes on small screens */
  .hero-deco {
    display: none;
  }

  /* Type layer: centre content */
  .hero-type-layer {
    padding:         20px 20px 0;
    justify-content: center;
    align-items:     center;
  }

  /* Meta bar: tighter padding, hide centre text */
  .hero-meta-bar {
    padding:   74px 20px 12px;
    flex-wrap: wrap;
    gap:       6px;
  }

  .hero-meta-bar__center {
    display: none; /* too much text for small screens */
  }

  /* Lower strip: collapse to single column */
  .hero-lower {
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }

  /* Hide folio intro text on mobile — not enough room */
  .hero-lower__intro {
    display: none;
  }

  /* Stats become a horizontal row */
  .hero-lower__stats {
    flex-direction:  row;
    justify-content: space-around;
    padding:         18px 20px;
    border-right:    none;
    border-bottom:   1px solid rgba(255, 255, 255, 0.5);
  }

  /* Stat separator becomes vertical */
  .hero-stat-sep {
    width:  1px;
    height: 32px;
  }

  /* Hide collection card — not enough room */
  .hero-collection-card {
    display: none;
  }

  /* Centre the scroll cue */
  .hero-scroll-cue {
    left:      50%;
    transform: translateX(-50%);
  }

  /* ── Navigation ───────────────────────────────────────────── */

  /* Hide nav links list — replaced by fullscreen overlay */
  .nav-list {
    display: none;
  }

  /* Fullscreen overlay menu — toggled by navbar.js */
  .nav-list.open {
    display:         flex;
    flex-direction:  column;
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    bottom:          0;
    background:      rgba(6, 14, 31, 0.97);
    backdrop-filter: blur(12px);
    align-items:     center;
    justify-content: center;
    gap:             36px;
    z-index:         999;
  }

  /* Larger link text in fullscreen overlay */
  .nav-link {
    font-size: 0.85rem;
  }

  /* Show hamburger button */
  .nav-toggle {
    display: flex;
  }

  /* ── Laboratory ───────────────────────────────────────────── */

  /* Stack header + filters vertically */
  .laboratory__header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            24px;
  }

  /* Single column cards */
  .lab-grid {
    grid-template-columns: 1fr;
  }

  /* ── About ────────────────────────────────────────────────── */

  /* Slightly smaller profile photo on tablet */
  .am-right-heading__pfp-wrap,
  .am-right-heading__pfp {
    width:  120px;
    height: 120px;
  }
}


/* ── ≤ 480px — small mobile ──────────────────────────────────────
   Fine-tune typography and padding for the smallest screens.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Tighter center panel padding */
  .hero-center-panel {
    padding: 20px 16px 18px;
  }

  /* Smaller intro and quote text */
  .hero-center-panel__intro {
    font-size: 0.84rem;
  }

  .hero-center-panel__quote {
    font-size: 0.78rem;
  }

  /* Smaller stat numbers */
  .hero-stat-pill__num {
    font-size: 1.3rem;
  }

  .hero-stat-pill__label {
    font-size: 0.46rem;
  }
}