/*
 * Services listing (page-services.php) and the starter service page
 * (single-service.php). Loaded only there, after inner.css (page hero,
 * breadcrumb, CTA box).
 *
 * Built on main.css tokens and patterns: the service card hover follows the
 * homepage .svc cards (white → navy, circular arrow turns coral and rotates),
 * photo zoom follows the blog cards, the navy "why" band reuses the grid
 * texture of the About stats band. Same breakpoints as main.css
 * (1100 / 860 / 600).
 *
 * Section rhythm: navy hero → mist service grid → navy highlights → CTA box
 * → navy footer.
 */

/* ---------- Service card (template-parts/components/service-card.php) ---------- */
.sv-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.sv-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sv-card:hover, .sv-card:focus-within{ transform:translateY(-6px); box-shadow:10px 4px 60px rgba(161,161,161,.28); }
.sv-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--navy); }
.sv-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.sv-card:hover .sv-card__media img, .sv-card:focus-within .sv-card__media img{ transform:scale(1.06); }
.sv-card__body{ position:relative; flex:1 1 auto; display:flex; flex-direction:column; padding:0 32px 32px; transition:background .35s var(--ease); }
.sv-card--no-img .sv-card__body{ padding-top:34px; }
.sv-card__ico{
  position:relative; z-index:1;
  width:72px; height:72px; margin-top:-36px;
  display:grid; place-items:center;
  border-radius:50%; background:#fff; border:1px solid var(--line); color:var(--navy);
  box-shadow:0 10px 30px -12px rgba(7,40,58,.35);
  transition:background .35s, color .35s, border-color .35s;
}
.sv-card--no-img .sv-card__ico{ margin-top:0; background:var(--mist); border-color:transparent; box-shadow:none; }
.sv-card__ico svg{ width:36px; height:36px; }
.sv-card__title{ margin-top:22px; font-size:1.3rem; font-weight:600; line-height:1.3; transition:color .35s; }
.sv-card--no-img .sv-card__title{ margin-top:30px; }
/* The title link covers the whole card, so the card is one link. */
.sv-card__title a::after{ content:""; position:absolute; inset:0; z-index:2; }
.sv-card__title a:focus-visible{ outline:none; }
.sv-card:focus-within{ outline:2px solid var(--cyan); outline-offset:3px; }
.sv-card p{ margin-top:10px; font-size:.96rem; line-height:1.65; transition:color .35s; }
.sv-card__more{ display:inline-flex; align-items:center; gap:12px; margin-top:auto; padding-top:24px; font-weight:600; color:var(--navy); transition:color .35s; }
.sv-card__more svg{
  width:34px; height:34px; padding:10px; flex:none;
  border-radius:50%; background:var(--navy); color:#fff;
  transition:background .3s, transform .3s;
}
.sv-card:hover .sv-card__body, .sv-card:focus-within .sv-card__body{ background:var(--navy); }
.sv-card:hover .sv-card__ico, .sv-card:focus-within .sv-card__ico{ background:var(--navy-3); border-color:var(--navy-3); color:#fff; }
.sv-card:hover .sv-card__title, .sv-card:focus-within .sv-card__title{ color:#fff; }
.sv-card:hover p, .sv-card:focus-within p{ color:rgba(255,255,255,.8); }
.sv-card:hover .sv-card__more, .sv-card:focus-within .sv-card__more{ color:#fff; }
.sv-card:hover .sv-card__more svg, .sv-card:focus-within .sv-card__more svg{ background:var(--coral); transform:rotate(45deg); }

/* ---------- 2. Services listing ---------- */
.sv-list{ background:var(--mist); }
.sv-list .sv-card{ border-color:transparent; }
.sv-empty{ text-align:center; font-size:1.05rem; }

/* ---------- 3. Why choose Futuretec (navy band) ---------- */
.sv-why{ position:relative; overflow:hidden; padding:110px 0; background:var(--navy); }
.sv-why__grid{
  position:absolute; right:0; top:0; width:300px; height:100%;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:linear-gradient(270deg, #000, transparent); mask-image:linear-gradient(270deg, #000, transparent);
  pointer-events:none;
}
.sv-why .wrap{ position:relative; }
.sv-why__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 80px; align-items:end; margin-bottom:64px; }
.sv-why__head .title{ max-width:520px; }
.sv-why__head > p{ font-size:1.05rem; line-height:1.75; color:rgba(255,255,255,.85); }
.sv-why__points{ display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.12); }
.sv-why__points li{ position:relative; padding:40px 32px 8px; border-left:1px solid rgba(255,255,255,.12); }
.sv-why__points li:first-child{ padding-left:0; border-left:0; }
.sv-why__points li::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--coral);
  transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--ease);
}
.sv-why__points li:hover::before{ transform:scaleX(1); }
.sv-why__n{ position:absolute; right:32px; top:42px; font-family:var(--ff-head); font-size:.95rem; font-weight:600; color:var(--coral-2); }
.sv-why__ico{ display:block; width:52px; height:52px; color:var(--sky); }
.sv-why__ico svg{ width:100%; height:100%; }
.sv-why__points h3{ margin-top:26px; font-size:1.25rem; font-weight:600; line-height:1.3; color:#fff; }
.sv-why__points p{ margin-top:10px; font-size:.95rem; line-height:1.65; color:rgba(255,255,255,.78); }

/* The CTA box has no top padding (it normally follows a light section);
   after this navy band it needs space so the two navy blocks don't merge. */
.sv-why + .cta-box{ padding-top:120px; }

/* ---------- Starter service page (single-service.php) ---------- */
.sv-detail__cta{ max-width:820px; margin:32px auto 0; }
.sv-feats{ background:var(--mist); }
.sv-feats__grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2px; }
.sv-feat__n{ position:absolute; right:32px; top:34px; font-family:var(--ff-head); font-size:.95rem; font-weight:600; color:var(--coral); transition:color .35s; }
.sv-feat:hover .sv-feat__n{ color:var(--coral-2); }
.sv-feat h3{ margin-top:36px; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .sv-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sv-why__head{ grid-template-columns:1fr; margin-bottom:48px; }
  .sv-why__points{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:16px; }
  .sv-why__points li:nth-child(odd){ padding-left:0; border-left:0; }
  .sv-feats__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:860px){
  .sv-why{ padding:88px 0; }
  .sv-why + .cta-box{ padding-top:88px; }
}

@media (max-width:600px){
  .sv-grid{ grid-template-columns:1fr; gap:20px; }
  .sv-card__body{ padding:0 24px 26px; }
  .sv-card--no-img .sv-card__body{ padding-top:28px; }
  .sv-why__points{ grid-template-columns:1fr; row-gap:0; }
  .sv-why__points li{ padding:32px 0 24px; border-left:0; }
  .sv-why__points li + li{ border-top:1px solid rgba(255,255,255,.12); }
  .sv-why__n{ right:0; top:34px; }
  .sv-feats__grid{ grid-template-columns:1fr; }
}