/* Onosoji Platform v2.9.7 — canonical production hero geometry.
   The approved reference screenshot is produced by the later v2.7.2 hero,
   not the earlier v2.7 rule. Keep the new interaction layer, but reproduce
   the production hero composition exactly. */

.hero-v27 {
  padding: clamp(42px, 5vw, 68px) 0 clamp(40px, 4vw, 62px);
}

.hero-v27 > .shell {
  width: var(--shell);
}

.hero-grid-v27 {
  grid-template-columns: minmax(0, 1.04fr) minmax(460px, .96fr);
  gap: clamp(42px, 5vw, 72px);
  align-items: center;
}

.hero-v27 h1 {
  max-width: 15.5ch;
  margin: 14px 0 0;
  font-size: clamp(2.75rem, 4.15vw, 4.35rem);
  line-height: .99;
  letter-spacing: -.048em;
  text-wrap: initial;
}

.hero-v27 .hero-intro {
  max-width: 640px;
  margin-top: 24px;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.55;
}

.hero-copy {
  order: 1;
  min-width: 0;
}

.hero-portrait-v27 {
  order: 2;
  width: 100%;
  max-width: 620px;
  margin-left: auto;
}

.hero-portrait-v27 img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 2px;
  box-shadow: none;
}

.hero-portrait-v27 figcaption {
  margin-top: 12px;
  padding-left: 0;
}

@media (max-width: 1100px) {
  .hero-grid-v27 {
    grid-template-columns: minmax(0,1fr) minmax(390px,.9fr);
    gap: 34px;
  }
  .hero-v27 h1 {
    max-width: 15.5ch;
    font-size: clamp(2.55rem, 4.8vw, 3.75rem);
  }
}

@media (max-width: 820px) {
  .hero-grid-v27 {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-copy { order: 1; }
  .hero-portrait-v27 {
    order: 2;
    max-width: 100%;
    margin: 0;
  }
  .hero-portrait-v27 img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 18px;
  }
  .hero-v27 h1 {
    max-width: none;
    font-size: clamp(2.2rem, 7.8vw, 3.2rem);
  }
}

@media (max-width: 560px) {
  .hero-v27 { padding-top: 30px; }
  .hero-v27 h1 { font-size: clamp(2rem, 8.8vw, 2.6rem); }
  .hero-portrait-v27 { margin-inline: 0; }
}
