:root {
--mp-blue: #0877d8;
--mp-blue-dark: #0c3f72;
--mp-ink: #132238;
--mp-muted: #68778b;
--mp-line: #e5ebf2;
--mp-bg: #f5f8fb;
--mp-radius: 14px;
}
.mp-series-lab, .mp-series-box { box-sizing: border-box; }
.mp-series-lab *, .mp-series-box * { box-sizing: border-box; }
.mp-series-lab {
max-width: 1240px;
margin: 0 auto;
color: var(--mp-ink);
}
.mp-series-hero {
padding: 24px 4px 18px;
}
.mp-series-hero h1 {
margin: 0;
font-size: clamp(36px, 5vw, 58px);
line-height: 1;
letter-spacing: -1.5px;
}
.mp-series-hero p { margin: 8px 0 0; color: var(--mp-muted); font-size: 18px; }
.mp-series-hero .mp-eyebrow {
margin: 0 0 8px;
color: var(--mp-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
}
.mp-series-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.mp-series-nav a {
padding: 8px 13px;
border: 1px solid var(--mp-line);
border-radius: 999px;
color: var(--mp-ink);
text-decoration: none;
background: #fff;
font-weight: 700;
font-size: 13px;
}
.mp-series-nav a:hover { border-color: var(--mp-blue); color: var(--mp-blue); }
.mp-featured {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(330px, .9fr);
gap: 14px;
margin: 0 0 18px;
}
.mp-featured-side {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.mp-news-card {
position: relative;
display: flex;
min-height: 135px;
overflow: hidden;
border-radius: var(--mp-radius);
background: #26384c center/cover no-repeat;
color: #fff !important;
text-decoration: none !important;
}
.mp-news-card-large { min-height: 430px; }
.mp-news-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(4,16,29,.9), rgba(4,16,29,.05) 70%);
}
.mp-news-content {
position: relative;
z-index: 2;
align-self: flex-end;
display: grid;
gap: 6px;
padding: 18px;
}
.mp-news-card-large .mp-news-content { padding: 28px; }
.mp-news-content small { opacity: .82; font-size: 12px; }
.mp-news-content strong { font-size: 18px; line-height: 1.18; }
.mp-news-card-large .mp-news-content strong { font-size: clamp(26px, 3vw, 42px); }
.mp-series-box {
margin: 18px 0;
padding: 18px;
border: 1px solid var(--mp-line);
border-radius: var(--mp-radius);
background: #fff;
box-shadow: 0 8px 30px rgba(16,46,77,.05);
}
.mp-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 16px;
}
.mp-section-head > div {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.mp-section-head h2 {
margin: 0;
font-size: 24px;
letter-spacing: -.3px;
}
.mp-icon { color: var(--mp-blue); }
.mp-count {
background: #eaf5ff;
color: var(--mp-blue-dark);
border-radius: 7px;
padding: 5px 9px;
font-size: 12px;
font-weight: 800;
}
.mp-button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
padding: 11px 16px;
background: var(--mp-blue);
color: #fff !important;
text-decoration: none !important;
font-weight: 800;
}
.mp-button-small { font-size: 13px; }
.mp-days {
display: grid;
grid-template-columns: repeat(var(--mp-days), minmax(0,1fr));
border: 1px solid var(--mp-line);
border-radius: 12px;
overflow: hidden;
}
.mp-day {
min-width: 0;
padding: 14px;
border-right: 1px solid var(--mp-line);
}
.mp-day:last-child { border-right: 0; }
.mp-day h3 {
margin: 0 0 12px;
color: var(--mp-blue);
font-size: 15px;
}
.mp-day-events { display: grid; gap: 10px; }
.mp-event {
display: grid;
grid-template-columns: 64px minmax(0,1fr);
gap: 10px;
align-items: center;
color: var(--mp-ink) !important;
text-decoration: none !important;
}
.mp-event-thumb {
width: 64px;
height: 45px;
overflow: hidden;
border-radius: 7px;
background: var(--mp-bg);
}
.mp-event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-event-placeholder {
width: 100%; height: 100%;
display: grid; place-items: center;
background: #dfeaf5; color: var(--mp-blue-dark);
font-size: 11px; font-weight: 800;
}
.mp-event-copy { min-width: 0; display: grid; gap: 3px; }
.mp-event-copy strong {
font-size: 13px;
line-height: 1.2;
}
.mp-event-copy small { color: var(--mp-muted); font-size: 11px; }
.mp-empty { color: var(--mp-muted); font-size: 13px; }
.mp-post-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 12px;
}
.mp-post-grid .mp-news-card { min-height: 220px; }
.mp-weekly-grid {
display: grid;
grid-template-columns: 1.4fr .8fr;
gap: 14px;
}
.mp-weekly-grid > div {
padding: 24px;
border-radius: 12px;
background: var(--mp-bg);
}
.mp-weekly-grid h3 { margin: 0 0 8px; font-size: 24px; }
.mp-weekly-grid p { color: var(--mp-muted); }
.mp-text-link { color: var(--mp-blue); font-weight: 800; text-decoration: none; }
.mp-weekly-video {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 180px;
background: linear-gradient(135deg, #0b477a, #061a2c) !important;
color: #fff;
}
.mp-weekly-video span { font-size: 11px; font-weight: 800; color: #8fd0ff; }
.mp-weekly-video strong { margin-top: 6px; font-size: 22px; }
.mp-future-list { display: grid; }
.mp-future-list a {
display: grid;
grid-template-columns: 90px 1fr 180px;
gap: 14px;
padding: 12px 4px;
border-bottom: 1px solid var(--mp-line);
color: var(--mp-ink) !important;
text-decoration: none !important;
}
.mp-future-list a:last-child { border-bottom: 0; }
.mp-future-list time { color: var(--mp-blue); font-weight: 800; text-transform: uppercase; }
.mp-future-list span { color: var(--mp-muted); text-align: right; }
.mp-mini-calendar { max-width: 640px; }
.mp-calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.mp-calendar-grid > span {
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 8px;
font-size: 13px;
}
.mp-cal-head { color: var(--mp-muted); font-weight: 800; aspect-ratio: auto !important; padding: 7px 0; }
.mp-cal-day { background: var(--mp-bg); position: relative; }
.mp-cal-day.has-event::after {
content: "";
position: absolute;
bottom: 5px;
width: 4px; height: 4px;
background: var(--mp-blue);
border-radius: 50%;
}
.mp-cal-day.is-today {
background: var(--mp-blue);
color: #fff;
font-weight: 800;
}
.mp-cal-day.is-today.has-event::after { background: #fff; }
.mp-series-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 20px 0 0;
padding: 28px;
border-radius: var(--mp-radius);
background: linear-gradient(135deg, #075d9d, #0d3c69);
color: #fff;
}
.mp-series-cta h2 { margin: 0 0 6px; font-size: 28px; }
.mp-series-cta p { margin: 0; opacity: .9; }
.mp-cta-actions { display: flex; gap: 10px; }
.mp-button-light { background: #fff; color: var(--mp-blue-dark) !important; }
.mp-button-green { background: #20b65a; }
.mp-series-alert {
padding: 12px 14px;
border: 1px solid #dba617;
border-radius: 8px;
background: #fff7da;
color: #5a4300;
}
@media (max-width: 980px) {
.mp-featured { grid-template-columns: 1fr; }
.mp-featured-side { grid-template-columns: repeat(3, 1fr); }
.mp-news-card-large { min-height: 360px; }
.mp-days { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mp-day { border-bottom: 1px solid var(--mp-line); }
.mp-post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.mp-series-lab { padding: 0 2px; }
.mp-series-hero { padding-top: 10px; }
.mp-series-hero p { font-size: 16px; }
.mp-series-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
.mp-series-nav a { flex: 0 0 auto; }
.mp-featured-side { grid-template-columns: 1fr; }
.mp-news-card-large { min-height: 300px; }
.mp-series-box { padding: 14px; border-radius: 10px; }
.mp-section-head { align-items: flex-start; flex-direction: column; }
.mp-days { display: block; border: 0; }
.mp-day {
padding: 14px 0;
border: 0;
border-bottom: 1px solid var(--mp-line);
}
.mp-day:last-child { border-bottom: 0; }
.mp-event { grid-template-columns: 88px minmax(0,1fr); }
.mp-event-thumb { width: 88px; height: 58px; }
.mp-post-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-post-grid .mp-news-card { min-height: 190px; }
.mp-weekly-grid { grid-template-columns: 1fr; }
.mp-future-list a { grid-template-columns: 65px 1fr; }
.mp-future-list span { grid-column: 2; text-align: left; margin-top: -8px; }
.mp-series-cta { align-items: flex-start; flex-direction: column; padding: 22px; }
.mp-cta-actions { width: 100%; }
.mp-cta-actions a { flex: 1; }
}