/* ═══════════════════════════════════════════════════════════════════════════
   css/ui/_base.css — Article Shell (shared by every showcase page)
   Styles the elements rendered by partials/layout-header.php and the
   sc-page / sc-header markup repeated at the top of every
   ui/{group}/{category}/{slug}.php file (breadcrumb, title, description,
   top/bottom pager). Loaded on every page where $isComponentPage = true,
   regardless of category — keep this file generic, not foundation-specific.
   Lives directly under css/ui/ (not under css/ui/design-system/) precisely
   because it is not design-system-specific: every category (components,
   ecommerce, blocks, utilities, etc.) depends on it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ────────────────────────────────────────────────────────────
   Markup: partials/layout-header.php
   <nav class="sc-breadcrumb"><a>Component Library</a><span>›</span>...</nav>
   ────────────────────────────────────────────────────────────────────────── */

.sc-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 1.5rem;
  padding: 0 0.125rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-body-sm, 0.875rem);
  line-height: var(--leading-ui, 1.4);
  color: var(--color-tertiary, #71717a);
}

.sc-breadcrumb a {
  color: var(--color-tertiary, #71717a);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  margin: -0.2rem -0.5rem;
  border-radius: var(--radius-sm, 0.375rem);
  transition: color var(--duration-fast, 150ms) var(--easing-default, ease),
              background-color var(--duration-fast, 150ms) var(--easing-default, ease);
}

.sc-breadcrumb a:hover {
  color: var(--color-primary, #18181b);
  background-color: var(--color-bg-b2, #f5f5f5);
  text-decoration: none;
}

.sc-breadcrumb a:focus-visible {
  outline: 2px solid var(--color-accent-b1, #3b82f6);
  outline-offset: 1px;
}

.sc-breadcrumb [aria-hidden="true"] {
  color: var(--color-bg-b6, #cccccc);
  font-size: 0.8em;
  flex-shrink: 0;
}

.sc-breadcrumb [aria-current="page"] {
  color: var(--color-primary, #18181b);
  font-weight: var(--weight-body-medium, 500);
  padding: 0.2rem 0.5rem;
  margin: -0.2rem -0.5rem;
}

/* ── Page Wrapper ──────────────────────────────────────────────────────────
   Markup: ui/{group}/{category}/{slug}.php → <div class="sc-page">...</div>
   ────────────────────────────────────────────────────────────────────────── */

.sc-page {
  max-width: var(--width-medium, 1080px);
  margin: 0 auto;
}

/* ── Header (title + description) ─────────────────────────────────────────
   Markup: <header class="sc-header"><h1 class="sc-title">...</h1>
   <p class="sc-desc">...</p></header>
   ────────────────────────────────────────────────────────────────────────── */

.sc-header {
  margin-bottom: var(--spacing-section-gap, clamp(2rem, 5vw, 4rem));
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-bg-b3, #ebebeb);
}

.sc-title {
  margin: 0 0 0.625rem;
  font-family: var(--font-display, "Inter", system-ui, sans-serif);
  font-size: var(--text-h1, clamp(2.25rem, 5vw, 3.815rem));
  line-height: var(--leading-h1, 1.1);
  letter-spacing: var(--tracking-display, -0.03em);
  font-weight: var(--weight-display, 400);
  color: var(--color-primary, #18181b);
}

.sc-desc {
  margin: 0;
  max-width: var(--width-prose, 70ch);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: var(--text-body-lg, 1.125rem);
  line-height: var(--leading-body, 1.75);
  color: var(--color-secondary, #52525b);
}

/* ── Top Pager (prev/next, rendered above the article content) ───────────
   Markup: partials/layout-header.php → .sc-related-pager--top
   Shares classes with the bottom pager defined below; this modifier only
   adjusts vertical rhythm so it doesn't collide with .sc-header spacing.
   ────────────────────────────────────────────────────────────────────────── */

.sc-related-pager--top {
  margin-bottom: var(--spacing-section-gap, clamp(2rem, 5vw, 4rem));
}

/* ── Pager (prev/next links) ───────────────────────────────────────────────
   Markup: partials/layout-header.php (top) & partials/related-nav.php (bottom)
   <div class="sc-related-pager">
     <a class="sc-related-pager-link sc-related-pager-prev">...</a>
     <a class="sc-related-pager-link sc-related-pager-next">...</a>
   </div>
   ────────────────────────────────────────────────────────────────────────── */

.sc-related-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: var(--color-bg-b3, #ebebeb);
  border-radius: var(--radius-md, 0.75rem);
  overflow: hidden;
}

.sc-related-pager-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background-color: var(--color-bg-b1, #ffffff);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-fast, 150ms) var(--easing-default, ease);
}

.sc-related-pager-link:hover {
  background-color: var(--color-bg-b2, #f5f5f5);
}

.sc-related-pager-next {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}

.sc-related-pager-arrow {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--color-tertiary, #71717a);
}

.sc-related-pager-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.sc-related-pager-label {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-caption, 0.75rem);
  font-weight: var(--weight-body-medium, 500);
  letter-spacing: var(--tracking-overline, 0.1em);
  text-transform: uppercase;
  color: var(--color-tertiary, #71717a);
}

.sc-related-pager-name {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-body-sm, 0.875rem);
  font-weight: var(--weight-body-medium, 500);
  color: var(--color-primary, #18181b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Related section title (bottom of page) ───────────────────────────────
   Markup: partials/related-nav.php → <section class="cl-section sc-related-section">
   Layout/typography for .cl-section already comes from component-library.css;
   this only adds the extra top margin to separate it from the article body.
   ────────────────────────────────────────────────────────────────────────── */

.sc-related-section {
  margin-top: var(--spacing-section-gap, clamp(2rem, 5vw, 4rem));
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-bg-b3, #ebebeb);
}

/* ── Responsive ────────────────────────────────────────────────────────────
   On narrow viewports the prev/next pager reads better stacked, and the
   "next" link no longer needs to right-align its text.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .sc-related-pager {
    grid-template-columns: 1fr;
  }

  .sc-related-pager-next {
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
    flex-direction: row-reverse;
  }

  .sc-related-pager-next .sc-related-pager-text {
    text-align: left;
  }
}

/* ── Dark Mode ─────────────────────────────────────────────────────────────
   Mirrors the .dark conventions already used in css/base.css.
   ────────────────────────────────────────────────────────────────────────── */

.dark .sc-breadcrumb {
  color: var(--color-tertiary-dark, #a1a1aa);
}

.dark .sc-breadcrumb a {
  color: var(--color-tertiary-dark, #a1a1aa);
}

.dark .sc-breadcrumb a:hover {
  color: var(--color-primary-dark, #fafafa);
}

.dark .sc-breadcrumb [aria-current="page"] {
  color: var(--color-primary-dark, #fafafa);
}

.dark .sc-header {
  border-bottom-color: var(--color-bg-d4, #1f1f1f);
}

.dark .sc-title {
  color: var(--color-primary-dark, #fafafa);
}

.dark .sc-desc {
  color: var(--color-secondary-dark, #d4d4d8);
}

.dark .sc-related-pager,
.dark .sc-related-section {
  background-color: var(--color-bg-d4, #1f1f1f);
  border-color: var(--color-bg-d4, #1f1f1f);
}

.dark .sc-related-pager-link {
  background-color: var(--color-bg-d2, #0a0a0a);
}

.dark .sc-related-pager-link:hover {
  background-color: var(--color-bg-d3, #141414);
}

.dark .sc-related-pager-name {
  color: var(--color-primary-dark, #fafafa);
}

/* ── Section Heading (h2 inside article content) ───────────────────────────
   Single source of truth untuk semua heading section di halaman komponen.
   Sebelumnya tersebar sebagai: sc-section-title, sc-demo-title, sc-block-title,
   cs-section-title, dt-section-title, ty-section-title, ss-section-title,
   text-lg font-semibold ..., text-base font-semibold text-zinc-800 ...
   Semua digabung ke dua class ini agar konsisten di seluruh design-system.
   ────────────────────────────────────────────────────────────────────────── */

.sc-section-title {
  /* padding-top (not margin-top) so the 1.5rem gap never collapses into
     the previous section's margin-bottom — guarantees visible white-space
     before every content heading. The page's very first heading is
     <h1 class="sc-title"> inside .sc-header (a different class), so it is
     never affected by this rule. */
  margin: 0 0 0.875rem;
  padding-top: 1.5rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-h4, 1.125rem);
  font-weight: var(--weight-body-medium, 500);
  line-height: var(--leading-ui, 1.4);
  letter-spacing: -0.01em;
  color: var(--color-primary, #18181b);
}

/* Sub-section heading (h3) — used within a section for nested groupings */
.sc-section-sub {
  margin: 0 0 0.625rem;
  padding-top: 1.5rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-body-sm, 0.875rem);
  font-weight: var(--weight-body-medium, 500);
  line-height: var(--leading-ui, 1.4);
  letter-spacing: 0;
  color: var(--color-secondary, #52525b);
}

.dark .sc-section-title {
  color: var(--color-primary-dark, #fafafa);
}

.dark .sc-section-sub {
  color: var(--color-secondary-dark, #d4d4d8);
}