/* assets/css/components/front-svc-tabs.css
 * @layer components — Homepage tabbed services section
 * ════════════════════════════════════════════════════════════════════
 *
 * Split layout: dark header zone with tab triggers on the boundary,
 * light panel zone with 2-column grid (visual + content).
 *
 * Token sources: §2 semantics, §5 spacing, §13 radii, §14 shadows
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  .front-svc-tabs {
    position: relative;
    overflow: hidden;
  }

  /* ════════════════════════════════════════════════════════════════════
     Dark header zone
     ════════════════════════════════════════════════════════════════════ */
  .front-svc-tabs__dark {
    background-color: var(--surface-dark);
    padding-block: var(--section-space-l) 0;
    position: relative;
    overflow: hidden;
  }

  /* Radial glow accent */
  .front-svc-tabs__dark::after {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 62.5rem;
    height: 62.5rem;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, var(--primary-semi-dark) 0%, transparent 65%);
    opacity: 0.4;
    pointer-events: none;
  }

  /* Dot pattern background */
  .front-svc-tabs__dark-bg {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
    background-image: radial-gradient(
      circle,
      color-mix(in oklch, var(--white) 45%, transparent) 1px,
      transparent 1px
    );
    background-size: 1.25rem 1.25rem;
  }

  .front-svc-tabs__header {
    text-align: center;
    padding-block-end: var(--space-2xl);
    position: relative;
    z-index: 2;
  }

  /* ── Tab triggers — on the dark/light boundary ── */
  .front-svc-tabs__tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-3xs);
    position: relative;
    z-index: 10;
    margin-block-end: -1px;
  }

  .front-svc-tabs__tab {
    padding: var(--space-m) var(--space-xl);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
    color: color-mix(in oklch, var(--white) 60%, transparent);
    background: color-mix(in oklch, var(--white) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--white) 12%, transparent);
    border-block-end: none;
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition:
      background var(--duration-normal) var(--ease-default),
      color var(--duration-normal) var(--ease-default),
      border-color var(--duration-normal) var(--ease-default),
      box-shadow var(--duration-normal) var(--ease-default);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .front-svc-tabs__tab:hover {
    background: color-mix(in oklch, var(--white) 10%, transparent);
    color: color-mix(in oklch, var(--white) 90%, transparent);
    border-color: color-mix(in oklch, var(--white) 20%, transparent);
    box-shadow: 0 0 12px color-mix(in oklch, var(--primary) 15%, transparent);
  }

  .front-svc-tabs__tab.is-active {
    background: var(--white, #fff);
    color: var(--neutral-dark, oklch(25% 0.005 260));
    border-color: oklch(88% 0.003 260);
    box-shadow: 0 -4px 16px color-mix(in oklch, var(--primary) 10%, transparent);
    backdrop-filter: none;
  }

  .front-svc-tabs__tab-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-normal) var(--ease-default);
  }

  /* Inactive icon — primary-ultra-light for accessibility */
  .front-svc-tabs__tab-icon svg {
    stroke: var(--primary-ultra-light, color-mix(in oklch, var(--white) 70%, transparent));
  }

  .front-svc-tabs__tab.is-active .front-svc-tabs__tab-icon {
    background: var(--surface-tinted);
  }

  .front-svc-tabs__tab.is-active .front-svc-tabs__tab-icon svg {
    stroke: var(--icon-color);
  }

  .front-svc-tabs__tab-num {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    opacity: 0.4;
    margin-inline-end: var(--space-3xs);
  }

  .front-svc-tabs__tab.is-active .front-svc-tabs__tab-num {
    opacity: 0.5;
    color: var(--neutral-semi-dark, oklch(35% 0.004 260));
  }

  /* ════════════════════════════════════════════════════════════════════
     Light panel zone
     ════════════════════════════════════════════════════════════════════ */
  .front-svc-tabs__light {
    background: var(--body-bg, #fff);
    border-block-start: 1px solid var(--border-subtle);
    padding-block: var(--space-3xl) var(--section-space-l);
  }

  /* Panel — hidden by default, grid when active */
  .front-svc-tabs__panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
    animation: svcPanelFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .front-svc-tabs__panel.is-active {
    display: grid;
  }

  @keyframes svcPanelFadeIn {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Visual side (image placeholder + stats overlay) ── */
  .front-svc-tabs__visual {
    position: relative;
    border-radius: var(--radius-m);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--surface-tinted);
  }

  .front-svc-tabs__visual-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular, 400);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  .front-svc-tabs__visual-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--surface-primary);
  }

  /* Per-panel accent color overrides */
  .front-svc-tabs__panel--testing .front-svc-tabs__visual-accent { background: var(--surface-primary); }
  .front-svc-tabs__panel--rd .front-svc-tabs__visual-accent { background: var(--accent); }
  .front-svc-tabs__panel--cert .front-svc-tabs__visual-accent { background: var(--accent); }

  .front-svc-tabs__visual-stats {
    position: absolute;
    bottom: var(--space-m);
    left: var(--space-m);
    right: var(--space-m);
    display: flex;
    gap: var(--space-xs);
  }

  .front-svc-tabs__stat {
    flex: 1;
    background: color-mix(in oklch, var(--white) 92%, transparent);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-s);
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--border-subtle);
  }

  .front-svc-tabs__stat-number {
    font-family: var(--font-heading);
    font-size: var(--heading-xs);
    color: var(--text-accent);
    line-height: 1;
    margin-block-end: var(--space-3xs);
  }

  .front-svc-tabs__stat-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-regular, 400);
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }

  /* ── Content side ── */
  .front-svc-tabs__content-number {
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1;
    color: var(--border-subtle);
    margin-block-end: var(--space-m);
  }

  .front-svc-tabs__content-title {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    line-height: var(--leading-tight);
    margin-block-end: var(--space-m);
  }

  .front-svc-tabs__content-desc {
    font-size: var(--text-s);
    font-weight: var(--weight-light, 300);
    line-height: var(--leading-loose, 1.8);
    color: var(--text-body);
    margin-block-end: var(--space-l);
    max-inline-size: 30rem;
  }

  /* Feature checklist */
  .front-svc-tabs__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-block-end: var(--space-xl);
    list-style: none;
    padding: 0;
  }

  .front-svc-tabs__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-size: var(--text-s);
    font-weight: var(--weight-regular, 400);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
  }

  .front-svc-tabs__feature-check {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-block-start: 0.1em;
    background: var(--surface-tinted);
  }

  .front-svc-tabs__feature-check svg {
    stroke: var(--icon-color);
  }

  /* CTA link */
  .front-svc-tabs__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--text-accent);
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: gap var(--duration-normal) var(--ease-default);
  }

  .front-svc-tabs__cta:hover {
    gap: var(--space-xs);
  }

  .front-svc-tabs__cta svg {
    stroke: var(--icon-color);
  }

  /* ── Responsive ── */
  @media (max-width: 48em) {
    .front-svc-tabs__dark {
      padding-inline: var(--gutter);
    }

    .front-svc-tabs__tabs {
      flex-direction: column;
      gap: var(--space-2xs);
      padding-inline: var(--gutter);
    }

    .front-svc-tabs__tab {
      border-radius: var(--radius-s);
      border: 1px solid color-mix(in oklch, var(--white) 12%, transparent);
      padding: var(--space-s) var(--space-m);
      justify-content: center;
    }

    /* Light panel zone — add gutter on mobile */
    .front-svc-tabs__light {
      padding-inline: var(--gutter);
    }

    .front-svc-tabs__panel {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
    }

    /* Hide image and stats on mobile — content only */
    .front-svc-tabs__visual {
      display: none;
    }

    .front-svc-tabs__content-number {
      font-size: 2rem;
    }

    .front-svc-tabs__content-desc {
      max-inline-size: none;
    }

    /* Compact feature list on mobile */
    .front-svc-tabs__features {
      gap: var(--space-2xs);
    }

    .front-svc-tabs__feature {
      font-size: var(--text-xs);
    }

    .front-svc-tabs__feature-check {
      width: 1rem;
      height: 1rem;
    }

    .front-svc-tabs__feature-check svg {
      width: 0.625rem;
      height: 0.625rem;
    }
  }

} /* end @layer components */