/* ═══════════════════════════════════════════════════
   DARA PORTFOLIO — RESPONSIVE CSS
   Mobile-first breakpoints
   ═══════════════════════════════════════════════════ */

/* ── 1200px and below ─────────────────────────────── */
@media (max-width: 1200px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
  .about__grid { gap: 56px; }
  .hero__info  { left: 36px; bottom: 44px; }
  .hero__stats { right: 36px; bottom: 44px; gap: 28px; }
}

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

  /* Nav */
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }

  /* Hero — center portrait + pull name up to close the gap */
  .hero__big-line { font-size: clamp(2.8rem, 9vw, 9rem); }
  .hero__portrait-wrap { width: clamp(280px, 52vw, 520px); left: 50%; }
  .hero__name-block,
  .hero__name-front { top: 49%; }
  .hero__info  { left: 24px; bottom: 36px; }
  .hero__stats { right: 24px; bottom: 36px; gap: 20px; }
  .hero__stat-num { font-size: 1.6rem; }
  .hero__btns .btn { padding: 11px 22px; font-size: 0.82rem; }

  /* About — center image when grid goes single-column */
  .about__grid {
    grid-template-columns: 1fr;
    gap: 80px;
  }
  .about__img-col { width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; }
  .about__img-frame { width: 100%; aspect-ratio: auto; max-height: 480px; }
  .about__pill { font-size: 0.68rem; }

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

  /* Work */
  .cards-grid     { grid-template-columns: repeat(2, 1fr); }
  .cards-grid--3  { grid-template-columns: repeat(2, 1fr); }

  /* Awards */
  .award-item { grid-template-columns: 70px 1fr; gap: 20px; }
}

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

  /* Section spacing */
  .section { padding: 80px 0; }
  .wrap    { padding: 0 20px; }

  /* Hero — stacked (2026-10-08): photo sits below the nav with the whole head
     visible, the name rides the photo's faded bottom edge, info follows straight
     after. The photo is sized from the screen height too (--pw), so nothing is
     cropped on short phones and there is no dead gap on tall ones.
     !important beats the desktop mouse-parallax inline transforms. */
  .hero {
    --pw: min(80vw, 440px, calc((100vh - 300px) * 0.77));
    --pw: min(80vw, 440px, calc((100svh - 300px) * 0.77));
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 76px 20px 28px;
  }
  .hero__portrait-wrap {
    position: relative; top: auto; left: auto;
    transform: none !important;
    order: 1; align-self: center;
    width: var(--pw);
  }
  .hero__name-block,
  .hero__name-front {
    position: relative; top: auto; left: auto;
    transform: none !important;
    width: 100%; padding: 0;
    z-index: 4;
  }
  .hero__name-block { order: 2; margin-top: calc(var(--pw) * -0.30); }
  .hero__name-front { order: 3; margin-top: 4px; }
  .hero__big-line { font-size: clamp(2.2rem, 8.5vw, 6rem); }
  .hero__info { position: relative; left: auto; bottom: auto; order: 4; margin-top: 26px; align-self: flex-start; }
  .hero__stats { right: 20px; bottom: 28px; gap: 16px; }
  .hero__stat-num  { font-size: 1.4rem; }
  .hero__stat-label { font-size: 0.62rem; }
  .hero__typed-line { font-size: 0.9rem; }
  .hero__scroll-hint { display: none; }

  /* H2 */
  .h2 { font-size: clamp(1.7rem, 6vw, 2.5rem); }

  /* About */
  .about__img-col { max-width: 440px; }
  .about__img-frame { width: 100%; aspect-ratio: auto; max-height: 400px; }
  .about__stats { gap: 24px; }
  .astat__num { font-size: 1.8rem; }

  /* Skills */
  .skills__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .skill-card { padding: 22px 18px; }

  /* Tabs */
  .tabs-bar { padding: 0 20px; gap: 4px; }
  .tab { padding: 8px 16px; font-size: 0.75rem; }

  /* Cards */
  .cards-grid     { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cards-grid--3  { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Awards */
  .award-item { grid-template-columns: 60px 1fr; gap: 16px; padding: 22px 0; }
  .award-item__name { font-size: 1.1rem; }

  /* Contact */
  .contact__h { font-size: clamp(1.8rem, 8vw, 3rem); }
  .contact__email-btn { padding: 14px 20px; font-size: 0.8rem; flex-wrap: wrap; justify-content: center; }
  .contact__socials { gap: 10px; }
  .soc-btn { padding: 9px 16px; font-size: 0.75rem; }

  /* Footer */
  .footer__inner { flex-direction: column; text-align: center; gap: 8px; }
}

/* ── 576px and below ──────────────────────────────── */
@media (max-width: 576px) {

  /* Hero — same stack as tablet, sized for phones (buttons stack, so reserve more) */
  .hero {
    --pw: min(90vw, 390px, calc((100vh - 330px) * 0.77));
    --pw: min(90vw, 390px, calc((100svh - 330px) * 0.77));
    padding: 72px 16px 20px;
  }
  .hero__big-line { font-size: clamp(1.9rem, 9vw, 3.8rem); }
  .hero__info { margin-top: 22px; }
  .hero__stats { right: 16px; bottom: 20px; gap: 12px; }
  .hero__stat-num { font-size: 1.2rem; }
  .hero__btns { flex-direction: column; gap: 8px; width: max-content; }   /* button width must not follow the typed text */
  .hero__btns .btn { text-align: center; justify-content: center; }

  /* Skills */
  .skills__grid { grid-template-columns: 1fr; }

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

  /* Tabs */
  .tabs-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .tabs-bar::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0; }

  /* About pills */
  .about__pill { display: none; }

  /* Awards */
  .award-item { grid-template-columns: 50px 1fr; gap: 12px; }
  .award-item__year { font-size: 0.8rem; }

  /* Contact email */
  .contact__email-btn { padding: 12px 18px; font-size: 0.75rem; flex-wrap: wrap; justify-content: center; }
  .contact__email-text { word-break: break-all; }

  /* Nav */
  .nav__inner { padding: 0 20px; }
}

/* ── No custom cursor on touch devices ─────────────── */
@media (hover: none) and (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
  body, a, button { cursor: auto; }
}