/* Section styles shared by playground, gear, travel and countries templates */

.section-title{
  font-family:var(--as-font-display);font-weight:var(--as-display-weight);letter-spacing:var(--as-display-tracking);
  text-transform:var(--as-display-case);font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.05;margin:0 0 1rem;
}

.page-content-band{margin:clamp(2.5rem,6vw,4rem) auto 0}

/* Playground vinyl shelf */
.playground-shell{margin-top:.5rem}
.page-content-band{container-type:inline-size}
.vinyl-shelf{
  display:grid;grid-template-columns:1fr minmax(300px,380px);gap:1.75rem;align-items:stretch;
  margin-top:1.5rem;
}
@media(max-width:900px){.vinyl-shelf{grid-template-columns:1fr}}
.shelf-panel{
  background:linear-gradient(180deg,color-mix(in srgb,var(--as-text) 8%,transparent),color-mix(in srgb,var(--as-text) 4%,transparent));
  border-radius:18px;padding:1.25rem;border:1px solid color-mix(in srgb,var(--as-text) 10%,transparent);
  min-height:360px;
}
.shelf-wood{
  background:
    repeating-linear-gradient(90deg,transparent,transparent 3px,color-mix(in srgb,var(--as-text) 4%,transparent) 3px,color-mix(in srgb,var(--as-text) 4%,transparent) 4px),
    linear-gradient(180deg,#3d2817,#2a1810);
  border-radius:14px;padding:1rem 1rem 1.75rem;box-shadow:inset 0 4px 12px rgba(0,0,0,.4);
}
.shelf-stage{
  display:flex;gap:.65rem;overflow-x:auto;padding:.5rem 0 1rem;scroll-snap-type:x mandatory;
  min-height:200px;align-items:flex-end;
}
.shelf-stage::-webkit-scrollbar{height:6px}
.shelf-stage::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
.media-item{
  flex:0 0 auto;scroll-snap-align:center;
  width:130px;height:130px;border-radius:50%;
  background:linear-gradient(145deg,#444,#111);
  border:3px solid #555;position:relative;cursor:pointer;
  transition:transform .25s ease, border-color .25s, box-shadow .25s;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.media-item.cassette{width:150px;height:96px;border-radius:8px}
.media-item.active{
  transform:translateY(-10px) scale(1.05);
  border-color:var(--as-accent);
  box-shadow:0 16px 40px color-mix(in srgb,var(--as-accent) 35%,transparent);
}
.media-item-label{
  position:absolute;inset:auto 0 0 0;padding:.35rem .4rem;font-size:.62rem;text-align:center;
  background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;line-height:1.2;
  border-radius:0 0 50% 50%;
}
.media-item.cassette .media-item-label{border-radius:0 0 8px 8px}
[data-track-detail]{
  background:color-mix(in srgb,var(--as-text) 6%,transparent);
  border-radius:18px;padding:1.35rem;border:1px solid color-mix(in srgb,var(--as-text) 10%,transparent);
}
[data-track-detail] h2{
  font-family:var(--as-font-display,Syne,system-ui,sans-serif);
  font-size:1.25rem;margin:0 0 .75rem;
}
.track-desc{font-size:.92rem;opacity:.9;line-height:1.55;margin:.75rem 0}
.track-desc p{margin:0 0 .65em}

.playground-list--cards{display:grid;gap:.5rem}
.playground-list--cards button{
  text-align:left;padding:.85rem 1rem;border-radius:12px;
  background:color-mix(in srgb,var(--as-text) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--as-text) 12%,transparent);
  color:inherit;cursor:pointer;transition:border-color .15s, transform .15s;
  font-size:.95rem;
}
.playground-list--cards button:hover{border-color:var(--as-accent);transform:translateX(4px)}

.countries-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.85rem;
}
.country-card{
  display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;
  border-radius:14px;background:color-mix(in srgb,var(--as-text) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--as-text) 10%,transparent);
  transition:transform .15s, border-color .15s;
}
.country-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--as-accent) 40%,transparent)}
.country-card .country-flag{width:40px;height:28px;border-radius:4px;flex-shrink:0}
.country-card strong{display:block;font-size:.95rem}
.country-card span{font-size:.82rem;opacity:.8}

.band-article .prose img{border-radius:14px;margin:1.25rem 0;box-shadow:0 16px 40px rgba(0,0,0,.25)}

.travel-feature .prose h1:first-child{display:none}
.page-content-band .travel-feature{margin-top:0}
.travel-local-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}