.feature-image {margin: 0 auto 2rem auto; max-width: 1400px;}
.feature-image__img {display: block; width: 100%; max-width: 100%; height: auto;} 
.feature-image__caption {margin-top: 0.5rem; font-size: 0.95rem; text-align: center; text-wrap: balance;}

/* ============================================================
   VIDEO PANEL
   ============================================================ */
.wst-video-panel {background-color: #dcefee; border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem;}

/* At the two-column breakpoint the panel bleeds out to the container's full width
   (cancelling the 1.5rem gutter) and .wst-video-inner puts that gutter back, so the
   grid columns inside match #tavern and #stay to the pixel. Do not change the inner
   padding — extra breathing room for the copy goes on .wst-video-text instead, so the
   grid geometry (and the thumbnail's centre line) stays put */
@media (min-width: 768px) {
.wst-video-panel {margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 0; padding-right: 0;}
.wst-video-inner {padding-left: 1.5rem; padding-right: 1.5rem;}
.wst-video-text {padding-left: 1rem;}
}
.wst-video-text h2 {text-wrap: balance;}
.wst-video-text p {margin-bottom: 0;}
.wst-video-cap {margin-top: 1.25rem; font-size: 0.9375rem; font-style: italic; line-height: 1.4;}
/* Thumbnail capped at its native 480 width and centred in its column, which puts its
   centre line on the centre of the .wst-photo in #stay below */
.wst-video-media {max-width: 480px; margin-left: auto; margin-right: auto;}
.video-thumb {position: relative; display: block; overflow: hidden; border-radius: 3px; background-color: #000; line-height: 0;}
/* The hq2 source is 480x360 (4:3) with 45px letterbox bars; cover-cropping to 16:9
   trims exactly those bars and leaves the full 480x270 picture area */
.video-thumb img {display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;}

/* Play badge, bottom-centred in translucent YouTube red so it clears the action */
.video-thumb::before {content: ''; position: absolute; left: 50%; bottom: 14px; width: 62px; height: 44px; margin-left: -31px; background-color: rgba(255,0,0,0.75); border-radius: 10px; transition: background-color 0.18s ease;}
.video-thumb::after {content: ''; position: absolute; left: 50%; bottom: 25px; width: 0; height: 0; margin-left: -6px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 18px solid #fff;}
.video-thumb:hover::before, .video-thumb:focus::before, .video-thumb:focus-visible::before {background-color: #ff0000;}
.video-thumb:focus {outline: 3px solid #d31212; outline-offset: 3px;}
.video-thumb:focus-visible {outline: 3px solid #d31212; outline-offset: 3px;}
@media (max-width: 479px) {
.video-thumb::before {bottom: 10px; width: 50px; height: 36px; margin-left: -25px; border-radius: 8px;}
.video-thumb::after {bottom: 19px; margin-left: -5px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid #fff;}
}
.wst-video-link {margin: 0.875rem 0 0; font-size: 1.0625rem; font-weight: bold; line-height: 1.3; text-align: center;}
.wst-video-link a {color: #d31212;}

@media (prefers-reduced-motion: reduce) {
.video-thumb::before {transition: none;}
}


/* ---- visitors list (local section) ---- */
.visitor-list {list-style: none; margin: 0; padding: 0;}
.visitor-list li {padding: 5px 0; line-height: 1.4; margin-bottom: 1em;}
.visitor-list a {color: inherit;}