/* ============================================================
   /services and /industries directory pages (include/directory-page.php)
   Uses the .gpf tokens from css/portfolio.css, so the dark-mode
   toggle works the same as on the portfolio pages.
   ============================================================ */

.gdir-hero{ padding:26px 0 30px; text-align:center; }
.gdir-hero .gsd-crumbs ol{ justify-content:center; }
.gdir-eyebrow{ display:inline-block; color:var(--g-blue); font-weight:800; letter-spacing:2.5px; text-transform:uppercase; font-size:12.5px;
  padding:7px 16px; border-radius:40px; background:var(--g-card); border:1px solid var(--g-line); }
.gdir-hero h1{ font-size:clamp(32px,5vw,56px); font-weight:800; letter-spacing:-.6px; margin:14px 0 12px; color:var(--g-ink); }
.gdir-hero .gsd-lead{ margin:0 auto; max-width:720px; }
.gdir-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0 22px; }
.gdir-stats span{ padding:9px 16px; border-radius:30px; background:var(--g-card-solid); border:1px solid var(--g-line); font-size:14px; font-weight:600; color:var(--g-ink-2); }
.gdir-stats b{ color:var(--g-blue); font-weight:800; }
.gdir-search{ max-width:620px; margin:0 auto 18px; }
.gdir-jump{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:1080px; margin:0 auto; }
.gdir-jump[hidden]{ display:none; }
.gdir-jump a{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:30px; font-size:13.5px; font-weight:700;
  color:var(--g-ink-2); background:var(--g-card); border:1px solid var(--g-line); transition:.2s; }
.gdir-jump a span{ font-size:11.5px; font-weight:800; color:var(--g-blue); background:var(--g-bg); padding:1px 7px; border-radius:20px; }
.gdir-jump a:hover, .gdir-jump a:focus{ color:var(--g-blue); border-color:var(--g-blue); }

.gdir-body{ padding:10px 20px 30px; }
.gdir-empty{ text-align:center; color:var(--g-muted); font-size:16px; padding:30px 0; }
.gdir-empty[hidden]{ display:none; }
.gdir-group{ padding:34px 0 6px; scroll-margin-top:90px; }
.gdir-group[hidden]{ display:none; }
.gdir-group-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.gdir-ic{ flex:none; width:50px; height:50px; border-radius:15px; display:grid; place-items:center; color:#fff; font-size:20px; background:var(--g-brand);
  box-shadow:0 10px 22px rgba(11,140,255,.25); }
.gdir-group-head h2{ font-size:clamp(21px,2.6vw,27px); font-weight:800; margin:0 0 2px; color:var(--g-ink); }
.gdir-group-head p{ margin:0; color:var(--g-muted); font-size:14.5px; }

.gdir-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.gpf a.gdir-card, .gpf a.gdir-card:hover, .gpf a.gdir-card:focus{ color:var(--g-ink); text-decoration:none; }
.gdir-card{ position:relative; display:flex; flex-direction:column; gap:4px; padding:16px 48px 16px 18px; border-radius:16px; background:var(--g-card-solid);
  border:1px solid var(--g-line); box-shadow:var(--g-shadow-sm); transition:transform .25s, box-shadow .25s, border-color .25s; }
.gdir-card[hidden]{ display:none; }
.gdir-card:hover, .gdir-card:focus-visible{ transform:translateY(-3px); box-shadow:var(--g-shadow); border-color:rgba(11,140,255,.45); }
.gdir-card:focus-visible{ outline:3px solid var(--g-blue); outline-offset:2px; }
.gdir-name{ font-size:15.5px; font-weight:800; line-height:1.3; color:var(--g-ink); }
.gdir-desc{ font-size:13.5px; line-height:1.5; color:var(--g-muted); }
.gdir-go{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; color:var(--g-blue); background:var(--g-bg); transition:.25s; }
.gdir-card:hover .gdir-go{ color:#fff; background:var(--g-blue); }

@media (max-width:640px){
  .gdir-hero{ padding-top:14px; }
  .gdir-jump{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
  .gdir-jump::-webkit-scrollbar{ display:none; }
  .gdir-jump a{ white-space:nowrap; }
  .gdir-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){ .gdir-card, .gdir-card:hover{ transition:none; transform:none; } }