/* ==========================================================================
   KS Deep Clean — Fluid Mobile-First Design System  (system.css)
   --------------------------------------------------------------------------
   A token-driven, mobile-first component library. Everything scales
   continuously ("auto-shrink") between 320px and 1440px via clamp(), so the
   same markup reads intentionally at every size — phone → tablet → laptop →
   desktop and back. Layout uses Grid + Flexbox + container queries; no fixed
   widths, no inline styles, ≥48px tap targets, safe-area aware.

   Namespaced under .ui so it can be adopted page-by-page without disturbing
   the legacy inline-styled sections. Colour/theme tokens are inherited from
   app.css (:root --brand-*, --ink, --surface, …); this file adds only the
   fluid type/space/layout scale + components.
   ========================================================================== */

:root {
  /* ---- Fluid type scale — min @320px → max @1440px viewport ---- */
  --fs-xs:  clamp(0.75rem, 0.71rem + 0.18vw, 0.85rem);
  --fs-sm:  clamp(0.84rem, 0.79rem + 0.24vw, 0.95rem);
  --fs-base:clamp(0.95rem, 0.89rem + 0.28vw, 1.06rem);
  --fs-md:  clamp(1.05rem, 0.95rem + 0.46vw, 1.28rem);
  --fs-lg:  clamp(1.2rem,  1.0rem  + 0.95vw, 1.6rem);
  --fs-xl:  clamp(1.5rem,  1.13rem + 1.75vw, 2.3rem);
  --fs-2xl: clamp(1.9rem,  1.3rem  + 2.9vw,  3.15rem);
  --fs-3xl: clamp(2.2rem,  1.45rem + 3.7vw,  3.9rem);

  /* ---- Fluid spacing scale ---- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.3rem);
  --space-2xs: clamp(0.4rem,  0.36rem + 0.18vw, 0.5rem);
  --space-xs:  clamp(0.6rem,  0.53rem + 0.3vw,  0.8rem);
  --space-sm:  clamp(0.9rem,  0.78rem + 0.5vw,  1.2rem);
  --space-md:  clamp(1.2rem,  0.98rem + 1vw,    1.8rem);
  --space-lg:  clamp(1.8rem,  1.35rem + 2.1vw,  3rem);
  --space-xl:  clamp(2.6rem,  1.85rem + 3.6vw,  5rem);
  --space-2xl: clamp(3.6rem,  2.4rem  + 5.8vw,  7.5rem);

  /* ---- Structure ---- */
  --ui-wrap: 1200px;
  --ui-pad: clamp(1rem, 0.55rem + 2.2vw, 2rem);
  --ui-r-sm: 12px;
  --ui-r-md: 18px;
  --ui-r-lg: 24px;
  --ui-r-xl: 30px;
  --ui-tap: 48px;
  --ui-lh: 1.65;
  --ui-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.ui-wrap {
  width: 100%;
  max-width: var(--ui-wrap);
  margin-inline: auto;
  padding-inline: var(--ui-pad);
}
.ui-section { padding-block: var(--space-2xl); position: relative; }
.ui-section--tight { padding-block: var(--space-xl); }

/* Vertical rhythm: consistent gap between stacked children */
.ui-stack > * + * { margin-top: var(--flow, var(--space-sm)); }
.ui-stack--lg { --flow: var(--space-md); }

/* Horizontal cluster that wraps gracefully (buttons, chips, meta rows) */
.ui-cluster { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

/* Auto-fit responsive grid — cards flow & stack with zero media queries.
   Control the smallest comfortable column with --col (default 260px). */
.ui-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 260px)), 1fr));
}
.ui-grid--2 { --col: 300px; }
.ui-grid--wide { --col: 340px; }

/* ==========================================================================
   Typography
   ========================================================================== */
