/* ========================================================================= */
/* --- SECTION TWO: HIGH-END GALLERY --- */
/* ========================================================================= */
.sec-two-gallery {
    width: calc(100vw - 8vw);
    margin-top: 25vh;
    margin-bottom: 25vh;
    margin: 4vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    height: auto;
    z-index: 10000;
    /* Pushes the entire section above the noise mesh */
}

.gallery-layer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 equal sized section divs */
    width: 100%;
    height: 45vh;
    /* Fixed height — all layers equal */
    overflow: hidden;
    /* Prevents icon grid from blowing out the row */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    /* The thin dividing lines */
}

.gallery-layer:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* Remove top border on the first layer */
.sec-two-gallery .gallery-layer:first-child {
    border-top: none;
}

.gallery-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vh;
    /* Breathing room inside the columns */
    box-sizing: border-box;
    min-width: 0;
    /* Prevents text from blowing out the 1fr grid track */
}

.white-placeholder {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 2px;
}

#wh1 {
    color: white;
    background: transparent;
    font-size: 4rem;
    font-family: 'Salsa', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Pulls text down to the baseline */
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

#wh2 {
    background-color: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: inline-size;
}

#wh2 p {
    font-family: 'Univers', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 4cqw;
    /* Scales perfectly with the container width */
    line-height: 1.05;
    /* Tighten the vertical space between lines dramatically */
    text-align: justify;
    /* Standard justification for clean left/right edges */
    margin: 0;
    width: 100%;
}

.split-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.split-top {
    flex: 1;
    /* Top half */
    background: url('../Images/Screenshot 2026-09-04 152243-Photoroom (1).png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: brightness(0) invert(1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.split-bottom {
    flex: 1;
    /* Bottom half */
}

/* --- WH3 SPLIT & VERTICAL TEXT --- */
#wh3 {
    display: flex;
    flex-direction: row;
    background-color: transparent;
    padding: 0;
}

.wh3-left {
    flex: 2;
    background-color: #00ff00;
}

.wh3-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vw;
    border-left: 1px solid rgba(255, 255, 255, 1);
}

.wh3-text {
    color: white;
    font-family: 'Univers', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 3vw;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* --- WH5 SPLIT & VERTICAL TEXT --- */
#wh5 {
    background: url("../Images/pexels-johnboy-18015296 (2).jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- WH4 SPLIT & ICON GRID --- */
#wh4 {
    display: flex;
    flex-direction: row;
    /* Split vertically into left and right halves */
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    width: 100%;
    height: 100%;
}

.wh4-left {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 6 columns */
    grid-template-rows: repeat(8, 1fr);
    /* 8 rows! */
    gap: 0;
    /* Pack extremely closely */
    padding: 0;
    /* Flush to edges */
    background-color: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    place-items: center;
    /* Perfect equispacing */
}

.wh4-right {
    flex: 1;
    background-color: transparent;
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
    background-size: 8px 8px;
}

.wh4-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 3vw;
    /* Significantly larger to cram the cell */
    width: 100%;
    height: 100%;
}

/* Last row (19 to 24) gets the deep crimson red treatment */
.wh4-left .icon-red {
    color: #d90429;
    text-shadow: 0 0 12px rgba(217, 4, 41, 0.8);
}

/* Salsa font override for specific icons */
.wh4-salsa {
    font-family: 'Salsa', cursive, sans-serif !important;
    font-size: 1.5vw;
    line-height: 0.75vw;
    transform: translate(-25%, -10%);
}

/* Bottom text spanning rows 5-8 across all 6 columns */
.wh4-bottom-text {
    grid-column: 1 / -1;    /* span all 6 columns */
    grid-row: 5 / 9;        /* span rows 5 through 8 */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    color: #ffffff;
    font-family: 'Salsa', cursive, sans-serif;
    font-size: 2.8vw;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.05em;
}