.ms-promotional-banner { --ms-promo-overlay: rgba(23, 32, 51, .42); position: relative; overflow: hidden; color: #fff; background: var(--ms-promotional-banner-bg, #244d2c); }
.ms-promotional-banner-width-contained .ms-promotional-banner-inner { width: min(100% - 2rem, 1360px); margin: 0 auto; }
.ms-promotional-banner-inner { position: relative; display: grid; min-height: 360px; grid-template-columns: 1fr 1fr; align-items: stretch; }
.ms-promotional-banner-copy { position: relative; z-index: 2; display: flex; max-width: 620px; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 6vw, 6rem); }
.ms-promotional-banner-align-center .ms-promotional-banner-copy { align-items: center; margin: 0 auto; text-align: center; }
.ms-promotional-banner-eyebrow { margin: 0 0 .8rem; color: #f2cd71; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ms-promotional-banner-copy h2 { margin: 0; color: inherit; font-size: clamp(2rem, 4vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; }
.ms-promotional-banner-description { max-width: 48ch; margin: 1rem 0 0; color: rgba(255,255,255,.86); font-size: 1.05rem; line-height: 1.55; }
.ms-promotional-banner-highlight { display: inline-flex; margin-top: 1.1rem; padding: .45rem .75rem; color: #172033; background: #f2cd71; border-radius: 999px; font-size: .78rem; }
.ms-promotional-banner-cta { display: inline-flex; align-items: center; min-height: 46px; margin-top: 1.4rem; padding: 0 1.15rem; color: #172033; background: #fff; border-radius: 4px; font-weight: 800; text-decoration: none; transition: transform var(--ms-promotional-banner-duration, 260ms) var(--ms-promotional-banner-easing, ease-out); }
.ms-promotional-banner-cta:hover { color: #172033; transform: translateY(-2px); }
.ms-promotional-banner-visual { position: relative; min-height: 280px; background: rgba(255,255,255,.08); }
.ms-promotional-banner-image { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.ms-promotional-banner--full_campaign .ms-promotional-banner-inner { display: block; }
.ms-promotional-banner--full_campaign .ms-promotional-banner-visual { position: absolute; inset: 0; opacity: .62; }
.ms-promotional-banner--full_campaign .ms-promotional-banner-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ms-promo-overlay), transparent 72%); content: ''; }
.ms-promotional-banner--full_campaign .ms-promotional-banner-copy { min-height: 360px; margin: 0 auto; }
.ms-promotional-banner--split_promotion .ms-promotional-banner-inner { grid-template-columns: 40% 60%; }
.ms-promotional-banner--split_promotion .ms-promotional-banner-visual { order: 2; }
.ms-promotional-banner--split_promotion.ms-promotional-banner-position-left .ms-promotional-banner-visual { order: 1; }
.ms-promotional-banner--split_promotion.ms-promotional-banner-position-left .ms-promotional-banner-copy { order: 2; }
.ms-promotional-banner--split_promotion .ms-promotional-banner-copy { order: 1; padding: clamp(2rem, 4vw, 4rem); }
.ms-promotional-banner--split_promotion .ms-promotional-banner-copy h2 { font-size: clamp(2rem, 3vw, 3.7rem); }
.ms-promotional-banner--editorial_color_block { color: #172033; background: #f2cd71; }
.ms-promotional-banner--editorial_color_block .ms-promotional-banner-inner { grid-template-columns: 55% 45%; }
.ms-promotional-banner--editorial_color_block .ms-promotional-banner-description { color: rgba(23,32,51,.76); }
.ms-promotional-banner--editorial_color_block .ms-promotional-banner-visual { order: 2; margin: 2rem 2rem 2rem 0; background: #e7a64a; transform: rotate(2deg); }
.ms-promotional-banner--editorial_color_block.ms-promotional-banner-position-left .ms-promotional-banner-visual { order: 1; margin: 2rem 0 2rem 2rem; }
.ms-promotional-banner-fit-contain .ms-promotional-banner-image { object-fit: contain; }
.ms-promotional-banner-overlay-none .ms-promotional-banner-visual::after { background: transparent !important; }
.ms-promotional-banner-overlay-light .ms-promotional-banner-visual::after { background: linear-gradient(90deg, rgba(23,32,51,.18), transparent 72%); }
.ms-promotional-banner-overlay-strong .ms-promotional-banner-visual::after { background: linear-gradient(90deg, rgba(23,32,51,.62), transparent 72%); }
.ms-promotional-banner--editorial_color_block .ms-promotional-banner-copy { order: 1; padding-right: clamp(1.5rem, 5vw, 5rem); }
.ms-promotional-banner--editorial_color_block .ms-promotional-banner-cta { color: #fff; background: #244d2c; }
.ms-promotional-banner-radius-medium .ms-promotional-banner-inner { overflow: hidden; border-radius: 12px; }
.ms-promotional-banner-radius-large .ms-promotional-banner-inner { overflow: hidden; border-radius: 28px; }
.ms-promotional-banner-design-panel { position: relative; z-index: 5; width: min(100% - 2rem, 1360px); margin: 0 auto 1rem; padding: 1rem; color: #172033; background: rgba(255,255,255,.98); border: 1px solid #c3c4c7; border-radius: 7px; box-shadow: 0 5px 18px rgba(0,0,0,.12); }
.ms-promotional-banner-design-panel[hidden] { display: none; }
.ms-promotional-banner-design-controls { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; }
.ms-promotional-banner-design-controls label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; font-weight: 700; }
.ms-promotional-banner-design-controls input,.ms-promotional-banner-design-controls select,.ms-promotional-banner-design-controls button { min-height: 32px; }
.ms-promotional-banner-design-controls button { padding: 0 .8rem; color: #fff; background: #2271b1; border: 1px solid #2271b1; cursor: pointer; }
.ms-promotional-banner-change-image { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; padding: .55rem .8rem; border: 0; border-radius: 999px; cursor: pointer; }
.ms-promotional-banner-status { display: block; margin-top: .75rem; color: rgba(255,255,255,.72); font-size: .75rem; }
.ms-promotional-banner.is-disabled { outline: 3px dashed #f2cd71; outline-offset: -3px; }
@media (max-width: 720px) {
    .ms-promotional-banner--split_promotion .ms-promotional-banner-inner,
    .ms-promotional-banner--editorial_color_block .ms-promotional-banner-inner { display: flex; flex-direction: column; }
    .ms-promotional-banner--split_promotion .ms-promotional-banner-visual,
    .ms-promotional-banner--editorial_color_block .ms-promotional-banner-visual { order: 1; min-height: 240px; margin: 0; transform: none; }
    .ms-promotional-banner--split_promotion .ms-promotional-banner-copy,
    .ms-promotional-banner--editorial_color_block .ms-promotional-banner-copy { order: 2; padding: 2rem 1.5rem; }
    .ms-promotional-banner--full_campaign .ms-promotional-banner-copy { min-height: 430px; padding: 3rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .ms-promotional-banner-cta { transition: none; } }