/* =========================================================
   City Choice Services — structurally mirrors .cc-why-subpage.
   The bulk of layout (cinematic banner, hero intro, numbered
   editorial points, explore tiles) is inherited from
   citychoice-home/home.css via the .cc-why-subpage and
   .cc-why-city-choice classes on the wrapper.

   This file only adds the per-service trimmings that the Why
   subpages don't have: conditions list, footnote, point link.
   ========================================================= */

/* ---------- Trust strip — adapts the homepage .trust pattern (eyebrow lead-in
   over a row of logo-style cells with hairline dividers) for per-service
   highlights. Inherits .trust / .trust-head / .trust-logo from home.css,
   then overrides for variable item count and longer text labels. */
.cc-home.cc-services .cc-svc-trust{
  margin:0 auto 40px;max-width:920px;
  padding:28px 0;
  /* Remove the home version's bottom border — the divider rules between
     this strip and the numbered points below come from .why-sub-point itself. */
  border-bottom:0;
  background:transparent;
}
.cc-home.cc-services .cc-svc-trust .trust-head{
  margin-bottom:18px;
}
/* Auto-fit so any number of trust items (3–6) flows naturally. */
.cc-home.cc-services .cc-svc-trust .trust-grid{
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:0;
}
/* Labels here are sentences (e.g. "97% Client Satisfaction Rate"), not
   acronyms — soften the home version's giant 26px mark into editorial
   text that wraps cleanly across two lines. */
.cc-home.cc-services .cc-svc-trust .trust-logo{
  height:auto;min-height:64px;
  padding:10px 16px;
  font-size:14px;font-weight:700;letter-spacing:-.005em;
  line-height:1.35;color:var(--ink);
  text-wrap:balance;
}
.cc-home.cc-services .cc-svc-trust .trust-logo:hover{
  color:var(--green-700);transform:none;
}

@media (max-width:760px){
  .cc-home.cc-services .cc-svc-trust{padding:22px 0;margin-bottom:32px}
  .cc-home.cc-services .cc-svc-trust .trust-grid{
    grid-template-columns:repeat(2,1fr);
  }
  /* Drop the right-border on the last item of each row so the grid edge
     stays clean when items wrap. */
  .cc-home.cc-services .cc-svc-trust .trust-logo:nth-child(2n){border-right:0}
  .cc-home.cc-services .cc-svc-trust .trust-logo{font-size:13px;padding:10px 12px}
}
@media (max-width:480px){
  .cc-home.cc-services .cc-svc-trust .trust-grid{grid-template-columns:1fr}
  .cc-home.cc-services .cc-svc-trust .trust-logo{
    border-right:0;border-bottom:1px solid var(--line);
  }
  .cc-home.cc-services .cc-svc-trust .trust-logo:last-child{border-bottom:0}
}

/* ---------- Numbered point with a 200px media banner on top ----------
   Overrides the .cc-why-subpage two-column grid so each point becomes
   media-on-top + number/body row below, matching the cinematic rhythm. */
.cc-home.cc-services .why-sub-point{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "media media"
    "num   body";
  column-gap:28px;row-gap:0;
  padding:36px 0;
  border-top:1px solid var(--line);
}
.cc-home.cc-services .why-sub-point:first-child{border-top:0;padding-top:8px}
.cc-home.cc-services .why-sub-point:last-child{padding-bottom:8px}

.cc-home.cc-services .why-sub-point-media{
  grid-area:media;
  position:relative;
  width:100%;height:200px;
  border-radius:18px;overflow:hidden;
  background-color:#f3f9f4;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 12px 32px rgba(15,74,48,.10), 0 2px 6px rgba(0,0,0,.04);
  margin-bottom:28px;
}
.cc-home.cc-services .why-sub-point-media.is-placeholder{
  background:linear-gradient(140deg,#f3f9f4 0%,#e9f3eb 45%,#fff7ec 100%);
  display:grid;place-items:center;
  border:1px solid var(--line);
  box-shadow:none;
}
.cc-home.cc-services .why-sub-point-media-frame{
  position:absolute;inset:14px;
  border-radius:14px;
  border:1.5px dashed rgba(37,140,94,.32);
  display:grid;place-items:center;overflow:hidden;
}
.cc-home.cc-services .why-sub-point-media-pattern{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(37,140,94,.14), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(248,189,57,.18), transparent 50%),
    radial-gradient(rgba(37,140,94,.08) 1px, transparent 1px);
  background-size:auto, auto, 22px 22px;
}
.cc-home.cc-services .why-sub-point-media-label{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(37,140,94,.20);
  border-radius:999px;
  color:var(--green-700);
  font-size:12px;font-weight:600;letter-spacing:.4px;
  backdrop-filter:blur(4px);
  box-shadow:0 4px 12px rgba(15,74,48,.08);
}

.cc-home.cc-services .why-sub-point > .why-sub-point-num{grid-area:num}
.cc-home.cc-services .why-sub-point > .why-sub-point-body{grid-area:body}

@media (max-width:640px){
  .cc-home.cc-services .why-sub-point{
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "num"
      "body";
    row-gap:10px;padding:28px 0;
  }
  .cc-home.cc-services .why-sub-point-media{height:160px;margin-bottom:14px;border-radius:14px}
  .cc-home.cc-services .why-sub-point-num{font-size:42px}
}

/* ---------- Per-point conditions list ---------- */
.cc-home.cc-services .why-sub-point-conditions{
  margin-top:18px;padding-top:18px;border-top:1px dashed var(--line);
}
.cc-home.cc-services .why-sub-point-cond-label{
  font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--green-700);margin:0 0 10px;
}
.cc-home.cc-services .why-sub-point-cond-list{
  list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:1fr 1fr;gap:8px 18px;
}
.cc-home.cc-services .why-sub-point-cond-list li{
  display:flex;gap:8px;align-items:flex-start;
  font-size:14px;line-height:1.5;color:var(--ink-2);
}
.cc-home.cc-services .why-sub-point-cond-list svg{
  color:var(--green-600);flex-shrink:0;margin-top:3px;
}
@media (max-width:640px){
  .cc-home.cc-services .why-sub-point-cond-list{grid-template-columns:1fr}
}

/* ---------- Per-point footnote ---------- */
.cc-home.cc-services .why-sub-point-note{
  margin-top:14px;
  font-size:13.5px;line-height:1.55;color:var(--muted);
  background:var(--bg-warm);
  border-left:3px solid var(--orange-500);
  padding:12px 16px;border-radius:8px;
}

/* ---------- Per-point trailing link ---------- */
.cc-home.cc-services .why-sub-point-link{
  margin-top:16px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--green-700);letter-spacing:.01em;
  transition:color .15s, gap .15s;
}
.cc-home.cc-services .why-sub-point-link:hover{color:var(--orange-600);gap:10px}
.cc-home.cc-services .why-sub-point-link svg{flex-shrink:0}

/* ---------- Fallback wrapper for legacy Elementor content ---------- */
.cc-home.cc-services .why-sub-fallback{
  max-width:920px;margin:0 auto;
}