/* ================================================================
   css/responsive.css — Lina responsive overrides
   Applies to: index.html, terms.html, privacy.html, care-schedule.html
   Desktop layout is untouched. All overrides are scoped to breakpoints.
   Uses slightly higher-specificity selectors where needed to ensure
   these rules take precedence over same-specificity base rules.
   ================================================================ */


/* ── Tablet: 600px – 900px ───────────────────────────────────── */
/* Steps and features grids switch to 2 columns */

@media (min-width: 600px) and (max-width: 900px) {
  .container .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

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


/* ── Mobile: ≤ 599px ─────────────────────────────────────────── */

@media (max-width: 599px) {

  /* ── Nav ── */
  nav .nav-inner {
    flex-direction: column;
    height: auto;
    padding: 10px 16px 8px;
    align-items: flex-start;
    gap: 8px;
  }

  nav .lang-btn {
    padding: 4px 5px;
    font-size: 12px;
  }

  /* ── Sections: reduce horizontal and vertical padding ── */
  body section {
    padding: 40px 16px;
  }

  body #hero {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* ── Hero: stack CTAs full-width ── */
  .hero-content .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-content .hero-ctas .btn-appstore {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
  }

  /* CTA section buttons also stacked */
  .cta-inner .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cta-inner .hero-ctas .btn-appstore {
    width: 100%;
    justify-content: center;
  }

  /* ── Grids → 1 column ── */
  .container .steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .container .features-grid {
    grid-template-columns: 1fr;
  }

  /* Privacy inner grid (index.html homepage section) */
  .container .privacy-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Care schedule promo section */
  .cs-promo-inner {
    flex-direction: column;
    gap: 32px;
  }

  /* ── Section heading sizes ── */
  #how-it-works h2,
  #features h2 {
    font-size: 22px;
    margin-bottom: 32px;
  }

  .problem-title {
    font-size: 22px;
  }

  #privacy h2 {
    font-size: 22px;
  }

  .cs-promo-text h2 {
    font-size: 22px;
  }

  /* ── Footer ── */
  body footer {
    padding: 32px 16px;
  }


  /* ════════════════════════════════════════════════════════════
     Terms & Privacy pages
     ════════════════════════════════════════════════════════════ */

  /* Main content area */
  main.terms-main,
  main.privacy-main {
    padding: 32px 16px 56px;
  }

  /* Page h1 — reduce from 28px */
  .terms-main .terms-container h1,
  .privacy-main .privacy-container h1 {
    font-size: 22px;
  }

  /* Summary boxes — reduce inner padding */
  .terms-main .terms-summary,
  .privacy-main .privacy-summary {
    padding: 20px 16px;
  }

  /* Horizontal dividers — less vertical space */
  .terms-divider,
  .privacy-divider {
    margin: 32px 0;
  }


  /* ════════════════════════════════════════════════════════════
     Care Schedule page
     ════════════════════════════════════════════════════════════ */

  /* Main area */
  body > main {
    padding: 24px 16px 48px;
  }

  /* Input fields stack vertically */
  .controls-bar .inputs-group {
    flex-direction: column;
    width: 100%;
  }

  .controls-bar .inputs-group .input-field {
    width: 100%;
  }

  .controls-bar .inputs-group .input-field input {
    width: 100%;
  }

  /* Btn row stretches full width */
  .controls-bar .btn-row {
    width: 100%;
  }

  /* Export card: button full width */
  div.export-card .card {
    flex-direction: column;
    align-items: stretch;
  }

  div.export-card .card .btn-primary {
    width: 100%;
    justify-content: center;
  }

}