:root {
  --gts-accent-pull-quote: #A6A48F;
  --gts-accent-quote: #A6A48F;
}

/* Back-arrow inline glyph used in the about / services / art-therapy hero
 * "← Home" links. Replaces the previous inline SVG (which TipTap dropped
 * on parse, leaving editor view with a bare "Home" word). Reading order
 * is preserved by aria-hidden on the span and the visual gap below.  */
.back-arrow {
  margin-right: 0.5rem;
  display: inline-block;
}

/* Named font sizes (responsive desktop+mobile values per spec §4.4) */
.size-small  { font-size: 14px; }
.size-normal { font-size: 16px; }
.size-large  { font-size: 20px; }
.size-xlarge { font-size: 28px; }
.size-huge   { font-size: 42px; }
@media (max-width: 768px) {
  .size-small  { font-size: 13px; }
  .size-normal { font-size: 15px; }
  .size-large  { font-size: 17px; }
  .size-xlarge { font-size: 22px; }
  .size-huge   { font-size: 32px; }
}

/* Lead paragraph */
p.lead {
  font-size: 18px;
  font-weight: 300;
  color: rgba(69, 84, 126,0.8);
  line-height: 1.5;
}
@media (max-width: 768px) {
  p.lead { font-size: 16px; }
}

/* Columns layout — CSS Grid is the single source of truth. The per-block
   ratios are emitted inline as `grid-template-columns: 60fr 40fr` by the
   editor; the .cols-N rules below are only an even-split fallback. */
