/* ==========================================================================================================
   services.css — services area (dds_service single template, /services/, service cards from a GB Query).
   Enqueued by inc/services.php after dds.css (handle dds-services, depends on dds), on service singles and the
   Services page, and added to the block editor styles. Tone variables only; the few rgba() values below are the
   exact dds.css values for the same parts (viewfinder brackets, flight path).

   Hooks are data attributes the content modules put on GB blocks (.build/content/services/_parts.js), because the
   template is data-driven and GB global classes can't depend on a field value:
     data-dds-frame="light|dark"   viewfinder around a plate chosen by the post's `plate` field ({{dds_plate key:frame}})
     data-dds-steps="vertical"     flight-path steps as a vertical list (any number of steps, any width)
     data-dds-list="1|2"           hairline list with leading icons, 1 or 2 columns (ideal for, add-ons, notes, factors)
     data-dds-plate="hero"         the plate hero's figure (service singles)
     data-dds-copy="cinematic"     the cinematic hero's copy row (commercial service)
   ========================================================================================================== */

/* ---------- Heroes: two columns down to 901 px, stacked at ≤ 900 (DECISIONS-R1 D13, same breakpoint as dds.css).
   GB per-block CSS can only use the 1024/767 breakpoints, so these live here. ---------- */
/* Plate hero, stacked: the plate would otherwise run the full width (about 615 px tall at 900). */
@media (max-width:900px){ .dds-plate[data-dds-plate="hero"]{ max-width:640px; } }
/* Cinematic copy row: 7/5 instead of the text hero's 8/4, so the quote button and "Email Drew" sit side by side. */
.dds-hero--cinematic .dds-cinematic__copy[data-dds-copy="cinematic"]{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
/* 901–1024: equal columns and the two-column hero H1 size (as dds.css does for the other heroes), so the H1 keeps to
   3–4 lines and the buttons have room. */
/* Polish R3: the text hero's bottom alignment (align-items:end) made the taller right column (lead, buttons,
   compliance line) start ~60 px above the breadcrumb here; top-aligned, the lead starts level with the crumbs, as it
   does at 1440. */
@media (min-width:901px) and (max-width:1024px){
  .dds-hero--cinematic .dds-cinematic__copy[data-dds-copy="cinematic"]{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  .dds-hero--cinematic .dds-cinematic__copy[data-dds-copy="cinematic"] h1{ font-size:2.5rem; }
}
@media (max-width:900px){ .dds-hero--cinematic .dds-cinematic__copy[data-dds-copy="cinematic"]{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Viewfinder on a dark plate (plate-video / -structure / -mesh): same values as .dds-vf--light ---------- */
.dds-vf[data-dds-frame="light"]{ --vf-c:rgba(247,244,236,.95); --vf-halo:rgba(19,36,29,.7); }

/* ---------- Steps as a vertical flight path (service pages: 4–5 steps from the process_steps repeater) ----------
   One dashed segment per step, from its waypoint to the next one, so the path ends at the last waypoint. */
.dds-steps[data-dds-steps="vertical"]{ grid-template-columns:1fr; row-gap:36px; }
.dds-steps[data-dds-steps="vertical"]::before{ display:none; }
.dds-steps[data-dds-steps="vertical"] > .dds-step{ padding:0 0 0 58px; }
.dds-steps[data-dds-steps="vertical"] > .dds-step:not(:last-child)::before{ content:""; position:absolute; left:10px; top:12px; bottom:-47px; border-left:2px dashed rgba(169,189,176,.55); }
.dds-steps[data-dds-steps="vertical"] .dds-step__label{ margin-bottom:8px; }
.dds-steps[data-dds-steps="vertical"] .dds-step h3{ margin-bottom:8px; }
.dds-steps[data-dds-steps="vertical"] .dds-step > p:last-child{ max-width:40em; }
@media (max-width:767px){ .dds-steps[data-dds-steps="vertical"] > .dds-step{ padding-left:50px; } }

/* On paper (the commercial page, whose cinematic hero is already one of its two dark bands, DESIGN §4.5 rule 8):
   the waypoints use the quote-form rootline language (DESIGN §8.17): Signal dot, paper gap, Ink ring; Ink at the
   end; a Muted dashed path. Signal on paper is 3.10:1 (UI, §4.3); the path is decorative. */
.dds-tone-paper .dds-steps .dds-step__wp{ box-shadow:0 0 0 6px var(--bg), 0 0 0 7px var(--contrast); }
.dds-tone-paper .dds-steps .dds-step:last-child .dds-step__wp{ background:var(--contrast); }
.dds-tone-paper .dds-steps[data-dds-steps="vertical"] > .dds-step:not(:last-child)::before{ border-left-color:var(--muted); opacity:.6; }

/* ---------- Hairline lists with a leading icon (looped from repeaters) ---------- */
ul[data-dds-list]{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:32px; margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); font-size:1rem; line-height:1.55; color:var(--fg-2); }
ul[data-dds-list="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
ul[data-dds-list] > li{ display:flex; align-items:flex-start; gap:12px; margin:0; padding:14px 0; border-bottom:1px solid var(--line); }
ul[data-dds-list] > li > .gb-shape{ flex:none; margin-top:2px; color:var(--icon); }
ul[data-dds-list] > li > .gb-shape svg{ width:20px; height:20px; stroke-width:1.75; }
/* Odd count in 2 columns: the last item spans both columns, so every row's rule runs the full width instead of the
   left column's last rule dangling under one column. */
@media (min-width:768px){ ul[data-dds-list="2"] > li:last-child:nth-child(odd){ grid-column:1 / -1; } }
@media (max-width:767px){
  ul[data-dds-list="2"]{ grid-template-columns:minmax(0,1fr); }
  ul[data-dds-list] > li{ padding:12px 0; }
}

/* Inside a card (the Add-ons card, a .dds-aside): hairlines only, no closing rule under the last row. */
.dds-aside ul[data-dds-list]{ border-top-color:var(--line); }
.dds-aside ul[data-dds-list] > li{ padding:12px 0; }
.dds-aside ul[data-dds-list] > li:last-child{ border-bottom:0; }
@media (min-width:768px){ .dds-aside ul[data-dds-list="2"] > li:nth-last-child(2):nth-child(odd){ border-bottom:0; } }

/* ---------- The compliance line (ul.dds-checks) on the cinematic hero's canopy copy row: dds.css colours .dds-checks
   icons Forest, which disappears on canopy; use the tone's icon colour (Paper on dark, Forest on light). ---------- */
.dds-tone-canopy .dds-checks svg, .dds-tone-ink .dds-checks svg{ color:var(--icon); }