/**
 * Zeitz Hero Slider - Public Styles
 *
 * Enhanced v1.1.0: Floating notifications, fullscreen overlay, dark/light themes, dual CTAs.
 * Base Swiper styles come from zeitz-carousel-assets.
 *
 * @package Zeitz_Hero_Slider
 */

/* ==========================================================================
   Hero Slider Container
   ========================================================================== */

.zeitz-hero-slider {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 400px;
	/* max-height: 800px; */
	max-height: 100vh;
	overflow: hidden;
}

.zeitz-hero-slide {
	position: relative;
	display: grid !important;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Slide Background & Image
   ========================================================================== */

.zeitz-hero-slide__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.zeitz-hero-slide__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* ==========================================================================
   Fullscreen Overlay (v1.1.0)
   ========================================================================== */

.zeitz-hero-slide__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

/* Dark theme overlay (default) */
.zeitz-hero-slide--theme-dark .zeitz-hero-slide__overlay {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.5) 50%,
		rgba(0, 0, 0, 0.7) 100%
	);
}

/* Light theme overlay */
.zeitz-hero-slide--theme-light .zeitz-hero-slide__overlay {
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.5) 50%,
		rgba(255, 255, 255, 0.7) 100%
	);
}

/* ==========================================================================
   Slide Content
   ========================================================================== */

.zeitz-hero-slide__content {
	position: relative;
	z-index: 3;
	max-width: 800px;
	padding: 2rem;
	text-align: center;
}

/* Dark theme (white text) */
.zeitz-hero-slide--theme-dark .zeitz-hero-slide__content {
	color: #ffffff !important;
}
.zeitz-hero-slide--theme-dark h2.zeitz-hero-slide__title {
  color: #ffffff !important;
}

/* Light theme (dark text) */
.zeitz-hero-slide--theme-light .zeitz-hero-slide__content {
	color: #1a1a1a !important;
}
.zeitz-hero-slide--theme-light h2.zeitz-hero-slide__title {
  color: #1a1a1a !important;
}

