/* ============================================================
   KBK Active — 2027 Experience Layer
   Fluid typography · container queries · glass & aurora ·
   refined mobile ergonomics · progressive enhancement.
   Loads after premium.css. Only enhances existing classes.
   ============================================================ */

:root {
  color-scheme: light;
  --f-size-fluid-max: 4.5rem;
  --glow-radial: radial-gradient(900px 480px at var(--mx, 50%) var(--my, 35%), rgba(21, 133, 133, 0.10), transparent 62%);
  --grad-border: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%);
}

[data-theme="dark"] {
  color-scheme: dark;
}

html {
  overscroll-behavior-x: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  accent-color: var(--color-accent-500, #158585);
}

p, li, dd, figcaption {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

a, button, input, select, textarea {
  scroll-margin-top: 96px;
}

@media (prefers-contrast: more) {
  :root {
    --color-primary-600: #16304f;
    --color-neutral-500: #4a4a52;
  }
  [data-theme="dark"] {
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #a7b3c4;
  }
}

/* ---------- Fluid typography ---------- */
.hero-title {
  font-size: clamp(2.25rem, 5.6vw + 0.5rem, var(--f-size-fluid-max));
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.section-title {
  font-size: clamp(1.75rem, 3.4vw + 0.4rem, 2.75rem);
}

.page-header-title {
  font-size: clamp(1.85rem, 4.4vw + 0.4rem, 3.4rem);
}

.hero-description {
  font-size: clamp(1rem, 1.6vw + 0.4rem, 1.22rem);
}

.article-body {
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.08rem);
}

/* ---------- Focus & interaction ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent-500, #158585);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (hover: hover) {
  .news-card,
  .solution-card,
  .industry-card,
  .card-accent,
  [class*="testimonial"] {
    cursor: pointer;
  }
}

/* Card glow that follows the pointer */
@media (hover: hover) {
  [data-glow] {
    position: relative;
    isolation: isolate;
  }
  [data-glow]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--glow-radial);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
  }
  [data-glow]:hover::before {
    opacity: 1;
  }
}

/* ---------- Glass & gradient utilities ---------- */
.glass {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--premium-shadow-md, 0 8px 24px -6px rgba(10, 22, 40, 0.12));
}

[data-theme="dark"] .glass {
  background: rgba(30, 41, 59, 0.66);
  border-color: rgba(255, 255, 255, 0.08);
}

.gradient-card {
  position: relative;
  background:
    linear-gradient(180deg, var(--color-neutral-25, #fafafb), var(--color-neutral-50, #f5f5f7)),
    var(--color-white, #fff);
  border: 1px solid var(--color-neutral-100, #e8e8ec);
  border-radius: 18px;
}

.gradient-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(184, 146, 48, 0.35), rgba(21, 133, 133, 0.25) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

[data-theme="dark"] .gradient-card {
  background: linear-gradient(180deg, #1e293b, #172032);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Aurora accent for inner page headers */
.page-header {
  isolation: isolate;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto;
  height: 120%;
  z-index: 0;
  background:
    radial-gradient(42% 55% at 22% 30%, rgba(21, 133, 133, 0.32), transparent 62%),
    radial-gradient(38% 50% at 78% 22%, rgba(184, 146, 48, 0.30), transparent 60%),
    radial-gradient(50% 60% at 55% 8%, rgba(26, 58, 92, 0.5), transparent 70%);
  filter: blur(14px);
  opacity: 0.85;
  pointer-events: none;
}

[data-theme="dark"] .page-header::before {
  opacity: 0.5;
}

.page-header-content {
  position: relative;
  z-index: 2;
}

/* ---------- Container queries ---------- */
.res-grid,
.kc-grid,
.news-grid,
.leasing-grid,
.proc-sectors-grid,
.why-choose-grid,
.hero-stats-grid {
  container-type: inline-size;
}

@container (max-width: 420px) {
  .hero-stat-value {
    font-size: clamp(1.5rem, 9cqw, 2rem);
  }
}

/* ---------- Table scroll utility ---------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.table-scroll > table,
.table-scroll table {
  min-width: 560px;
}

/* ---------- Skeleton shimmer ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-neutral-100, #e8e8ec);
  border-radius: 8px;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: kbk-skeleton 1.4s infinite;
}

[data-theme="dark"] .skeleton {
  background: #1e293b;
}

[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

@keyframes kbk-skeleton {
  100% { transform: translateX(100%); }
}

/* ---------- Forms: prevent iOS zoom ---------- */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 767px) {
  .hero {
    padding-block: clamp(3rem, 12vw, 5.5rem) clamp(3.5rem, 14vw, 6rem);
  }

  .hero-title {
    font-size: clamp(2rem, 8.6vw, 2.9rem);
  }

  .hero-badge {
    font-size: var(--text-xs, 0.75rem);
    padding: 0.4rem 0.8rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3, 0.75rem);
  }

  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }

  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4, 1rem) var(--space-6, 1.5rem);
    padding-top: var(--space-6, 1.5rem);
  }

  .hero-stat-item:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: var(--space-4, 1rem);
  }

  .page-header-title {
    font-size: clamp(1.65rem, 7vw, 2.4rem);
  }

  .page-header-breadcrumb {
    flex-wrap: wrap;
  }

  .section-title {
    font-size: clamp(1.55rem, 6.4vw, 2.1rem);
  }

  .section-subtitle {
    font-size: clamp(0.95rem, 3.6vw, 1.05rem);
  }

  .news-card-image,
  .article-body img,
  [class*="card"] img {
    height: auto !important;
  }
}

@media (max-width: 1023px) {
  .navbar-toggle,
  .theme-toggle-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .navbar-actions .btn {
    padding-inline: 0.9rem;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-glow]::before,
  .skeleton::after,
  .page-header::before {
    animation: none !important;
    transition: none !important;
  }
}