/* ═══════════════════════════════════════════════════════════════
   Hirecamp Academy – Authentication System
   responsive.css – tablets, phones, and large desktops
   Tested target widths: 320 · 375 · 768 · 1024 · 1440
   ═══════════════════════════════════════════════════════════════ */

/* ── Large desktops ────────────────────────────────────────── */
@media (min-width: 1441px) {
  .auth-aside { padding: 64px 76px; }
  .auth-main { padding: 56px; }
}

@media (max-width: 1200px) {
  .auth-aside { padding: 44px 44px; }
  .auth-main { padding: 40px 32px; }
  .auth-aside__title { font-size: 2.1rem; }
}

/* ── Small laptops / large tablets ─────────────────────────── */
@media (max-width: 1024px) {
  .auth-shell { grid-template-columns: 1fr 1fr; }
  .auth-aside { padding: 40px 34px; }
  .auth-aside__title { font-size: 1.85rem; }
  .auth-aside__text { font-size: 0.93rem; }
  .auth-card { padding: 34px 28px; }
  .dash__grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
}

/* ── Tablets / stacked layout ──────────────────────────────── */
@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; min-height: 100vh; }

  .auth-aside {
    padding: 34px 26px 30px;
    min-height: auto;
  }

  .auth-aside__mid { margin: 22px 0 0; max-width: 640px; }
  .auth-aside__features { display: none; }
  .auth-aside__title { font-size: 1.7rem; max-width: 560px; }
  .auth-aside__text { margin-top: 12px; font-size: 0.92rem; }
  .auth-aside__foot { display: none; }
  .auth-aside .orb--2,
  .auth-aside .orb--3,
  .auth-aside .dot-grid { display: none; }

  .auth-main { padding: 32px 24px 48px; align-items: flex-start; }

  .auth-card {
    max-width: 620px;
    margin: 0 auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }

  .dash__hero { padding: 30px 26px; }
  .card { padding: 22px 22px; }
}

/* ── Phones ────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .container { padding: 0 18px; }

  .auth-aside { padding: 26px 20px 24px; }
  .auth-aside__title { font-size: 1.5rem; }
  .auth-aside__text { font-size: 0.88rem; }
  .auth-aside__eyebrow { font-size: 0.68rem; padding: 6px 12px; }

  .auth-main { padding: 24px 16px 40px; }

  .auth-card { padding: 26px 20px; border-radius: var(--radius); }
  .auth-card__title { font-size: 1.4rem; }

  .auth-form .field-row { grid-template-columns: 1fr; gap: 0; }
  .auth-form .field-row .field { margin-bottom: 18px; }

  .pw-rules { grid-template-columns: 1fr; }

  .profile-list { grid-template-columns: 1fr; }

  .profile-head { gap: 14px; margin-bottom: 20px; }
  .profile-avatar { width: 54px; height: 54px; font-size: 1.15rem; }

  .dash__header-inner { padding: 12px 0; }
  .dash__logout { padding: 9px 14px; }
  .dash__hero { padding: 26px 20px; border-radius: var(--radius); }
  .dash__main { padding: 22px 0 44px; }
  .card { padding: 20px 18px; }
}

/* ── Small phones (375 / 320) ──────────────────────────────── */
@media (max-width: 400px) {
  .auth-aside__brand .brand__name { font-size: 1rem; }
  .auth-aside__title { font-size: 1.34rem; }
  .auth-card { padding: 22px 16px; }
  .auth-card__title { font-size: 1.28rem; }
  .btn { padding: 13px 18px; font-size: 0.94rem; }
  .input, .select { padding: 12px 12px; }
  .auth-links { gap: 12px; font-size: 0.76rem; }
}

@media (max-width: 340px) {
  .brand__logo { width: 38px; height: 38px; }
  .auth-card { padding: 20px 13px; }
  .container { padding: 0 14px; }
}

/* ── Landscape phones ──────────────────────────────────────── */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 520px) {
  .auth-aside { padding: 22px 24px; }
  .auth-aside__mid { margin-top: 14px; }
  .auth-aside__title { font-size: 1.4rem; }
}