/* ============================================================
   CONTENT — CPT archive / single (services, …). Fluid / rem.
   Reuses .svc-grid from home.css (also enqueued on these views).
   ============================================================ */
.site-main{ min-height:50vh; }

.content-hero{ padding-top:3.25rem; padding-bottom:1.5rem; }
.content-back{
  display:inline-block; margin-bottom:1rem;
  font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.06em;
  color:var(--brand-accent);
}
.content-back:hover{ color:var(--brand); }
.content-title{
  font-family:var(--font-display); font-weight:800; font-size:2.75rem; letter-spacing:-.012em;
  line-height:1.08; color:var(--text-primary); margin:0 0 .5rem;
}
.content-sub{ color:var(--text-secondary); font-size:1rem; line-height:1.55; max-width:44rem; margin:0; }

.content-list{ padding-top:1.5rem; padding-bottom:4.5rem; }

.content-hero-img{
  display:block; height:24rem; margin:1.25rem 0 0;
  background-size:cover; background-position:center; border-radius:0.625rem;
}
.content-body{
  padding-top:2rem; padding-bottom:1rem;
  font-size:1rem; line-height:1.75; color:var(--text-secondary);
}
/* Constrain the reading width on the CHILDREN (left-aligned), not on the .wrap
   itself — putting max-width on a .wrap element makes margin-inline:auto centre it. */
.content-body > *{ max-width:48rem; }

/* Generic content pages (page.php: Privacy, Terms, any standalone page) —
   centre the whole column (title + body) so margins are balanced both sides. */
.page-generic .content-hero,
.page-generic .content-body{ max-width:54rem; }
.page-generic .content-body > *{ max-width:none; }
.content-body h2{ color:var(--text-primary); font-family:var(--font-display); font-weight:700; font-size:1.375rem; letter-spacing:-.01em; line-height:1.25; margin:2rem 0 .5rem; }
.content-body h3{ color:var(--text-primary); font-family:var(--font-display); font-weight:700; font-size:1.125rem; margin:1.5rem 0 .4rem; }
.content-body p{ margin:0 0 1rem; }
.content-body ul, .content-body ol{ margin:0 0 1rem; padding-left:1.25rem; }
.content-body li{ margin:.3rem 0; }
.content-body a{ color:var(--brand-accent); text-decoration:underline; }
.content-body em{ color:var(--text-secondary); }
.content-body strong, .content-body b{ color:var(--text-primary); }
.content-crumb{ font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.06em; color:var(--brand-accent); margin:0 0 .75rem; }
.content-cta{ padding-top:1.5rem; padding-bottom:5rem; }

/* Colour range grid (archive-colour) */
.colour-card-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem 1.125rem; }
.colour-card{ display:flex; flex-direction:column; gap:0.35rem; }
.colour-chip{ display:block; height:6rem; border-radius:0.4rem; border:1px solid var(--line); }
.colour-card:hover .colour-chip{ outline:2px solid var(--brand-accent); outline-offset:2px; }
.colour-name{ font-family:var(--font-display); font-weight:700; font-size:0.8125rem; color:var(--text-primary); }
.colour-code{ color:var(--text-secondary); font-size:0.72rem; letter-spacing:.04em; }

@media (max-width:900px){
  .content-title{ font-size:2rem; }
  .content-hero-img{ height:16rem; }
  .colour-card-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:480px){
  .colour-card-grid{ grid-template-columns:repeat(2,1fr); }
}