.hero{position:relative;overflow:hidden}
.hero, .hero * { box-sizing: border-box; }
.hero-content { width: 100%; max-width: 100%; }
.hero img { max-width: 100%; height: auto; }

/* Belt & suspenders: prevent accidental horizontal overflow on small screens */
@media (max-width: 800px) {
	body { overflow-x: hidden; }
}
.hero-slider, .hero-slide { max-width: 100%; }
.hero-slider{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center top;background-repeat:no-repeat;opacity:0;transition:opacity 1s ease-in-out}
.hero-slide.active{opacity:1}
/* Make hero content a flex container so CTA can sit near the bottom reliably */
.hero-content{position:relative;z-index:5;padding:80px 20px;text-align:center;color:#fff;pointer-events:auto;display:flex;flex-direction:column;height:100%;justify-content:flex-end;align-items:center}

/* Hero CTA button: place it near the hero bottom (約50px) */
.hero .hero-content .btn-primary{margin:0 0 5px 0}

/* Ensure the CTA is anchored to the bottom with precise spacing */
.hero .hero-content .btn-primary {
	margin-top: auto;
}

/* Ensure content color overrides parent/other styles regardless of load order */
.hero-content, .hero-content h1, .hero-content h2, .hero-content p {
	color: #000 !important;
}
.hero-content h2 span.summer { color: #00B5E2 !important; }
.hero-content h2 span.winter { color: #FF7A00 !important; }
@media (max-width:768px){.hero-content{padding:48px 16px}}
@media (max-width:768px){.hero-content{height:100%}.hero .hero-content .btn-primary{margin-bottom:5px}}
/* Hero height: 固定（案A） */
.hero{height:520px}
.hero-slide{width:100%;height:100%}
@media (max-width:768px){.hero{height:420px}}
@media (max-width:480px){.hero{height:320px}}
@media (max-width:480px){.hero-content{height:100%}.hero .hero-content .btn-primary{margin-bottom:5px}}

/* Mobile: show the whole hero image without left/right cropping */
@media (max-width: 768px) {
	/* Mobile: show whole image, but keep CTA button at the bottom */
	.hero-slide {
		background-size: contain !important;
		background-position: center top !important;
		background-repeat: no-repeat !important;
		background-color: #fff !important;
	}
	.hero {
		/* Fit the section box to the image ratio as much as possible */
		aspect-ratio: 16 / 9;
		height: auto !important;
		min-height: 0 !important;
	}
	.hero-content {
		justify-content: flex-end !important;
		padding-top: 12px !important;
		padding-bottom: 0 !important;
	}
	.hero .hero-content .btn-primary{
		margin-bottom: 0 !important;
	}
}

/* Desktop: avoid cropping important top text by anchoring to top; give a bit more height */
@media (min-width: 769px) {
	.hero { height: 600px; }
}

/* Wide/landscape screens: ensure bottom isn't cropped */
@media (min-width: 769px) and (max-aspect-ratio: 3/2) {
	/* ...keep default desktop behavior... */
}

@media (min-width: 769px) and (min-aspect-ratio: 3/2) {
	.hero { height: 70vh; min-height: 520px; }
	.hero-slide {
		background-size: contain;
		background-position: center bottom;
		background-color: #fff;
	}
}

/* Debug helper: add ?tbvh_debug=1 to visually inspect layout boundaries (admin-only usage recommended) */
@media (max-width: 768px) {
	body.tbvh-debug .hero { outline: 3px dashed #f00; }
	body.tbvh-debug .hero-slider { outline: 2px dashed #0a0; }
	body.tbvh-debug .hero-slide.active { outline: 2px dashed #00f; }
}
/* Responsive font-size and padding brought from style.css */
@media (max-width:768px){
	.hero .site-title { font-size: 2rem !important; }
	.hero h2 { font-size: 1.4rem !important; margin-top: 8px; }
	.hero p { font-size: 1rem !important; margin-bottom: 18px; }
	.hero-content { padding: 48px 16px !important; }
}
@media (max-width:480px){
	.hero .site-title { font-size: 1.6rem !important; }
	.hero h2 { font-size: 1.1rem !important; }
	.hero p { font-size: 0.95rem !important; }
	.hero-content { padding: 36px 12px !important; }
}

/* Force hero background to white (kept as requested) */
.hero { background-color: #fff !important; }