/* ─── Case Study Pages — Shared Responsive & Consistency Styles ──── */
/* Loaded AFTER inline <style> blocks so these rules take precedence   */

/* Cover label: allow wrapping on all screens, hide on tiny mobile */
.cs-cover-label {
  white-space: normal;
  text-align: center;
  padding: 0 1.2rem 0.8rem;
  line-height: 1.5;
  max-width: 90%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 420px) {
  .cs-cover-label { display: none; }
}

/* Pipeline arrows (AI page) — hide earlier on mobile */
@media (max-width: 560px) {
  .cs-pipe-arrow, .cs-pa { display: none !important; }
  .cs-cover-pipeline, .cs-pipe { gap: 0.4rem !important; }
}

/* Cover orbs: slightly smaller on small phones */
@media (max-width: 400px) {
  .cs-po {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
  .cs-pn { font-size: 7px !important; }
}

/* Cover art: scale down height on small phones */
@media (max-width: 400px) {
  .cs-cover { height: 220px !important; }
}

/* Meta grid: 2 columns on mobile, 1 on very small */
@media (max-width: 480px) {
  .cs-meta-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; padding: 1rem; }
}
@media (max-width: 320px) {
  .cs-meta-grid { grid-template-columns: 1fr; }
}

/* Highlights stats: 2 columns on mobile */
@media (max-width: 540px) {
  .cs-hl { grid-template-columns: 1fr 1fr !important; gap: 0.8rem; }
  .cs-hl-num { font-size: 1.6rem; }
}

/* Prev/Next nav: stack on mobile */
@media (max-width: 460px) {
  .cs-nav { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* Section body: ensure comfortable reading on mobile */
@media (max-width: 480px) {
  .cs-section-body { font-size: 14px; }
  .cs-section-title { font-size: 1.2rem; }
  .cs-title { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; }
}

/* Tags: slightly smaller on mobile */
@media (max-width: 400px) {
  .cs-tag { font-size: 9px; padding: 2px 8px; }
}

/* CryptoSpinners brand wordmark: prevent overflow */
@media (max-width: 400px) {
  .cs-bw { font-size: 11px !important; letter-spacing: .2em !important; }
}

/* SaaSGenius pills: tighter gap on mobile */
@media (max-width: 420px) {
  .cs-saas-pills { gap: 0.3rem; }
  .cs-saas-pill { font-size: 8px !important; }
}

/* MENA market dots: tighter on mobile */
@media (max-width: 400px) {
  .cs-markets { gap: 0.4rem; }
  .cs-mkt { font-size: 9px !important; padding: 0.2rem 0.5rem; }
}

/* Football skin swatches: smaller on mobile */
@media (max-width: 420px) {
  .cs-sw { width: 28px !important; height: 28px !important; }
  .cs-sw-o { width: 22px !important; height: 22px !important; }
}

/* Eyebrow divider lines: simplify on mobile */
@media (max-width: 480px) {
  .cs-eyebrow::before, .cs-eyebrow::after { display: none; }
}

/* Desktop: ensure cs-wrap never exceeds readable width */
.cs-wrap { max-width: 860px; }

/* Tablet (768px): comfortable padding */
@media (max-width: 768px) {
  .cs-meta-grid { grid-template-columns: repeat(2, 1fr); }
}