/**
 * @file        services.css
 * @description Services page — the reverse funnel bands
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         9b04e7c3-5f28-4d16-a790-2c85f1d63b4e
 * @version     0.2.0.3
 * @created     2026-09-11
 * @updated     2026-09-17
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

.services__intro {
  font-size: var(--text-lg);
  max-width: var(--measure);
}

/* Kind label. Weight and letter-spacing carry the distinction, not colour
 * alone (NFR21) - gold_text is used at meta size where it still clears 4.5:1. */
.service__kind {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-gold-text);
  margin-bottom: var(--space-2);
}

.service__summary {
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.service__description {
  max-width: var(--measure);
}

/* --- The reverse funnel (FR29, R01) --------------------------------------
 * The evidence list is the whole point of the page: it lets a visitor verify
 * expertise before booking. It is given real weight rather than being a
 * footnote under the CTA. */

.service__evidence {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.service__evidence > h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.service__books {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.service__books > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.service__book-author {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.service__cta {
  margin-top: var(--space-5);
}

/* --- Suggested service on the book page (Band 5) ------------------------- */

.recirc__service {
  max-width: var(--measure);
}

.recirc__service > h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

@media (min-width: 1024px) {
  .service__books {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

/* ===========================================================================
 * PORTED FROM THE SHOWCASE SERVICE DESIGN (Stitch screen "Boardroom War-Gaming
 * & Sovereign Crisis Navigation", served at /dash/preview/service).
 *
 * The treatments here are the comp's; the content behind them is migration
 * 0015's five fields. Everything the comp printed that had no column is named
 * in service/index.html.twig beside the block it belonged to, and in the
 * migration file — the readiness percentages, the testimonials, the priced
 * tiers, the prospectus download.
 * ======================================================================== */

/* --- The engagement facts -------------------------------------------------
 * The comp's meta grid. A <dl> laid out as a row of labelled facts: the label
 * small and uppercase, the value in the body face beneath it, which is the
 * same treatment `.author__practice` gives the practice details. Deliberately
 * identical, because they are the same kind of thing on two surfaces and a
 * reader should not have to learn two shapes to read a labelled fact. */
.service__facts {
  display: grid;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  max-width: var(--measure);
}

@media (min-width: 48rem) {
  .service__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

.service__facts dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.service__facts dd {
  margin: var(--space-1) 0 0;
  color: var(--text-primary);
}

/* --- The phase breakdown --------------------------------------------------
 * The comp sets three numbered cards side by side. `auto-fit` rather than a
 * fixed three, because the number of phases is the editor's and a template
 * that only looks right at length three is a template that breaks the day a
 * service has four. */
.service__method {
  margin-top: var(--space-6);
}

.service__method > h3 {
  margin-bottom: var(--space-4);
}

.service__phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .service__phases {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

/* A card with a gold top edge rather than a left one, so a row of phases reads
 * as a sequence of steps rather than as a stack of quotations. BORDER, never a
 * gradient in the `background` shorthand's position/size form — that spelling
 * is valid CSS, renders as a 3px edge in a browser that implements it, and
 * paints the whole card gold in this project's test browser. It shipped live
 * once (0.28.0). */
.service__phase {
  position: relative;
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--color-golden-accent);
  border-radius: var(--radius-md);
}

/* THE NUMERAL IS MARKUP, NOT `counter-increment`, and the template says why:
 * CSS counters are unimplemented in Obscura, which renders "0" for every item,
 * so nothing in this repository could tell a broken counter from a working
 * one. Same decision as the homepage steps in 0.27.0.
 *
 * Deep Space on Golden Accent is 4.88:1 — the one pair tokens.css sanctions for
 * text on gold. A Cloud White numeral here would be 1.90:1. */
.service__phase-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--cta-primary-bg);
  color: var(--cta-primary-text);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1;
}

.service__phase-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.service__phase-body {
  margin: 0;
  color: var(--text-secondary);
}

/* The per-phase duration. Set apart from the body by a rule rather than by
 * colour alone, because a tint is the only thing distinguishing it otherwise
 * and NFR21 forbids colour carrying meaning by itself. */
.service__phase-when {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* --- What the client is left holding --------------------------------------
 * A <ul>, not an <ol>: these are things you end up with rather than steps you
 * go through. Steel edge rather than gold, which ranks them below the phases
 * without relying on colour alone — the block also comes second. Same
 * treatment, and the same reasoning, as `.author__cards--quiet`. */
.service__deliverables {
  margin-top: var(--space-6);
}

.service__deliverables > h3 {
  margin-bottom: var(--space-4);
}

.service__artifacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 48rem) {
  .service__artifacts {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

/* FLEX rather than a plain block, and it is load-bearing rather than cosmetic:
 * Obscura sizes a block grid item from a single line while painting two, so an
 * entry that wraps is clipped by its own bottom border — measured at 59px box
 * against 65px of content on the author cards, which is where this was found. */
.service__artifact {
  margin: 0;
  display: flex;
  align-items: center;
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--color-steel-mist);
  border-radius: var(--radius-md);
  line-height: var(--leading-body);
}

/* ---- Embedded booking tool (migration 0018) ------------------------------- */

/*
 * The frame is the vendor's page, so nothing in here styles its contents - it
 * cannot, and trying would be a cross-origin fight this side always loses. What
 * this owns is the box: how tall it is before the vendor's own layout settles,
 * and that it never exceeds the band's width on a phone.
 */
.service__booking {
  margin-block-start: var(--space-6);
}

.service__booking h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.service__booking-frame {
  inline-size: 100%;
  /* 700px is what Calendly's own inline embed asks for; below roughly 630 its
     month view starts scrolling inside the frame, which reads as broken. */
  block-size: 700px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.service__booking-fallback {
  font-size: var(--text-sm);
  margin: var(--space-3) 0 0;
}

@media (max-width: 40rem) {
  .service__booking-frame {
    /* A scheduling widget on a phone is a single column and needs less room;
       700px on a short viewport leaves the page looking like it ended. */
    block-size: 560px;
  }
}