/* ============================================================
   MechaPaint - polytoria.css
   Layout for the Polytoria landing page hero only.
   Loaded after styles2.css / extras.css / works.css.
   ============================================================ */

/* ---------- hero heading: centered across the full width ---------- */

.poly-head {
  max-width: 900px;
  margin: 0 auto clamp(26px, 3.5vw, 44px);
  text-align: center;
}

/* ---------- hero body: image left, text right ---------- */

.poly-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}

.poly-hero-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
}

/* .uv-card-img gives us the lightbox hook; undo its 16/9 crop
   so PolyHero.png shows whole. */
.poly-hero-figure .uv-card-img {
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
  border-bottom: none;
}

.poly-hero-text {
  max-width: 42ch;
}

.poly-hero-text .section-sub {
  margin-top: 0;
}

@media (max-width: 860px) {
  .poly-hero-grid {
    grid-template-columns: 1fr;
  }

  .poly-hero-text {
    max-width: none;
  }
}