/* Web Design platform grid (template-parts/svc2-platform-grid.php, config platform_map; Option E, Mike 2026-09-29).
   The 2019 mosaic rebuilt in HTML/CSS: laptop cross-fading through recent builds in the middle, two perspective planes of
   linked platform tiles either side (10 platforms with live pages). <= 900px: device on top, tiles flat (5 cols, 2 on phones).
   Motion: laptop cross-fade 200 ms, tile hover lift/border 150 ms, nothing hidden on load; reduced motion drops both.
   Hover flicker fix (Mike, WooCommerce): the <a> never moves (fixed hit area); only the inner .svc2-pg__card lifts, and
   the planes are flat single transforms (no preserve-3d), so hit-testing matches what is drawn.
   Replaces svc2-pmap.css (same enqueue handle, so cs2-perf's async component list still applies). */
.svc2-pmap{background:#fff}
.svc2-pmap.sv2-sec{padding-bottom:64px}
.ssub-rv+.svc2-pmap.sv2-sec{padding-top:0;margin-top:-44px}
.svc2-pmap .ssub-head{margin-bottom:28px}

.svc2-pg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:clamp(28px,3.4vw,56px);max-width:1240px;margin:8px auto 0}
.svc2-pg__side{perspective:760px;min-width:0}
.svc2-pg__plane{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.svc2-pg__side--l .svc2-pg__plane{transform:rotateY(28deg)}
.svc2-pg__side--r .svc2-pg__plane{transform:rotateY(-28deg)}
.svc2-pg__li{grid-column:span 2;margin:0;padding:0;min-width:0}
.svc2-pg__li:nth-child(4){grid-column:2 / span 2} /* 3 + 2, second row centred */

.svc2-pg__tile{display:block;aspect-ratio:1/1;border-radius:14px;text-decoration:none}
.svc2-pg__card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;box-sizing:border-box;padding:10px 6px;background:#fff;border:1px solid var(--ss-line);border-radius:14px;box-shadow:0 10px 24px rgba(var(--ss-navy-deep-rgb),.08);pointer-events:none;transition:transform .15s ease-out,border-color .15s,box-shadow .15s}
.svc2-pg__tile:focus-visible{outline:3px solid var(--ss-gold);outline-offset:2px}
.svc2-pg__mark{display:block;width:42%;height:auto;max-height:44px;object-fit:contain}
.svc2-pg__tile.is-wide .svc2-pg__mark{width:66%;max-height:26px}
.svc2-pg__mark[src*="/tile/"]{width:64%;max-height:64px;margin:-8px 0} /* round tile marks (WooCommerce) carry their own white disc padding */
.svc2-pg__name{font-size:13.5px;font-weight:700;line-height:1.2;color:var(--ss-navy-deep);text-align:center}

/* device: a modern laptop drawn in CSS (no stock PNG); the lid is the link to the current build's case */
.svc2-pg__dev{margin:0;min-width:0;display:grid;justify-items:center}
.svc2-pg__lid{display:block;position:relative;width:88%;box-sizing:border-box;background:#0b1722;border-radius:16px 16px 4px 4px;padding:2.4% 2.4% 3.2%;box-shadow:0 30px 60px rgba(var(--ss-navy-deep-rgb),.22),inset 0 0 0 1px rgba(255,255,255,.08)}
.svc2-pg__lid::before{content:"";position:absolute;top:1.1%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2a3a4a;pointer-events:none}
.svc2-pg__lid:focus-visible{outline:3px solid var(--ss-gold);outline-offset:4px}
.svc2-pg__screen{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#e6ebf0}
.svc2-pg__shot{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .2s linear}
.svc2-pg__shot.is-on{opacity:1}
.svc2-pg__base{display:block;position:relative;width:100%;height:16px;background:linear-gradient(180deg,#eef1f4 0%,#c9d2db 70%,#aab6c2 100%);border-radius:2px 2px 16px 16px / 2px 2px 12px 12px;box-shadow:0 12px 20px rgba(var(--ss-navy-deep-rgb),.12);pointer-events:none}
.svc2-pg__base::before{content:"";position:absolute;top:0;left:50%;width:15%;height:6px;transform:translateX(-50%);background:#aab6c2;border-radius:0 0 8px 8px}

@media (max-width:1180px) and (min-width:901px){
	.svc2-pg{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:24px}
	.svc2-pg__plane{gap:10px}
	.svc2-pg__name{font-size:12px}
}
@media (max-width:900px){
	.svc2-pg{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:760px}
	.svc2-pg__dev{grid-column:1/-1;order:-1;margin-bottom:16px}
	.svc2-pg__lid{width:90%}
	.svc2-pg__side,.svc2-pg__plane{display:contents}
	.svc2-pg__side--l .svc2-pg__plane,.svc2-pg__side--r .svc2-pg__plane{transform:none}
	.svc2-pg__li,.svc2-pg__li:nth-child(4){grid-column:auto}
}
@media (max-width:760px){.svc2-pmap.sv2-sec{padding-bottom:44px}.ssub-rv+.svc2-pmap.sv2-sec{padding-top:0;margin-top:-20px}}
@media (max-width:600px){
	.svc2-pg{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	.svc2-pg__lid{width:100%;border-radius:12px 12px 3px 3px}
	.svc2-pg__base{height:12px}
	.svc2-pg__tile{aspect-ratio:auto;min-height:60px;border-radius:12px}
	.svc2-pg__card{flex-direction:row;justify-content:flex-start;min-height:60px;padding:10px 12px;gap:10px;border-radius:12px}
	.svc2-pg__mark{width:28px;height:28px;max-height:none;flex:none}
	.svc2-pg__tile.is-wide .svc2-pg__mark{width:40px;height:20px;max-height:none}
	.svc2-pg__mark[src*="/tile/"]{width:40px;height:40px;margin:-6px}
	.svc2-pg__name{font-size:14.5px;text-align:left}
}
@media (prefers-reduced-motion:reduce){
	.svc2-pg__card,.svc2-pg__shot{transition:none}
	}