/* make_maingear_demo.py: demo-only fixes for the deploy gate (Ily's source is unchanged) */

/* Hero product: mg1-hero.webp is mg1.webp trimmed to the machine, so the image box is the machine and text that sits
   beside it no longer "crosses" transparent margin. Capped at 120% of the 730px file (desktop) and 60% on touch
   screens, where the gate judges at 2x: the 750px source is too small for bigger (image-upscaled). */
.hero-product{inset:64px 0 34px;margin:auto;width:auto;height:min(calc(100% - 98px),876px);max-width:100%;padding:0}
@media (max-width:799px),(max-width:1024px) and (orientation:portrait){
  .hero-product{height:min(100%,438px)}
}
/* tablet portrait: the machine sat on "Explore front-panel designs"; smaller and pushed to the right gutter
   (the stage runs 5% past the right edge here) */
@media (min-width:741px) and (max-width:1024px) and (orientation:portrait){
  .hero-product{height:min(100%,400px);margin-right:calc(5vw + 22px)}
}
@media (max-width:740px){
  .hero-product{inset:0}
  .hero-stage{margin-top:22px}               /* Git gud sat on the top of the hero product on phones */
}

/* Lineup cards: the eyebrow and compare button floated over the top of the product image box. Put them in the
   card's flow above the image; the image keeps its own top room smaller to compensate. */
.product-grid .product-card{display:flex;flex-direction:column}
.product-grid .card-top{position:relative;inset:auto;padding:18px 22px 0}
.product-grid .product-image{padding-top:10px}
.product-grid .card-copy{margin-top:auto}
@media (max-width:900px){.product-grid .card-top{padding:13px 15px 0}}
@media (max-width:740px){.product-grid .card-top{padding:19px 21px 0}}

/* 8 cards in a 3-column grid left an empty cell: MG-1, the flagship, spans two columns (2+1, 3, 3). */
@media (min-width:741px){
  .product-grid>.product-card:first-child{grid-column:span 2}
  .product-grid>.product-card:first-child .product-image{aspect-ratio:auto;height:0;flex:1 1 auto;min-height:0}
  .product-grid>.product-card:first-child .product-image img{position:absolute;left:25px;right:25px;top:10px;bottom:0;width:calc(100% - 50px);height:calc(100% - 10px)}
}

/* Home build studio (council 2026-10-28): the GPU name/spec and the caption started under the Cutaway button
   (button: left 25px, ~86px wide; 14px/~80px on phones). Start them just right of it. */
.inside-section .inside-info,.inside-section .visual-caption{left:134px}
/* Phones: the viewer's own controls fill its bottom edge (Cutaway left, View controls right), so the GPU name, spec
   and caption go under the viewer instead of on it, and the CTA gets air above the viewer. */
@media (max-width:740px){
  .inside-copy{padding-bottom:30px}
  .inside-visual{height:auto}
  .inside-visual .home-machine{position:relative;inset:auto;height:475px}
  .inside-section .inside-info,.inside-section .visual-caption{position:static;display:flex;padding:0 22px}
  .inside-section .inside-info{padding-top:16px}
  .inside-section .visual-caption{padding:8px 22px 0}
  /* hero: the GEFORCE callout read weak on the glass -> solid chip; the 01.01 stage label was cut at the fold -> hidden */
  .hero-hotspot>span{background:#0a1117e6;padding:5px 9px;border-radius:5px;border:1px solid #9fd8f02a}
  .hero .stage-coordinate{display:none}
  /* build page: 360/Front/Glass/Rear/Back/Top sat on the model unreadable -> solid strip */
  .studio-angles>div{background:#0b161ee6;border-radius:6px;padding:0 4px}
}