/* ============================================================
   Open Campus announcement banner (top page only)
   Scoped to .HomeOC* classes — does not touch base.css
   Remove the <section class="HomeOC"> block and this stylesheet
   link together once the event has ended.
   ============================================================ */

.HomeOC{ --hoc-accent:#2C5F9E; --hoc-accent-dark:#1F4A7D; --hoc-radius:16px;
  display:block; margin:70px 0; padding:0; width:100%;}

.HomeOCInner{ position:relative; display:block; margin:0 auto; padding:0; width:100%; max-width:1100px; box-sizing:border-box;
  border-radius:var(--hoc-radius); overflow:hidden; isolation:isolate;
  background-image:url("../../admissions/opencampus/images/oc2026-main.jpg"); background-size:cover; background-position:center 30%;}

.HomeOCInner::before{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg, rgba(31,74,125,0.94) 0%, rgba(44,95,158,0.82) 45%, rgba(44,95,158,0.62) 100%);}

.HomeOCBody{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 1fr) 170px; align-items:center; gap:40px;
  margin:0; padding:16px 34px; box-sizing:border-box;}

.HomeOCText{ display:block; margin:0; padding:0;}
.HomeOCEyebrow{ display:block; margin:0 0 4px 0; padding:0; font-family:'Jost', sans-serif; font-weight:normal; font-size:1.1rem; letter-spacing:2px; color:#FFFFFF; opacity:0.9;}
.HomeOCDate{ display:flex; align-items:baseline; flex-wrap:wrap; gap:1px 7px; margin:0 0 4px 0; padding:0; font-family:'Zen Old Mincho', serif; color:#FFFFFF;}
.HomeOCDate__num{ font-size:2.6rem; font-weight:700; line-height:1;}
.HomeOCDate__unit{ margin-right:1px; font-size:1.2rem;}
.HomeOCDate__paren{ font-size:1.2rem;}
.HomeOCDate__sep{ margin:0 1px; font-size:1.4rem;}
.HomeOCTitle{ display:block; margin:0; padding:0; font-family:"Noto Sans JP", sans-serif; font-weight:700; font-size:1.5rem; color:#FFFFFF;}
.HomeOCLead{ margin:4px 0 0; color:#FFFFFF; font-family:"Noto Sans JP", sans-serif; font-size:1.05rem; line-height:1.5;}

.HomeOCBtns{ display:flex; align-items:center; margin:10px 0 0; padding:0;}
.HomeOCBtn{ display:inline-block; margin:0; padding:8px 20px; box-sizing:border-box; white-space:nowrap;
  border-radius:999px; font-family:"Noto Sans JP", sans-serif; font-weight:700; font-size:1.15rem; line-height:1.5; text-align:center; text-decoration:none;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;}
.HomeOCBtn span{ display:inline-block; margin-left:8px; transition:transform .22s ease;}
.HomeOCBtn:hover span{ transform:translateX(5px);}
.HomeOCBtn:focus-visible{ outline:3px solid #FFFFFF; outline-offset:2px;}
.HomeOCBtn--primary{ background:#FFFFFF; color:var(--hoc-accent-dark); border:2px solid #FFFFFF;}
.HomeOCBtn--primary:hover{ background:#EAF1FA; border-color:#EAF1FA;}

.HomeOCMovie{ display:block; overflow:hidden; border-radius:10px; background:#FFFFFF; color:var(--hoc-accent-dark); text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.24); transition:transform .22s ease, box-shadow .22s ease;}
.HomeOCMovie:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.3);}
.HomeOCMovie:focus-visible{ outline:3px solid #FFFFFF; outline-offset:4px;}
.HomeOCMovie__visual{ position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; background:#16394A;}
.HomeOCMovie__visual img{ display:block; width:100%; height:100%; object-fit:cover;}
.HomeOCMovie__play{ position:absolute; left:50%; top:50%; width:44px; height:32px; border-radius:8px; background:#FF0033;
  box-shadow:0 3px 12px rgba(0,0,0,.35); transform:translate(-50%,-50%);}
.HomeOCMovie__play::after{ content:""; position:absolute; left:18px; top:9px; width:0; height:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid #FFFFFF;}
.HomeOCMovie__text{ display:flex; align-items:flex-start; flex-direction:column; gap:5px; padding:9px 10px; font-family:"Noto Sans JP", sans-serif;}
.HomeOCMovie__badge{ flex:0 0 auto; padding:2px 6px; border-radius:999px; background:#D72578; color:#FFFFFF; font-size:.9rem; font-weight:700;}
.HomeOCMovie__title{ font-size:1.05rem; font-weight:700; line-height:1.5;}

.PurposeNav__ocBadge{ display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:#D72578; color:#FFFFFF;
  font-size:1rem; font-weight:700; line-height:1.5; vertical-align:middle;}

@media (prefers-reduced-motion: reduce) {
  .HomeOCBtn{ transition:none;}
  .HomeOCBtn span{ transition:none;}
  .HomeOCBtn:hover span{ transform:none;}
  .HomeOCMovie{ transition:none;}
  .HomeOCMovie:hover{ transform:none;}
}

@media (max-width: 1100px) {
  .HomeOC{ margin:60px 0;}
  .HomeOCInner{ margin-left:24px; margin-right:24px; width:auto;}
}

@media (max-width: 900px) {
  .HomeOCBody{ grid-template-columns:1fr; gap:16px; text-align:center; padding:18px 20px;}
  .HomeOCDate{ justify-content:center;}
  .HomeOCBtns{ justify-content:center; width:100%;}
  .HomeOCBtn{ display:block; width:100%; white-space:normal;}
  .HomeOCMovie{ width:100%; max-width:190px; margin:0 auto;}
}

@media (max-width: 640px) {
  .HomeOC{ margin:48px 0;}
  .HomeOCInner{ margin-left:20px; margin-right:20px; border-radius:12px;}
  .HomeOCDate__num{ font-size:2.4rem;}
  .HomeOCTitle{ font-size:1.4rem;}
  .HomeOCBtn{ padding:8px 16px; font-size:1.1rem;}
  .HomeOCMovie__play{ width:40px; height:30px;}
  .HomeOCMovie__play::after{ left:17px; top:9px; border-top-width:6px; border-bottom-width:6px; border-left-width:10px;}
  .HomeOCMovie__text{ align-items:flex-start; flex-direction:column; gap:7px; text-align:left;}
  .HomeOCMovie__title{ font-size:1rem;}
}