.layout--onecol .block-views-blockdisplay-home-promote-block{
margin: 0px!important;
}
.view-id-display_home_promote .view-content {
width: 100%;
max-width: 1920px;
margin: 0 auto;
box-sizing: border-box;
}
.swiper-pagination-bullet-active{
background: #FFD100 !important; /* ASI yellow */
}
/* Use modern aspect-ratio where available to keep slides 16:9 (1920x1080).
Fall back to padding-top method for older browsers. */
.view-id-display_home_promote .swiper {
width: 100%;
max-width: 1920px;
aspect-ratio: 16 / 9;
position: relative;
height: var(--asi-slider-height, auto);
overflow: hidden;
}
@media (max-width: 1920px) {
.view-id-display_home_promote .swiper {
max-height: calc(100vw * (9/16));
}
}
.view-id-display_home_promote .swiper .swiper-wrapper,
.view-id-display_home_promote .swiper .swiper-slide {
height: 100%;
}
.view-id-display_home_promote .swiper .swiper-slide {
position: relative;
overflow: hidden;
}
.view-id-display_home_promote .swiper .swiper-slide > * {
display: block;
}
/* Ensure slide inner structural elements also fill the slide. This targets
the media markup generated by Drupal's media fields (article, field__item,
etc.) so iframes inherit the full height. */
.view-id-display_home_promote .swiper .swiper-slide article,
.view-id-display_home_promote .swiper .swiper-slide .field__item,
.view-id-display_home_promote .swiper .swiper-slide .media,
.view-id-display_home_promote .swiper .swiper-slide .contextual-region {
height: 100%;
width: 100%;
display: flex;
align-items: stretch;
justify-content: center;
}
.view-id-display_home_promote .views-row .field--name-title,
.view-id-display_home_promote .views-row .views-field-title {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
/* Make media fill the slide and preserve center-cropping */
.view-id-display_home_promote img,
.view-id-display_home_promote video,
.view-id-display_home_promote iframe {
width: 100% !important;
height: 100% !important;
min-width: 100%;
min-height: 100%;
max-width: none !important;
object-fit: cover;
display: block;
}
/* Some iframes include intrinsic width/height attributes; ensure their
immediate parent doesn't constrain sizing. */
.view-id-display_home_promote .swiper .swiper-slide .field__item > iframe,
.view-id-display_home_promote .swiper .swiper-slide .field__item > video,
.view-id-display_home_promote .swiper .swiper-slide .field__item > img {
width: 100% !important;
height: 100% !important;
}
.view-id-display_home_promote video {
background: black;
}
/* Swiper pagination styling can be adjusted in theme; keep minimal defaults */
.view-id-display_home_promote .swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
text-align: center;
z-index: 20;
}
/* Accessibility: remove outline only for mouse interaction, keep for keyboard */
.view-id-display_home_promote .swiper-slide:focus {
outline: 3px solid #3b82f6;
}
/* Controls overlay */
.asi-slider-controls {
position: absolute;
left: 24px;
bottom: 24px;
display: flex;
gap: 8px;
z-index: 80;
}
.asi-slider-controls button {
background: #FFD100; /* ASI yellow */
color: #111;
border: none;
padding: 8px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
line-height: 1;
box-shadow: 0 3px 6px rgba(0,0,0,0.6);
text-shadow: 0 1px 0 rgba(0,0,0,0.8);
margin-right: 20px;
}
.asi-slider-mute{
background: transparent;
box-shadow: none;
border: none;
}
.asi-slider-controls button:focus {
outline: 3px solid #222;
}
/* Screen reader only */
.asi-visually-hidden {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* Iconography via CSS ::before using inline SVG data URIs.
Play (triangle) when not pressed; Pause (two bars) when pressed.
Mute shows speaker; Muted shows speaker with a slash. */
.asi-slider-play::before,
.asi-slider-mute::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
vertical-align: middle;
margin-right: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
}
/* Play icon */
.asi-slider-play::before {
background-image: url("data:image/svg+xml;utf8,");
}
.asi-slider-play[aria-pressed='true']::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Mute/unmute icons */
.asi-slider-mute::before {
background-image: url("data:image/svg+xml;utf8,");
}
.asi-slider-mute[aria-pressed='true']::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Overlay link covers the slide but sits behind controls */
.asi-slide-link-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10;
display: block;
text-indent: -9999px;
background: transparent;
}
/* Ensure controls don't cover pagination */
.view-id-display_home_promote .swiper-pagination { z-index: 50; }
/* Pagination wrap: keep pagination centered and autoplay toggle to the right */
.asi-swiper-pagination-wrap {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none; /* allow pagination and toggle control their own events */
}
.asi-swiper-pagination-wrap .swiper-pagination {
pointer-events: auto;
z-index: 60;
width: 50%;
margin: 0 auto;
}
.asi-swiper-autoplay-toggle {
pointer-events: auto;
position: absolute;
right: 24px;
bottom: 8px;
z-index: 80;
background: transparent;
border: none;
padding: 8px 10px;
border-radius: 4px;
cursor: pointer;
}
.asi-swiper-autoplay-toggle:focus { outline: 3px solid #222; }
.asi-swiper-autoplay-toggle::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
}
.asi-swiper-autoplay-toggle[aria-pressed='false']::before {
background-image: url("data:image/svg+xml;utf8,");
}
.asi-swiper-autoplay-toggle[aria-pressed='true']::before {
background-image: url("data:image/svg+xml;utf8,");
}