/* ====================
HERO SECTION IMAGE AND TEXT BOX
==================== */

.hero-section {
margin-top: 3px;
margin-bottom: 5px;
display: block;
}

.hero-container {
  max-width: 1000px;
  height: 420px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
}

.hero-image {
  flex: 0 1 520px;   /* grow: 0, shrink: 1, basis: 470px */
}

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

.hero-text-stack {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.text-box {
  border-radius: 20px;
  border-width: 4px;
  border-style: solid;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.text-box p {
  margin: 0;
  font-family: 'Sniglet', arial, sans-serif;
  line-height: 1.2;
  text-align: center;
}

.text-box-1 { background: #FEF3F6; border-color: #8F6378; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); }

.text-box-1 p { color: #8F6378; font-size: 2.45rem; line-height: 1.1; }

.text-box-2 { background: #FEF5E1; border-color: #755118; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); }

.text-box-2 p { color: #755118; font-size: 2.4rem; line-height: 1.15; }


/* ====================
SUBSECTION IMAGE AND TEXT BOX
==================== */

.sub-hero-section {
margin-top: 3px;
margin-bottom: 5px;
display: block;
}

.sub-hero-container {
  max-width: 1000px;
  height: 693px;              /* calculated from image's true ratio at 520px wide */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
}

.sub-hero-image {
  flex: 0 1 520px;
  flex-shrink: 0;              /* keep image at exactly 520px — don't compress it */
}

.sub-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* no-op crop since 693px already matches the true ratio */
  display: block;
}

.sub-hero-stack {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* spreads 3 boxes across the full 693px */
  gap: 9px;
}

.sub-text-box {
  flex: 1;
  min-height: 0;
  border-radius: 20px;
  border-width: 4px;
  border-style: solid;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.sub-text-box p {
  margin: 0;
  font-family: 'Sniglet', arial, sans-serif;
  line-height: 1.2;
  text-align: center;
}

.sub-text-box-1 { background: #FFFFDA; border-color: #4F749A; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); }

.sub-text-box-1 p { color: #4F749A; font-size: 2.6rem; line-height: 1.1; }

.sub-text-box-2 { background: #F4FEE1; border-color: #18754A; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); }

.sub-text-box-2 p { color: #18754A; font-size: 2.6rem; line-height: 1.15; }

.sub-text-box-3 { background: #FEFCE1; border-color: #7B9F47; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); }

.sub-text-box-3 p { color: #7B9F47; font-size: 2.8rem; line-height: 1.1; }

.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);
}

.text-box img {
width: 100.75%;
height: auto;
display: block;
margin-top: 2px;
margin-bottom: 4px;
}

/* ====================
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;
}

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

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

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

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

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