/* =========================================================
   CV Facile — Responsive Layer
   =========================================================
   Breakpoints (mobile-first content, desktop-first authoring
   here since style.css's defaults already target desktop):

     Desktop  : > 1024px   (default in style.css)
     Tablet   : 768px – 1024px
     Mobile   : < 768px
     Small    : < 420px

   This file only adjusts spacing, type scale and grid column
   counts for the primitives defined in style.css. Component-
   specific responsive rules (wizard, templates) live in their
   own stylesheets and follow the same breakpoints.
   ========================================================= */

/* ---------------------------------------------------------
   Tablet — 1024px and below
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --text-4xl: 2.75rem;
    --text-3xl: 2.25rem;
    --text-2xl: 1.875rem;
    --container-padding: var(--space-5);
  }

  .section {
    padding-block: var(--space-16);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ---------------------------------------------------------
   Mobile — 768px and below
   --------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --text-4xl: 2.25rem;
    --text-3xl: 1.875rem;
    --text-2xl: 1.625rem;
    --text-xl: 1.375rem;
    --container-padding: var(--space-4);
  }

  .section {
    padding-block: var(--space-12);
  }

  .section-head {
    margin-bottom: var(--space-8);
    text-align: start;
  }

  .section-head > .text-eyebrow {
    justify-content: flex-start;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .card {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }

  .btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: var(--text-sm);
  }

  .cluster-between {
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------
   Small mobile — 420px and below
   --------------------------------------------------------- */
@media (max-width: 420px) {
  :root {
    --text-4xl: 1.875rem;
    --text-3xl: 1.625rem;
    --container-padding: var(--space-3);
  }

  .card {
    padding: var(--space-5);
  }

  .btn {
    width: 100%;
  }

  .btn.btn-inline {
    width: auto;
  }
}

/* ---------------------------------------------------------
   Site chrome — header, hero, footer (tablet: 1024px)
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    height: 320px;
    order: -1;
  }

  .resume-mock { width: 240px; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------
   Site chrome — mobile (768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .main-nav__links {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .main-nav.is-open .main-nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-4);
    box-shadow: var(--shadow-md);
  }

  .hero {
    padding-block: var(--space-12) var(--space-10);
  }

  .hero__visual {
    height: 260px;
  }

  .resume-mock { width: 200px; padding: var(--space-4); }
  .resume-mock--back, .resume-mock--mid { display: none; }

  .hero__check-float {
    padding: var(--space-2) var(--space-3);
  }

  .pricing-card--featured {
    order: -1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .progress-meta__title {
    font-size: var(--text-xl);
  }

  .photo-upload {
    flex-direction: column;
    align-items: flex-start;
  }

  .entry-card {
    flex-wrap: wrap;
  }

  .option-cards {
    grid-template-columns: 1fr;
  }

  .resume-preview-frame {
    height: 380px;
  }

  .resume-preview-frame__scale {
    transform: scale(0.33);
  }
}

/* ---------------------------------------------------------
   Print — used as a base; the wizard's dedicated PDF layout
   (pdf.js / print stylesheet injected at generation time)
   overrides this further for the actual resume output.
   --------------------------------------------------------- */
@media print {
  body {
    background: #fff;
  }

  .no-print,
  header,
  footer,
  .skip-link {
    display: none !important;
  }
}