/* ============================================================
   service.css — Service Sub-Page Styles (4 pages)
   Shared by: estudio-de-grabacion, sesionista-de-armonica-cromatica, clases-de-armonica-cromatica, servicios-tecnicos-audio
   Part of the Leo Bercoff modular CSS architecture
   ============================================================ */


/* ── Main Content Grid ──────────────────────────────────── */
main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  width: min(calc(100% - 36px), var(--max-width));
  margin: 0 auto;
  padding: 30px 0 60px;
}

main > h1 {
  grid-column: 1 / -1;
}


/* ── Service Cards (shared card appearance) ─────────────── */
main > section {
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: 0 14px 40px rgba(38, 31, 21, .07);
}

main > section h3 {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
  color: var(--accent);
}

main > section p {
  margin: 0;
  color: var(--muted);
}


/* ── Responsive: Narrow screens (≤640px) ───────────────── */
@media (max-width: 640px) {
  main {
    grid-template-columns: 1fr;
    width: min(calc(100% - 24px), var(--max-width));
    padding-bottom: 48px;
  }

  .back-home {
    width: min(calc(100% - 24px), var(--max-width));
  }

  .site-footer {
    width: min(calc(100% - 24px), var(--max-width));
  }
}