/* ================================================================
   css/responsive.css — Lina shared component styles + responsive overrides
   Applies to all pages. Desktop layout overrides and shared components
   are defined here. Breakpoint overrides follow below.
   ================================================================ */


/* ── Display font for headings ── */
h1, h2 {
  font-family: 'Lora', Georgia, serif;
}


/* ── Standalone icons in feature cards (no box container) ── */
.feature-card > svg {
  color: var(--primary);
  display: block;
  margin-bottom: 4px;
}



/* ── Step marker with horizontal line (line metaphor) ── */
.step-marker {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-digit {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
  min-width: 16px;
}

.step-line {
  flex: 1;
  height: 1px;
  background: var(--primary);
  opacity: 0.4;
  border-radius: 1px;
}



/* ── Shared CTA section — single source of truth ── */
#cta {
  background: #fff;
  padding: 80px 24px 96px;
}

.cta-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
}

#cta h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

#cta p {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}


/* ── Nav ────────────────────────────────────────────────── */

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ── 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 nav ─────────────────────────────────────────── */

@media (max-width: 700px) {
  nav .nav-inner {
    padding: 0 16px;
  }
}


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

@media (max-width: 599px) {

  /* ── 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;
  }

}