/* ═══════════════════════════════════════════════════════════════
   KRITEXA LABS — CAPABILITIES PAGE CSS
   css/pages/capabilities.css
   Phase 8 — Capabilities Page Rebuild

   Capabilities-specific styles only. All global styles live in:
     css/global.css → css/utilities.css → css/header.css →
     css/footer.css → css/components.css

   CSS load order:
     global.css → utilities.css → header.css → footer.css →
     components.css → pages/capabilities.css

   Contents:
     1. Screen-reader-only utility (.sr-only)
     2. Capabilities Hero (.iph overrides for capabilities)
     3. Service cards — anchor (link) reset
     4. Who We Serve section — spacing
     5. Industry divider pill
     6. Industry solutions — image paths
     7. Responsive breakpoints
     8. Reduced-motion overrides
═══════════════════════════════════════════════════════════════ */


/* ═══ 1. SCREEN-READER-ONLY UTILITY ═══
   Visually hidden but available to screen readers and SEO.
   Matches pattern from about.css and home.css.
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ═══ 2. CAPABILITIES HERO (.iph) ═══
   The .iph base styles are in css/components.css.
   These are capabilities-specific adjustments.
*/

/* CTA as <a> anchor within the hero */
.iph .btn-p {
  text-decoration: none;
}

.iph .btn-p:focus-visible {
  outline: 2px solid var(--color-purple2);
  outline-offset: 2px;
}

/* Scroll margin for fixed navbar */
.iph {
  scroll-margin-top: 74px;
}


/* ═══ 3. SERVICE CARDS — LINK SEMANTICS ═══
   In Phase 8, capability cards are <a> elements (not <div> onclick).
   Reset anchor defaults to preserve card visual identity.
   Mirrors the .cs-card-link pattern from css/pages/home.css.
*/

a.cap-svc-card {
  display: flex;      /* override <a> default inline — preserve card layout */
  text-decoration: none;
  color: inherit;
}

a.cap-svc-card:focus-visible {
  outline: 2px solid var(--color-purple2);
  outline-offset: 2px;
}

/* Hero card arrow as <a> */
a.cap-hc-arrow {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.cap-hc-arrow:focus-visible {
  outline: 2px solid var(--color-purple2);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Service card checklist — <ul> reset (legacy used <div>) */
.cap-card-svcs,
.cap-hc-svcs {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cap-card-svcs .cap-card-svc,
.cap-hc-svcs .cap-hc-svc {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ═══ 4. PROOF-CTA SECTION (Phase 22) ═══
   Cross-links to Industry Solutions, Portfolio, Case Studies, Live Projects.
*/

.cap-proof-section {
  text-align: center;
}
.cap-proof-inner {
  max-width: 760px;
  margin: 0 auto;
}
.cap-proof-inner h2 {
  font-size: clamp(var(--font-size-h3), 4vw, var(--font-size-h2));
  margin-bottom: var(--space-4);
}
.cap-proof-inner p {
  color: var(--color-gray);
  line-height: var(--line-height-relaxed);
  margin-bottom: 0;
}

/* Cross-link card grid */
.cap-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
  text-align: left;
}

.cap-proof-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-gray);
  transition:
    border-color 0.2s var(--ease-standard),
    background 0.2s var(--ease-standard),
    color 0.2s var(--ease-standard);
}
.cap-proof-card:hover {
  border-color: rgba(124, 58, 237, 0.30);
  background: rgba(124, 58, 237, 0.04);
  color: var(--color-white);
}
.cap-proof-card:focus-visible {
  outline: 2px solid var(--color-purple2);
  outline-offset: 2px;
}

.cap-proof-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.20);
  color: var(--color-purple2);
  flex-shrink: 0;
  transition: background 0.2s var(--ease-standard);
}
.cap-proof-card:hover .cap-proof-icon {
  background: rgba(124, 58, 237, 0.18);
}

.cap-proof-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cap-proof-card-title {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-nav);
}
.cap-proof-card-desc {
  font-size: var(--font-size-caption);
  color: var(--color-gray2);
  line-height: 1.4;
}

.cap-proof-card-arr {
  font-size: var(--font-size-body);
  color: var(--color-gray2);
  flex-shrink: 0;
  transition: color 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
}
.cap-proof-card:hover .cap-proof-card-arr {
  color: var(--color-purple2);
  transform: translateX(3px);
}


/* ═══ 5. RESPONSIVE BREAKPOINTS ═══ */

/* ── Tablet: 769px – 1024px ─────────────────────────────────── */
@media (max-width: 1024px) {
  /* Cap hero card inner already collapses to 1-col in components.css */

  /* Service card grid: 2 columns at tablet */
  .cap-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Proof card grid: 2-col at tablet */
  .cap-proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile large: ≤ 768px ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Proof grid: single column */
  .cap-proof-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile: ≤ 640px ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Service cards: single column */
  .cap-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Very small mobile: ≤ 360px ─────────────────────────────── */
@media (max-width: 360px) {
  /* CTA button full-width */
  .iph .btn-p,
  .iph .btn-g {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}


/* ═══ 6. REDUCED MOTION — CAPABILITIES SPECIFIC ═══
   Global reduced-motion rules in css/global.css disable .rv,
   .amb-blob, etc. These are capabilities-specific additions.
*/
@media (prefers-reduced-motion: reduce) {
  .cap-proof-card,
  .cap-proof-icon,
  .cap-proof-card-arr {
    transition: none;
  }
}