/* ============================================================
   ADLIUS 2026 page-level styles
   Owned by the content/templates work. main.css owns the design
   system; nothing here redefines a class that exists there.
   Every value is a Style Kit v2 token declared in main.css :root.
   Enqueue after adlius-main.
   ============================================================ */

/* ── Text colour inside dark and red bands ─────────────────────
   main.css sets .section--dark colour on h1, h2 and h3 and p only. Everything
   else (list items, definition lists, figcaptions, table cells) inherits
   Crimson Ink from body and renders near-black on Deep Garnet. That hits
   .promise-points on the homepage, /zero-risk-partnership-promise/ and both
   segment landing pages. Fixed here; move it to main.css if that reads better.
   Cards inside dark sections paint their own background, so they are excluded. */
.section--dark > .container li,
.section--dark > .container dd,
.section--dark > .container dt,
.section--dark > .container figcaption,
.section--dark > .container td,
.section--dark > .container th,
.section--red  > .container li,
.section--red  > .container dd,
.section--red  > .container dt,
.section--red  > .container label { color: var(--color-bg); }

/* ── Links on dark and red bands ───────────────────────────────
   main.css sets link colour to Adlius Red globally. On Deep Garnet
   (#4F0209) and Adlius Red bands that is unreadable, so inline links
   inside those sections switch to Parchment with a visible underline. */
.section--dark p a,
.section--dark li a,
.section--dark figcaption a,
.section--red p a,
.section--red li a {
  color: var(--color-bg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section--dark p a:hover,
.section--dark li a:hover,
.section--dark figcaption a:hover,
.section--red p a:hover,
.section--red li a:hover { color: var(--color-accent2); }

/* ── Stray H1s inside migrated bodies ──────────────────────────
   inc/helpers.php demotes <h1> to <h2> in singular content, so the document
   outline is already correct. This is the belt to that braces: if content ever
   reaches the page with its own H1 (a filter removed, a plugin rendering the
   body its own way), it at least reads as a section heading rather than
   competing with the page title. */
.article-body h1,
.pg-longform h1,
.entry-content h1 {
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 700;
  max-width: 34ch;
}

/* ── Pull quote / testimonial ──────────────────────────────────
   Used for the Accelerator Centre testimonial and the founder quote. */
.pg-quote { margin: 0 0 var(--space-3); }
.pg-quote blockquote {
  margin: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-cta);
  font-family: var(--font-heading);
  font-size: 19px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-accent1);
}
.pg-quote blockquote p { margin: 0 0 var(--space-2); max-width: 46ch; }
.pg-quote blockquote p:last-child { margin-bottom: 0; }
.pg-quote figcaption {
  margin-top: var(--space-2);
  padding-left: calc(var(--space-3) + 4px);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Founder quote, larger, carries a whole section. */
.pg-quote--lead blockquote { font-size: clamp(20px, 2.6vw, 28px); }
.pg-quote--lead blockquote p { max-width: 34ch; }

/* On Deep Garnet: parchment text, red rule. */
.pg-quote--on-dark blockquote { color: var(--color-bg); border-left-color: var(--color-cta); }
.pg-quote--on-dark figcaption { color: var(--color-cta-disabled); }
.pg-quote--on-dark figcaption a { color: var(--color-cta-disabled); }

/* A quote sitting inside a white case-study card needs no extra frame. */
.card--case .pg-quote { margin-bottom: var(--space-1); }
.card--case .pg-quote blockquote { font-size: 18px; }

/* ── Services: phase detail blocks ───────────────────────────── */
.pg-phase {
  position: relative;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-bg);
  border-left: 4px solid var(--color-cta);
  box-shadow: 0 2px 16px rgba(41, 0, 4, 0.08);
  overflow: hidden;
}
.pg-phase__number {
  position: absolute;
  top: -22px;
  right: 8px;
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  color: rgba(41, 0, 4, 0.06);
  pointer-events: none;
}
.pg-phase > * { position: relative; z-index: 1; }
.pg-phase h2,
.pg-phase h3 { margin-bottom: var(--space-2); max-width: 26ch; }

/* Deliverables: name on one line, explanation under it. */
.pg-deliverables { margin: var(--space-3) 0; max-width: 68ch; }
.pg-deliverables dt {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent1);
  margin-top: var(--space-2);
}
.pg-deliverables dd { margin: 4px 0 0; font-size: 16px; }

/* Outcome / Duration / Client Investment. */
.pg-phase__terms {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-divider);
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .pg-phase__terms { grid-template-columns: 1fr 1fr; }
  .pg-phase__terms li:first-child { grid-column: 1 / -1; }
}
.pg-phase__terms li { font-size: 15px; }
.pg-phase__terms span {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cta);
  margin-bottom: 2px;
}

/* ── Playbook: price line ────────────────────────────────────── */
.pg-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-block: var(--space-4);
}
.pg-price strong {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-cta);
}
.pg-price s { font-size: 19px; color: var(--color-neutral); }
.pg-price span { font-size: 14px; color: var(--color-text-muted); }

