/* Metric — app.css
   Hanya berisi hal yang tidak bisa diekspresikan lewat theme.json.
   Target: < 6KB uncompressed. Tidak ada reset besar, tidak ada utility framework. */

:root { color-scheme: light; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Cegah CLS pada media */
img, video, iframe { max-width: 100%; height: auto; }
img[width][height] { height: auto; }

/* Fokus terlihat (aksesibilitas + syarat audit Lighthouse) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip link */
.skip-link:focus { z-index: 1000; }

/* ---- Header ---- */
.metric-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* ---- Eyebrow / label kecil ---- */
.metric-eyebrow {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-2);
  font-weight: 600;
}

/* ---- Kartu generik (dipakai grid inspirasi, blog, showroom) ---- */
.metric-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
  overflow: clip;
  transition: box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}
.metric-card:hover { box-shadow: var(--wp--custom--shadow--card); transform: translateY(-2px); }
.metric-card img { display: block; width: 100%; object-fit: cover; }

/* ---- Grid otomatis ---- */
.metric-grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}


/* ---- Kartu konten (dipakai filter-grid, related, showroom) ---- */
.metric-card__link { display: block; color: inherit; text-decoration: none; }
.metric-card__media { position: relative; background: var(--wp--preset--color--surface); overflow: clip; }
.metric-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.metric-card__body { display: grid; gap: .35rem; padding: 1.1rem 1.15rem 1.35rem; }
.metric-card__title { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 500; }
.metric-card__excerpt { margin: 0; font-size: .9rem; opacity: .7; }
.metric-card__date { font-size: .78rem; opacity: .55; }
.metric-card__play {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: #16181A; font-size: 1.1rem; padding-inline-start: 3px;
}
@media (min-width: 900px) {
  .metric-grid { grid-template-columns: repeat(var(--metric-cols, 3), 1fr); }
}

/* ---- Rasio gambar konsisten (anti-CLS) ---- */
.metric-ratio-4-3 { aspect-ratio: 4 / 3; }
.metric-ratio-3-2 { aspect-ratio: 3 / 2; }
.metric-ratio-16-9 { aspect-ratio: 16 / 9; }
.metric-ratio-1-1 { aspect-ratio: 1 / 1; }

/* ---- Query loop pagination core ---- */
.wp-block-query-pagination { gap: .5rem; margin-block-start: var(--wp--preset--spacing--50); }
.wp-block-query-pagination-numbers .page-numbers {
  display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--pill);
  text-decoration: none; font-size: var(--wp--preset--font-size--sm);
}
.wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--contrast);
}

/* ---- Prose (isi artikel blog) ---- */
.metric-prose > * + * { margin-block-start: 1.1em; }
.metric-prose :is(h2, h3) { margin-block-start: 2em; }
.metric-prose :is(figure, .wp-block-image) { margin-block: 2em; }
.metric-prose blockquote {
  border-inline-start: 3px solid var(--wp--preset--color--accent);
  padding-inline-start: 1.25rem; font-style: italic; color: var(--wp--preset--color--muted);
}

/* ---- Floating WhatsApp ---- */
.metric-wa {
  position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.1rem; border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--whatsapp); color: #fff; text-decoration: none;
  font-weight: 600; font-size: var(--wp--preset--font-size--sm);
  box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
}
.metric-wa:hover { color: #fff; filter: brightness(.95); }
.metric-wa svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
@media (max-width: 600px) { .metric-wa span { display: none; } .metric-wa { padding: .85rem; } }

/* ---- Visually hidden ---- */
.metric-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}