.zeitz-hero-slide__title {
	margin: 0 0 1rem;
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.2;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.zeitz-hero-slide--theme-light .zeitz-hero-slide__title {
	text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

.zeitz-hero-slide__subtitle {
  font-style: italic;
}

.zeitz-hero-slide__subtitle,
.zeitz-hero-slide__excerpt {
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	line-height: 1.5;
}

.zeitz-hero-slide__message {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	line-height: 1.6;
}

/* ==========================================================================
   CTA Buttons (v1.1.0 - Dual CTAs)
   ========================================================================== */

.zeitz-hero-slide__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 1.5rem;
	font-size: 14px;
}

.zeitz-hero-slide__cta {
	display: inline-block;
	padding: 0.75rem 2rem;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	border-radius: 4px;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.zeitz-hero-slide__cta:hover,
.zeitz-hero-slide__cta:focus {
	transform: translateY(-2px);
}

/* Primary CTA - Dark theme */
.zeitz-hero-slide--theme-dark .zeitz-hero-slide__cta--primary {
	background: #ffffff;
	color: #1a1a1a;
}

.zeitz-hero-slide--theme-dark .zeitz-hero-slide__cta--primary:hover,
.zeitz-hero-slide--theme-dark .zeitz-hero-slide__cta--primary:focus {
	background: #f0f0f0;
}

/* Secondary CTA - Dark theme */
.zeitz-hero-slide--theme-dark .zeitz-hero-slide__cta--secondary {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.zeitz-hero-slide--theme-dark .zeitz-hero-slide__cta--secondary:hover,
.zeitz-hero-slide--theme-dark .zeitz-hero-slide__cta--secondary:focus {
	background: rgba(255, 255, 255, 0.1);
}

/* Primary CTA - Light theme */
.zeitz-hero-slide--theme-light .zeitz-hero-slide__cta--primary {
	background: #1a1a1a;
	color: #ffffff;
}

.zeitz-hero-slide--theme-light .zeitz-hero-slide__cta--primary:hover,
.zeitz-hero-slide--theme-light .zeitz-hero-slide__cta--primary:focus {
	background: #333333;
}

/* Secondary CTA - Light theme */
.zeitz-hero-slide--theme-light .zeitz-hero-slide__cta--secondary {
	background: transparent;
	color: #1a1a1a;
	border: 2px solid #1a1a1a;
}

.zeitz-hero-slide--theme-light .zeitz-hero-slide__cta--secondary:hover,
.zeitz-hero-slide--theme-light .zeitz-hero-slide__cta--secondary:focus {
	background: rgba(0, 0, 0, 0.1);
}

/* Link overlay for slides without text */
.zeitz-hero-slide__link-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
}

/* ==========================================================================
   Navigation Buttons
   ========================================================================== */

.zeitz-hero-slider .swiper-button-prev,
.zeitz-hero-slider .swiper-button-next {
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.0);
	border: 0px;
}

.zeitz-hero-slider .swiper-button-prev,
.zeitz-hero-slider .swiper-button-next {
  opacity: 0;
}

.zeitz-hero-slider:hover > .swiper-button-prev,
.zeitz-hero-slider:hover > .swiper-button-next {
  opacity: 0.5;
}

.zeitz-hero-slider .swiper-pagination-bullet {
	background: #ffffff;
	opacity: 0.5;
}

.zeitz-hero-slider .swiper-pagination-bullet-active {
	opacity: 1;
}

.swiper-pagination {
  opacity: 0;
  display: none;
}

/* ==========================================================================
   Floating Notifications (v1.1.0 - CRITICAL CHANGE)
   Fixed position, NOT carousel slides
   ========================================================================== */

.zeitz-floating-notifications {
	position: fixed !important;
	bottom: 20px;
	right: 20px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 400px;
	width: calc(100% - 40px);
	pointer-events: none;
}

.zeitz-floating-notification {
	position: relative;
	padding: 16px 20px 16px 20px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	pointer-events: auto;
	animation: zeitz-notification-slide-in 0.3s ease-out;
    background-color: rgba(0,0,0,0.85) !important;
}

@keyframes zeitz-notification-slide-in {
	from {
		opacity: 0;
		transform: translateX(100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.zeitz-notification-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	padding: 0;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	border-radius: 50%;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.zeitz-notification-close:hover,
.zeitz-notification-close:focus {
	background: rgba(255, 255, 255, 0.3);
}

.zeitz-notification-title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 4px;
}

.zeitz-notification-message {
	display: block;
	font-size: 0.9rem;
	line-height: 1.4;
	opacity: 0.9;
}

.zeitz-notification-cta {
	display: inline-block;
  	width: 100%;
	margin-top: 10px;
	padding: 6px 16px;
	background: rgba(255, 255, 255, 0.2);
	color: inherit;
  	text-align: center;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.zeitz-notification-cta:hover,
.zeitz-notification-cta:focus {
	background: rgba(255, 255, 255, 0.3);
	color: inherit;
}

/* ==========================================================================
   Swiper Overrides
   ========================================================================== */

.homebanners-carousel .swiper-button-prev,
.homebanners-carousel .swiper-button-next {
  opacity: 0;
  color: #FFFFFF;
  top: 40%;
}

.exhibition-carousel .swiper-button-prev,
.exhibition-carousel .swiper-button-next {
  opacity: 0;
  color: #FFFFFF;
  top: 37%;
}

.swiper:hover > .swiper-button-prev,
.swiper:hover > .swiper-button-next {
  opacity: 1;
}

.swiper .swiper-button-prev:after,
.swiper .swiper-button-next:after {
  font-size: 22px;
}

.homebanners-featured-image,
.exhibition-featured-image {
  border-radius: 10px !important;
}

.exhibition-featured-image {
  max-height: 130px;
}
.exhibition-carousel p {
  font-size: 13px;
  padding-bottom: 0;
}
.exhibition-carousel h4.exhibition-link-title {
  padding-bottom: 0;
}
.exhibition-carousel p.event-type {
  font-size: 13px;
  padding-bottom: 0;
}
p.event-type {
  display: none;
}

.homebanners-carousel a {
  text-decoration: none;
}
.homebanners-carousel h4.homebanners-link-title {
	padding: 0px 24px;
	margin: 0 0 5px !important;
}
.homebanners-carousel .homebanners-button {
  font-size: 13px;
  text-transform: lowercase
}
.homebanners-carousel .homebanners-subtitle {
  font-size: 13px;
	padding: 0px 24px;
}
.homebanners-carousel .homebanners-featured-image {
  max-height: 200px;
}

/* =========================================
   Carousel Layout Improvements
   ========================================= */

/* --- Common Carousel Styles --- */

/* Make slides flex containers for vertical alignment */
.homebanners-carousel .swiper-slide,
.exhibition-carousel .swiper-slide {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure all slides in a row are the same height */
    background-color: #fff; /* Clean white background */
    border: 1px solid #e5e5e5; /* Subtle border for definition */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Soft shadow for depth */
    transition: box-shadow 0.3s ease;
    border-radius: 10px !important;
}

.homebanners-carousel .swiper-slide:hover,
.exhibition-carousel .swiper-slide:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Enhanced shadow on hover */
}

/* Standardize Image Styling & Override Inline Styles */
.homebanners-featured-image,
.exhibition-featured-image {
    height: 240px !important; /* Fixed height for uniformity */
    width: 100%;
    background-position: center center !important;
    background-size: cover !important;
    margin-bottom: 20px !important; /* Consistent spacing below image */
    border-radius: 0 !important; /* Ensure sharp corners */
    flex-shrink: 0; /* Prevent image from shrinking */
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

/* Make the main link a flex container to organize its children */
.homebanners-link,
.exhibition-link {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Fill remaining space in the slide */
    text-decoration: none !important; /* Remove default underline */
    color: inherit;
    padding: 0 0px 0px; /* Internal spacing for content */
}

/* --- Typography & Spacing --- */

/* Title Styles */
.homebanners-link-title,
.exhibition-link-title {
/*     font-size: 1.25rem; */
    font-weight: 700 !important;
    margin: 0 auto 10px auto !important;
    line-height: 1.3;
    color: #222;
    max-width: 90%;
}
.exhibition-link-title {
    font-size: 1.0rem;
}

/* Subtitle & Meta Data Styles */
.homebanners-subtitle,
.exhibition-link .dates,
.exhibition-link .event-type {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 15px !important;
    display: block;
    line-height: 1.4;
}

/* Specific Style for Dates */
.exhibition-link .dates {
    font-weight: 600 !important;
    color: #333;
    margin-bottom: 5px !important;
/*     font-size: 0.9rem; */
}

/* Specific Style for Event Type */
.exhibition-link .event-type {
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 1px;
    font-weight: 600;
    color: #888;
    margin-top: auto;
    margin-bottom: 10px !important;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* --- Homebanners Specific Layout --- */

/* Fix structure: Make the paragraph inside the link a flex container */
.homebanners-link p {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin: 0;
}

/* Hide the break tag to rely on flexbox for spacing */
.homebanners-link p br {
    display: none;
}

/* Button Styling */
.homebanners-button {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    margin-top: auto; /* Pushes the button to the bottom */
    align-self: flex-start; /* Aligns button to the left */
    margin-bottom: 0 !important;
    text-align: center;
}

.homebanners-button:hover {
    background-color: transparent;
    color: #222 !important;
}

/* --- Swiper Navigation Arrows --- */

/* Make arrows more visible and stylish */
.homebanners-carousel .swiper-button-next,
.homebanners-carousel .swiper-button-prev,
.exhibition-carousel .swiper-button-next,
.exhibition-carousel .swiper-button-prev {
    color: #222;
    background-color: rgba(255, 255, 255, 0.8);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.homebanners-carousel .swiper-button-next:hover,
.homebanners-carousel .swiper-button-prev:hover,
.exhibition-carousel .swiper-button-next:hover,
.exhibition-carousel .swiper-button-prev:hover {
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.2rem;
    font-weight: bold;
}

.exhibition-link {
  height: 125px;
}

/* --- Responsive Adjustments --- */

@media (max-width: 768px) {
    .homebanners-featured-image,
    .exhibition-featured-image {
        height: 200px !important;
    }

    .homebanners-link-title,
    .exhibition-link-title {
        font-size: 1.15rem;
    }
    
    .homebanners-link,
    .exhibition-link {
        padding: 0 0px 15px;
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
	.zeitz-hero-slider {
		height: 50vh;
		min-height: 300px;
	}

	.zeitz-hero-slide__title {
		font-size: 1.75rem;
	}

	.zeitz-hero-slide__subtitle,
	.zeitz-hero-slide__excerpt,
	.zeitz-hero-slide__message {
		font-size: 1rem;
	}

	.zeitz-hero-slide__content {
		padding: 1rem;
	}

	.zeitz-hero-slide__cta {
		padding: 0.5rem 1.5rem;
		font-size: 13px;
	}

	.zeitz-hero-slide__ctas {
		flex-direction: column;
		align-items: center;
	}

	/* Floating notifications - full width on mobile */
	.zeitz-floating-notifications {
		bottom: 10px;
		right: 10px;
		left: 10px;
		max-width: none;
		width: auto;
	}
}

@media (max-width: 480px) {
	.zeitz-hero-slider {
		height: 40vh;
		min-height: 250px;
	}

	.zeitz-hero-slide__title {
		font-size: 1.5rem;
	}

	.zeitz-hero-slide__subtitle,
	.zeitz-hero-slide__excerpt,
	.zeitz-hero-slide__message {
		font-size: 0.9rem;
	}

	.zeitz-floating-notification {
		padding: 12px 36px 12px 16px;
	}

	.zeitz-notification-title {
		font-size: 0.9rem;
	}

	.zeitz-notification-message {
		font-size: 0.8rem;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.zeitz-hero-slide__cta:focus-visible,
.zeitz-notification-close:focus-visible,
.zeitz-notification-cta:focus-visible {
	outline: 3px solid #4a90d9;
	outline-offset: 2px;
}

.zeitz-hero-slider .swiper-button-prev:focus-visible,
.zeitz-hero-slider .swiper-button-next:focus-visible {
	outline: 3px solid #4a90d9;
	outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.zeitz-floating-notification {
		animation: none;
	}

	.zeitz-hero-slide__cta,
	.zeitz-notification-close,
	.zeitz-notification-cta {
		transition: none;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.zeitz-hero-slider,
	.zeitz-floating-notifications {
		display: none;
	}
}