/* ============================================================
   Responsive layer for the Syndicates BOO Studio home page.

   The page comes out of a design canvas, so almost every rule is an
   inline style sized for a wide viewport. Rather than unpick those by
   hand this sheet overrides them at breakpoints — which is why it
   leans on !important: an inline style outranks any selector here.

   Breakpoints
     1080  the four studio tiles stop fitting side by side
      900  nav collapses to the burger; hero art yields to the copy
      620  single column, tighter gutters, smaller display type
   ============================================================ */

/* ── Content column ──────────────────────────────────────────
   The export lets every band run the full width of the window, which
   on anything above ~1500px leaves the text stranded at the far left.
   Cap the content at 1366px and centre it, while the backgrounds and
   the horizontal rules still bleed edge to edge.

   Done with padding rather than a wrapper element: `max()` collapses
   to the plain gutter on small screens, so one rule covers every size
   and no markup has to change. The mobile blocks further down set
   their own tighter gutters and win on source order. */
:root { --sb-max: 1366px; --sb-gutter: 28px; }

.sb-header,
footer,
#top,
#games,
#studio,
#coming-soon > div {
  padding-left:  max(var(--sb-gutter), calc((100% - var(--sb-max)) / 2)) !important;
  padding-right: max(var(--sb-gutter), calc((100% - var(--sb-max)) / 2)) !important;
}
/* it had its own narrower cap and auto margins; the padding now does that job */
#coming-soon > div { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* The capped grid sits on the page background, so #games needs the same
   cream its left cell uses — otherwise the band looks half-painted on a
   wide screen. #studio is the same pattern. */
#games, #studio { background: #F4F3EF; }

/* Keep the floating hero art inside the same column, so the composition
   holds together instead of drifting to the corners of a wide monitor. */
.sb-hero-deco {
  left:  max(var(--sb-gutter), calc((100% - var(--sb-max)) / 2)) !important;
  right: max(var(--sb-gutter), calc((100% - var(--sb-max)) / 2)) !important;
}

/* The featured game now carries four screenshots rather than three. */
@media (min-width: 761px) {
  .sb-shots { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ── Header ──────────────────────────────────────────────── */
.sb-header { position: relative; z-index: 60; }

/* Burger: hidden until the nav collapses. */
.sb-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1.5px solid #141414;
  border-radius: 12px;
  background: transparent;
  color: #141414;
  cursor: pointer;
  flex: none;
}
.sb-burger:hover { background: #FFD500; }
.sb-burger span {
  position: relative;
  display: block;
  width: 19px; height: 1.5px;
  background: currentColor;
}
.sb-burger span::before,
.sb-burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 19px; height: 1.5px;
  background: currentColor;
  transition: transform .18s ease, top .18s ease;
}
.sb-burger span::before { top: -6px; }
.sb-burger span::after  { top:  6px; }
/* open state → X */
.sb-burger[aria-expanded="true"] span { background: transparent; }
.sb-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.sb-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .sb-burger span::before, .sb-burger span::after { transition: none; }
}

/* ── Nav collapses ───────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --sb-gutter: 20px; }
  .sb-header {
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .sb-burger { display: inline-flex; }

  .sb-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 20px 20px !important;
    background: #F4F3EF;
    border-bottom: 1.5px solid #141414;
    box-shadow: 0 18px 30px rgba(0,0,0,.14);
    /* closed */
    display: none !important;
  }
  .sb-nav[data-open="true"] { display: flex !important; }

  .sb-nav > a {
    padding: 15px 4px;
    border-bottom: 1.5px solid #e0ded6;
    font-size: 17px !important;
  }
  .sb-nav > a:last-of-type { border-bottom: 0; }
  /* the Google Play badge sits as a block at the end of the sheet */
  .sb-nav > span {
    align-self: flex-start;
    margin-top: 14px;
  }
}

/* Desktop: make sure the burger can never leak into the wide layout. */
@media (min-width: 901px) {
  .sb-nav { display: flex !important; }
}

/* ── Hero ────────────────────────────────────────────────── */
/* The floating art is decorative (alt=""), so it yields to the words. */
@media (max-width: 900px) {
  .sb-deco-low { display: none !important; }
}
@media (max-width: 620px) {
  /* Keep only the two icons that sit clear of the headline. */
  .sb-hero-deco img:nth-of-type(3),
  .sb-hero-deco img:nth-of-type(4) { display: none !important; }
  .sb-hero-deco img { width: clamp(74px, 20vw, 120px) !important; }
}

@media (max-width: 900px) {
  #top { padding-top: 24px !important; padding-bottom: 36px !important; }
  #top > div:last-child { margin-top: 132px !important; }
}
@media (max-width: 620px) {
  #top > div:last-child { margin-top: 120px !important; }
  #top h1 { font-size: clamp(27px, 8vw, 36px) !important; }
  #top p  { font-size: 16px !important; }
  /* full-width stacked CTAs, which are far easier to hit with a thumb.
     Targets both children of the button row — the badge is a <span>, the
     other a real <a>, so match on position rather than on element. */
  #top > div:last-child > div:last-child > * {
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  #top > div:last-child > div:last-child { gap: 10px !important; }
}

