/* =============================================================
   Section: Services
   Maps to: template-parts/sections/section-services.php
   On WP migration: list items become a WP_Query loop over the
   `aci_service` CPT; preview imagery is the CPT featured image.
   ============================================================= */

.services {
  background: var(--bone);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

.services__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-8);
  align-items: end;
}

@media (min-width: 980px) {
  .services__head {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-9);
  }
}

.services__title {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.services__title .stroke {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
}

.services__title .accent { color: var(--dirt); }

.services__intro {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted-light);
  max-width: 44ch;
}

/* ---- Split-screen module ---- */
.services__module {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: stretch;
  position: relative;
  border-top: 1px solid var(--rule-light);
}

@media (min-width: 980px) {
  .services__module {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
}

.services__list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.service-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding-block: clamp(20px, 2.5vw, 36px);
  border-bottom: 1px solid var(--rule-light);
  cursor: pointer;
  position: relative;
  background: transparent;
  width: 100%;
  text-align: left;
  isolation: isolate;
  transition: padding var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.service-row::before {
  content: "";
  position: absolute;
  left: -100vw;
  right: 100%;
  top: 0; bottom: 0;
  background: var(--ink);
  z-index: -1;
  transition: right var(--dur-base) var(--ease-out);
}

.service-row[aria-current="true"],
.service-row:hover {
  color: var(--bone);
  padding-left: var(--s-5);
  border-bottom-color: var(--rule-dark);
}

.service-row[aria-current="true"]::before,
.service-row:hover::before {
  right: -100vw;
}

.service-row[aria-current="true"] .service-row__num,
.service-row:hover .service-row__num {
  color: var(--safety);
}

.service-row__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--muted-light);
  transition: color var(--dur-base) var(--ease-out);
}

.service-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.service-row__chev {
  display: inline-block;
  width: 28px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'><path d='M0 6 H28 M22 1 L28 6 L22 11' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'><path d='M0 6 H28 M22 1 L28 6 L22 11' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'/></svg>") no-repeat center / contain;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.service-row[aria-current="true"] .service-row__chev,
.service-row:hover .service-row__chev {
  opacity: 1;
  transform: translateX(0);
  background-color: var(--safety);
}

/* ---- Preview pane ---- */
.services__preview {
  position: relative;
  min-height: 420px;
  /* Cap height so portrait-orientation discipline photos can't push
     the split-screen module past the viewport. */
  max-height: 70svh;
  background: var(--ink);
  overflow: hidden;
}

@media (min-width: 980px) {
  .services__preview { min-height: auto; max-height: none; }
}

.preview-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.preview-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.preview-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.05);
}

/* Placeholder treatment for disciplines whose featured project has no
   thumbnail attached yet. The shortcode flags the article with
   `preview-card--no-image`; we paint the same dirt/ink gradient
   the work-card placeholder uses so the disciplines preview pane
   still reads as a designed surface instead of an empty box. */
.preview-card--no-image {
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(107,74,44,0.55) 0%, rgba(107,74,44,0) 60%),
    linear-gradient(160deg, var(--ink-3) 0%, var(--ink) 70%, var(--dirt-deep) 100%);
}
.preview-card--no-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../img/textures/grain.svg");
  background-size: 320px 320px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.preview-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,0.1) 0%, rgba(11,11,12,0.8) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-6);
  color: var(--bone);
  gap: var(--s-2);
}

.preview-card__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--safety);
}

.preview-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.preview-card__desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--muted-dark);
  max-width: 44ch;
  line-height: 1.5;
}

/* When the description block is showing a featured project (injected
   by disciplines-feature.js), the headline sits in <strong> and the
   meta line below it gets .preview-card__sub. Tighten color/size so
   it reads as a caption, not body copy. */
.preview-card__desc strong {
  display: inline-block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--bone);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.preview-card__sub {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--safety);
}

/* ---- Discipline cycler nav (prev / counter / next / View link) ----
   Sits below the description inside .preview-card__overlay. The whole
   row should not steal the parent card's hover-to-activate behavior;
   the JS calls stopPropagation() on its click handlers. */
.preview-card__nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(245,242,234,0.18);
}

.preview-card__arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(245,242,234,0.08);
  border: 1px solid rgba(245,242,234,0.25);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.preview-card__arrow:hover,
.preview-card__arrow:focus-visible {
  background: var(--safety);
  border-color: var(--safety);
  color: var(--ink);
  transform: translateY(-1px);
  outline: none;
}

.preview-card__counter {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
  min-width: 5ch;
  text-align: center;
}

.preview-card__link {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--safety);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.preview-card__link:hover,
.preview-card__link:focus-visible {
  color: var(--bone);
  border-bottom-color: var(--bone);
  outline: none;
}

/* Hide nav on inactive cards so keyboard tab order skips them and
   only the visible card exposes its cycler controls. */
.preview-card:not(.is-active) .preview-card__nav {
  pointer-events: none;
}

@media (max-width: 720px) {
  .preview-card__nav { gap: var(--s-2); }
  .preview-card__arrow { width: 32px; height: 32px; font-size: 1.2rem; }
  .preview-card__link { font-size: 0.68rem; letter-spacing: 0.16em; }
}

/* ---- Foot link ---- */
.services__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule-light);
  flex-wrap: wrap;
  gap: var(--s-4);
}

.services__foot p {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-light);
}