.sdb-highlights {
--sdb-heh-gap: clamp(var(--sdb-space-md, 18px), 2.4vw, var(--sdb-space-lg, 32px));
--sdb-heh-bg: var(--sdb-color-background, var(--sdb-color-surface-high, #f5f8fb));
--sdb-heh-surface: var(--sdb-color-surface, var(--sdb-color-surface-lowest, #fff));
--sdb-heh-surface-soft: var(--sdb-color-surface-low, var(--sdb-color-background, #f5f8fb));
--sdb-heh-text: var(--sdb-color-on-surface-muted, var(--sdb-color-text, #6b7785));
--sdb-heh-title: var(--sdb-context-editorial-title, var(--sdb-color-title, #364048));
--sdb-heh-muted: var(--sdb-color-muted, #8e9aa7);
--sdb-heh-border: var(--sdb-color-outline-variant, var(--sdb-color-border, #eef3f8));
--sdb-heh-accent: var(--sdb-color-editorial-accent, var(--sdb-color-primary, #0058b7));
--sdb-heh-accent-soft: var(--sdb-color-editorial-accent-soft, rgba(31, 59, 91, .10));
--sdb-heh-on-image: var(--sdb-color-on-image, #fff);
--sdb-heh-radius: var(--sdb-radius-lg, var(--sdb-shape-lg, 20px));
--sdb-heh-radius-sm: var(--sdb-radius-md, var(--sdb-shape-md, 12px));
--sdb-heh-radius-pill: var(--sdb-radius-pill, var(--sdb-shape-pill, 999px));
--sdb-heh-shadow: var(--sdb-shadow-card, var(--sdb-elevation-2, 0 10px 24px rgba(31, 42, 54, .08)));
--sdb-heh-shadow-soft: var(--sdb-shadow-element, var(--sdb-elevation-1, 0 4px 12px rgba(31, 42, 54, .05)));
--sdb-heh-font-heading: var(--sdb-font-heading, inherit);
--sdb-heh-font-body: var(--sdb-font-body, inherit);
--sdb-heh-title-sm: var(--sdb-editorial-title-sm, 1.05rem);
--sdb-heh-title-md: var(--sdb-editorial-title-md, 1.35rem);
--sdb-heh-title-lg: var(--sdb-editorial-title-lg, 1.8rem);
--sdb-heh-title-featured: var(--sdb-editorial-title-featured, clamp(2rem, 3vw, 3.25rem));
--sdb-heh-motion-fast: var(--sdb-motion-duration-fast, 120ms);
--sdb-heh-motion-base: var(--sdb-motion-duration-base, 180ms);
--sdb-heh-easing: var(--sdb-motion-easing-standard, cubic-bezier(.2, 0, 0, 1));
container-type: inline-size;
color: var(--sdb-heh-text);
font-family: var(--sdb-heh-font-body);
}
.sdb-highlights,
.sdb-highlights * { box-sizing: border-box; }
.sdb-highlights__grid {
display: grid;
gap: var(--sdb-heh-gap);
}
.sdb-highlight-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
border: 1px solid var(--sdb-heh-border);
border-radius: var(--sdb-heh-radius);
background: var(--sdb-heh-surface);
box-shadow: var(--sdb-elevation-1, 0 4px 12px rgba(31, 42, 54, .05));
overflow: hidden;
isolation: isolate;
transition: transform var(--sdb-heh-motion-base) var(--sdb-heh-easing), border-color var(--sdb-heh-motion-base) var(--sdb-heh-easing), box-shadow var(--sdb-heh-motion-base) var(--sdb-heh-easing);
}
.sdb-highlight-card:hover,
.sdb-highlight-card:focus-within {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--sdb-heh-accent) 22%, var(--sdb-heh-border));
box-shadow: var(--sdb-heh-shadow-soft);
}
.sdb-highlight-card__media {
position: relative;
z-index: 1;
margin: 0;
aspect-ratio: 16 / 10;
background: color-mix(in srgb, var(--sdb-heh-accent) 5%, var(--sdb-heh-bg));
overflow: hidden;
}
.sdb-highlight-card__image {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
transition: transform var(--sdb-motion-duration-slow, 280ms) var(--sdb-heh-easing), filter var(--sdb-motion-duration-slow, 280ms) var(--sdb-heh-easing);
}
.sdb-highlight-card:hover .sdb-highlight-card__image,
.sdb-highlight-card:focus-within .sdb-highlight-card__image { transform: scale(1.018); }
.sdb-highlight-card__content {
position: relative;
z-index: 2;
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
gap: clamp(10px, 1vw, 14px);
padding: clamp(20px, 2.2vw, 32px);
}
.sdb-highlight-card__eyebrow,
.sdb-highlights .sdb-editorial-pill {
display: inline-flex;
align-items: center;
max-width: 100%;
min-height: 26px;
gap: 7px;
padding: 4px 11px;
border: 1px solid color-mix(in srgb, var(--sdb-heh-accent) 16%, transparent);
border-radius: var(--sdb-heh-radius-pill);
background: var(--sdb-heh-accent-soft);
color: var(--sdb-heh-accent);
font-family: var(--sdb-font-meta, var(--sdb-heh-font-body));
font-size: .7rem;
font-weight: var(--sdb-font-weight-bold, 700);
letter-spacing: .045em;
line-height: 1.2;
text-transform: uppercase;
}
.sdb-highlight-card__eyebrow.sdb-tag-on-image,
.sdb-highlights .sdb-editorial-pill--on-image {
border-color: rgba(255, 255, 255, .32);
background: rgba(255, 255, 255, .14);
color: var(--sdb-heh-on-image);
backdrop-filter: blur(10px);
}
.sdb-highlight-card__eyebrow-text {
display: inline-block;
max-width: min(34ch, 100%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sdb-highlight-card__icon {
display: inline-grid;
place-items: center;
font-size: .84rem;
line-height: 1;
}
.sdb-highlight-card__title {
margin: 0;
color: var(--sdb-heh-title);
font-family: var(--sdb-heh-font-heading);
font-size: var(--sdb-heh-title-md);
font-weight: var(--sdb-font-weight-bold, 700);
letter-spacing: -.018em;
line-height: 1.13;
}
.sdb-highlight-card__title-link {
color: inherit;
text-decoration: none;
}
.sdb-highlight-card__title-link:hover { color: var(--sdb-heh-accent); }
.sdb-highlight-card__excerpt {
margin: 0;
max-width: 62ch;
color: var(--sdb-heh-muted);
font-size: clamp(.95rem, .90rem + .13vw, 1.04rem);
line-height: var(--sdb-line-height-body, 1.62);
}
.sdb-highlight-card__link,
.sdb-highlights .sdb-editorial-link {
display: inline-flex;
align-items: center;
gap: 8px;
width: auto;
margin-top: auto;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
color: var(--sdb-editorial-cta-color, var(--sdb-heh-accent));
font-size: .82rem;
font-weight: var(--sdb-font-weight-bold, 700);
letter-spacing: .025em;
line-height: 1.2;
text-decoration: none;
text-transform: uppercase;
transition: color var(--sdb-heh-motion-fast) var(--sdb-heh-easing), background var(--sdb-heh-motion-fast) var(--sdb-heh-easing), transform var(--sdb-heh-motion-fast) var(--sdb-heh-easing);
}
.sdb-highlight-card__link:hover,
.sdb-highlight-card__link:focus { color: var(--sdb-editorial-cta-hover-color, var(--sdb-heh-accent)); text-decoration: none; }
.sdb-highlight-card__link::before,
.sdb-highlight-card__link::after { content: none; }
.sdb-highlight-card__link-arrow {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: var(--sdb-heh-radius-pill);
background: var(--sdb-editorial-cta-icon-bg, color-mix(in srgb, currentColor 11%, transparent));
color: var(--sdb-editorial-cta-icon-color, currentColor);
transition: transform var(--sdb-heh-motion-fast) var(--sdb-heh-easing), background var(--sdb-heh-motion-fast) var(--sdb-heh-easing), color var(--sdb-heh-motion-fast) var(--sdb-heh-easing);
}
.sdb-highlight-card__link-arrow svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
}
.sdb-highlight-card__link:hover .sdb-highlight-card__link-arrow,
.sdb-highlight-card__link:focus-visible .sdb-highlight-card__link-arrow { transform: translateX(2px); }
.sdb-highlight-card__title-link:focus-visible,
.sdb-highlight-card__link:focus-visible {
outline: 0;
box-shadow: var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, .22));
border-radius: var(--sdb-radius-sm, 8px);
} .sdb-highlight-card--fit-contain .sdb-highlight-card__image,
.sdb-highlights--image-fit-contain .sdb-highlight-card__image,
.sdb-highlights .sdb-media-fit-contain .sdb-highlight-card__image,
.sdb-highlights .sdb-media-logo-safe .sdb-highlight-card__image {
object-fit: contain;
padding: clamp(10px, 1.4vw, 18px);
}
.sdb-highlight-card--fit-cover .sdb-highlight-card__image,
.sdb-highlights .sdb-media-fit-cover .sdb-highlight-card__image { object-fit: cover; padding: 0; }
.sdb-highlight-card--pos-top .sdb-highlight-card__image { object-position: center top; }
.sdb-highlight-card--pos-bottom .sdb-highlight-card__image { object-position: center bottom; }
.sdb-highlight-card--pos-left .sdb-highlight-card__image { object-position: left center; }
.sdb-highlight-card--pos-right .sdb-highlight-card__image { object-position: right center; }
.sdb-highlights .sdb-media-logo-safe { background: var(--sdb-heh-surface-soft); } .sdb-highlight-card.sdb-on-image {
min-height: clamp(360px, 32vw, 520px);
background: var(--sdb-heh-title);
color: var(--sdb-heh-on-image);
}
.sdb-highlight-card.sdb-on-image .sdb-highlight-card__media {
position: absolute;
inset: 0;
height: 100%;
aspect-ratio: auto;
}
.sdb-highlight-card.sdb-on-image .sdb-highlight-card__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--sdb-overlay-medium, linear-gradient(180deg, rgba(5, 18, 34, .06), rgba(5, 18, 34, .76)));
pointer-events: none;
}
.sdb-highlight-card.sdb-on-image .sdb-highlight-card__content {
position: relative;
z-index: 2;
justify-content: flex-end;
min-height: inherit;
color: var(--sdb-heh-on-image);
}
.sdb-highlight-card.sdb-on-image .sdb-highlight-card__title,
.sdb-highlight-card.sdb-on-image .sdb-highlight-card__title-link,
.sdb-highlight-card.sdb-on-image .sdb-highlight-card__excerpt,
.sdb-highlight-card.sdb-on-image .sdb-highlight-card__link { color: var(--sdb-heh-on-image); }
.sdb-highlight-card.sdb-on-image .sdb-highlight-card__excerpt { opacity: .9; }
.sdb-highlight-card.sdb-on-image .sdb-highlight-card__title-link:hover { color: var(--sdb-heh-on-image); }
.sdb-highlight-card.sdb-on-image .sdb-highlight-card__link-arrow { background: rgba(255, 255, 255, .16); } .sdb-highlight-card--variant-featured {
border-color: color-mix(in srgb, var(--sdb-heh-accent) 22%, var(--sdb-heh-border));
box-shadow: var(--sdb-heh-shadow-soft);
}
.sdb-highlight-card--variant-featured .sdb-highlight-card__title { font-size: var(--sdb-heh-title-lg); }
.sdb-highlight-card--variant-featured .sdb-highlight-card__link {
padding: 10px 14px;
border-radius: var(--sdb-editorial-cta-radius, var(--sdb-heh-radius-pill));
background: var(--sdb-editorial-cta-bg, var(--sdb-heh-accent));
color: var(--sdb-heh-on-image);
}
.sdb-highlight-card--variant-featured .sdb-highlight-card__link:hover { background: var(--sdb-editorial-cta-bg-hover, var(--sdb-heh-accent)); color: var(--sdb-heh-on-image); }
.sdb-highlight-card--variant-featured .sdb-highlight-card__link-arrow { background: color-mix(in srgb, var(--sdb-heh-on-image) 18%, transparent); }
.sdb-highlight-card--variant-quiet {
border-color: color-mix(in srgb, var(--sdb-heh-border) 70%, transparent);
box-shadow: none;
}
.sdb-highlight-card--variant-quiet:hover,
.sdb-highlight-card--variant-quiet:focus-within { transform: none; box-shadow: none; }
.sdb-highlight-card--variant-quiet .sdb-highlight-card__title { font-size: var(--sdb-heh-title-sm); }
.sdb-highlight-card--variant-quiet .sdb-highlight-card__eyebrow { opacity: .9; }
.sdb-highlight-card--variant-quiet .sdb-highlight-card__link { font-size: .78rem; opacity: .9; }
.sdb-highlight-card--variant-institutional {
background: linear-gradient(180deg, var(--sdb-heh-surface), var(--sdb-heh-surface-soft));
border-color: color-mix(in srgb, var(--sdb-heh-accent) 16%, var(--sdb-heh-border));
}
.sdb-highlight-card--variant-institutional .sdb-highlight-card__content {
background: linear-gradient(180deg, rgba(255,255,255,.38), transparent);
}
.sdb-highlight-card--variant-institutional .sdb-highlight-card__eyebrow { background: var(--sdb-heh-accent-soft); }
.sdb-highlight-card--variant-logo,
.sdb-highlight-card--variant-logo:hover,
.sdb-highlight-card--variant-logo:focus-within { transform: none; }
.sdb-highlight-card--variant-logo .sdb-highlight-card__media { background: var(--sdb-heh-surface-soft); }
.sdb-highlight-card--variant-logo .sdb-highlight-card__image { transform: none; } .sdb-highlights--editorial .sdb-highlights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sdb-highlights--editorial .sdb-highlight-card__media { aspect-ratio: 16 / 9; } .sdb-highlights--mosaic .sdb-highlights__grid { grid-template-columns: minmax(0, 1.32fr) minmax(280px, .68fr); grid-auto-rows: minmax(230px, auto); }
.sdb-highlights--mosaic .sdb-highlight-card--index-1 { grid-row: span 2; }
.sdb-highlights--mosaic .sdb-highlight-card--index-1 .sdb-highlight-card__title { font-size: var(--sdb-heh-title-lg); }
.sdb-highlights--mosaic .sdb-highlight-card:not(.sdb-highlight-card--index-1) { display: grid; grid-template-columns: 120px minmax(0, 1fr); min-height: 0; }
.sdb-highlights--mosaic .sdb-highlight-card:not(.sdb-highlight-card--index-1) .sdb-highlight-card__media { height: 100%; aspect-ratio: auto; }
.sdb-highlights--mosaic .sdb-highlight-card:not(.sdb-highlight-card--index-1) .sdb-highlight-card__content { padding: 18px; gap: 8px; }
.sdb-highlights--mosaic .sdb-highlight-card:not(.sdb-highlight-card--index-1) .sdb-highlight-card__title { font-size: var(--sdb-heh-title-sm); }
.sdb-highlights--mosaic .sdb-highlight-card:not(.sdb-highlight-card--index-1) .sdb-highlight-card__excerpt { font-size: .9rem; line-height: 1.45; } .sdb-highlights--compact .sdb-highlights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.sdb-highlights--compact .sdb-highlight-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); border-radius: var(--sdb-heh-radius-sm); }
.sdb-highlights--compact .sdb-highlight-card__media { height: 100%; aspect-ratio: auto; }
.sdb-highlights--compact .sdb-highlight-card__content { padding: 16px; gap: 7px; }
.sdb-highlights--compact .sdb-highlight-card__title { font-size: 1.02rem; }
.sdb-highlights--compact .sdb-highlight-card__excerpt { font-size: .88rem; line-height: 1.42; } .sdb-highlights--poster .sdb-highlights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sdb-highlights--poster .sdb-highlight-card { min-height: clamp(360px, 32vw, 500px); border-radius: clamp(22px, 2.6vw, 34px); }
.sdb-highlights--poster .sdb-highlight-card__content { padding: clamp(24px, 3vw, 40px); }
.sdb-highlights--poster .sdb-highlight-card__title { max-width: 12.5em; font-size: var(--sdb-heh-title-lg); }
.sdb-highlights--poster .sdb-highlight-card__excerpt { max-width: 30ch; }
.sdb-highlights--poster .sdb-highlight-card--variant-logo,
.sdb-highlights--poster .sdb-highlight-card--variant-quiet,
.sdb-highlights--poster .sdb-highlight-card--variant-institutional { min-height: 0; background: var(--sdb-heh-surface); color: var(--sdb-heh-text); }
.sdb-highlights--poster .sdb-highlight-card--variant-logo .sdb-highlight-card__media,
.sdb-highlights--poster .sdb-highlight-card--variant-quiet .sdb-highlight-card__media,
.sdb-highlights--poster .sdb-highlight-card--variant-institutional .sdb-highlight-card__media { position: relative; aspect-ratio: 4 / 3; height: auto; }
.sdb-highlights--poster .sdb-highlight-card--variant-logo .sdb-highlight-card__content,
.sdb-highlights--poster .sdb-highlight-card--variant-quiet .sdb-highlight-card__content,
.sdb-highlights--poster .sdb-highlight-card--variant-institutional .sdb-highlight-card__content { min-height: auto; background: var(--sdb-heh-surface); color: var(--sdb-heh-text); } .sdb-highlights--stage .sdb-highlights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.sdb-highlights--stage .sdb-highlight-card { border: 0; background: transparent; box-shadow: none; overflow: visible; }
.sdb-highlights--stage .sdb-highlight-card:hover,
.sdb-highlights--stage .sdb-highlight-card:focus-within { transform: translateY(-2px); box-shadow: none; }
.sdb-highlights--stage .sdb-highlight-card__media {
aspect-ratio: 4 / 5;
border: 1px solid color-mix(in srgb, var(--sdb-heh-border) 62%, transparent);
border-radius: clamp(18px, 2.2vw, 30px);
box-shadow: var(--sdb-heh-shadow-soft);
}
.sdb-highlights--stage .sdb-highlight-card--variant-featured .sdb-highlight-card__media { aspect-ratio: 4 / 5.35; box-shadow: var(--sdb-heh-shadow); }
.sdb-highlights--stage .sdb-highlight-card__content { padding: clamp(15px, 1.6vw, 22px) 0 0; background: transparent; box-shadow: none; gap: 8px; }
.sdb-highlights--stage .sdb-highlight-card__title { font-size: var(--sdb-heh-title-sm); }
.sdb-highlights--stage .sdb-highlight-card--variant-featured .sdb-highlight-card__title { font-size: var(--sdb-heh-title-md); }
.sdb-highlights--stage .sdb-highlight-card__excerpt { font-size: .94rem; line-height: 1.5; }
.sdb-highlights--stage .sdb-highlight-card__link { margin-top: 8px; } .sdb-highlights--story .sdb-highlights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sdb-highlights--story .sdb-highlight-card { min-height: clamp(360px, 32vw, 500px); border-radius: clamp(22px, 2.6vw, 34px); }
.sdb-highlights--story .sdb-highlight-card__content {
align-self: flex-end;
width: calc(100% - clamp(28px, 3vw, 48px));
min-height: auto;
margin: auto clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px);
padding: clamp(18px, 2vw, 26px);
border: 1px solid color-mix(in srgb, var(--sdb-heh-surface) 70%, transparent);
border-radius: calc(var(--sdb-heh-radius) - 8px);
background: color-mix(in srgb, var(--sdb-heh-surface) 90%, transparent);
box-shadow: var(--sdb-heh-shadow-soft);
backdrop-filter: blur(10px);
color: var(--sdb-heh-text);
}
.sdb-highlights--story .sdb-highlight-card__title,
.sdb-highlights--story .sdb-highlight-card__title-link { color: var(--sdb-heh-title); }
.sdb-highlights--story .sdb-highlight-card__excerpt { color: var(--sdb-heh-muted); }
.sdb-highlights--story .sdb-highlight-card--variant-logo,
.sdb-highlights--story .sdb-highlight-card--variant-quiet,
.sdb-highlights--story .sdb-highlight-card--variant-institutional { min-height: 0; background: var(--sdb-heh-surface); }
.sdb-highlights--story .sdb-highlight-card--variant-logo .sdb-highlight-card__media,
.sdb-highlights--story .sdb-highlight-card--variant-quiet .sdb-highlight-card__media,
.sdb-highlights--story .sdb-highlight-card--variant-institutional .sdb-highlight-card__media { position: relative; height: auto; aspect-ratio: 4 / 3; }
.sdb-highlights--story .sdb-highlight-card--variant-logo .sdb-highlight-card__content,
.sdb-highlights--story .sdb-highlight-card--variant-quiet .sdb-highlight-card__content,
.sdb-highlights--story .sdb-highlight-card--variant-institutional .sdb-highlight-card__content { width: auto; margin: 0; border: 0; border-radius: 0; background: var(--sdb-heh-surface); box-shadow: none; backdrop-filter: none; } .sdb-highlights--note .sdb-highlights__grid { grid-template-columns: minmax(300px, .88fr) minmax(420px, 1.12fr); align-items: center; gap: clamp(28px, 5vw, 74px); }
.sdb-highlights--note .sdb-highlight-card { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(300px, .88fr) minmax(420px, 1.12fr); border: 0; background: transparent; box-shadow: none; overflow: visible; }
.sdb-highlights--note .sdb-highlight-card:hover,
.sdb-highlights--note .sdb-highlight-card:focus-within { transform: none; box-shadow: none; }
.sdb-highlights--note .sdb-highlight-card__content { grid-column: 1; grid-row: 1; padding: clamp(18px, 2vw, 28px); border-left: 3px solid color-mix(in srgb, var(--sdb-heh-accent) 22%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--sdb-heh-accent) 5%, var(--sdb-heh-surface)), transparent 78%); }
.sdb-highlights--note .sdb-highlight-card__title { font-size: var(--sdb-heh-title-lg); }
.sdb-highlights--note .sdb-highlight-card__title::after { content: ""; display: block; width: min(100%, 360px); height: 1px; margin: 18px 0 0; background: color-mix(in srgb, var(--sdb-heh-accent) 25%, var(--sdb-heh-border)); }
.sdb-highlights--note .sdb-highlight-card__media { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 9; border: 1px solid color-mix(in srgb, var(--sdb-heh-border) 60%, transparent); border-radius: clamp(20px, 2.3vw, 32px); box-shadow: var(--sdb-heh-shadow-soft); }
.sdb-highlights--note .sdb-highlight-card__link { margin-top: clamp(8px, 1vw, 14px); } .sdb-highlights--impact .sdb-highlights__grid,
.sdb-highlights--split .sdb-highlights__grid,
.sdb-highlights--overlap .sdb-highlights__grid { grid-template-columns: 1fr; }
.sdb-highlights--impact .sdb-highlight-card { min-height: clamp(420px, 42vw, 620px); }
.sdb-highlights--split .sdb-highlight-card,
.sdb-highlights--overlap .sdb-highlight-card { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr); align-items: stretch; }
.sdb-highlights--split .sdb-highlight-card__content,
.sdb-highlights--overlap .sdb-highlight-card__content { grid-column: 1; grid-row: 1; }
.sdb-highlights--split .sdb-highlight-card__media,
.sdb-highlights--overlap .sdb-highlight-card__media { grid-column: 2; grid-row: 1; height: 100%; aspect-ratio: auto; }
@media (max-width: 1100px) {
.sdb-highlights--editorial .sdb-highlights__grid,
.sdb-highlights--poster .sdb-highlights__grid,
.sdb-highlights--stage .sdb-highlights__grid,
.sdb-highlights--story .sdb-highlights__grid,
.sdb-highlights--compact .sdb-highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sdb-highlights--mosaic .sdb-highlights__grid { grid-template-columns: 1fr; }
.sdb-highlights--mosaic .sdb-highlight-card--index-1 { grid-row: auto; }
}
@media (max-width: 760px) {
.sdb-highlights__grid,
.sdb-highlights--editorial .sdb-highlights__grid,
.sdb-highlights--poster .sdb-highlights__grid,
.sdb-highlights--stage .sdb-highlights__grid,
.sdb-highlights--story .sdb-highlights__grid,
.sdb-highlights--compact .sdb-highlights__grid,
.sdb-highlights--note .sdb-highlights__grid { grid-template-columns: 1fr; }
.sdb-highlights--compact .sdb-highlight-card,
.sdb-highlights--mosaic .sdb-highlight-card:not(.sdb-highlight-card--index-1),
.sdb-highlights--split .sdb-highlight-card,
.sdb-highlights--overlap .sdb-highlight-card,
.sdb-highlights--note .sdb-highlight-card { grid-template-columns: 1fr; }
.sdb-highlights--note .sdb-highlight-card__content,
.sdb-highlights--note .sdb-highlight-card__media,
.sdb-highlights--split .sdb-highlight-card__content,
.sdb-highlights--split .sdb-highlight-card__media,
.sdb-highlights--overlap .sdb-highlight-card__content,
.sdb-highlights--overlap .sdb-highlight-card__media { grid-column: 1; grid-row: auto; }
.sdb-highlights--poster .sdb-highlight-card,
.sdb-highlights--story .sdb-highlight-card,
.sdb-highlights--impact .sdb-highlight-card { min-height: clamp(340px, 92vw, 480px); }
.sdb-highlights--stage .sdb-highlight-card__media { aspect-ratio: 16 / 11; }
.sdb-highlight-card__content { padding: clamp(18px, 5vw, 24px); }
}
@media (prefers-reduced-motion: reduce) {
.sdb-highlight-card,
.sdb-highlight-card__image,
.sdb-highlight-card__link,
.sdb-highlight-card__link-arrow { transition: none; }
.sdb-highlight-card:hover,
.sdb-highlight-card:focus-within,
.sdb-highlight-card:hover .sdb-highlight-card__image,
.sdb-highlight-card:focus-within .sdb-highlight-card__image { transform: none; }
} .sdb-highlights--feature .sdb-highlights__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
.sdb-highlights--feature .sdb-highlight-card {
border: 0;
border-radius: 0;
box-shadow: none;
background: var(--sdb-heh-surface);
}
.sdb-highlights--feature .sdb-highlight-card:hover,
.sdb-highlights--feature .sdb-highlight-card:focus-within {
transform: none;
border: 0;
box-shadow: none;
}
.sdb-highlights--feature .sdb-highlight-card:hover .sdb-highlight-card__image,
.sdb-highlights--feature .sdb-highlight-card:focus-within .sdb-highlight-card__image { transform: none; } @supports (grid-template-rows: subgrid) {
.sdb-highlights--feature .sdb-highlight-card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
}
.sdb-highlights--feature .sdb-highlight-card__header {
display: flex;
align-items: center;
gap: clamp(12px, 1.4vw, 18px);
min-width: 0;
padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
background: var(--sdb-heh-header-bg, var(--sdb-heh-accent));
color: var(--sdb-heh-on-image);
}
.sdb-highlights--feature .sdb-highlight-card__header .sdb-highlight-card__icon {
flex: 0 0 auto;
width: clamp(40px, 3vw, 48px);
height: clamp(40px, 3vw, 48px);
font-size: clamp(1.5rem, 1.9vw, 2rem);
color: var(--sdb-heh-on-image);
}
.sdb-highlights--feature .sdb-highlight-card__header .sdb-highlight-card__icon i { font-size: inherit; line-height: 1; }
.sdb-highlights--feature .sdb-highlight-card__header-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sdb-highlights--feature .sdb-highlight-card__header-title {
margin: 0;
min-width: 0;
overflow: hidden;
color: var(--sdb-heh-on-image);
font-family: var(--sdb-heh-font-heading);
font-size: clamp(1.05rem, 1.4vw, 1.35rem);
font-weight: var(--sdb-font-weight-bold, 700);
line-height: 1.15;
letter-spacing: -.01em;
text-overflow: ellipsis;
white-space: nowrap;
}
.sdb-highlights--feature .sdb-highlight-card__header-subtitle {
display: block;
min-width: 0;
min-height: 1.2em;
overflow: hidden;
color: var(--sdb-heh-on-image);
font-size: clamp(.85rem, 1vw, .98rem);
line-height: 1.2;
opacity: .9;
text-overflow: ellipsis;
white-space: nowrap;
}
.sdb-highlights--feature .sdb-highlight-card__media {
margin: 0;
aspect-ratio: 16 / 9;
border-radius: 0;
background: color-mix(in srgb, var(--sdb-heh-header-bg, var(--sdb-heh-accent)) 8%, var(--sdb-heh-surface-soft));
}
.sdb-highlights--feature .sdb-highlight-card__content {
gap: clamp(12px, 1.4vw, 18px);
padding: clamp(20px, 2.2vw, 30px);
}
.sdb-highlights--feature .sdb-highlight-card__title {
font-size: var(--sdb-heh-title-md);
}
.sdb-highlights--feature .sdb-highlight-card__excerpt {
color: var(--sdb-heh-muted);
}
.sdb-highlights--feature .sdb-highlight-card__link {
margin-top: auto;
}
@media (max-width: 1100px) {
.sdb-highlights--feature .sdb-highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.sdb-highlights--feature .sdb-highlights__grid { grid-template-columns: 1fr; }
} .sdb-highlights--carousel {
--sdb-heh-carousel-item-width: var(--sdb-carousel-item-width, min(82vw, 340px));
--sdb-heh-carousel-gap: var(--sdb-responsive-gap-md, var(--sdb-heh-gap));
}
.sdb-highlights--carousel .sdb-highlights-carousel__viewport {
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline: 2px;
-webkit-overflow-scrolling: touch;
}
.sdb-highlights--carousel .sdb-highlights-carousel__viewport:focus-visible {
outline: 0;
box-shadow: var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, .22));
border-radius: var(--sdb-heh-radius);
}
.sdb-highlights--carousel .sdb-highlights-carousel__track,
.sdb-highlights--carousel .sdb-highlights__grid {
display: flex;
grid-template-columns: none;
align-items: stretch;
gap: var(--sdb-heh-carousel-gap);
width: max-content;
max-width: none;
min-width: 100%;
padding: 2px 2px 10px;
}
.sdb-highlights--carousel .sdb-highlights-carousel__item {
flex: 0 0 var(--sdb-heh-carousel-item-width);
width: var(--sdb-heh-carousel-item-width);
min-width: 0;
scroll-snap-align: start;
}
.sdb-highlights--carousel .sdb-highlight-card {
height: 100%;
min-height: clamp(380px, 42vw, 540px);
border-radius: clamp(22px, 2.6vw, 34px);
}
.sdb-highlights--carousel .sdb-highlight-card__content {
padding: clamp(22px, 2.6vw, 34px);
}
.sdb-highlights--carousel .sdb-highlight-card__title {
font-size: var(--sdb-editorial-title-md, var(--sdb-heh-title-md));
}
.sdb-highlights--carousel .sdb-highlights-carousel__controls {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--sdb-space-sm, .75rem);
margin-top: var(--sdb-space-sm, .75rem);
}
.sdb-highlights--carousel .sdb-highlights-carousel__button {
display: inline-grid;
place-items: center;
width: var(--sdb-touch-target-min, 44px);
height: var(--sdb-touch-target-min, 44px);
min-width: var(--sdb-touch-target-min, 44px);
padding: 0;
border: 1px solid var(--sdb-heh-border);
border-radius: var(--sdb-heh-radius-pill);
background: var(--sdb-heh-surface);
box-shadow: var(--sdb-heh-shadow-soft);
color: var(--sdb-heh-accent);
font: inherit;
line-height: 1;
cursor: pointer;
transition: background var(--sdb-heh-motion-fast) var(--sdb-heh-easing), border-color var(--sdb-heh-motion-fast) var(--sdb-heh-easing), color var(--sdb-heh-motion-fast) var(--sdb-heh-easing), transform var(--sdb-heh-motion-fast) var(--sdb-heh-easing);
}
.sdb-highlights--carousel .sdb-highlights-carousel__button:hover,
.sdb-highlights--carousel .sdb-highlights-carousel__button:focus-visible {
border-color: color-mix(in srgb, var(--sdb-heh-accent) 24%, var(--sdb-heh-border));
background: var(--sdb-heh-accent-soft);
color: var(--sdb-heh-accent);
transform: translateY(-1px);
}
.sdb-highlights--carousel .sdb-highlights-carousel__button[disabled] {
cursor: default;
opacity: .38;
transform: none;
}
@media (max-width: 760px) {
.sdb-highlights--carousel {
--sdb-heh-carousel-item-width: min(86vw, 340px);
}
.sdb-highlights--carousel .sdb-highlights-carousel__controls {
justify-content: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.sdb-highlights--carousel .sdb-highlights-carousel__viewport {
scroll-behavior: auto;
}
.sdb-highlights--carousel .sdb-highlights-carousel__button {
transition: none;
}
}