/**
 * About page ("TS About" template).
 *
 * Ported from the design system's about.html. Colour, type, radius and
 * shadow all come from the tokens already declared in style.css, so the only
 * thing this file adds is layout: the split hero with its portrait frame,
 * the expertise grid, the journey timeline, the facts strip and the
 * principles grid.
 *
 * Section rhythm follows the front page (64px bands) rather than the
 * design's 84px, so the About page sits at the same scale as the rest of
 * the site.
 */

.ab-page {
  background: var(--ts-white);
  --ab-lavender-fade: linear-gradient(180deg, #FFFFFF 0%, #F6F3F6 100%);

  /* The design's narrow column is 760px, which reads as cramped next to the
     rest of the site: the front page's narrow sections are 980px and a blog
     post's layout is 1100px. Matching 980 keeps the About page at the same
     measure as everything else. */
  --ab-narrow: 980px;
}

/* ==========================================================
   SCAFFOLD
   ========================================================== */

.ab-wrap        { max-width: var(--container-max); margin: 0 auto; }
.ab-wrap-narrow { max-width: var(--ab-narrow); margin: 0 auto; }

.ab-sec     { padding: 64px var(--gutter); }
.ab-sec-alt { background: var(--ts-plum-50); }

.ab-sec-head { max-width: 640px; margin: 0 0 24px; }
.ab-sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.ab-sec-head .ts-eyebrow { display: inline-block; margin: 0 0 8px; }
.ab-sec-head h2 {
  font-family: var(--font-display);
  font-size: var(--fp-fs-h2);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--fg-1);
  margin: 0 0 16px;
}
.ab-sec-head p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
.ab-page .fp-accent { color: var(--ts-coral-400); }

/* ==========================================================
   HERO
   ========================================================== */

.ab-hero {
  background: var(--ab-lavender-fade);
  border-bottom: 1px solid var(--border-2);
  padding: 72px var(--gutter) 64px;
}
.ab-hero-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 64px;
  align-items: center;
}
.ab-hero-eyebrow { display: inline-block; margin: 0 0 16px; }
.ab-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--fg-1);
  margin: 0 0 20px;
}
.ab-hero-lead {
  font-size: 19px;
  line-height: 1.62;
  color: var(--fg-2);
  max-width: 540px;
  margin: 0 0 24px;
}

.ab-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 24px; }
.ab-hero-meta .m {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
}
.ab-hero-meta .m svg { width: 17px; height: 17px; color: var(--ts-plum-400); flex-shrink: 0; }

.ab-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Portrait block */
.ab-portrait { position: relative; }
.ab-portrait-frame {
  position: relative;
  width: 86%;
  aspect-ratio: 1 / 1.12;
  margin-left: auto;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #4A3B52 0%, #241830 100%);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ab-portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-portrait-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 24px);
}
.ab-portrait-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: rgba(255,255,255,.95);
}
.ab-portrait-dots {
  position: absolute;
  left: -12px;
  top: 6%;
  display: grid;
  grid-template-columns: repeat(4, 5px);
  gap: 9px;
}
.ab-portrait-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ts-plum-300);
  opacity: .7;
}
.ab-portrait-ring {
  position: absolute;
  right: 2%;
  bottom: 8%;
  width: 46px;
  height: 46px;
  border: 2px solid var(--ts-coral-400);
  border-radius: 50%;
}

/* ==========================================================
   MY STORY (page content)
   ========================================================== */

.ab-story-body p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--fg-2);
  margin: 0 0 20px;
}
.ab-story-body p:last-child { margin-bottom: 0; }
.ab-story-body strong { color: var(--fg-1); font-weight: 600; }

/* In-content links are coral, matching single posts. Nothing sets a colour
   for content links site-wide, so without this Bootstrap's default blue
   wins. Coral-500 rather than the brand coral-400: 400 only reaches 3.5:1
   on white and fails AA at body size, 500 clears it at 4.5:1. */
