/* ============================================================
   Portfolio strip (include/portfolio-strip.php)
   "Website, Apps and Software Projects": left-aligned heading, underline filter
   tabs and clean image-and-title cards in an auto-scrolling row.
   Self-contained: explicit colours so the site-wide rules in
   main.css (a:hover{color:#fff}, bare h2/p/img styles) and the
   per-page <style> blocks on service pages can't restyle it.
   ============================================================ */

.gps{ --gps-ink:#0a1633; --gps-muted:#5b6a86; --gps-line:#e2eaf6; --gps-card:#fff; --gps-blue:#0b8cff; --gps-navy:#002357;
  align-self:stretch; width:100%; /* full width even where the page makes <body> a centred flex column */
  position:relative; padding:70px 0 60px; overflow:hidden; color:var(--gps-ink); text-align:left;
  background:radial-gradient(900px 380px at 12% 0%, #e7f0ff 0%, transparent 60%), radial-gradient(800px 360px at 100% 100%, #eaf8ff 0%, transparent 60%), #f7faff;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif; }
.gps *, .gps *::before, .gps *::after{ box-sizing:border-box; }
/* Service pages ship blanket rules like p{text-align:center} and h2{text-align:center};
   set alignment on the elements themselves so inheritance can't be overridden. */
.gps .gps-head, .gps .gps-head p, .gps .gps-head h2, .gps .gps-body, .gps .gps-body span{ text-align:left; }

.gps-head{ max-width:1240px; margin:0 auto 22px; padding:0 24px; }
.gps .gps-eyebrow{ margin:0; color:#ff7b06; font-size:13px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; }
.gps h2{ margin:8px 0 10px; padding:0; font-size:clamp(28px,3.8vw,44px); line-height:1.12; font-weight:800; color:var(--gps-ink); letter-spacing:-.6px; text-align:left; }
.gps .gps-lead{ margin:0; color:var(--gps-muted); font-size:16px; line-height:1.7; max-width:720px; }

.gps-bar{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:26px; border-bottom:1px solid var(--gps-line); }
.gps-tabs{ display:flex; gap:6px 34px; flex-wrap:wrap; }
.gps .gps-tab{ position:relative; appearance:none; background:none; border:0; border-radius:0; margin:0; padding:10px 2px 14px; cursor:pointer; font:inherit;
  font-size:17px; font-weight:600; color:var(--gps-muted); transition:color .2s; box-shadow:none; transform:none;
  /* service pages style every <button> at width:100% */
  width:auto !important; min-width:0; max-width:none; flex:0 0 auto !important; display:inline-block; line-height:1.3; letter-spacing:normal; text-transform:none; }
.gps .gps-tab::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:linear-gradient(90deg,#002357,#0b8cff);
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.gps .gps-tab:hover{ color:var(--gps-ink); transform:none; box-shadow:none; }
.gps .gps-tab.is-active{ color:var(--gps-ink); }
.gps .gps-tab.is-active::after{ transform:scaleX(1); }
.gps .gps-tab:focus-visible{ outline:3px solid var(--gps-blue); outline-offset:2px; border-radius:6px; }
.gps a.gps-all, .gps a.gps-all:hover, .gps a.gps-all:focus{ color:var(--gps-blue); text-decoration:none; }
.gps-all{ display:inline-flex; align-items:center; gap:8px; padding:0 0 14px; font-weight:800; font-size:15px; transition:gap .2s; }
.gps-all:hover{ gap:12px; }

.gps-viewport{ position:relative; max-width:1440px; margin:0 auto; }
.gps-track{ display:flex; gap:26px; overflow-x:auto; overflow-y:hidden; padding:18px 28px 34px; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
.gps-track::-webkit-scrollbar{ display:none; }
.gps-track:focus-visible{ outline:3px solid var(--gps-blue); outline-offset:-3px; border-radius:12px; }
.gps-track.is-dragging{ cursor:grabbing; user-select:none; }

.gps a.gps-card, .gps a.gps-card:hover, .gps a.gps-card:focus{ color:var(--gps-ink); text-decoration:none; }
.gps-card{ flex:0 0 340px; display:flex; flex-direction:column; background:var(--gps-card); border-radius:24px; overflow:hidden;
  box-shadow:0 14px 34px rgba(10,22,51,.09); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.gps-card[hidden]{ display:none; }
.gps-card:hover, .gps-card:focus-visible{ transform:translateY(-8px); box-shadow:0 26px 52px rgba(10,22,51,.16); }
.gps-card:focus-visible{ outline:3px solid var(--gps-blue); outline-offset:3px; }
/* 3:2 matches the project screenshots (1200x800), so the whole image shows with no side cropping */
.gps-shot{ position:relative; display:block; aspect-ratio:3/2; overflow:hidden; background:#eaf1fb; }
.gps .gps-shot img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; margin:0; border-radius:0; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.gps-card:hover .gps-shot img{ transform:scale(1.03); }
.gps-body{ display:flex; flex-direction:column; gap:8px; padding:22px 24px 24px; }
.gps-name{ display:block; font-size:21px; font-weight:600; line-height:1.3; color:var(--gps-ink); letter-spacing:-.2px; }
.gps-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gps-grp{ font-size:13px; font-weight:600; color:var(--gps-muted); }
.gps-go{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:15px; color:var(--gps-blue); background:#eef5ff;
  transition:background .25s, color .25s, transform .25s; }
.gps-card:hover .gps-go{ background:var(--gps-blue); color:#fff; transform:translateX(3px); }

.gps-nav{ position:absolute; top:calc(50% - 40px); z-index:3; width:48px; height:48px; display:grid; place-items:center; padding:0; border-radius:50%;
  border:1px solid var(--gps-line); background:#fff; color:var(--gps-navy); cursor:pointer; box-shadow:0 10px 24px rgba(10,22,51,.14);
  transition:transform .2s, background .2s, color .2s; }
.gps-nav:hover{ background:var(--gps-navy); color:#fff; transform:scale(1.06); }
.gps-nav:focus-visible{ outline:3px solid var(--gps-blue); outline-offset:2px; }
.gps-prev{ left:12px; }
.gps-next{ right:12px; }

/* Dark theme on portfolio pages (body.gpf[data-theme=dark]) */
.gpf[data-theme="dark"] .gps{ --gps-ink:#eaf1ff; --gps-muted:#8aa0c4; --gps-line:#1e2c47; --gps-card:#111a2e; --gps-blue:#5cb3ff;
  background:radial-gradient(900px 380px at 15% 0%, #10233f 0%, transparent 60%), #070c18; }
.gpf[data-theme="dark"] .gps-nav{ background:#111a2e; color:#eaf1ff; }
.gpf[data-theme="dark"] .gps-go{ background:#16233d; }

@media (max-width:640px){
  .gps{ padding:52px 0 44px; }
  .gps-head{ padding:0 16px; }
  .gps-tabs{ gap:4px 20px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .gps-tabs::-webkit-scrollbar{ display:none; }
  .gps .gps-tab{ font-size:15px; white-space:nowrap; }
  .gps-all{ display:none; }
  .gps-card{ flex-basis:80vw; max-width:320px; }
  .gps-name{ font-size:18px; }
  .gps-track{ gap:16px; padding:14px 16px 28px; -webkit-mask-image:none; mask-image:none; }
  .gps-nav{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .gps-track{ scroll-snap-type:x mandatory; }
  .gps-card{ scroll-snap-align:start; transition:none; }
  .gps-card:hover{ transform:none; }
  .gps-shot img{ transition:none; }
}