/* ── Section rhythm ──────────────────────────────────────── */
@media (max-width: 900px) {
  #coming-soon > div { padding-top: 56px !important; padding-bottom: 56px !important; }
  #games > div, #games > article { padding: 24px 20px !important; }
  #studio > div { padding: 24px 20px !important; min-height: 0 !important; gap: 28px !important; }
}

@media (max-width: 620px) {
  /* one column everywhere; the auto-fit minmax values are desktop-sized */
  #games { grid-template-columns: 1fr !important; }
  #studio { grid-template-columns: 1fr !important; }
  #coming-soon .sb-soon-grid { grid-template-columns: 1fr !important; }

  /* the canvas draws seams with negative margins + right borders; on a
     single column those become stray lines, so square them off */
  #games > *, #studio > * {
    border-right: 0 !important;
    margin-bottom: 0 !important;
  }
  #games > *:last-child, #studio > *:last-child { border-bottom: 0 !important; }

  h2 { font-size: clamp(26px, 7.5vw, 34px) !important; }
  #coming-soon h2 { font-size: clamp(28px, 8vw, 38px) !important; }
}

/* ── Mafia Tycoon screenshots ────────────────────────────
   Three 2:3 portraits sit side by side happily on a wide screen. On a
   phone that makes each about 90px across, so below 760px they become a
   one-at-a-time swipeable slider instead. Native scroll-snap does the
   swiping; slider.js only adds the dots and arrows. */
@media (max-width: 760px) {
  .sb-shots {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px !important;
    scroll-padding: 0;
    /* A flex item defaults to min-width:auto, so a track holding three
       100%-wide slides refuses to shrink and pushes its column wide.
       This is what actually has to be zeroed — hiding the overflow only
       masks it and throws the centred controls off with it. */
    min-width: 0;
    width: 100%;
  }
  .sb-shots::-webkit-scrollbar { display: none; }
  .sb-shots > * {
    flex: 0 0 100%;
    /* the slides carry a 1.5px border, which content-box would add on top
       of the 100% and leave each one 3px proud of the track */
    box-sizing: border-box;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* controls, injected by slider.js */
  .sb-slider-ui { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
  .sb-dots { display: flex; align-items: center; gap: 8px; }
  .sb-dot {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: 999px;
    background: currentColor; opacity: .28;
    cursor: pointer;
    transition: opacity .18s ease, width .18s ease;
  }
  .sb-dot[aria-current="true"] { opacity: 1; width: 22px; }
  .sb-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 1.5px solid currentColor; border-radius: 999px;
    background: transparent; color: inherit; cursor: pointer;
  }
  .sb-arrow[disabled] { opacity: .3; cursor: default; }
  .sb-arrow svg { width: 14px; height: 14px; fill: currentColor; display: block; }
}
/* Above the breakpoint the grid stands, and the controls stay out of it. */
@media (min-width: 761px) {
  .sb-slider-ui { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-dot { transition: none; }
}

/* ── Footer ──────────────────────────────────────────────────
   Left-aligned, one item per line, at every width. The export ships it
   as a space-between row, so the column direction and the stacking of
   the inner link group both have to be forced. */
footer {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding-top: 40px !important;
  padding-bottom: 48px !important;
  border-top: 1.5px solid #141414;
}
footer > div { width: 100%; }
/* the link group is itself a row — stack it too, so every link gets a line */
footer > div:nth-of-type(2) {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
footer a { display: inline-block; }

@media (max-width: 620px) {
  footer { padding-top: 32px !important; padding-bottom: 40px !important; gap: 14px !important; }
}

/* ── Signup form ─────────────────────────────────────────────
   The export sizes the field with `flex:1 1 220px` and pads it 15/18.
   Without border-box that padding is added to a 100% width and pushes
   the row past the viewport, which is what made the page scroll
   sideways on a phone. */
@media (max-width: 620px) {
  #coming-soon form {
    flex-direction: column !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 32px !important;
    gap: 10px !important;
  }
  #coming-soon form input,
  #coming-soon form button {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    /* 16px keeps iOS Safari from zooming the page when the field focuses */
    font-size: 16px !important;
  }
  /* the note under the form is centred and max-width'd for the desktop
     column; left-align it with everything else on a phone */
  #coming-soon > div > p {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
  [data-signup-status] {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}

/* Flex/grid children must be allowed to shrink below their content,
   otherwise a wide child (the slider track, a long word) silently
   stretches its column. */
#games > *, #studio > *, #coming-soon .sb-soon-grid > * { min-width: 0; }

/* Belt and braces once the causes above are fixed. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; }

/* ── Shared niceties ─────────────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sb-hero-deco img { animation: none !important; }
}
/* anchored sections shouldn't hide under the sticky-ish header */
#games, #coming-soon, #studio, #top { scroll-margin-top: 84px; }

/* visible keyboard focus — the canvas export ships none */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #4FB3F6;
  outline-offset: 2px;
}