/* User-selected group photo, 2026-10-16. Keep complete horizontal group. */
.hero { height:auto; min-height:0; aspect-ratio:auto; background:var(--xd-navy); }
.hero::after { display:none; }
.hero-photo { display:block; position:relative; height:max(300px,25vw); overflow:hidden; background:var(--xd-mist); }
.hero-photo img { position:absolute; left:0; top:50%; width:100%; height:auto; max-width:none; transform:translateY(-50%); }
.hero-photo span { position:absolute; right:20px; bottom:14px; padding:5px 10px; border-radius:4px; background:rgba(8,45,80,.8); color:#fff; font-size:12px; }
.hero-photo:focus-visible { outline-offset:-5px; outline-color:var(--xd-bright-mint); }
.hero-strip { background:var(--xd-navy); }
.hero-strip .container { display:flex; align-items:center; justify-content:space-between; gap:28px; height:auto; min-height:0; padding:25px 0; }
.hero-strip .hero-copy { max-width:none; padding:0; }
.hero-strip .hero-copy>small { margin-bottom:6px; font-size:12px; letter-spacing:.08em; color:var(--xd-mint); }
.hero-strip h1 { margin:0 0 8px; font-size:34px; line-height:1.4; letter-spacing:0; }
.hero-strip p { margin:0; max-width:none; font-size:14px; line-height:1.8; color:var(--xd-mist); }
.hero-strip .hero-actions { flex:0 0 auto; gap:10px; }
.hero-strip .button { white-space:nowrap; }
/* Dedicated images for each story; neutral background where the whole action is useful. */
.photo-grid.shots { grid-template-columns:repeat(3,minmax(0,1fr)); }
.photo-card .photo-caption { padding-top:34px; }
.photo-card img { object-fit:cover; }
.photo-card.curated-card { display:flex; flex-direction:column; aspect-ratio:auto; background:var(--xd-navy); }
.photo-card.curated-card > img { position:static; width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; flex:0 0 auto; background:var(--xd-mist); }
.photo-card.curated-card:hover > img { transform:none; }
.photo-card.curated-card > .photo-caption { position:static; padding:14px 14px 15px; background:var(--xd-navy); flex:1; }
.photo-card.curated-card .photo-caption h3 { font-size:16px; }
/* The eight selected homepage image slots only; other photographs retain R4 framing. */
.service-panel .education-core-media { display:block; width:100%; max-width:132px; margin:0 auto 12px; }
.service-panel .education-core-image { display:block; width:100%; height:auto; aspect-ratio:5/4; object-fit:contain; border-radius:8px; }
.service-panel .education-core-note { display:block; margin-top:4px; color:var(--xd-muted); font-size:9px; line-height:1.4; font-weight:400; }
.photo-card.education-guide-card > .education-guide-image { aspect-ratio:5/4; object-fit:contain; }
.photo-card.education-guide-card > .education-guide-note { position:absolute; top:10px; right:10px; z-index:2; padding:3px 7px; border-radius:4px; background:#ffffffed; color:var(--xd-navy); font-size:10px; line-height:1.5; pointer-events:none; }
.miniapp-crop { display:block; position:relative; overflow:hidden; width:100%; flex:0 0 auto; background:var(--xd-mist); }
.miniapp-crop > img { position:absolute!important; width:var(--shot-width)!important; max-width:none!important; height:auto!important; left:var(--shot-left)!important; top:var(--shot-top)!important; right:auto!important; bottom:auto!important; transform:none!important; border-radius:0!important; }
.article figure.miniapp-detail { max-width:420px; margin:28px auto; }
.miniapp-detail .miniapp-crop { border-radius:12px; box-shadow:0 6px 24px #082d5014; }
.course-detail-image { object-fit:contain!important; object-position:center!important; max-height:680px; background:var(--xd-mist); }
.about-panel { display:grid; grid-template-columns:54% 46%; background:var(--xd-cloud); }
.about-panel > img { left:auto; right:0; width:46%; object-fit:contain; object-position:center; }
.brand-intro figure img { aspect-ratio:auto; max-height:640px; object-fit:contain; background:var(--xd-mist); }
.about-panel::after { display:none; }
.about-copy { max-width:none; width:100%; }
.about-copy p { color:var(--xd-ink); }
@media(min-width:769px) and (max-width:1180px) {
  .hero-strip .container { flex-wrap:wrap; gap:16px; padding:23px 0; }
  .hero-strip h1 { font-size:30px; }
}
@media(max-width:900px) { .photo-grid.shots { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:768px) {
  .hero-photo { height:240px; }
  .hero-photo span { right:12px; bottom:10px; font-size:11px; }
  .hero-strip .container { display:block; padding:22px 0 24px; }
  .hero-strip .hero-copy { max-width:none; padding:0; }
  .hero-strip .hero-copy>small { font-size:11px; }
  .hero-strip h1 { font-size:27px; line-height:1.4; margin-bottom:10px; }
  .hero-strip p { font-size:13px; max-width:none; }
  .hero-strip .hero-actions { margin-top:17px; }
  .hero-strip .button { font-size:13px; padding:8px 16px; }
  .photo-grid.shots { grid-template-columns:1fr; }
  .about-panel { display:flex; flex-direction:column-reverse; }
  .about-panel > img { position:static; width:100%; height:auto; max-height:480px; aspect-ratio:3/4; object-fit:contain; }
  .about-copy { max-width:none; min-height:255px; }
}
@media(max-width:400px) { .hero-photo { height:220px; } .hero-strip h1 { font-size:25px; } }
@media print { .hero-photo { display:none; } .hero-strip { background:white; } .hero-strip :is(h1,p,small) { color:black; } }