/* ============================================================
   pages.css — shared layout for About and Services

   Same readability approach as the Reading Room: fluid type via
   clamp(), a capped measure for body copy, and alternating
   section backgrounds. Loaded only on the pages that use it.
   ============================================================ */

/* ── HERO ───────────────────────────────────────────────── */
.pg-hero {
  position: relative;
  background: var(--vanilla);
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 6rem);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  overflow: hidden;
  text-align: center;
}
.pg-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.pg-blob { position: absolute; border-radius: 50%; }
.pg-blob--1 { width: 400px; height: 400px; top: -170px; right: -110px; background: var(--grapefruit); opacity: .10; }
.pg-blob--2 { width: 260px; height: 260px; bottom: -130px; left: -80px; background: var(--lime); opacity: .11; }
.pg-hero .container { position: relative; z-index: 1; }
.pg-hero .breadcrumb { margin-bottom: var(--space-6); }
.pg-hero .breadcrumb ol { justify-content: center; }

.pg-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--raspberry-ink);
  background: var(--raspberry-soft);
  border-radius: var(--radius-full);
  padding: .4rem 1.1rem;
  margin-bottom: var(--space-5);
}

.pg-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.14;
  color: var(--forest);
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

.pg-lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.8;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 auto var(--space-5);
  text-wrap: pretty;
}
.pg-lede + .btn, .pg-lede + .pg-actions { margin-top: var(--space-4); }

/* ── SECTIONS ───────────────────────────────────────────── */
.pg-section { padding-block: clamp(2.75rem, 7vw, 5rem); }
.pg-section--tinted { background: var(--vanilla); }

.pg-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--raspberry-ink);
  margin-bottom: var(--space-3);
}

.pg-heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--forest);
  margin-bottom: var(--space-6);
  text-wrap: balance;
}
.pg-heading::after {
  content: '';
  display: block;
  width: 52px; height: 3px;
  background: var(--lemon);
  border-radius: var(--radius-full);
  margin-top: var(--space-4);
}

.pg-body {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.85;
  color: var(--ink);
  max-width: 64ch;
  margin-bottom: var(--space-5);
  text-wrap: pretty;
}
.pg-body:last-child { margin-bottom: 0; }

/* ── BUTTON ROWS ────────────────────────────────────────── */
.pg-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-8);
}
.pg-actions--centred { justify-content: center; }

/* ── META PILLS ─────────────────────────────────────────── */
.pg-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  list-style: none;
  margin: var(--space-6) 0 var(--space-8);
}
.pg-meta__item {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--forest);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  padding: .5rem 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-bounce), box-shadow var(--transition), border-color var(--transition);
}
.pg-meta__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--grapefruit);
}

/* ── CREDENTIALS ────────────────────────────────────────── */
.pg-creds {
  display: flex; flex-direction: column; gap: var(--space-4);
  list-style: none;
  margin-bottom: var(--space-8);
  max-width: 48rem;
}
.pg-cred {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-left: none;
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-8);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-bounce), box-shadow var(--transition);
}
.pg-cred::before {
  content: '';
  position: absolute;
  left: .9rem; top: 1.1rem; bottom: 1.1rem;
  width: 4px;
  border-radius: var(--radius-full);
  background: var(--lime);
}
.pg-cred:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pg-cred__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--forest);
  margin-bottom: .2rem;
}
.pg-cred__where { display: block; font-size: var(--text-sm); color: var(--muted); }

/* ── SPLIT (image + text) ───────────────────────────────── */
.pg-split { display: flex; align-items: flex-start; gap: clamp(2rem, 5vw, 3.5rem); }
.pg-split__img { flex: 0 0 160px; width: 160px; height: auto; }
.pg-split__text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
  .pg-split { flex-direction: column; align-items: center; text-align: center; }
  .pg-split__img { flex: 0 0 auto; width: 130px; }
  .pg-split .pg-heading::after { margin-inline: auto; }
  .pg-split .pg-body { margin-inline: auto; }
  .pg-split .pg-actions { justify-content: center; }
}

