/* ═══════════════════════════════════════════════════════════════════
   SumanSahu Portfolio — Responsive Stylesheet
   Breakpoints: xl ≤ 1200px | lg ≤ 992px | md ≤ 768px | sm ≤ 480px
   ═══════════════════════════════════════════════════════════════════ */

/* ─── xl: 1200px ────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .hero__img-frame { max-width: 420px; }
  .pswiper__slide  { min-height: 420px; }
}

/* ─── lg: 992px ─────────────────────────────────────────────────────── */
@media (max-width: 992px) {

  /* ── Navbar ── */
  .navbar__links { display: none; }
  /* Show hamburger */
  .navbar__toggle {
    display: flex !important;
  }

  /* ── Hero — single column, image on top ── */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: var(--sp-2xl);
    gap: var(--sp-xl);
  }
  .hero__visual  { justify-content: center; order: -1; }
  .hero__img-frame { max-width: 320px; }
  .hero__subtitle  { max-width: 100%; }
  .hero__actions   { justify-content: center; }
  .hero__stats     { justify-content: center; }

  /* Hide animated deco elements — circles are too large on tablet */
  .hero__circles { display: none; }

  /* Hide all tags on mobile */
  .hero__tag--1,
  .hero__tag--2,
  .hero__tag--3,
  .hero__tag--4 { display: none; }
  .hero__tags-strip { display: none; }

  /* About brief — stack */
  .about-brief__inner { grid-template-columns: 1fr; }
  .about-brief__text .section-title { text-align: center; }
  .about-brief__text .body-text { text-align: center; }
  .about-brief__text .btn { display: block; width: fit-content; margin-inline: auto; }

  /* Contact layout — stack */
  .contact-layout { grid-template-columns: 1fr; }

  /* About hero — stack */
  .about-hero {
    grid-template-columns: 1fr;
    padding-block: calc(var(--nav-h) + var(--sp-2xl)) var(--sp-2xl);
  }

  /* Project slider — stack */
  .pswiper__slide {
    grid-template-columns: 1fr;
    grid-template-rows: 260px auto;
    min-height: auto;
  }
}

/* ─── md: 768px ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  :root {
    --sp-3xl: 4rem;
    --sp-2xl: 3rem;
  }

  .section { padding-block: var(--sp-2xl); }

  /* Cards grid — 2 col */
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  /* Skills grid — 1 col */
  .skills-grid { grid-template-columns: 1fr; }

  /* Form row — 1 col */
  .form-row { grid-template-columns: 1fr; }

  /* CTA box */
  .cta-box { padding: var(--sp-xl) var(--sp-lg); }

  /* Filter bar */
  .filter-bar { gap: var(--sp-xs); }
  .filter-btn { padding: .4rem .875rem; font-size: .8125rem; }

  /* Hero buttons */
  .hero__actions .btn { padding: .65rem 1.25rem; }

  /* Pswiper body */
  .pswiper__body-col { padding: var(--sp-lg); }
  .pswiper__desc { max-width: 100%; }
}

/* ─── sm: 480px ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .container { padding-inline: var(--sp-md); }

  /* Cards — 1 col */
  .cards-grid { grid-template-columns: 1fr; }

  /* Hero */
  .hero__img-frame { max-width: 100%; }

  /* Buttons stay inline, centered — never stretch full-width */
  .hero__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .hero__actions .btn { min-height: 44px; width: auto; }

  /* Hide contact button in navbar on very small screens */
  .navbar__actions .btn:not(.navbar__toggle) { display: none; }

  /* Error page */
  .error-page__actions { flex-direction: column; align-items: center; }

  /* About hero */
  .about-avatar-wrap { max-width: 280px; }

  /* Pswiper image shorter */
  .pswiper__slide { grid-template-rows: 200px auto; }
}

/* ─── 360px (very small phones) ─────────────────────────────────────── */
@media (max-width: 360px) {
  .container { padding-inline: var(--sp-sm); }
  .hero__actions .btn { font-size: .88rem; padding: .7rem 1.2rem; }
  .wh__tab { font-size: .78rem; padding: .5rem .7rem; min-width: 80px; }
  .sk__shelf { gap: .35rem; }
  .sk__tag { font-size: .75rem; padding: .42rem .8rem; }
  .bp__grid { grid-template-columns: 1fr; }
  .cta__title { font-size: 1.5rem; }
}

/* ─── Print ─────────────────────────────────────────────────────────── */
@media print {
  .navbar, .footer, .hero__scroll, .hero__badge, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .gradient-text { -webkit-text-fill-color: unset; background: none; color: #000; }
}


/* ─── Tighter section spacing on phones ─────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --sp-3xl: 3.5rem;
    --sp-2xl: 2.5rem;
  }
  .section { padding-block: 2.5rem; }

  /* Hero image — keep portrait compact */
  .hero__img { max-height: 320px; }

  /* Work highlights card height at phones */
  .wh__preview { min-height: unset; }
  .wh__slide   { padding-top: 28px; } /* room for sticker */
}

@media (max-width: 360px) {
  .section { padding-block: 2rem; }
}