/*
 * Ozark responsive layout contract
 *
 * This file is intentionally loaded last. It owns only viewport sizing,
 * centered page widths, responsive spacing, and media containment. Product
 * colors, glass styling, artwork, animation, and component behavior stay in
 * their existing stylesheets.
 */

:root {
  --oz-page-inset: clamp(2rem, 4vw, 4rem);
  --oz-page-pad: clamp(1.125rem, 1.5vw, 1.5rem);
  --oz-layout-width: clamp(70rem, calc(63.75rem + 8.333vw), 77.5rem);
  --oz-guide-width: clamp(68.75rem, calc(58.75rem + 12.5vw), 78.75rem);
  --oz-reading-width: clamp(46.875rem, calc(41.875rem + 6.25vw), 50rem);
  --oz-control-width: clamp(51.25rem, calc(46.25rem + 6.25vw), 56.25rem);
  --oz-layout-gap: clamp(1rem, calc(.5rem + .625vw), 1.5rem);
}

html {
  overflow-x: clip;
}

body {
  min-inline-size: 20rem;
}

:where(main, section, article, aside, header, footer, nav),
:where(.wrap, .hero, .home-products, .review-shell, .guide-page, .content-page),
:where(.home-products > *, .hero > *, .gpc-access-console > *, .review-grid > *) {
  min-inline-size: 0;
}

:where(img, picture, video, canvas, iframe) {
  max-inline-size: 100%;
}

:where(img, video) {
  block-size: auto;
}

.wrap {
  box-sizing: border-box;
  width: min(var(--oz-layout-width), calc(100% - var(--oz-page-inset)));
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--oz-page-pad);
}

.site-header .wrap,
.site-footer .wrap {
  width: min(var(--oz-layout-width), calc(100% - var(--oz-page-inset)));
}

.site-header .logo,
.site-header .header-actions,
.site-header .menu-toggle {
  flex: 0 0 auto;
}

.site-header .nav {
  min-width: 0;
  gap: clamp(.875rem, calc(.25rem + 1vw), 1.625rem);
}

.site-header .nav a {
  white-space: nowrap;
}

.guide-page {
  box-sizing: border-box;
  width: min(var(--oz-guide-width), calc(100% - var(--oz-page-inset)));
  max-width: none;
  margin-inline: auto;
}

.content-page {
  box-sizing: border-box;
  width: min(var(--oz-reading-width), calc(100% - var(--oz-page-inset)));
  max-width: none;
  margin-inline: auto;
}

.guide-page :where(img, video, iframe),
.content-page :where(img, video, iframe) {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.guide-page iframe,
.content-page iframe {
  aspect-ratio: 16 / 9;
}

@media (min-width: 901px) {
  .home-hero {
    box-sizing: border-box;
    padding-top: clamp(2rem, calc(1.375rem + .625vw), 2.5rem);
    padding-inline: var(--oz-page-pad);
  }

  .home-hero h1 {
    width: min(100%, 54rem);
    margin-inline: auto;
    font-size: 3rem;
  }

  .home-hero > p {
    width: min(100%, 38rem);
    max-width: none;
    font-size: 1rem;
  }

  .game-picker,
  .purchase-assurance {
    box-sizing: border-box;
    width: min(var(--oz-control-width), calc(100% - var(--oz-page-inset)));
    max-width: none;
    margin-inline: auto;
  }

  .home-products,
  .ownership-path,
  .review-shell,
  .product-reviews-shell,
  .pnp,
  .mod-showcase__shell {
    box-sizing: border-box;
    width: min(var(--oz-layout-width), calc(100% - var(--oz-page-inset)));
    max-width: none;
    margin-inline: auto;
  }

  .home-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--oz-layout-gap);
    padding-inline: var(--oz-page-pad);
    padding-top: clamp(1.75rem, calc(1.25rem + .625vw), 2.375rem);
  }

  .home-products .pc-media {
    min-height: 0;
    aspect-ratio: 1.36 / 1;
  }

  .home-products .pc-media img {
    max-width: 94%;
    max-height: 92%;
    object-fit: contain;
  }

  .ownership-path,
  .review-shell,
  .product-reviews-shell {
    padding-inline: var(--oz-page-pad);
  }

  .product-page:not(.gpc-page) > .hero {
    box-sizing: border-box;
    width: min(var(--oz-layout-width), calc(100% - var(--oz-page-inset)));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--oz-page-pad);
    gap: clamp(2.25rem, calc(1rem + 2vw), 3.5rem);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .product-page:not(.gpc-page) .hero-media {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
  }

  .product-page:not(.gpc-page) .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .product-page:not(.gpc-page) .hero-title {
    font-size: 3.125rem;
  }

  .pnp,
  .mod-showcase__shell {
    padding-inline: var(--oz-page-pad);
  }

  .gpc-page .gpc-hero-v2,
  .gpc-page .gpc-hero-intro,
  .gpc-page .gpc-access-console {
    box-sizing: border-box;
    width: min(var(--oz-layout-width), calc(100% - var(--oz-page-inset)));
    max-width: none;
    margin-inline: auto;
  }

  .gpc-page .gpc-access-console {
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .8fr);
    gap: var(--oz-layout-gap);
  }

  .gpc-page :where(.gpc-showcase, .gpc-showcase-stage, .gpc-visual) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .review-grid,
  .ownership-path .op-grid {
    gap: var(--oz-layout-gap);
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  :root {
    --oz-page-inset: clamp(1.5rem, 3vw, 2.5rem);
    --oz-page-pad: clamp(1rem, 1.5vw, 1.25rem);
  }

  .site-header .nav {
    gap: clamp(.625rem, 1.15vw, .875rem);
  }

  .site-header .nav a {
    font-size: .8125rem;
  }
}

