/* ════════════════════════════════════════════════════════════
   CatalogPlayer — Responsive overrides
   Breakpoints:
     xs  ≤ 480px   (small phone)
     sm  ≤ 768px   (phone / large phone)
     md  ≤ 1024px  (tablet / small laptop)
   Note: inline styles need !important to be overridden by CSS.
   ════════════════════════════════════════════════════════════ */

/* ── Global section padding ───────────────────────────────── */
@media (max-width: 768px) {
  section { padding-top: 64px !important; padding-bottom: 64px !important; }
  .container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── Navigation ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-center { display: none !important; }
  .nav-inner  { grid-template-columns: 1fr auto !important; }
}
@media (max-width: 480px) {
  .nav-login  { display: none !important; }
}

/* ── Hero ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Lead + buttons: stack vertically */
  .grid-hero-meta {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 48px !important;
  }
  .hero-actions { flex-direction: column !important; align-items: flex-start !important; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── System panel (CP·CORE·LIVE) ──────────────────────────── */
@media (max-width: 1024px) {
  .grid-sys-panel { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .grid-sys-panel { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Narrative ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-narrative  { grid-template-columns: 1fr !important; gap: 40px !important; }
  .grid-stats-row  { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ── 4-products grid ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-four-products {
    grid-template-columns: repeat(2, 1fr) !important;
    border-right: 1px solid var(--line-2) !important;
  }
  /* Remove right border on even cards (end of row) */
  .grid-four-products > *:nth-child(2n) { border-right: 0 !important; }
}
@media (max-width: 640px) {
  .grid-four-products { grid-template-columns: 1fr !important; }
  .grid-four-products > * { border-right: 0 !important; border-bottom: 1px solid var(--line-2) !important; }
}

/* ── CAITIUM band ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-caitium-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 32px 20px !important;
  }
  .grid-caitium-feats { grid-template-columns: 1fr 1fr !important; }
}

/* ── CaitiumShowcase ──────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-showcase { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* ── Integrations ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-integrations { grid-template-columns: 1fr !important; gap: 56px !important; }
  .grid-integrations > *:first-child { position: static !important; }
  .grid-logos { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .grid-logos { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Sectors / Use cases ──────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-sectors { grid-template-columns: repeat(2, 1fr) !important; }
  /* fix border on last col of row */
  .grid-sectors > *:nth-child(2n) { border-right: 0 !important; }
}
@media (max-width: 640px) {
  .grid-sectors { grid-template-columns: 1fr !important; }
  .grid-sectors > * { border-right: 0 !important; }
}

/* ── Logo strip ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-logo-strip { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Closing CTA ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-actions { flex-direction: column !important; align-items: center !important; }
  .cta-actions .btn { width: 100%; max-width: 340px; justify-content: center; }
}

/* ── Footer ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-footer-top  { grid-template-columns: 1fr !important; gap: 40px !important; }
  .grid-footer-cols { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
}

/* ── Productos page ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-prod-content { grid-template-columns: 1fr !important; gap: 48px !important; }
  .grid-prod-caitium { grid-template-columns: 1fr !important; gap: 48px !important; }
  .grid-ext-detail   { grid-template-columns: 1fr !important; gap: 40px !important; }
  .grid-arch-core    { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-arch-data    { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-modules      { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .grid-arch-core { grid-template-columns: 1fr !important; }
  .grid-modules   { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Cómo funciona page ───────────────────────────────────── */
@media (max-width: 768px) {
  .grid-onboarding { grid-template-columns: 1fr !important; }
  /* Hide live summary on mobile — show at bottom */
  .grid-onboarding > *:last-child { position: static !important; }
  .grid-stepper { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
  .grid-stepper { grid-template-columns: 1fr 1fr !important; }
}