/* Youth's Online v2.5 — readable, uncropped hero service poster.
   Only the homepage hero visual is affected. */
.hero .hero-grid { align-items:center; }
.hero .hero-visual { min-width:0; display:flex; align-items:center; justify-content:center; }
.hero .glow-card {
  width:100%; max-width:700px; margin-inline:auto;
  padding:clamp(12px,1.35vw,20px);
  border:1px solid rgba(170,205,241,.88);
  background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(232,246,255,.75));
  box-shadow:0 18px 54px rgba(18,69,131,.12);
  border-radius:clamp(20px,2vw,30px);
}
.hero .mini-head { min-height:61px; padding:0 5px 8px; gap:12px; }
.hero .hero-real-logo { width:clamp(125px,11vw,190px); height:54px; object-fit:contain; object-position:left center; }
.hero .poster-frame {
  width:100%; height:clamp(405px,36vw,590px); max-height:590px;
  display:flex; justify-content:center; align-items:center;
  overflow:hidden; border-radius:18px;
  padding:clamp(7px,.8vw,12px);
  border:1px solid #d5e8f8;
  background:radial-gradient(circle at 50% 45%,#fff 0%,#f1f8ff 72%,#e6f3ff 100%);
}
.hero .poster-frame img {
  display:block; width:100%; height:100%; max-width:100%; max-height:100%;
  object-fit:contain; object-position:center center;
  border-radius:12px;
  filter:drop-shadow(0 9px 15px rgba(17,53,110,.13));
}
/* Keep decorative chips within the visual rather than sticking outside. */
.hero .float-chip { z-index:2; font-size:clamp(10px,.7vw,12px); padding:7px 11px; }
.hero .chip-one{left:7px;top:90px}
.hero .chip-two{right:7px;top:43%}
.hero .chip-three{left:7px;bottom:27px}
@media(max-width:1100px){
 .hero .poster-frame{height:clamp(380px,46vw,550px)}
 .hero .mini-head{min-height:52px}
}
@media(max-width:850px){
 .hero .glow-card{max-width:600px}
 .hero .poster-frame{height:clamp(390px,88vw,570px)}
}
@media(max-width:600px){
 .hero .glow-card{padding:10px;border-radius:20px}
 .hero .mini-head{min-height:46px;padding:0 4px 6px}
 .hero .hero-real-logo{width:135px;height:42px}
 .hero .mini-safe{font-size:8px;letter-spacing:.3px}
 .hero .poster-frame{height:clamp(330px,119vw,500px);padding:6px;border-radius:13px}
 .hero .float-chip{padding:5px 7px;font-size:9px;box-shadow:0 6px 16px rgba(17,58,117,.12)}
 .hero .chip-one{left:3px;top:70px}
 .hero .chip-two{right:3px;top:46%}
 .hero .chip-three{left:3px;bottom:17px}
}
@media(prefers-reduced-motion:reduce){.hero .poster-frame img{transition:none!important}}