.ui-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-600, #2456C4);
  padding: 0.45em 0.9em; border-radius: 999px;
  background: color-mix(in srgb, var(--brand-500, #3A78E6) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-500, #3A78E6) 24%, transparent);
}
/* font-size/line-height use !important so the fluid scale wins over the legacy
   `section h2 { … !important }` / `h3 { … !important }` mobile overrides in
   app.css on pages that adopt this system. */
.ui-h1 { font-family: var(--font-head); font-size: var(--fs-3xl) !important; line-height: 1.08 !important; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; color: var(--ink); }
.ui-h2 { font-family: var(--font-head); font-size: var(--fs-2xl) !important; line-height: 1.12 !important; font-weight: 800; letter-spacing: -0.022em; text-wrap: balance; color: var(--ink); }
.ui-h3 { font-family: var(--font-head); font-size: var(--fs-lg) !important;  line-height: 1.2 !important;  font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; color: var(--ink); }
.ui-lead { font-size: var(--fs-md); line-height: var(--ui-lh); color: var(--muted); text-wrap: pretty; max-width: 60ch; }
.ui-text { font-size: var(--fs-base); line-height: var(--ui-lh); color: var(--ink-2); text-wrap: pretty; }
.ui-grad { background: var(--grad-brand, linear-gradient(135deg,#3A78E6,#123C99)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==========================================================================
   Buttons — ≥48px tap target, fluid, primary/secondary/whatsapp
   ========================================================================== */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--ui-tap); padding: 0.7em 1.4em;
  border-radius: 999px; font-family: var(--font-head);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: -0.01em;
  line-height: 1; text-align: center; white-space: nowrap; cursor: pointer;
  transition: transform 0.22s var(--ui-ease), box-shadow 0.22s var(--ui-ease), background 0.22s;
  -webkit-tap-highlight-color: transparent;
}
.ui-btn svg { width: 1.15em; height: 1.15em; flex: none; }
.ui-btn:hover { transform: translateY(-2px); }
.ui-btn:active { transform: translateY(0) scale(0.98); }
.ui-btn--primary { background: var(--grad-brand, linear-gradient(135deg,#3A78E6,#123C99)); color: #fff; box-shadow: 0 16px 34px -16px rgba(23,70,184,.6); }
.ui-btn--ghost { background: var(--glass-bg, rgba(255,255,255,.78)); color: var(--ink); border: 1px solid var(--glass-brd, rgba(20,60,140,.14)); backdrop-filter: blur(12px); }
.ui-btn--wa { background: linear-gradient(135deg,#25D366,#0F9B4E); color: #fff; box-shadow: 0 16px 34px -16px rgba(15,155,78,.6); }
.ui-btn--lg { font-size: var(--fs-base); padding: 0.85em 1.7em; }
.ui-btn--block { width: 100%; }

/* ==========================================================================
   Card — soft elevation, equal heights in a grid, container-query aware
   ========================================================================== */
.ui-card {
  container-type: inline-size;
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #DCE7FB);
  border-radius: var(--ui-r-lg);
  padding: var(--space-md);
  box-shadow: 0 1px 1px rgba(20,60,140,.04), 0 12px 30px -18px rgba(20,60,140,.3);
  transition: transform 0.4s var(--ui-ease), box-shadow 0.4s var(--ui-ease), border-color 0.3s;
}
.ui-card--pad-lg { padding: var(--space-lg); }
.ui-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(20,60,140,.06), 0 40px 64px -34px rgba(18,54,132,.5);
  border-color: color-mix(in srgb, var(--brand-500, #3A78E6) 40%, var(--line));
}
.ui-card__icon {
  width: clamp(46px, 12cqi, 60px); height: clamp(46px, 12cqi, 60px);
  display: grid; place-items: center; border-radius: var(--ui-r-md);
  background: color-mix(in srgb, var(--brand-500, #3A78E6) 12%, transparent);
  color: var(--brand-600, #2456C4); margin-bottom: var(--space-sm);
}
.ui-card__icon svg { width: 55%; height: 55%; }
.ui-card__title { font-family: var(--font-head); font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.ui-card__text { margin-top: var(--space-2xs); font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.ui-card__media {
  position: relative; margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-sm);
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ui-r-lg) var(--ui-r-lg) 0 0; background: var(--surface-2, #F4F8FF);
}
.ui-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ui-ease); }
.ui-card:hover .ui-card__media img { transform: scale(1.06); }

/* ==========================================================================
   Media — responsive, aspect-locked, skeleton shimmer until loaded
   ========================================================================== */
.ui-media { position: relative; overflow: hidden; border-radius: var(--ui-r-lg); background: var(--surface-2, #F4F8FF); aspect-ratio: var(--ratio, 4 / 3); }
.ui-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-media--skeleton::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--brand-500,#3A78E6) 10%, transparent) 50%, transparent 70%);
  background-size: 220% 100%; animation: uiShimmer 1.4s infinite;
}
.ui-media img { position: relative; z-index: 1; }
@keyframes uiShimmer { to { background-position: -220% 0; } }

/* ==========================================================================
   Forms — full-width, ≥48px controls, touch-friendly, clear validation
   ========================================================================== */
.ui-field { display: flex; flex-direction: column; gap: 0.4em; }
.ui-label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.ui-input, .ui-textarea, .ui-select {
  width: 100%; min-height: var(--ui-tap); padding: 0.75em 1em;
  font-size: max(16px, var(--fs-base)); /* ≥16px stops iOS zoom-on-focus */
  color: var(--ink); background: var(--surface, #fff);
  border: 1.5px solid var(--line, #DCE7FB); border-radius: var(--ui-r-md);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ui-textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
.ui-input:focus, .ui-textarea:focus, .ui-select:focus {
  outline: none; border-color: var(--brand-500, #3A78E6);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500,#3A78E6) 16%, transparent);
}
.ui-error { font-size: var(--fs-xs); font-weight: 600; color: #E5484D; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.ui-center { text-align: center; }
.ui-mx-auto { margin-inline: auto; }
.ui-measure { max-width: 62ch; }
.ui-hide { display: none !important; }
.ui-flow-lg > * + * { margin-top: var(--space-md); }

/* Two-column split that stacks below 860px (content ↔ media hero pattern) */
.ui-split { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 860px) { .ui-split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); } }

@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-card, .ui-card__media img { transition: none !important; }
  .ui-media--skeleton::before { animation: none; }
}