/* ── FEATURED BLOCK ─────────────────────────────────────── */
.pg-feature {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: clamp(1.75rem, 5vw, 3.25rem);
  box-shadow: var(--shadow-sm);
}

/* ── SERVICE CARDS ──────────────────────────────────────── */
/* ── The services grid: defined ONLY here ──
   Every card is the same width at every screen size. Five
   cards don't divide into equal rows, so the short last row
   is centred rather than stretched.

   This uses flexbox, not grid, on purpose. Grid can't centre
   an incomplete final row without tricks; flex-wrap with
   justify-content: center does it naturally.

   The flex-basis maths: (100% minus the gaps) divided by the
   number per row. Two gaps for three columns, one for two.

   Keep every .pg-grid rule in this file — defining it in two
   places is what caused the earlier sizing bug. */
.pg-grid {
  --pg-gap: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pg-gap);
}
.pg-grid > .pg-card {
  flex: 0 0 100%;
  min-width: 0;
}

/* Tablet: two per row → [1 2] [3 4] [5 centred] */
@media (min-width: 640px) {
  .pg-grid > .pg-card { flex-basis: calc((100% - var(--pg-gap)) / 2); }
}

/* Desktop: three per row → [1 2 3] [4 5 centred] */
@media (min-width: 1000px) {
  .pg-grid > .pg-card { flex-basis: calc((100% - 2 * var(--pg-gap)) / 3); }
}
.pg-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  min-width: 0;
  transition: transform .3s var(--ease-bounce), box-shadow .3s var(--ease), border-color var(--transition);
}
.pg-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-pop);
  border-color: var(--grapefruit);
}

.pg-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 400;
  color: var(--forest);
  margin-bottom: var(--space-2);
}
.pg-card__tagline {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--raspberry);
  margin-bottom: var(--space-5);
}
.pg-card__body {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: var(--space-4);
  text-wrap: pretty;
}
.pg-card__link {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--raspberry);
  text-decoration: none;
  transition: transform var(--transition);
}
.pg-card__link::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease-out);
}
.pg-card__link:hover { transform: translateX(3px); }
.pg-card__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── NOTE ───────────────────────────────────────────────── */
.pg-note {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-8);
  margin-top: var(--space-10);
  max-width: 64ch;
  box-shadow: var(--shadow-sm);
}
.pg-note::before {
  content: '';
  position: absolute;
  left: .9rem; top: 1.1rem; bottom: 1.1rem;
  width: 4px; border-radius: var(--radius-full);
  background: var(--lime);
}
.pg-note p { font-size: var(--text-sm); line-height: 1.8; color: var(--muted); margin: 0; }

/* ── CLOSING BAND ───────────────────────────────────────── */
.pg-close {
  background: var(--forest);
  padding-block: clamp(3rem, 8vw, 5rem);
  text-align: center;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.pg-close__heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  font-weight: 400;
  color: var(--white);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.pg-close__body {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.8;
  color: rgba(255,255,255,.82);
  max-width: 48ch;
  margin: 0 auto var(--space-8);
  text-wrap: pretty;
}
.pg-close__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); }

/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pg-meta__item, .pg-card, .pg-cred, .pg-card__link {
    transition: none !important;
    transform: none !important;
  }
}


/* ── EMPTY STATE (blog with no posts) ──────────────────── */
.pg-empty { text-align: center; padding-block: clamp(1rem, 4vw, 2rem); }
.pg-empty__mascot { width: clamp(120px, 18vw, 150px); height: auto; margin: 0 auto var(--space-6); }
.pg-empty .pg-heading::after { margin-inline: auto; }
.pg-empty .pg-body { margin-inline: auto; }
.pg-empty .pg-actions { justify-content: center; }