:root { --navy:#173f50; --navy-deep:#0d3040; --teal:#16819a; --teal-soft:#e5f2f4; --red:#e82c37; --ink:#183640; --muted:#687c83; --line:#dce7ea; --canvas:#f4f7f8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1240px,calc(100% - 48px)); margin:0 auto; }
.site-header { position:relative; z-index:10; background:rgba(255,255,255,.98); border-bottom:1px solid #e4ecee; }
.header-inner { height:82px; display:flex; align-items:center; justify-content:space-between; }
.header-logo { display:flex; align-items:center; height:64px; }
.header-logo img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.ea-logo { width:154px; justify-content:flex-start; }
.temd-logo { width:262px; justify-content:flex-end; }
.join-button svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.intro { position:relative; overflow:hidden; color:white; background-color:#082c48; background-image:linear-gradient(90deg,rgba(5,34,59,.18) 0%,rgba(5,34,59,.04) 54%,rgba(5,34,59,0) 78%),url('images/medical-webcast-hero.png'); background-repeat:no-repeat; background-position:center; background-size:cover; }
.intro::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,29,52,.22) 0%,transparent 60%); }
.intro-inner { min-height:166px; display:flex; align-items:center; justify-content:space-between; position:relative; }
.eyebrow { margin:0 0 12px; display:flex; align-items:center; gap:10px; color:#bfe2e8; font-size:11px; font-weight:700; letter-spacing:.16em; }
.eyebrow span { width:24px; height:2px; background:#58b8c9; }
h1 { margin:0; font-size:clamp(36px,4vw,49px); line-height:1; letter-spacing:-.04em; font-weight:700; }
.lead { max-width:650px; margin:12px 0 0; color:#d5e4e8; font-size:14px; line-height:1.55; }
.broadcast-section { padding:34px 0 60px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; }
.section-kicker { margin:0 0 7px; color:var(--teal); font-size:11px; font-weight:800; letter-spacing:.17em; }
h2 { margin:0; color:var(--navy-deep); font-size:28px; letter-spacing:-.025em; }
.count { padding:8px 12px; border:1px solid var(--line); border-radius:100px; background:white; color:var(--muted); font-size:12px; font-weight:700; }
.broadcast-list { display:grid; gap:28px; }
.broadcast-card { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:white; box-shadow:0 10px 35px rgba(18,60,75,.07); }
.banner-link { display:block; overflow:hidden; background:#eef1f2; border-bottom:1px solid var(--line); }
.banner-link img { display:block; width:100%; height:auto; aspect-ratio:2048/599; object-fit:cover; transition:transform .35s ease; }
.banner-link:hover img { transform:scale(1.006); }
.card-meta { min-height:112px; padding:22px 24px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:34px; align-items:center; }
.date-block { display:flex; gap:14px; align-items:flex-start; min-width:0; }
.status-dot { flex:0 0 auto; width:9px; height:9px; margin-top:4px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px #feecee; }
.status-label { display:block; margin-bottom:7px; color:var(--red); font-size:10px; font-weight:800; letter-spacing:.13em; }
h3 { margin:0; color:var(--navy); font-size:16px; line-height:1.35; }
.schedule { min-width:158px; padding-left:28px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:5px; }
.schedule span { color:var(--muted); font-size:13px; } .schedule strong { color:var(--navy); font-size:17px; }
.join-button { height:48px; padding:0 20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--red); color:white; font-size:13px; font-weight:800; box-shadow:0 7px 18px rgba(232,44,55,.22); transition:background .2s,transform .2s; }
.join-button:hover { background:#cb202b; transform:translateY(-1px); }
.notice { margin-top:28px; min-height:70px; padding:18px 22px; border:1px solid #cfe3e7; border-radius:8px; display:flex; align-items:center; gap:14px; background:var(--teal-soft); color:#4f6d76; }
.notice-icon { flex:0 0 auto; width:28px; height:28px; border:1px solid #80b4bf; border-radius:50%; display:grid; place-items:center; color:var(--teal); font:700 14px Georgia,serif; }
.notice p { margin:0; font-size:13px; line-height:1.55; } .notice strong { color:var(--navy); }
footer { border-top:1px solid #e0e8ea; background:white; }
.footer-inner { min-height:92px; display:flex; align-items:center; justify-content:space-between; color:#78898e; font-size:12px; }
.footer-inner a { color:var(--navy); font-weight:700; }
@media (max-width:820px) { .card-meta{grid-template-columns:1fr auto;gap:20px}.schedule{grid-column:1;padding:0 0 0 23px;border:0}.join-button{grid-column:2;grid-row:1/span 2} }
@media (max-width:620px) { .shell{width:min(100% - 28px,1240px)}.header-inner{height:70px}.header-logo{height:52px}.ea-logo{width:105px}.temd-logo{width:176px}.intro{background-position:61% center}.intro-inner{min-height:148px}.lead{font-size:13px;line-height:1.5}.broadcast-section{padding:28px 0 52px}h2{font-size:23px}.broadcast-card{border-radius:7px}.banner-link{overflow-x:auto}.banner-link img{min-width:680px;width:680px;max-width:none}.card-meta{padding:20px;display:flex;align-items:stretch;flex-direction:column;gap:15px}h3{white-space:normal;font-size:15px}.schedule{padding-left:23px}.join-button{width:100%}.notice{align-items:flex-start}.footer-inner{padding:23px 0;min-height:0;flex-direction:column;align-items:flex-start;gap:9px} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition:none!important} }