/* ---------- Services ----------
   Ported wholesale from the static prototype's css/sections/services.css at
   commit bd658c5, which replaced the hover-expand rows with a photo panel +
   icon card grid per group. The ONLY WordPress divergence is `.a-wrap--services`
   instead of `.wrap--services` (wp-admin's own common.css defines a `.wrap`
   and loads inside the block-editor iframe, where a bare `.wrap` would lose
   the specificity tie). Kept as a straight copy so future static changes stay
   diffable against it. */
.services { padding-block: var(--section-pad-block); }

/* Wider content column + tighter side padding (client: match MoveTrans inset, not our
   default wrap padding which felt too inset on this section). */
.a-wrap--services {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

/* Variant: hover-rows (active) — MoveTrans-style expand: group titles (Import / Export /
   Trading) then one hover row per real service bullet from docs/content-source.md. */
.services {
  max-width: 90rem;
  margin-inline: auto;
  width: min(100%, 90rem);
}
.services-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-bottom: var(--section-header-gap);
}
.services-header > div {
  width: min(100%, 1200px);
  max-width: 1200px;
  margin: 0 auto;
}
/* .eyebrow is a <p>, and the global reset caps all <p> at max-width: 68ch with no
   auto margins — that left this box hugging the left edge at ~514px instead of
   filling the header, so text-align: center only centered the text within that
   narrow box, not the box itself. Reset the cap so it spans the full header width. */
.services-header .eyebrow { max-width: none; text-align: center; }
.services-headline {
  font-size: var(--h2);
  letter-spacing: -0.005em;
  max-width: 100%;
  width: 100%;
  margin: 0 auto 0.5rem;
  line-height: 1.02;
  text-align: center;
}
.services-header-aside {
  display: none;
}
.services-intro {
  font-size: var(--small);
  color: var(--muted);
  margin: 0;
  max-width: none;
}

.services-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.services-groups {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

/* ---------- Service group (redesigned 2026-08-03, second pass) ----------
   Split panel: left = one real photo per category (dark scrim + overlaid title/
   intro, same technique as the hero's full-bleed treatment), right = a card grid,
   one card per real service. Both columns sit in the same CSS Grid row with
   align-items: stretch, so the image always fills whatever height the card grid
   needs - the two sides can never end up visually mismatched or clipped. */
.service-group {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: stretch;
}

.service-group-media {
  position: relative;
  min-height: 22rem; /* floor only - the grid row's actual height comes from the card column */
  border-radius: var(--radius-card);
  overflow: hidden;
}
.service-group-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-group-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.1) 0%, rgba(20, 17, 14, 0.8) 100%);
}
.service-group-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.service-group-copy h3 {
  font-family: var(--font-display);
  font-size: var(--h3);
  color: var(--bg);
  margin: 0 0 0.35em;
}
.service-group-copy p {
  font-size: var(--small);
  color: color-mix(in srgb, var(--bg) 85%, transparent);
  margin: 0;
  max-width: 30ch;
}

.service-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.service-card {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--radius-card);
  padding: clamp(1.1rem, 2vw, 1.5rem);
}
.service-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-card-icon);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  margin-bottom: 1rem;
  font-size: 1.05rem;
  color: var(--ink);
}
.service-card h4 {
  font-family: var(--font-display);
  font-size: var(--body);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 0.35em;
}
.service-card p {
  font-size: var(--small);
  color: var(--muted);
  margin: 0;
  max-width: 32ch;
}

/* Staged reveal, one group at a time - same technique as Commitment's (scroll
   into view, JS gates on prefers-reduced-motion, visible by default in CSS). */
.services [data-reveal] {
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.services .is-pre-reveal { opacity: 0; transform: translateY(16px); }
.services .is-pre-reveal.is-visible { opacity: 1; transform: translateY(0); }
.service-group:nth-of-type(2) { transition-delay: 0.08s; }
.service-group:nth-of-type(3) { transition-delay: 0.16s; }

@media (max-width: 1024px) {
  .service-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .service-group { grid-template-columns: 1fr; }
  .service-group-media { min-height: 14rem; }
}

@media (max-width: 560px) {
  .service-card-grid { grid-template-columns: 1fr; }
}

/* Variant: stacked (inactive, `hidden`) — previous asymmetric-rows layout.
   Its plain <h2>What we do</h2> used to inherit sizing from a stray `.services
   h2` rule; scoped properly here so it doesn't silently lose styling if this
   variant is ever switched back on. */
.service-variant[data-variant="stacked"] > h2 {
  font-size: var(--h2);
  margin-bottom: var(--section-header-gap);
}
.service-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.service-row-head h3 { font-size: var(--h3); margin-bottom: 0.4em; }
.service-row-head p { color: var(--muted); font-size: var(--small); max-width: 32ch; }
.service-list li {
  padding-block: 0.6em;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: var(--body);
}
.service-list li:first-child { border-top: none; }
.service-list--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
}
.service-row--small { padding-bottom: 0; }
.service-row--small .service-row-head { max-width: none; }

@media (max-width: 900px) {
  .service-row { grid-template-columns: 1fr; }
  .service-list--two-col { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .services-body { grid-template-columns: 1fr; }
  .services-label {
    writing-mode: horizontal-tb;
    transform: none;
    margin-bottom: 0.75rem;
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  .services-header { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .services-header-aside { max-width: none; }
}