/* curo-extensions.css
 * Phase 2 additive extension to the precompiled Tailwind stylesheet.
 *
 * Scope: inner pages only. Not loaded by the homepage.
 * Add to inner pages with: <link rel="stylesheet" href="../css/curo-extensions.css">
 *
 * Each rule is a small, justified addition to extend design vocabulary
 * without touching the precompiled tailwind.min.css or rebuilding it.
 *
 * Documented in trial-2-output/PHASE-2-NOTES.md.
 * Reversible: deleting this file restores the strict-subset state.
 */

/* Type weight — gives critical claims a heavier emphasis than font-semibold */
.font-bold { font-weight: 700; }

/* Mid cyan — for arrow accents and secondary cyan highlights between 300 and 700 */
.text-cyan-500 { color: rgb(6 182 212); }

/* Compact icon vocabulary — 2rem squares fill the gap between h-6/w-6 and h-10/w-10 */
.h-8 { height: 2rem; }
.w-8 { width: 2rem; }

/* Sub-1-unit margin — for fine icon alignment inside flex rows */
.mt-0\.5 { margin-top: 0.125rem; }

/* Card-internal vertical spacing variations */
.pt-5 { padding-top: 1.25rem; }
.pb-3 { padding-bottom: 0.75rem; }

/* Tight chip/badge padding */
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

/* Soft cyan accent fills — for tinted icon backplates and subtle borders */
.bg-cyan-300\/10 { background-color: rgb(103 232 249 / 0.1); }
.border-cyan-300\/40 { border-color: rgb(103 232 249 / 0.4); }

/* Cross-axis alignment that avoids stretching inside flex rows */
.items-start { align-items: flex-start; }

/* Responsive utilities */

@media (min-width: 640px) {
  /* Larger card padding on small+ screens */
  .sm\:p-10 { padding: 2.5rem; }
}

@media (min-width: 1024px) {
  /* Asymmetric grid where the narrative column carries more weight than the visual */
  .lg\:grid-cols-\[1\.4fr_1fr\] { grid-template-columns: 1.4fr 1fr; }
}