/*
 * Éclore Aesthetics — Services archive + category taxonomy (VISUAL-DESIGN §5, §9 — D3)
 * ─────────────────────────────────────────────────────────────────────────────
 * Surrounding layout for archive-eclore_service.php and taxonomy-service_category.php,
 * which share most classes. The hero, breadcrumbs, service-card + .service-grid,
 * and buttons are already styled by D1/D2 and reused as-is — this file styles only
 * the archive chrome: section rhythm, category tabs, pagination, the taxonomy term
 * intro + siblings aside, and the stone consultation CTA correction.
 *
 * Grounds are set in markup via .section-bg--* (colour only); each section owns its
 * vertical rhythm here. Tokens only — no hardcoded hex / spacing / duration. Reveal
 * is the shared global .reveal utility, armed by the one IntersectionObserver in
 * booking-cta.js. Breakpoints (literal): md 768px, lg 1024px.
 */

/* ─── 1. Archive sections — rhythm (ground + container come from markup) ──────── */

/* Ground + panel-rise radius come from global.css now (greige body artboard;
   `.hero--* + .section-bg--bone` rounds the first bone section site-wide). */
.services-archive,
.taxonomy-archive {
  padding-block: clamp(var(--space-xl), 8vh, var(--space-2xl)) var(--section-y-tight);
}

/* ─── 2. Category filter tabs ─────────────────────────────────────────────────── */
/*
 * Horizontal wrapping row of tracked text links under the hero. Wrapping (not a
 * fixed-width track) keeps it overflow-free on any width. The active tab carries a
 * persistent Terracotta underline so state is never colour-alone.
 */
/* Two stacked rows: "All Treatments" on its own line, then the categories on a
   single line beneath — no orphan wrap. */
.category-tabs {
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.category-tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-md) var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-tabs__item {
  display: flex;
}

.category-tabs__link {
  position: relative;
  display: inline-flex;
  flex-direction: column;      /* stack the two label lines */
  align-items: flex-start;
  padding-block: var(--space-2xs) var(--space-md); /* bottom room for the underline */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted); /* Ink-muted — Terracotta fails AA at this size (§4) */
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}

/* Two-line label — first part + "&" over the second part; tight leading. */
.category-tabs__l1,
.category-tabs__l2 {
  display: block;
  line-height: 1.28;
  white-space: nowrap;
}

/* Underline-reveal — house pattern (§5.2): 1px Terracotta line, scaleX from left.
   Hugs the (one- or two-line) label: 2px beneath the text, inside the 24px
   reserved padding (owner rule 2026-07-23 — underlines sit ~2px below text). */
.category-tabs__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-md) - 2px);
  height: 1px;
  background: var(--color-terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-short) var(--ease-reveal);
}

.category-tabs__link:hover::after,
.category-tabs__link:focus-visible::after {
  transform: scaleX(1);
}

/* Active tab — persistent underline + the heading-weight Ink. */
.category-tabs__link.is-active,
.category-tabs__link[aria-current="page"] {
  color: var(--color-heading);
}

.category-tabs__link.is-active::after,
.category-tabs__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ─── 3. Service grid ─────────────────────────────────────────────────────────── */
/*
 * .service-grid (1-up → 2-up md → 3-up lg, gap var(--space-xl)) is already defined
 * in service-card.css and shared with the homepage / related-services. The
 * .service-grid--auto modifier needs no extra rules — the base grid is exactly the
 * specified rhythm. Left here as a documented reuse, not a redefinition.
 */

/* ─── 4. Pagination — quiet editorial (WP the_posts_pagination output) ────────── */
.services-archive .pagination,
.taxonomy-archive .pagination {
  margin-top: var(--space-2xl);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs) var(--space-md);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px; /* tap target */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem; /* 15px */
  letter-spacing: 0.04em;
  color: var(--color-text-muted); /* Ink-muted */
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}

.pagination a.page-numbers:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Current page — Terracotta, set large+bold so it clears the large-text AA bar
   (≥18.66px bold ≈ 3:1); never colour-alone (it also carries aria-current). */
.pagination .page-numbers.current {
  color: var(--color-terracotta);
  font-size: 1.25rem; /* 20px */
}

/* Prev / next read as tracked text links. */
.pagination .prev,
.pagination .next {
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ─── 5. Taxonomy term intro copy ─────────────────────────────────────────────── */
.taxonomy-archive__description {
  max-width: var(--container-narrow); /* comfortable measure within the wide container */
  margin-bottom: var(--space-2xl);
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem); /* body-large */
  line-height: 1.55;
  color: var(--color-text);
  text-align: left;
}

.taxonomy-archive__description p {
  margin-bottom: var(--space-sm);
}

.taxonomy-archive__description p:last-child {
  margin-bottom: 0;
}

/* ─── 6. Siblings aside — "explore other categories" ──────────────────────────── */
.taxonomy-archive__siblings {
  margin-top: var(--section-y-tight);
  padding-top: var(--section-y-tight);
  border-top: 1px solid var(--color-hairline);
}

/* Element is an <h2>; sized down to an eyebrow label (size is visual, not
   structural — §3). Familjen uppercase, Ink-muted. */
.taxonomy-archive__siblings-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.category-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.category-link-list a {
  position: relative;
  display: inline-block;
  padding-block: var(--space-3xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}

.category-link-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--color-terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-short) var(--ease-reveal);
}

.category-link-list a:hover::after,
.category-link-list a:focus-visible::after {
  transform: scaleX(1);
}

/* ─── 7. Consultation CTA — stone ground correction ──────────────────────── */
/*
 * The CTA layout (padding, centred inner, body measure) is reused from home.css.
 * There the band is Terracotta, so home.css sets the heading/body to Bone.
 * On these templates the band is Stone (per the PHP ground class), where Warm
 * White text fails AA — so restore dark text on the beige ground. Scoped to the
 * beige variant so the homepage Terracotta band is unaffected.
 */
.consultation-cta.section-bg--stone .consultation-cta__heading {
  color: var(--color-heading);
}

.consultation-cta.section-bg--stone .consultation-cta__body {
  color: var(--color-text);
}

/* ─── Empty states ────────────────────────────────────────────────────────────── */
.services-archive__empty,
.taxonomy-archive__empty {
  max-width: var(--container-narrow);
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  color: var(--color-text-muted);
}