/**
 * DTN ad slots (includes/dtn-ads.php). Creatives come from Google Ad Manager with the legacy class
 * names (custom.css styles them); these rules fit them into the current design. Selectors carry two
 * classes so they outrank the kit's `.elementor-kit-15007 h2` / `.vb-kit button` rules.
 *
 * The banner modifier is --dtn, not the earlier --popup: the Customizer's Additional CSS still holds
 * !important rules for .c-mobile-banner--popup from the hard-coded version this replaces.
 */

/* ---------- Mobile banner: floating card at the bottom of phone screens ---------- */
.c-mobile-banner.c-mobile-banner--dtn {
	bottom: 20px;
	width: 88%;
	max-width: 310px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	overflow: hidden;
	z-index: 999999;
}
.c-mobile-banner.c-mobile-banner--dtn:not(.is-filled) { display: none; }
/* Slides up into place when the ad is in, back down when closed. custom.css centres the card with
   translateX(-50%), so the keyframes keep it. */
.c-mobile-banner.c-mobile-banner--dtn.is-filled { animation: vb-banner-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.c-mobile-banner.c-mobile-banner--dtn.is-closing { animation: vb-banner-out .25s ease-in both; }
@keyframes vb-banner-in { from { opacity: 0; transform: translate(-50%, 32px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes vb-banner-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 32px); } }
@media (prefers-reduced-motion: reduce) {
	.c-mobile-banner.c-mobile-banner--dtn.is-filled,
	.c-mobile-banner.c-mobile-banner--dtn.is-closing { animation: none; }
}

.c-mobile-banner--dtn .c-mobile-banner__wrap { display: block; width: 100%; }
.c-mobile-banner--dtn .c-mobile-banner__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 180px;
	object-fit: cover;
}
.c-mobile-banner--dtn .c-mobile-banner__details {
	position: static;
	display: flex;
	align-items: stretch;
	height: 52px;
	background: #fff;
}
.c-mobile-banner--dtn .c-mobile-banner__col:first-child {
	flex: 0 0 62%;
	width: 62%;
	padding: 6px 10px;
	justify-content: center;
}
.c-mobile-banner--dtn .c-mobile-banner__col:last-child { flex: 0 0 38%; width: 38%; }
.c-mobile-banner--dtn .c-mobile-banner__title {
	margin: 0;
	font-family: 'Avenir', 'Helvetica', sans-serif;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.1;
	color: #231f20;
	text-transform: uppercase;
	white-space: nowrap;
}
.c-mobile-banner--dtn .c-mobile-banner__text {
	margin: 2px 0 0;
	font-family: Georgia, serif;
	font-size: 11px;
	font-style: italic;
	line-height: 1;
	color: #6e7071;
	white-space: nowrap;
}
.c-mobile-banner--dtn .c-mobile-banner__col .c-link--banner {
	padding: 0 4px;
	background: var(--vb-color-accent, #ef4343) !important; /* custom.min.css: .book-now bg, .c-link--banner color are !important */
	color: var(--vb-color-cream, #f4f2eb) !important;
	font-family: "Lexend", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	text-transform: uppercase;
}
.c-mobile-banner--dtn .c-mobile-banner__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--vb-color-accent, #ef4343) !important; /* the creative also gives it .book-now */
	z-index: 1;
}
.c-mobile-banner--dtn .c-mobile-banner__close svg { width: 12px; height: 12px; }

/* ---------- Header placement: covers the featured-image hero once an ad arrives ---------- */
.vb-header__hero .vb-hero-ad { display: none; }
/* Pages with a hero ad: the page photo is held back (it still sizes the hero) on an ink panel until
   dtn-ads.js resolves the slot, so it does not flash before the ad. is-resolved = no ad, show it;
   the animation shows it after 3s anyway if the script never runs. The ad fades in over the panel. */
.vb-header__hero--ad-slot { background: var(--vb-color-primary, #231f20); }
.vb-header__hero--ad-slot > img { opacity: 0; animation: vb-hero-in .4s ease 3s forwards; }
.vb-header__hero--ad-slot.is-resolved > img { opacity: 1; animation: none; transition: opacity .4s ease; }
.vb-header__hero--ad > img { animation: none; }
.vb-header__hero--ad .vb-hero-ad { animation: vb-hero-in .4s ease both; }
@keyframes vb-hero-in { from { opacity: 0; } to { opacity: 1; } }
/* Copy then button rise in just after the photo. */
.vb-header__hero--ad .c-hero__banner__text { animation: vb-copy-in .6s cubic-bezier(.2, .7, .2, 1) .3s both; }
.vb-header__hero--ad .c-hero__text__wrap .c-link--banner { animation: vb-copy-in .6s cubic-bezier(.2, .7, .2, 1) .45s both; }
@keyframes vb-copy-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.vb-header__hero--ad-slot.is-resolved > img { transition: none; }
	.vb-header__hero--ad .vb-hero-ad,
	.vb-header__hero--ad .c-hero__banner__text,
	.vb-header__hero--ad .c-hero__text__wrap .c-link--banner { animation: none; }
}

/* site-header.css puts the hero at z-index -1, under <header>, so nothing in it can be clicked. The
   fixed bar (z-index 99) still overlays it at 1. */
.vb-header__hero.vb-header__hero--ad { z-index: 1; }
.vb-header__hero--ad .vb-hero-ad {
	display: block;
	position: absolute;
	inset: 0;
}
.vb-hero-ad .hero__wrapper,
.vb-hero-ad .hero__wrapper > a { display: block; position: absolute; inset: 0; }
.vb-header__hero .vb-hero-ad .hero__wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
}
/* The gradient sits over the image link; let clicks through so the whole image is the ad. */
.vb-hero-ad .overlay__slider { pointer-events: none; }
/* The creative repeats the page title ("Burbank / Attractions") in the legacy hero style; the page
   heading sits right below, and the previous vendor's version did not show it either. */
.vb-hero-ad .hero--banner--texts { display: none; }

/* Copy sits on the photo wherever the advertiser's image is bright: a soft shadow keeps it legible. */
.vb-hero-ad .c-hero__banner__text {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 16px rgba(0, 0, 0, .45);
}

/* Buttons in brand: same as the site's .read--more.btn (kit accent red, cream bold Lexend, square). */
.vb-hero-ad .c-hero__text__wrap .c-link--banner {
	display: inline-block;
	padding: 10px 25px;
	background: var(--vb-color-accent, #ef4343) !important; /* see the banner button above */
	color: var(--vb-color-cream, #f4f2eb) !important;
	font-family: "Lexend", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.vb-hero-ad .c-hero__text__wrap .c-link--banner:hover,
.vb-hero-ad .c-hero__text__wrap .c-link--banner:focus,
.c-mobile-banner--dtn .c-mobile-banner__col .c-link--banner:hover,
.c-mobile-banner--dtn .c-mobile-banner__col .c-link--banner:focus {
	background: var(--vb-color-primary, #231f20) !important;
	color: #fff !important;
}

/* Phones: the hero is only ~40% of the screen width tall and the header bar covers its top ~70px,
   which left the copy under the bar and the button filling the rest. Pages with a header ad slot
   get a taller hero from the start (class printed server-side, so nothing jumps when the ad
   arrives; without an ad the page photo shows in the same crop) and the copy sits bottom-left. */
@media (max-width: 767px) {
	.vb-header__hero--ad-slot { height: 360px; }
	.vb-header__hero--ad-slot > img { height: 100%; object-fit: cover; }
	.vb-hero-ad .hero__wrapper img { object-position: 65% center; }
	.vb-hero-ad .overlay__slider {
		top: 0;
		background: linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .7));
	}
	.vb-hero-ad .c-hero__text__wrap {
		top: auto;
		right: 20px;
		bottom: 20px;
		left: 20px;
		width: auto;
		text-align: left;
	}
	.vb-hero-ad .c-hero__banner__text {
		max-width: 320px;
		margin: 0 0 12px;
		font-size: 15px;
		line-height: 1.45;
	}
	.vb-hero-ad .c-hero__text__wrap .c-link--banner {
		padding: 8px 20px;
		font-size: 14px;
		line-height: 22px;
	}
}