/* ====================
HERO SECTION IMAGE + IMAGE (simple side-by-side pairing)
Use for pages where both hero-image and hero-text are single images
of matching height (no text-box stack involved).
==================== */
.hero-section {
margin-top: 3px;
margin-bottom: 5px;
display: block;
}

.hero-container {
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
}

.hero-image {
width: 444px;          /* SET per page if image proportions differ */
flex-shrink: 0;
padding-right: 6px;
}

.hero-image img {
width: 100%;
height: auto;
display: block;
}

.hero-text {
width: 559px;           /* SET per page */
flex-shrink: 0;
}

.hero-text img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

/* ====================
MOBILE RESPONSIVE
==================== */
@media (max-width: 768px) {

.hero-section {
align-items: center;
justify-content: center;
}

.hero-container {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
padding: 0 2px;
box-sizing: border-box;
}

.hero-image {
width: 99%;
max-width: none;
margin: 0 auto;
padding-right: 0;
}

.hero-text {
width: 100%;
max-width: none;
margin: 0 auto;
}
}