/* Explore section — selected illustrated path assets, September 2026.
   The approved artwork is packed into one 2x2 WebP sprite and assembled at runtime
   from four text-safe base64 parts in assets/canonical/path-illustrations/. */

.path-card{
  min-height:485px;
  padding:14px 16px 18px;
}

.path-art{
  display:block;
  width:min(220px,100%);
  aspect-ratio:4/3;
  flex:0 0 auto;
  margin:0 auto 14px;
  border-radius:11px;
  border:1px solid rgba(8,47,80,.13);
  background-color:rgba(255,250,240,.72);
  background-repeat:no-repeat;
  background-size:200% 200%;
  box-shadow:0 6px 14px rgba(48,34,20,.12);
  overflow:hidden;
}

.path-art-predictive{background-position:left top}
.path-art-persuasive{background-position:right top}
.path-art-advanced{background-position:left bottom}
.path-art-workbench{background-position:right bottom}

/* A subtle frame keeps the richer scenes feeling like objects mounted on the card,
   rather than replacing the card's established color identity. */
.path-blue .path-art{outline:3px solid rgba(93,159,215,.12);outline-offset:2px}
.path-peach .path-art{outline:3px solid rgba(241,90,36,.09);outline-offset:2px}
.path-advanced .path-art{outline:3px solid rgba(182,120,36,.14);outline-offset:2px}
.path-green .path-art{outline:3px solid rgba(76,130,82,.10);outline-offset:2px}

@media(max-width:1180px){
  .path-card{
    min-height:330px;
    grid-template-columns:240px 1fr;
    gap:18px;
    align-items:center;
  }
  .path-art{width:220px;margin:0 auto}
}

@media(max-width:820px){
  .path-card{
    min-height:280px;
    grid-template-columns:220px 1fr;
    gap:18px;
  }
  .path-art{width:210px}
}

@media(max-width:520px){
  .path-card{display:flex;min-height:0;padding:13px 15px 16px}
  .path-art{width:min(220px,86%);margin:0 auto 12px}
}