/* ── Contact page ───────────────────────────────────────────── */
@media (min-width: 768px) {
  .pg-contact { grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
}
.pg-contact__form {
  background: var(--color-white);
  border: 1px solid var(--color-accent2);
  border-top: 4px solid var(--color-cta);
  padding: var(--space-4);
}
@media (min-width: 1024px) {
  .pg-contact__form { position: sticky; top: calc(var(--nav-height) + var(--space-3)); }
}
/* HubSpot injects its own styles; keep its controls on the brand grid. */
.pg-contact__form .hs-form input[type="text"],
.pg-contact__form .hs-form input[type="email"],
.pg-contact__form .hs-form input[type="tel"],
.pg-contact__form .hs-form textarea,
.pg-contact__form .hs-form select {
  width: 100%;
  border: 1px solid var(--color-accent2);
  border-radius: 0;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-body);
  background: var(--color-white);
}
.pg-contact__form .hs-form input:focus,
.pg-contact__form .hs-form textarea:focus,
.pg-contact__form .hs-form select:focus {
  border-color: var(--color-cta);
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}
.pg-contact__form .hs-form label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-body);
}
.pg-contact__form .hs-button {
  border-radius: 0 !important;
  border: none !important;
  background: var(--color-cta) !important;
  color: var(--color-white) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  cursor: pointer;
}
.pg-contact__form .hs-button:hover { background: var(--color-cta-hover) !important; }
.pg-contact__form .hs-error-msg,
.pg-contact__form .hs-error-msgs label { color: var(--color-cta); font-size: 13px; }

.pg-contact__details { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.pg-contact__details li { padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-size: 16px; }
.pg-contact__details strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cta);
}

/* Numbered "what happens next" list. */
.pg-steps { counter-reset: pg-step; list-style: none; padding: 0; margin: 0 0 var(--space-4); max-width: 68ch; }
.pg-steps li {
  counter-increment: pg-step;
  position: relative;
  padding: 0 0 var(--space-3) calc(var(--space-4) + var(--space-1));
  font-size: 16px;
}
.pg-steps li::before {
  content: counter(pg-step);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-4);
  height: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cta);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
}

/* ── Shortcode opt-in inside migrated post bodies ───────────── */
.pg-optin {
  margin-block: var(--space-5);
  padding: var(--space-4);
  background: var(--color-accent2);
  border-left: 4px solid var(--color-cta);
}
.pg-optin .optin__fineprint { margin-bottom: 0; }

/* ── Long-form classic HTML pages (page.php) ──────────────────
   These bodies come out of the WPBakery migration as plain HTML with no
   classes, so everything is styled by element. .article-body already centres
   direct children at 720px; this adds the 68ch measure for nested content,
   plus tables, lists and images that arrive unstyled. */
.pg-longform { font-size: 17px; }
.pg-longform h2 {
  max-width: 34ch;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.pg-longform h3 { max-width: 40ch; margin-top: var(--space-5); }
.pg-longform h4 {
  max-width: 46ch;
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent1);
}
.pg-longform p,
.pg-longform ul,
.pg-longform ol,
.pg-longform dl { max-width: 68ch; margin-inline: auto; }
.pg-longform li { margin-bottom: var(--space-1); }
.pg-longform li::marker { color: var(--color-cta); }
.pg-longform ul ul,
.pg-longform ol ol { margin-top: var(--space-1); }

.pg-longform hr {
  max-width: var(--article-width);
  margin: var(--space-6) auto;
  border: 0;
  border-top: 1px solid var(--color-divider);
}

.pg-longform strong { color: var(--color-accent1); }

.pg-longform figure { margin-inline: auto; }
.pg-longform img { margin-block: var(--space-4); }
.pg-longform figcaption {
  max-width: 68ch;
  margin: calc(-1 * var(--space-2)) auto var(--space-4);
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Tables arrive without the .adlius-table class, style the element. */
.pg-longform table {
  width: 100%;
  max-width: var(--article-width);
  margin: var(--space-4) auto;
  border-collapse: collapse;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}
@media (min-width: 768px) {
  .pg-longform table { display: table; }
}
.pg-longform th {
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: left;
  background: var(--color-accent1);
  color: var(--color-bg);
  padding: 12px 16px;
}
.pg-longform td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.pg-longform tbody tr:nth-child(even) td { background: rgba(229, 225, 225, 0.4); }

/* Anything the old builder left behind that would break the measure. */
.pg-longform iframe,
.pg-longform video { max-width: 100%; margin-block: var(--space-4); }

/* wp_link_pages */
.pg-pagelinks {
  max-width: var(--article-width);
  margin: var(--space-5) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-heading);
  font-size: 14px;
}
.pg-pagelinks span {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--color-cta);
  margin-right: var(--space-1);
}
.pg-pagelinks a { margin-inline: 4px; }

