/*
  Homepage full-width / actual 25% horizontal reduction
  Applied 2026-07-25.

  The prior build changed only the maximum desktop width. At narrower desktop
  viewports that did not reduce the rendered container. This stylesheet is
  intentionally loaded last and reduces the actual available width to 75%.
*/

.home-page main {
  width: 100%;
  max-width: none;
  overflow-x: clip;
}

/* Full-bleed hero: the background reaches both viewport edges. */
.home-page .hero.section-shell {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative;
}

/*
  Actual 25% horizontal reduction:
  - wide desktop: 1320px x .75 = 990px
  - smaller desktop: 75% of the available viewport width
*/
.home-page .hero-inner {
  width: min(990px, calc(75vw - 30px)) !important;
  max-width: 990px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: clamp(18px, 2.4vw, 32px) !important;
}

.home-page .hero-copy-block,
.home-page .hero-book-stage-3d {
  min-width: 0;
}

/* Keep both book panels separate within the narrower container. */
.home-page .hero-book-stage-3d {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: center !important;
  overflow: visible !important;
}

.home-page .hero-book-3d {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  --book3d-book-w: clamp(118px, 11.5vw, 160px) !important;
}

.home-page .hero-book3d-panel {
  width: 100% !important;
  min-width: 0 !important;
}

.home-page .hero-book3d-wrap {
  max-width: 100% !important;
  margin-inline: auto !important;
}

/* Slightly tighten typography where the 25% rail is visible. */
@media (min-width: 861px) and (max-width: 1180px) {
  .home-page .hero h1 {
    font-size: clamp(38px, 4.2vw, 46px) !important;
  }
  .home-page .hero-copy {
    font-size: clamp(1rem, 1.8vw, 1.3rem) !important;
  }
  .home-page .hero-actions {
    gap: .75rem !important;
  }
  .home-page .hero-actions .btn {
    padding-inline: 1rem !important;
  }
}

/* Preserve practical tablet/mobile layout rather than making it unusably narrow. */
@media (max-width: 860px) {
  .home-page .hero-inner {
    width: calc(100vw - 28px) !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
  }
  .home-page .hero-book-stage-3d {
    width: min(100%, 560px) !important;
    margin-inline: auto !important;
  }
  .home-page .hero-book-3d {
    --book3d-book-w: min(31vw, 160px) !important;
  }
}