/* Service pages: the Colors & finishes card, captions that never sit on media controls, and the
   purpose-built system diagrams with real-text labels.
   Loaded after css/site.css; the selectors carry enough weight to win without !important
   (one exception is marked). */

/* ---- 1. Colors & finishes: six flake blends in a 3 x 2 grid of true circles ---- */
.service-look .service-look__swatches{
  list-style:none;margin:20px 0 28px;padding:0;width:100%;max-width:340px;height:auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;
  gap:20px 14px;justify-content:center;align-content:start;contain:none;overflow:visible;
}
.service-look__swatches .swatch{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;margin:0}
.service-look__swatches .swatch__disc{flex:none;position:relative;display:block;width:100%;max-width:96px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--surface)}
.service-look__swatches .swatch__disc picture{display:contents}
/* The source tiles carry a thin frame and a printed blend name along the bottom ~11%.
   The image is scaled to 116.3% and shifted so the disc shows only x 7-93%, y 1.5-87.5% of the
   tile: frame and printed name both fall outside the circle. */
.service-look__swatches .swatch__disc img{
  position:absolute;display:block;left:-8.14%;top:-1.74%;width:116.3%;height:116.3%;max-width:none;
  object-fit:cover;object-position:50% 50%;border-radius:0;
}
.service-look__swatches .swatch__name{
  display:block;font-size:14px;font-weight:700;line-height:1.25;color:var(--ink);text-align:center;text-wrap:balance;
}
/* the card is as tall as its content: the button sits at the foot, the photo card beside it fills the row */
.service-look .btn{margin-top:auto}
.service-look p{min-height:0}
.service-look .service-inspiration{flex:1 1 auto;grid-auto-rows:minmax(92px,1fr);align-items:stretch}
.service-look .service-inspiration .craft-photo{min-height:0}
.service-look .service-inspiration img{height:100%}
@media(max-width:767.98px){
  .service-look .service-look__swatches{max-width:300px;gap:18px 12px;margin:16px 0 24px}
}

/* ---- 2. Captions: half-overlap pill on photos only; video and before/after keep the pill clear ---- */
/* A video's play, volume and seek controls run along its bottom edge, and a before/after slider's
   handle and drag area are the picture itself. The caption pill goes under the media instead. */
body .photo-caption-host:has(>video,>.compare)>.photo-caption.photo-caption{
  position:static;inset:auto;transform:none;width:fit-content;max-width:100%;
  margin:14px auto 0;white-space:normal;
}
/* the runtime reserved half a pill of margin for the overlap; a pill below the media needs none (inline style, hence !important) */
body .photo-caption-host:has(>video,>.compare){margin-bottom:0!important}
/* a figure's default 40px side margins squeezed the video to two thirds of the column */
.photo-caption-host:has(>video){margin-inline:0;width:100%}
.photo-caption-host>video{width:100%;height:auto}
.recent-project .photo-caption-host>video{aspect-ratio:9/16}

/* ---- 3. System diagrams: labels as real text, art cropped to the stack ---- */
.service-system{container-type:inline-size}
.service-diagram{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:20px 16px 18px}
.service-diagram>svg{width:100%;max-width:200px;margin-inline:auto;height:auto;aspect-ratio:252/370}
.service-diagram>svg text{display:none}
/* stacked: the leader lines point at labels that sit below, so the list bullets stand in for them */
.service-diagram>svg path[stroke="#c9c9c4"][fill="none"],.service-diagram>svg circle[r="2.5"]{display:none}
.service-diagram .h-sys__lbl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.service-diagram .h-sys__lbl li{display:block;position:relative;padding-left:16px;font-size:var(--t-button);line-height:1.3;color:var(--ink)}
.service-diagram .h-sys__lbl li::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.service-diagram .h-sys__lname{display:block;font-weight:700;font-size:var(--t-body);line-height:1.3;color:var(--ink)}
.service-diagram .h-sys__ldesc{display:block;font-weight:500;font-size:var(--t-button);line-height:1.35;color:var(--ink-soft)}
/* wide enough: labels beside the art, each one level with its leader line */
@container (min-width:340px){
  .service-diagram{grid-template-columns:minmax(0,47%) minmax(0,1fr);gap:0 4px;align-items:stretch;padding:20px 12px 18px 8px}
  .service-diagram>svg{max-width:none;margin:0;align-self:start}
  .service-diagram>svg path[stroke="#c9c9c4"][fill="none"],.service-diagram>svg circle[r="2.5"]{display:inline}
  .service-diagram .h-sys__lbl{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding-block:7% 14%}
  .service-diagram .h-sys__lbl li{padding-left:0}
  .service-diagram .h-sys__lbl li::before{display:none}
  .service-diagram .h-sys__lname{font-size:var(--t-caption)}
  .service-diagram .h-sys__ldesc{font-size:var(--t-eyebrow);line-height:1.3}
}

/* ---- 4. System card copy: no reserved blank band; the button rides the foot of the card ---- */
.service-system{display:flex;flex-direction:column}
.service-system .service-card-copy{flex:1 1 auto}
.service-system .service-card-copy p{min-height:0}
.service-system .service-card-copy .btn{margin-top:auto}