/* doors.css — the big art doors from the Kid Zone front gate, shared park-wide.
   Layout only: each page keeps its own palette. Tune with the custom props:
   --doors-maxw, --doors-band (label gradient), --doors-chip (corner tag),
   --doors-paper (tile back), --doors-focus (focus ring). */

.sw-doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  max-width:var(--doors-maxw,1100px);margin:10px auto;padding:0 clamp(12px,3vw,20px)}
@media(min-width:720px){.sw-doors.cols-3{grid-template-columns:repeat(3,1fr)}}
/* Sections that already pad their content (e.g. the games hub) shouldn't double up. */
.party-games .sw-doors{padding:0}

.sw-door{position:relative;display:block;border:0;padding:0;border-radius:24px;overflow:hidden;
  cursor:pointer;text-decoration:none;color:#fff;background:var(--doors-paper,#241a10);
  box-shadow:var(--doors-shadow,0 14px 34px -18px rgba(0,0,0,.55));
  outline:5px solid rgba(255,255,255,.9);outline-offset:-5px;text-align:left;
  transition:transform .15s ease}
.sw-door:hover,.sw-door:focus-visible{transform:translateY(-3px) scale(1.01)}
.sw-door:focus-visible{outline-color:var(--doors-focus,#ffd166)}
.sw-door:active{transform:scale(.98)}
.sw-door>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sw-door.wide{grid-column:1/-1}
.sw-door.wide>img{aspect-ratio:21/9}
/* Art-free door (e.g. the audio park — its art is sound). Night-sky gradient
   stands in for the poster; ::before holds the tile's shape. */
.sw-door.noimg{background:
  radial-gradient(circle at 82% 18%, rgba(255,209,102,.35), transparent 36%),
  radial-gradient(circle at 15% 80%, rgba(90,110,180,.45), transparent 50%),
  linear-gradient(160deg, #1c2440, #12151c)}
.sw-door.noimg::before{content:"";display:block;aspect-ratio:4/3}
.sw-door.wide.noimg::before{aspect-ratio:21/9}
@media(max-width:480px){.sw-door.wide.noimg::before{aspect-ratio:16/7}}

.sw-door .lbl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;padding:26px 14px 10px;color:#fff;
  background:linear-gradient(180deg,transparent,var(--doors-band,rgba(24,15,7,.88)) 34%)}
.sw-door .lbl .em{font-size:1.7rem;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.sw-door .lbl strong{font:900 clamp(1.05rem,4.6vw,1.5rem)/1.05 "Outfit",system-ui,sans-serif;
  text-shadow:0 2px 8px rgba(0,0,0,.45)}
.sw-door .tag{position:absolute;top:10px;left:10px;font:800 .68rem/1 "Outfit",sans-serif;
  letter-spacing:.06em;background:var(--doors-chip,rgba(24,15,7,.72));color:#fff;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:6px 10px;white-space:nowrap}

/* A door that hosts links instead of being one (e.g. Sterling TV's two channels). */
.sw-door.hub{cursor:default}
.sw-door.hub:hover{transform:none}
.sw-door .acts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.sw-door .acts a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:38px;
  padding:9px 14px;border-radius:999px;background:rgba(255,250,240,.94);color:#241a10;
  font:800 .86rem/1 "Outfit",system-ui,sans-serif;text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .14s ease,background .14s ease}
.sw-door .acts a:hover,.sw-door .acts a:focus-visible{transform:translateY(-2px);background:#fff;
  outline:2px solid #fff;outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .sw-door,.sw-door .acts a{transition:none}
  .sw-door:hover,.sw-door:active{transform:none}
}