/* Phase 3.1 hero 3-D restoration, equal alignment, and 15% enlargement — 2026-07-28
   Restores the proven PNG surface maps and keeps all three 3-D viewers equally sized and spaced. */

.home-page .hero-book-stage-3d.has-three-books{
  isolation:isolate;
}
.home-page .hero-book-stage-3d .hero-book-3d{
  transform:none!important;
  align-self:stretch!important;
  display:flex!important;
  min-width:0;
}
.home-page .hero-book-stage-3d .hero-book3d-panel{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:28px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.022)),
    radial-gradient(circle at 50% 42%,rgba(104,183,236,.12),transparent 50%)!important;
  box-shadow:0 22px 50px rgba(4,20,34,.24),inset 0 1px 0 rgba(255,255,255,.055)!important;
  overflow:visible!important;
}
.home-page .hero-book-stage-3d .hero-book3d-panel::before{
  display:block!important;
  border-radius:inherit;
  opacity:.34;
}
.home-page .hero-book-stage-3d .hero-book3d-wrap{
  max-width:100%!important;
  margin:auto!important;
}
.home-page .hero-book-stage-3d .book3d-book{
  transform:rotateX(-2deg) rotateY(var(--book3d-initial-angle,0deg));
}

/* Desktop: 15% larger than Phase 2, three equal columns, equal gaps and baselines. */
@media(min-width:1041px){
  .home-page .hero-inner{
    width:min(1140px,calc(88vw - 30px))!important;
    max-width:1140px!important;
    grid-template-columns:minmax(330px,.78fr) minmax(660px,1.22fr)!important;
    gap:clamp(1.7rem,2.8vw,2.6rem)!important;
  }
  .home-page .hero-book-stage-3d.has-three-books{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:clamp(.8rem,1.15vw,1rem)!important;
    min-height:380px!important;
    height:380px!important;
  }
  .home-page .hero-book-stage-3d .hero-book-3d{
    position:relative!important;
    inset:auto!important;
    bottom:auto!important;
    width:100%!important;
    --book3d-book-w:clamp(121px,9.65vw,140px)!important;
  }
  .home-page .hero-book-stage-3d .hero-book3d-wrap{
    height:calc(var(--book3d-book-h) + 62px)!important;
  }
}

/* Tablet: retain a single equal row and enlarge the previous viewers by 15%. */
@media(min-width:701px) and (max-width:1040px){
  .home-page .hero-inner{
    width:min(980px,calc(100vw - 32px))!important;
    max-width:980px!important;
    grid-template-columns:1fr!important;
    gap:1.35rem!important;
  }
  .home-page .hero-book-stage-3d.has-three-books{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:clamp(.65rem,1.5vw,.9rem)!important;
    min-height:356px!important;
    height:356px!important;
  }
  .home-page .hero-book-stage-3d .hero-book-3d{
    position:relative!important;
    inset:auto!important;
    bottom:auto!important;
    width:100%!important;
    --book3d-book-w:clamp(150px,19.5vw,201px)!important;
  }
  .home-page .hero-book-stage-3d .hero-book3d-wrap{
    height:calc(var(--book3d-book-h) + 42px)!important;
  }
}

/* Mobile: equal cards, equal spacing, and 15% larger books without horizontal overflow. */
@media(max-width:700px){
  .home-page .hero-inner{
    width:min(100%,calc(100vw - 22px))!important;
    gap:.85rem!important;
  }
  .home-page .hero-book-stage-3d.has-three-books{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:6px!important;
    min-height:236px!important;
    height:236px!important;
    margin-top:.55rem!important;
  }
  .home-page .hero-book-stage-3d .hero-book-3d{
    position:relative!important;
    inset:auto!important;
    bottom:auto!important;
    width:100%!important;
    --book3d-book-w:min(26.45vw,106px)!important;
  }
  .home-page .hero-book-stage-3d .hero-book3d-panel{
    border-radius:18px!important;
  }
  .home-page .hero-book-stage-3d .hero-book3d-wrap{
    width:100%!important;
    height:calc(var(--book3d-book-h) + 28px)!important;
  }
}