@media (max-width: 900px) {
  :root {
    --oz-page-inset: clamp(1.5rem, 5vw, 2.5rem);
    --oz-page-pad: clamp(1rem, 3.5vw, 1.375rem);
  }

  .wrap,
  .guide-page,
  .content-page,
  .site-header .wrap,
  .site-footer .wrap {
    width: calc(100% - var(--oz-page-inset));
    max-width: none;
  }

  .product-page > .hero,
  .gpc-page .gpc-hero-v2,
  .gpc-page .gpc-hero-intro,
  .gpc-page .gpc-access-console,
  .product-reviews-shell,
  .pnp,
  .mod-showcase__shell {
    max-width: calc(100% - var(--oz-page-inset));
    margin-inline: auto;
  }

  .home-products {
    box-sizing: border-box;
    width: min(31rem, calc(100% - var(--oz-page-inset)));
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oz-layout-gap);
    margin-inline: auto;
    padding-inline: var(--oz-page-pad);
  }

  .ownership-path {
    box-sizing: border-box;
    width: min(38.75rem, calc(100% - var(--oz-page-inset)));
    max-width: none;
    margin-inline: auto;
  }

  .guide-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
  }

  .guide-band > a {
    justify-self: start;
  }

  .product-page > .hero {
    padding-inline: var(--oz-page-pad);
  }

  .product-page .hero-media,
  .home-products .pc-media {
    min-height: 0;
  }

  .product-page .hero-media img,
  .home-products .pc-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .guide-page :where(table, pre),
  .content-page :where(table, pre) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 620px) {
  :root {
    --oz-page-inset: clamp(1rem, 5vw, 1.5rem);
    --oz-page-pad: clamp(.875rem, 4vw, 1.125rem);
  }

  .site-header .wrap {
    gap: .375rem;
  }

  .site-header .logo {
    min-height: 3.5rem;
    gap: .5rem;
    font-size: 1.0625rem;
  }

  .site-header .logo img {
    width: 2rem;
    height: 2rem;
  }

  .site-header .menu-toggle,
  .oz-discovery-trigger {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    height: 2.75rem !important;
  }

  .home-hero h1 {
    font-size: clamp(2rem, 9.5vw, 2.375rem);
  }

  .home-hero > p,
  .hero-sub,
  .guide-hero p {
    font-size: 1rem;
  }

  .guide-page,
  .content-page {
    padding-inline: var(--oz-page-pad);
  }

  .product-page > .hero,
  .product-reviews-shell,
  .pnp,
  .mod-showcase__shell {
    max-width: calc(100% - var(--oz-page-inset));
  }

  .product-page .hero-media {
    aspect-ratio: 1 / 1;
  }

  .home-products {
    box-sizing: border-box;
    width: min(31rem, 100%);
    max-width: 31rem;
    padding-inline: clamp(.75rem, 4vw, 1rem);
  }

  .ownership-path,
  .demo-teaser {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-inline: clamp(.75rem, 4vw, 1rem);
  }

  .demo-teaser .dt-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-teaser .dt-card {
    padding: 1.125rem;
  }

  .ownership-path .op-visual {
    height: 11rem;
    flex-basis: 11rem;
    padding: 1rem;
  }

  .ownership-path .op-step-copy {
    min-height: 0;
    padding: 1.125rem;
  }

  .review-section {
    padding: 3.5rem .875rem 3.375rem;
  }

  body #assistantSideLauncher.assistant-side-launcher {
    top: auto !important;
    right: auto !important;
    bottom: max(.75rem, calc(env(safe-area-inset-bottom) + .625rem)) !important;
    left: max(.75rem, env(safe-area-inset-left)) !important;
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    max-width: 3.25rem !important;
    height: 3.25rem !important;
    min-height: 3.25rem !important;
    justify-content: center;
    gap: 0;
    padding: .4375rem !important;
    border-right-width: 1px !important;
    border-radius: .875rem !important;
    transform: none !important;
  }

  body.product-page.mobile-purchase-visible #assistantSideLauncher.assistant-side-launcher {
    bottom: max(5.125rem, calc(env(safe-area-inset-bottom) + 4.875rem)) !important;
  }

  body #assistantSideLauncher.assistant-side-launcher > span {
    display: none !important;
  }

  body #assistantSideLauncher.assistant-side-launcher img {
    width: 2.125rem;
    height: 2.125rem;
  }

  body #assistantSideLauncher.assistant-side-launcher::after {
    top: .375rem;
    right: .3125rem;
    left: auto;
  }

  .site-footer .wrap {
    padding-inline: 0;
  }
}

@media (max-width: 430px) {
  .home-products .pc-cta-row {
    align-items: stretch;
    flex-direction: column;
  }

  .home-products .pc-details-link {
    width: 100%;
  }

  .home-hero .gp-copy strong,
  .home-hero .gp-copy small {
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}