/*============================
HERO SECTION IMAGE + TEXT BOX
==============================*/
.hero-section {
margin-top: 3px;
margin-bottom: 8px;
display: block;
}

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

.hero-image {
flex: 0 1 450px;
flex-shrink: 0;
}

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

.hero-text-stack {
flex: 0 1 525px;
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 6px;
}

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

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

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

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

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

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

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

.text-box-3 { background: #FCF8FF; border-color: #775CA1; flex: .2; margin-bottom: 5px; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); }

.text-box-3 p { color: #775CA1; font-size: 2.6rem; line-height: 1.1; }

.text-box-4 { background: #FCF8FF; border-color: #775CA1; margin-bottom: 7px; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); }

.text-box-4 p { color: #775CA1; font-size: 2.4rem; line-height: 1.1; }

.nap-04-pic {
max-width: 1000px;
width: 100%;
margin: 0 auto;
margin-bottom: 7px;
}

.nap-04-pic img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}

.nap-04-pic-caption-a {
max-width: 1000px;
width: 100%;
margin: 0 auto;
margin-top: 4px;
margin-bottom: 5px;
}

.nap-04-pic-caption-a img {
width: 100%;
max-width: 100%;
border-color: #543F1E;
border-width: 3.25px;
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));
}

.nap-04-pic-caption-b {
max-width: 1000px;
width: 100%;
margin: 0 auto;
margin-top: 4px;
margin-bottom: 5px;
display: none;
}

.nap-04-pic-caption-b img {
width: 100%;
max-width: 100%;
border-color: #543F1E;
border-width: 3.25px;
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));
}

/*==============================================
SAMPLES WITH CAPTIONS (side-by-side image pairs)
================================================*/

.nap-04-pic-cert {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 3px;
margin: 0 auto 2px;
}

.nap-04-pic-cert { display: contents; }

.nap-04-pic-crop { grid-column: 1; grid-row: 1; }
.nap-04-cert { grid-column: 2; grid-row: 1; }
.nap-04-pic-caption { grid-column: 1 / -1; grid-row: 2; }

.nap-04-pic-crop img,
.nap-04-cert img,
.nap-04-pic-caption img {
  width: 100%;
  height: auto;
  display: block;
}

.nap-04-pic-cert {
display: flex;
justify-content: center;
gap: 3px;
margin-bottom: 2px;
flex-wrap: nowrap;
}

.nap-04-pic-crop {
max-width: 600px;
margin: 4px;
}

.nap-04-pic-crop img {
width: 100%;
height: auto;
display: block;
}

.nap-04-cert {
max-width: 396px;
margin: 4px;
}

.nap-04-cert img {
width: 100%;
height: auto;
display: block;
}

#wackadoo-ink {
--rounded-border-color: #4D6493;
}

#wackadoo-digital {
--rounded-border-color: #18754A;
}

#wackadoo-sm-painting {
--rounded-border-color: #755118;
}

/* ====================
MOBILE RESPONSIVE
==================== */

@media (max-width: 768px) {

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

.hero-image {
width: 100%;
flex: none;              
}

.hero-image img {
height: auto; 
object-fit: cover;
}

.hero-text-stack {
width: 100%;
height: auto;
flex: none;
gap: 9px;
}

.hero-text-stack {
display: contents;
}

.text-box-1 {
order: 1;
}

.text-box-2 {
order: 2;
}

.hero-image {
order: 3;
}

.text-box-caption {
order: 4;
}

.nap-04-pic-cert {
flex-direction: column;
align-items: center;
}

.nap-04-pic-crop {
max-width: 98%;
}

.nap-04-cert {
max-width: 98%;
}

.nap-04-pic-caption-a {
display: none;
}

.nap-04-pic-caption-b {
display: block;
}

.text-box {
height: auto;
min-height: 80px;
padding: 8px 8px;
}

.text-box-1, .text-box-2, 
.text-box-3, 
.text-box-4 {width: 99%;
}

.text-box-1 p { font-size: clamp(2.4rem, 5.8vw, 3.4rem); }
.text-box-2 p { font-size: clamp(2.3rem, 5.6vw, 3.6rem); }
.text-box-3 p { font-size: clamp(2.5rem, 5.6vw, 3.6rem); }
.text-box-4 p { font-size: clamp(1.2rem, 5.6vw, 3.6rem); }
}