/* ==========================================================
   YANTRIKA: home page layout
     * the sliders run edge to edge
     * the boxes (Game Jam, Independent Projects, Where we are now)
       and the framed promo video stay centred and stop growing at --card-max

   TO USE: add this as the LAST stylesheet in <head> of index.html,
   after layout-shift-fix.css, so it wins over the older rules:
       <link rel="stylesheet" href="fullbleed.css">

   TO TUNE: change --card-max below. Bigger = wider boxes on big
   screens (smaller gaps on the sides). 1440px suits most screens.
   Everything is home-page only (it is the only page with .hero2),
   EXCEPT the navigation bar and footer rules at the very bottom, which are on every page.
   ========================================================== */

:root{--card-max:1440px;--vid-ratio:16/9}

/* ---- Play our games slider ---- */
.gs{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}

/* ---- Come build with us strip: full width, no faded edges, bigger tiles on big screens ---- */
.cta{width:100vw;margin-left:calc(50% - 50vw)}
.cta .slider{margin:0;width:100%;-webkit-mask-image:none;mask-image:none}
.cta .sl{width:clamp(200px,20vw,420px)}
@media(max-width:600px){.cta .slider{margin:0;width:100%}}

/* ---- Home page boxes: wider than the old column, centred, capped ---- */
/* --cw = the box width: as wide as the screen allows (minus a side margin), but never above --card-max */
#app:has(.hero2){--cw:min(var(--card-max),calc(100vw - 56px))}
@media(max-width:600px){#app:has(.hero2){--cw:calc(100vw - 28px)}}

#app:has(.hero2) > .card,
#app:has(.hero2) > h2.m,
#app:has(.hero2) > p{
 width:var(--cw);box-sizing:border-box;margin-left:calc(50% - var(--cw) / 2);
}
/* keep paragraphs readable inside the wide boxes */
#app:has(.hero2) > .card > p{max-width:90ch}

/* ---- Promo video: as wide as the boxes, always framed, never any black bars ----
   The frame has a fixed shape (--vid-ratio, set above to 16/9: change it if your video is not 16:9).
   The video always fills the whole frame; if its shape differs a little it is trimmed at the edges,
   never letterboxed. On short screens the frame is kept within the window height. */
#app:has(.hero2) > .vid{
 width:var(--cw);box-sizing:border-box;margin-left:calc(50% - var(--cw) / 2);
 aspect-ratio:var(--vid-ratio);
 max-height:calc(100vh - 90px);max-height:calc(100svh - 90px);
}
#app:has(.hero2) > .vid video{width:100%;height:100%;max-height:none;object-fit:cover}

/* ---- Navigation bar (every page): logo far left, links + theme button far right ----
   The links keep their normal spacing and sit together next to the theme button.
   Only on wide screens: below 1181px the bar keeps its existing menu-button dropdown. */
@media(min-width:1181px){
 nav{padding-left:clamp(20px,3vw,64px);padding-right:clamp(20px,3vw,64px)}
}
/* ---- Sound (background music) button: lives in the navigation bar next to the theme toggle ----
   sound-nav.js moves the button there and sets data-snd="on|off"; these rules restyle it to match the
   toggle and replace the emoji with a plain black speaker icon (outline speaker; with an X when muted).
   !important cancels the button's own inline "position:fixed" (bottom-right corner) and hides the emoji. */
nav #sndb{
 position:static!important;right:auto!important;bottom:auto!important;z-index:auto!important;
 font-size:0!important;line-height:0;
 flex:0 0 auto;margin:0;cursor:pointer;
 background:var(--yel);color:#17171d;border:3px solid var(--dk);border-radius:8px;
 padding:4px 10px;box-shadow:3px 3px 0 var(--dk);
 --snd-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");
}
nav #sndb[data-snd="off"]{
 --snd-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M22 9l-6 6M16 9l6 6'/%3E%3C/svg%3E");
}
nav #sndb::before{
 content:"";display:block;width:24px;height:24px;background:#17171d;
 -webkit-mask:var(--snd-ico) center/contain no-repeat;mask:var(--snd-ico) center/contain no-repeat;
}
nav #sndb:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dk)}
nav #sndb:focus-visible{outline:3px solid var(--bl);outline-offset:3px}
/* same float-in as the other navigation buttons (keyframes + --ease come from animations.css); it replays
   on every page change because sound-nav.js re-inserts the button each time the bar is redrawn */
nav #sndb{animation:linkIn .55s var(--ease) .66s backwards}
@media(prefers-reduced-motion:reduce){nav #sndb{animation:none!important}}