.ab-story-body a { color: var(--ts-coral-500); transition: color var(--d-fast); }
.ab-story-body a:hover { color: var(--ts-coral-600); }
.ab-story-body h2,
.ab-story-body h3 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: -.01em;
  margin: 24px 0 12px;
}
.ab-story-body h2 { font-size: 24px; font-weight: 700; line-height: 1.25; }
.ab-story-body h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }

/* The design's pull quote: a coral rule and display type, no quote marks.
   This overrides the global blockquote box at style.css:969, so it has to
   restore its own vertical breathing room: the padding keeps the text off
   the rule, the margin separates the quote from the paragraphs either side. */
.ab-story-body .wp-block-quote {
  border-left: 3px solid var(--ts-coral-400);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  background: none;
  border-radius: 0;
  font-style: normal;
}
.ab-story-body .wp-block-quote p {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--fg-1);
  margin: 0;
}

/* Let a wide image breathe past the text measure without going full bleed. */
.ab-story-body .alignwide {
  width: min(1160px, 94vw);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.ab-story-body img { max-width: 100%; height: auto; border-radius: var(--r-card); }

/* ==========================================================
   WHAT I BRING
   ========================================================== */

.ab-exp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ab-exp-card { padding: 24px; }
.ab-exp-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--ts-plum-100);
  color: var(--ts-plum-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
}
.ab-exp-icon svg { width: 22px; height: 22px; }
.ab-exp-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--fg-1);
  margin: 0 0 8px;
}
.ab-exp-card p { font-size: 14px; line-height: 1.62; color: var(--fg-2); margin: 0; }

/* ==========================================================
   THE JOURNEY
   ========================================================== */

.ab-tl { position: relative; padding-left: 24px; }
.ab-tl::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-2);
}
.ab-tl-item { position: relative; padding-bottom: 24px; }
.ab-tl-item:last-child { padding-bottom: 0; }
.ab-tl-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ts-white);
  border: 2px solid var(--ts-coral-400);
}
.ab-tl-when {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ts-plum-400);
  margin: 0 0 4px;
}
.ab-tl-item h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--fg-1);
  margin: 0 0 4px;
}
.ab-tl-item p { font-size: 14px; line-height: 1.6; color: var(--fg-2); margin: 0; }

/* ==========================================================
   BY THE NUMBERS
   ========================================================== */

.ab-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ab-fact {
  background: var(--ts-white);
  border: 1px solid var(--border-1);
  border-radius: var(--r-card);
  padding: 24px;
  text-align: center;
}
.ab-fact .n {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ts-coral-400);
}
.ab-fact .l {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
  margin-top: 8px;
}
.ab-fact .d { font-size: 12px; line-height: 1.45; color: var(--fg-3); margin-top: 4px; }

/* ==========================================================
   HOW I WORK
   ========================================================== */

.ab-val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ab-val { padding: 24px; }
.ab-val-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.ab-val-head svg { width: 20px; height: 20px; color: var(--ts-coral-500); flex-shrink: 0; }
.ab-val-head h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--fg-1);
  margin: 0;
}
.ab-val p { font-size: 14px; line-height: 1.62; color: var(--fg-2); margin: 0; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
  .ab-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ab-hero-lead { max-width: none; }
  .ab-portrait-frame { max-width: 340px; width: 100%; margin: 0 auto; }
  .ab-portrait-dots,
  .ab-portrait-ring { display: none; }
  .ab-exp-grid,
  .ab-val-grid { grid-template-columns: 1fr; }
  .ab-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .ab-sec  { padding: 40px var(--gutter); }
  .ab-hero { padding: 40px var(--gutter); }
  .ab-sec-head h2 { font-size: 26px; }
  .ab-story-body p { font-size: 16px; }
  .ab-story-body .wp-block-quote p { font-size: 19px; }
  .ab-hero-ctas .fp-btn { width: 100%; justify-content: center; }
}