/* ====================
HERO SECTION IMAGE AND TEXT BOX
==================== */
.hero-section {
margin-top: 3px;
margin-bottom: 5px;
}

.hero-container {
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
}
.hero-image { width: 440px; flex-shrink: 0; padding-left: 6px; }
.hero-image img { width: 100%; height: auto; display: block; }

.hero-text { width: 562px; flex-shrink: 0; padding-left: 0; padding-right: 4px; }
.hero-text img {width: 99%; 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)); }

.text-box-a img {
width: 100%;
height: auto;
display: block;
margin-top: 2px;
}

.text-box-b img {
width: 100%;
height: auto;
display: block;
margin-top: 2px;
transform: rotate(180deg);
transition: transform 0.6s ease;
cursor: pointer;
}

/* Desktop hover */
.text-box-b:hover img {
transform: rotate(0deg);
}

/* Mobile tap */
.text-box-b.flipped img {
transform: rotate(0deg);
}

.text-box-b:hover img {
transform: rotate(0deg);
}

/* ====================
HERO SECTION - ALTERNATE LAYOUT (image right, text left)
==================== */
.hero-container.hero-alt {
flex-direction: row-reverse;
}

.hero-container.hero-alt.hero-image {
padding-right: 0;
}

/* ====================
Full Screen-Width Image
==================== */

.text-box img {
width: 100%;
height: auto;
display: block;
}

/* =========================
SPECIAL SECTION
================================*/

.special-section {
display: flex;
gap: 10px;
max-width: 1000px;
margin: 0 auto;
}
 
.special-col-left,
.special-col-right {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}

.special-img-square {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
 
.special-bottom-row {
display: flex;
gap: 6px;
min-width: 0;
}
 
.special-textbox {
flex: 1.1;
min-width: 0;
padding-right: 4px;
}

.special-links-col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 6px;
min-width: 0;
padding-left: 8px;
}

.special-link {
display: block;
min-width: 0;
}
 
.special-caption *,
.special-textbox * {
margin: 0;
  }
 
.special-caption 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));
}
 
.special-textbox img {
  width: 104%;
height: auto;   
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}
 
.special-link img:hover {
transform: scale(1.05);
}

.special-link img {
width: 220px;
height: auto; 
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}
 
.special-img-rect {
width: 100%;
flex: 1;
object-fit: cover;
display: block;
min-height: 0;
}

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

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

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

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

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

.text-box img {
width: 98%;
max-width: 100%;
height: auto;
}

.hero-container.hero-alt {
flex-direction: column;
}

.hero-container.hero-alt .hero-image {
padding-left: 0;
 }

.special-section {
flex-direction: column;
}

.special-img-square {
width: 100%;
margin: 0 auto;
margin-left: 2px;
margin-right: 2px;
}

.special-img-rect {
width: 100%;
margin: 0 auto;
margin-left: 2px;
margin-right: 2px;
}
}