/* ── Photo hero with a dark scrim ──────────────────────────────
   Replaces the old YouTube video backgrounds on /services/ and /about-us/
   and the front page. The photograph is real content, so it carries alt
   text and is NOT inside an aria-hidden wrapper; only the scrim is. The
   scrim holds Parchment text at the approved 9.6:1 ratio over any frame
   of the photograph. */
.pg-hero--photo { background: var(--color-accent1); }
.pg-hero__media { position: absolute; inset: 0; margin: 0; }
.pg-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.pg-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(41, 0, 4, 0.92) 0%, rgba(41, 0, 4, 0.80) 45%, rgba(79, 2, 9, 0.62) 100%);
}

/* ── Click-to-load video facade ───────────────────────────────
   The poster is a plain image inside a real button; inc/helpers.php swaps
   in the iframe on click. Nothing loads from YouTube before that. */
.pg-video { max-width: var(--article-width); margin: var(--space-4) auto 0; }
.pg-video__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--color-accent1);
  cursor: pointer;
  line-height: 0;
}
.pg-video__poster { display: block; width: 100%; height: auto; }
.pg-video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-cta);
  color: var(--color-white);
  transition: background 0.25s var(--ease-entrance), transform 0.25s var(--ease-entrance);
}
.pg-video__play svg { width: 34px; height: 34px; }
.pg-video__btn:hover .pg-video__play { background: var(--color-cta-hover); transform: translate(-50%, -50%) scale(1.06); }
.pg-video__btn:focus-visible { outline: 3px solid var(--color-cta); outline-offset: 3px; }
.pg-video__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ── Phase label, under the section heading ───────────────────
   Alex's original Services page names the phase below the section title,
   not above it. Muted, not uppercase, not tracked: a subtitle, not a label. */
.pg-phase__name {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral);
}
.pg-phase__name--center { text-align: center; }

/* ── Photograph inside a card or a split ──────────────────────
   Fixed ratio so a row of cards keeps its baseline whatever the source
   image measures. */
.pg-figure { margin: 0 0 var(--space-3); }
.pg-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.pg-figure--wide img { aspect-ratio: 16 / 10; }
.pg-figure--portrait img { aspect-ratio: 4 / 5; }
.pg-figure--free img { aspect-ratio: auto; }

/* A card whose first child is the photograph: the image goes edge to edge. */
.pg-card-photo { padding-top: 0; overflow: hidden; }
.pg-card-photo > .pg-figure {
  margin: 0 calc(-1 * var(--space-4)) var(--space-3);
  width: calc(100% + var(--space-4) * 2);
}

/* ── Headshot ─────────────────────────────────────────────────
   The one square source image, shown small beside a quote or a bio. */
.pg-headshot { max-width: 220px; margin: 0 0 var(--space-3); }
.pg-headshot img { display: block; width: 100%; height: auto; }

/* ── Maple leaf mark ──────────────────────────────────────────
   Alex's original pages close on the mark. Decorative: empty alt. */
.pg-mark { margin: 0; padding-block: var(--space-5); text-align: center; }
.pg-mark img { display: inline-block; width: 32px; height: 32px; }

/* ── Deliverables inside a phase, three across ───────────────── */
@media (min-width: 768px) {
  .pg-deliverables--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--space-4);
    max-width: none;
  }
  .pg-deliverables--grid dt { grid-row: 1; margin-top: 0; }
  .pg-deliverables--grid dd { grid-row: 2; }
}

/* ── Phase split: photo beside the Outcome / Duration / Investment ── */
.pg-phase__summary { margin-top: var(--space-4); }
@media (min-width: 900px) {
  .pg-phase__summary {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-4);
    align-items: center;
  }
  .pg-phase__summary .pg-phase__terms { margin-top: 0; border-top: 0; padding-top: 0; }
}

/* ── Light cards sitting inside a dark or red band ────────────
   The reversal rules at the top of this file are descendant selectors, so a
   list inside a parchment card on a Deep Garnet section would otherwise
   inherit parchment text on a parchment background. Deep Garnet cards
   (.card--phase) are not affected and keep the reversal. */
.section--dark .card--pricing li,
.section--dark .card--pricing dt,
.section--dark .card--pricing dd,
.section--dark .card--problem li,
.section--dark .card--case li,
.section--red  .card--pricing li,
.section--red  .card--problem li { color: var(--color-body); }
.section--dark .card--pricing li::marker,
.section--red  .card--pricing li::marker { color: var(--color-cta); }

/* A pricing card that lists its terms instead of describing them. */
.card--pricing .pricing__body ul { margin-bottom: 0; font-size: 16px; }
.card--pricing .pricing__body li { margin-bottom: var(--space-1); }

/* A photo page hero needs more room than the 40vh inner-page default. */
.hero--page.pg-hero--photo { min-height: 52vh; }

/* Quick Answer boxes: centre the whole box (Alex, 13 Sep) */
.geo-block { margin-left: auto; margin-right: auto; } /* geo-block centred */