/* ==========================================================================
   Responsive — tested breakpoints:
   1920 / 1600 / 1440 / 1366 / 1280 / 1100 / 1024 / 860 / 768 / 640 / 480 /
   420 / 390 / 360 px
   ========================================================================== */

/* Defaults toggled on by narrow breakpoints — must appear before @media rules */
.hero-stats    { display: none; }
.filters-toggle{ display: none; }
.admin-nav-toggle { display: none; }

/* ── 1600 px+ (large desktop) ─────────────────────────────────────────────── */
@media (min-width: 1600px) {
  :root { --container: 1400px; --container-wide: 1520px; }
}

/* ── ≤ 1500 px ────────────────────────────────────────────────────────────── */
@media (max-width: 1500px) {
  :root { --container: 1280px; --container-wide: 1400px; }
}

/* ── ≤ 1366 px (small desktop / 13-14" laptop) ───────────────────────────── */
@media (max-width: 1366px) {
  :root { --container: 1200px; --container-narrow: 1100px; }
  .hero h1          { font-size: 48px; }
  .hero__script     { font-size: 30px; right: 4%; }
  .jobs-strip       { grid-template-columns: repeat(4, minmax(0, 1fr)) 1.2fr; }
}

/* ── ≤ 1280 px (1280x720 / 1280x800 standard laptop screen) ─────────────── */
@media (max-width: 1280px) {
  :root { --container: 1230px; --gutter: 20px; }
  .hero h1          { font-size: 46px; }
  .hero__inner      { padding: 30px var(--gutter) 20px; }
  .hero__grid       { grid-template-columns: minmax(0, 1fr) 350px; gap: 32px; }
  .jobs-strip       { grid-template-columns: repeat(4, minmax(0, 1fr)) 1.22fr; gap: 14px; }
  .featured-job     { padding: 16px; }
  .featured-job h3  { font-size: 15px; }
  .featured-job .meta { gap: 8px; }
  .featured-job .chips { margin-bottom: 12px; }
  .promo-campus     { padding: 22px 18px; }
  .promo-campus h3  { font-size: 20px; }
  .guidance-strip   { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 12px; }
  .strip-card       { padding: 12px; min-height: 128px; }
  .strip-card h3    { font-size: 14px; }
  .support-grid     { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .support-card     { padding: 16px; grid-template-columns: minmax(0, 1fr) 110px; }
  .jobs-layout      { grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
  .job-row          { padding: 18px 20px; gap: 16px; }
  .job-row__side .btn { min-width: 180px; }
  .panel            { grid-template-columns: 240px minmax(0, 1fr); }
  .panel-main       { padding: 18px var(--gutter) 36px; }
}

/* ── ≤ 1100 px (tablet landscape) ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .footer-main      { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 28px; }
  .footer-col--connect { grid-column: span 3; }
  .jobs-layout      { grid-template-columns: 236px minmax(0, 1fr); gap: 18px; }
  .job-row__side .btn { min-width: 160px; }
  .profile-hero     { grid-template-columns: minmax(0, 1fr); }
  .panel            { grid-template-columns: 220px minmax(0, 1fr); }
  .admin-grid       { grid-template-columns: 210px minmax(0, 1fr); }
  .mode-cards       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-card__copy  { max-width: 64%; }
  .mode-card__art   { width: 50%; }
  .news-layout      { grid-template-columns: minmax(0, 1fr); }
  /* Keep the featured strip readable: two job cards per row, promo spans both
     so its CTA never overflows the viewport at tablet widths. */
  .jobs-strip       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo-campus     { grid-column: span 2; }
}

/* ── ≤ 1024 px (tablet / iPad) ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --gutter: 20px; }

  /* Header collapses to a hamburger drawer */
  .header-inner { justify-content: space-between; }
  .header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 10px 16px 18px; height: auto; margin: 0;
    box-shadow: var(--sh-md); display: none; z-index: var(--z-header);
  }
  .main-nav.is-open  { display: flex; animation: fade-in var(--t-fast) both; }
  .main-nav a        { height: auto; padding: 13px 8px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .main-nav a::after { display: none; }
  .main-nav a:last-child { border-bottom: 0; }
  .header-actions .header-signin { display: none; }
  .main-nav .nav-mobile-actions  { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }

  .hero h1           { font-size: 42px; }
  .hero__script      { display: none; }
  .hero__inner       { padding: 28px var(--gutter) 18px; }
  .hero__split       { grid-template-columns: minmax(0, 1fr); }
  .hero__grid        { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero__aside       { justify-content: flex-start; }
  .hero__aside-inner { max-width: 460px; }
  .hero__copy        { max-width: none; }
  .hero-search       { flex-wrap: wrap; }
  .hero-search__sep  { display: none; }
  .hero-search__field{ flex: 1 1 100%; padding: 4px 12px; border-bottom: 1px solid var(--line-soft); }
  .hero-search .btn  { flex: 1 1 100%; margin: 6px; }
  .hero-features     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-promo        { margin-left: 0; min-width: 0; width: 100%; }

  /* Panels stack */
  .panel             { grid-template-columns: minmax(0, 1fr); }
  .side-nav          { position: static; padding: 14px; }
  .side-menu         { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .side-menu a       { padding: 9px 13px; background: rgba(255,255,255,.06); font-size: 13px; }
  .side-promo        { display: none; }
  .dash-grid         { grid-template-columns: minmax(0, 1fr); }

  .jobs-layout       { grid-template-columns: minmax(0, 1fr); }
  .filters           { position: static; display: none; }
  .filters.is-open   { display: block; animation: fade-in var(--t-fast) both; }
  .filters-toggle    { display: inline-flex; }

  .admin-grid        { grid-template-columns: minmax(0, 1fr); }
  .admin-nav-toggle  { display: inline-flex; margin-bottom: 16px; }
  .admin-nav         { position: static; max-height: none; display: none; }
  .admin-nav.is-open { display: block; margin-bottom: 18px; animation: fade-in var(--t-fast) both; }

  .auth-page         { grid-template-columns: minmax(0, 1fr); }
  .auth-aside        { display: none; }

  .mode-cards        { margin-top: 24px; }
}

/* ── ≤ 860 px (small tablet / large phone) ───────────────────────────────── */
@media (max-width: 860px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .section      { padding: 36px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }

  .hero__inner  { padding: 26px var(--gutter) 18px; }
  .hero h1      { font-size: 36px; }
  .hero--inner h1          { font-size: 34px; }
  .hero--inner .hero__inner{ padding: 30px var(--gutter) 36px; min-height: 0; }
  .hero--compact h1        { font-size: 27px; }
  .hero__sub    { font-size: 14.5px; }
  .hero-stats   { display: grid; grid-template-columns: repeat(2, 1fr); }
  .hero-features{
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; margin-top: 20px;
  }
  .hero-features--round    { grid-template-columns: minmax(0, 1fr); }
  .hero-features--round .hero-feature__icon { width: 34px; height: 34px; }

  .jobs-strip   { grid-template-columns: minmax(0, 1fr); }
  .promo-campus { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .promo-campus__art { margin: 0 0 6px; }
  .guidance-strip    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-card--wide  { grid-column: span 2; }
  .support-grid      { grid-template-columns: minmax(0, 1fr); }
  .mode-cards        { grid-template-columns: minmax(0, 1fr); }
  /* One card per row: the drawing steps aside instead of sitting behind a
     description that now has the full width to itself. */
  .guidance-head h1,
  .guidance-head h2  { font-size: 29px; }
  .mode-card         { min-height: 0; }
  .mode-card__copy   { max-width: 62%; }
  .mode-card__art    { width: 46%; top: 4%; }
  .news-item         { grid-template-columns: 116px minmax(0, 1fr); }
  .news-item h3      { font-size: 15px; }
  .feature-article h2{ font-size: 22px; }

  .profile-card    { flex-direction: column; gap: 16px; }
  .profile-card__name h1 { font-size: 26px; }
  .avatar--xl      { width: 88px; height: 88px; font-size: 26px; }
  .growth-banner   { flex-direction: column; align-items: flex-start; }
  .growth-banner__art { margin: 0; }
  .dash-card       { padding: 18px; }
  .form-grid       { grid-template-columns: minmax(0, 1fr); }
  .profile-photo-row { grid-template-columns: minmax(0, 1fr); }
  .profile-save    { justify-content: stretch; }
  .profile-save .btn { width: 100%; justify-content: center; }
  .profile-save #profile-status { flex: 1 1 100%; text-align: left; }

  .job-row         { flex-wrap: wrap; }
  .job-row__logo   { width: 58px; height: 58px; font-size: 16px; }
  .job-row__side   { flex-direction: column; align-items: stretch; width: 100%; justify-content: flex-start; }
  .job-row__side-top { justify-content: space-between; min-height: 0; }
  .job-row__side .btn { min-width: 0; width: 100%; }
  .job-row__side-top .bookmark-btn { margin-left: auto; }

  .list-search     { flex-wrap: wrap; }
  .list-search__sep{ display: none; }
  .list-search__field { flex: 1 1 100%; padding: 4px 12px; border-bottom: 1px solid var(--line-soft); }
  .list-search .btn{ flex: 1 1 100%; margin: 6px; }

  .article-body h1 { font-size: 27px; }
  .stat-grid       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal           { max-width: 100%; }
}

/* ── ≤ 640 px (phone) ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 58px; }

  .brand__text       { font-size: 18px; }
  .header-inner      { justify-content: space-between; gap: 10px; width: 100%; }
  .header-actions    { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  .header-actions .btn { padding: 9px 14px; font-size: 13px; }
  .user-chip         { padding: 3px; gap: 4px; }
  .user-chip__meta,
  .user-chip > svg   { display: none; }
  .dropdown__panel   { right: -8px; min-width: 220px; max-width: calc(100vw - 24px); }

  .hero h1           { font-size: 30px; }
  .hero__sub         { font-size: 14px; }
  .hero__inner       { padding: 24px var(--gutter) 16px; }
  .eyebrow           { font-size: 11px; letter-spacing: .14em; }
  .hero-search       { border-radius: var(--r-lg); }
  .hero-search--pill { border-radius: var(--r-pill); max-width: none; padding: 4px 18px 4px 16px; }
  .hero-search__field input { font-size: 13.5px; padding: 10px 0; }
  .popular-searches  { gap: 7px; }
  .popular-searches a{ padding: 5px 11px; font-size: 11.5px; }
  .hero-promo        { padding: 11px; }
  .hero-promo strong { font-size: 13.5px; }
  .hero-promo span   { font-size: 11.5px; }

  .section-head h2   { font-size: 21px; }
  .guidance-strip    { grid-template-columns: minmax(0, 1fr); }
  .strip-card--wide  { grid-column: auto; }
  .strip-card        { min-height: 116px; }

  .footer-main       { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 0 24px; }
  .footer-col--connect { grid-column: auto; }
  .footer-bottom .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }

  .side-menu         { flex-direction: column; }
  .side-menu a       { width: 100%; }

  .dash-col          { gap: 14px; }
  .dash-card__head   { flex-wrap: wrap; }
  .dash-card__head .actions { margin-left: 0; width: 100%; }
  .alert-box         { flex-wrap: wrap; }
  .alert-box .btn    { margin-left: 0; width: 100%; }
  .goal-box          { flex-wrap: wrap; }

  .profile-card      { padding: 18px; }
  .profile-card__name{ gap: 10px; }
  .profile-card__name h1 { font-size: 22px; }

  /* A block that pairs text with a wide side element (the profile-photo card)
     stacks instead of squeezing both onto one line. */
  .spread            { flex-wrap: wrap; }
  .form-actions      { flex-direction: column-reverse; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .form-actions .text-sm { text-align: center; }

  .tabs-row          { gap: 8px; padding: 16px 0 18px; }
  .pill              { padding: 6px 13px; font-size: 12.5px; }

  .support-card      { grid-template-columns: minmax(0, 1fr); }
  .support-card__media { display: none; }

  .guidance-lead     { padding-top: 26px; }
  .mode-card         { min-height: 0; padding: 20px; }
  .mode-card__art    { display: none; }
  .mode-card__copy   { max-width: 100%; padding-top: 18px; }
  .mode-card h3      { font-size: 18px; }

  .jobs-toolbar      { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stat-grid         { grid-template-columns: minmax(0, 1fr); }
  .admin-toolbar     { flex-direction: column; align-items: stretch; }
  .admin-toolbar .search-wrap,
  .admin-toolbar .input,
  .admin-toolbar .select { max-width: none; width: 100%; }
  .auth-card         { padding: 24px 20px; }
  .toast-host        { left: 14px; right: 14px; bottom: 14px; }
  .toast             { min-width: 0; max-width: none; }
}

/* ── ≤ 480 px ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .mode-cards { grid-template-columns: minmax(0, 1fr); }
  .guidance-head h1,
  .guidance-head h2 { font-size: 26px; }
  .guidance-head p  { font-size: 14px; }
  .news-item  { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
  .job-row    { padding: 16px; }
  .job-row__meta span { font-size: 12px; }
}

/* ── ≤ 420 px (small phones) ─────────────────────────────────────────────── */
@media (max-width: 420px) {
  .hero h1         { font-size: 26px; }
  .hero--compact h1{ font-size: 22px; }
  .job-row         { padding: 16px; }
  .job-row__meta   { gap: 12px; }
  .job-row__meta span { font-size: 12px; }
  .featured-job    { padding: 15px; }
  .news-item       { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .stats, .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .modal-backdrop  { padding: 12px; }
  .modal__head,
  .modal__body,
  .modal__foot     { padding-inline: 16px; }
}

/* ── ≤ 360 px (smallest supported viewport) ──────────────────────────────── */
@media (max-width: 360px) {
  .hero h1          { font-size: 24px; }
  .section-head h2  { font-size: 19px; }
  .featured-job h3  { font-size: 14.5px; }
  .brand__text      { font-size: 16px; }
}

/* ── Interview Coach ─────────────────────────────────────────────────────── */
/* The coach's layout breakpoints live in css/interview.css, which is loaded
   only by that page.  Only the pieces that touch shared components stay here. */
@media (max-width: 860px) {
  .iv-head { flex-direction: column; gap: 12px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}