.cols {
  display: grid;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: 100%;
}
.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 768px) {
  /* Stack to a single column on phones — overrides the inline ratios. */
  .cols { grid-template-columns: 1fr !important; }
}
.col {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
/* The cell's content lives in this flow-root so floated images inside a column
   actually wrap their text (a flex item — which .col is — ignores float). */
.col-flow {
  display: flow-root;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.col[data-vertical-align="top"] {
  justify-content: flex-start;
}
.col[data-vertical-align="middle"] {
  justify-content: center;
}
.col[data-vertical-align="bottom"] {
  justify-content: flex-end;
}
.col img { max-width: 100%; height: auto; border-radius: 1rem; }

/* Media placement (Mode 1–4) — applies IDENTICALLY to images and the video
   card (.bg-white.rounded-2xl). left/right use real CSS float so body text
   wraps around the media; center/full are block. Width comes from the inline
   data-width style (% of the containing block). Mirrors the editor. */
img[data-align="left"],
.bg-white.rounded-2xl[data-align="left"]   { float: left;  display: block; margin: 0.4rem 1.6rem 0.9rem 0; }
img[data-align="right"],
.bg-white.rounded-2xl[data-align="right"]  { float: right; display: block; margin: 0.4rem 0 0.9rem 1.6rem; }
img[data-align="center"],
.bg-white.rounded-2xl[data-align="center"] { float: none;  display: block; margin: 1.25rem auto; }
img[data-align="full"],
.bg-white.rounded-2xl[data-align="full"]   { float: none;  display: block; width: 100%; margin: 1.5rem 0; }

/* Clear floated media so it never bleeds into the next section. */
.gts-section::after { content: ""; display: block; clear: both; }

/* Phones: a floated image/video squeezing text is worse than no wrap, so
   collapse left/right floats to full-width blocks. */
@media (max-width: 640px) {
  img[data-align="left"], img[data-align="right"],
  .bg-white.rounded-2xl[data-align="left"], .bg-white.rounded-2xl[data-align="right"] {
    float: none; display: block; width: 100%; margin: 1.25rem 0;
  }
}

/* Video embeds (editor-inserted) — responsive 16:9 frame. The editor emits
   <div class="video-container"><iframe class="video-frame">…</iframe></div>;
   without this the iframe collapses to its raw height on public pages
   (this rule previously existed only inline on resources/index.php). */
.video-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe,
.video-container .video-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Pull quote */
.pull-quote {
  position: relative;
  padding: 20px 30px 20px 60px;
  margin: 1.5rem 0;
  font-family: 'Playfair Display', Georgia, serif;
}
.pull-quote::before {
  content: "\201C";
  position: absolute;
  top: -8px;
  left: 6px;
  font-size: 80px;
  line-height: 1;
  color: var(--gts-accent-pull-quote);
  font-family: Georgia, serif;
}
.pull-quote blockquote {
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: #45547E;
  margin: 0;
}
.pull-quote figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: #6B7280;
  font-style: normal;
  font-family: 'Poppins', sans-serif;
}
@media (max-width: 768px) {
  .pull-quote { padding: 16px 20px 16px 44px; }
  .pull-quote::before { font-size: 60px; }
  .pull-quote blockquote { font-size: 18px; }
}

/* Editor-edited Quote (sage line) — scoped to .gts-section so the existing
   blog-editor blockquote rule in css/custom.css is unaffected */
.gts-section blockquote {
  border-left: 4px solid var(--gts-accent-quote);
  padding-left: 1rem;
  margin: 1rem 0;
  color: #6B7280;
  font-style: italic;
}
.gts-section blockquote footer {
  margin-top: 8px;
  font-size: 0.85em;
  color: #9CA3AF;
  font-style: normal;
}
/* Attribution is optional — render nothing when it's left blank. */
.gts-section blockquote footer:empty { display: none; }

/* Pull-quote blockquote: explicit override of the .gts-section blockquote
   rule above. Without this, CSS specificity ties at (0,1,1) and source-order
   wins for `.gts-section blockquote`, so a pull quote inside a section
   (which is always the case when inserted from the editor) inherits the
   sage left border + indent and no longer reads as a pull quote. */
figure.pull-quote blockquote {
  border-left: none;
  padding-left: 0;
  margin: 0;
}

/* Image rounded corners (TipTap stock Image extension config emits class="rounded-2xl") */
.gts-section img.rounded-2xl { border-radius: 1rem; }

/* ─── Editor-emitted block defaults (safety net) ─────────────────────────
 * When Jennifer picks "Title" from the Style dropdown TipTap emits a bare
 * <h1>…</h1> with no Tailwind classes attached. The site's hand-coded
 * sections already have inline Tailwind classes (font-serif text-4xl
 * text-primary etc.) so those win on existing content; these rules only
 * apply where the heading/paragraph/list has NO Tailwind class — i.e.
 * to fresh editor output. Specificity is (0,1,1), beating Tailwind's
 * resets but losing to inline class-based utility rules. */
.gts-section h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.25rem;
  color: #6F755B;
  line-height: 1.25;
  margin-bottom: 2rem;
  font-weight: 400;
}
@media (min-width: 768px) {
  .gts-section h1 { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .gts-section h1 { font-size: 3.75rem; }
}

.gts-section h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  color: #6F755B;
  margin-bottom: 1.5rem;
  font-weight: 400;
}
@media (min-width: 768px) {
  .gts-section h2 { font-size: 1.875rem; }
}

.gts-section h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  color: #6F755B;
  margin-bottom: 1rem;
  font-weight: 400;
}

.gts-section p {
  color: rgba(69, 84, 126, 0.8);
  font-weight: 300;
  line-height: 1.625;
  margin-bottom: 1rem;
}

.gts-section ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: rgba(69, 84, 126, 0.8);
  font-weight: 300;
  line-height: 1.625;
}

.gts-section ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: rgba(69, 84, 126, 0.8);
  font-weight: 300;
  line-height: 1.625;
}

/* Bullet spacing lives on the <li>, NOT the inner paragraph. The .gts-section p
   rule above gives every paragraph a 1rem margin — including the <p> inside each
   <li> — and THAT paragraph margin (resolved differently in the editor vs public
   pages) is the real gap between bullets, which is why driving spacing off the
   li alone didn't work. Zero the paragraph inside list items and put the gap on
   the li so roomy/tight render identically everywhere. */
.gts-section li > p { margin: 0; }
.gts-section li { margin-bottom: 1rem; }            /* roomy bullet (Enter) */
/* A tight bullet (Shift+Enter) sits flush under the previous one: remove the gap
   ABOVE it by zeroing the previous item's bottom margin. No negative margins, no
   margin-collapse fragility, and first-item-safe by construction. */
.gts-section li:has(+ li[data-tight="true"]) { margin-bottom: 0; }