/* ========================================
   CL4.HTM STYLES
   These styles ONLY apply to cl4.html
   ======================================== */

/* --- Top Section --- */
.cl4-top-section {
    display: flex;
    align-items: center; /* Vertically aligns the time machine and text */
    gap: 20px;
    margin-bottom: 20px;
}

.cl4-text-column .cl4-intro-text {
    text-align: left; /* Confirms user request */
    color: #000066;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.5;
}

/* --- Middle Section --- */
.cl4-middle-section {
    display: flex;
    /* Aligns all columns to their bottom edge */
    align-items: flex-end; 
    gap: 15px; /* Creates the gap between columns */
    margin-left: 100px;
    margin-bottom: 20px;
    /* This ensures the middle section doesn't 
       get wider than the page */
    max-width: 100%;
    overflow: hidden; /* Prevents horizontal scroll */
}

/* Column 1: Time Warp "L" Shape */
.cl4-timewarp-column {
    display: grid;
    /* Creates 3 columns of 50px width */
    grid-template-columns: repeat(3, 50px);
    /* Creates 5 rows of 38px height */
    grid-template-rows: repeat(5, 38px);
    gap: 5px; /* Space between images */
    
    /* We use flex-basis to set the width of this column 
       to fit the 3-column grid (3 * 50px + 2 * 5px gap) */
    flex-basis: 160px; 
    flex-shrink: 0;
}

.cl4-timewarp-column img { 
    display: block; 
    width: 50px;
    height: 38px;
    object-fit: cover;
    border-radius: 4px; /* A slight modern touch */
}
/* Placing the 7 grid items */
.tw-img-1 { grid-row: 1; grid-column: 1; }
.tw-img-2 { grid-row: 2; grid-column: 1; }
.tw-img-3 { grid-row: 3; grid-column: 1; }
.tw-img-4 { grid-row: 4; grid-column: 1; }
.tw-img-5 { grid-row: 5; grid-column: 1; } /* 5th item in col 1 */
.tw-img-6 { grid-row: 5; grid-column: 2; } /* 6th item next to 5th */
.tw-img-7 { grid-row: 5; grid-column: 3; } /* 7th item next to 6th */

/* Column 2: House */
.cl4-house-column {
    flex-shrink: 0; /* Prevents house image from shrinking */
}
.cl4-house-column img {
    display: block; /* Removes any bottom space */
    max-width: 100%;
    height: auto;
}


/* Column 3: Anvil / Elizabeth */
.cl4-anvil-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns items to the left, as requested */
    flex-shrink: 0;
    /* The 15px gap is handled by the parent .cl4-middle-section */
}

.cl4-anvil-link {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the "dinner" text under the anvil */
    text-decoration: none;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-weight: bold;
    color: #000066; /* Match site theme */
    margin-bottom: 10px; /* Space between anvil and Elizabeth */
    border-radius: 8px;
    padding: 5px;
}
.cl4-anvil-link:hover,
.cl4-anvil-link:focus {
    background-color: #f0f0f0;
    outline: 2px solid #000066;
}

.cl4-anvil-link span {
    font-size: 0.9em;
}

.cl4-elizabeth-image img {
    display: block;
    border-radius: 50%; /* Make the face image circular */
}

/* --- Bottom Section --- */
.cl4-bottom-container {
    display: flex;
    /* This pushes the entire block to the right */
    justify-content: flex-end; 
    margin-top: 20px;
}

.cl4-bottom-section {
    display: flex;
    align-items: center;
    gap: 20px; /* User-specified 20px gap */
}

.cl4-bottom-text-column p {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #000066;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.4;
}

.cl4-bottom-anvil-link:hover img,
.cl4-bottom-anvil-link:focus img {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}


/* ========================================
   CL4.HTM - RESPONSIVE STYLES
   ======================================== */
@media (max-width: 768px) {
    /* Stack the top section */
    .cl4-top-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .cl4-text-column .cl4-intro-text {
        text-align: center;
    }

    /* Stack the middle section */
    .cl4-middle-section {
        flex-direction: column;
        align-items: center; /* Center-align all items when stacked */
        gap: 25px;
    }

    /* Re-align anvil/elizabeth when stacked */
    .cl4-anvil-column {
        align-items: center;
        flex-direction: row; /* Put them side-by-side */
        gap: 20px;
    }

    /* Stack the bottom section */
    .cl4-bottom-container {
        justify-content: center; /* Center on mobile */
        text-align: center;
    }
    .cl4-bottom-section {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    /* On very small screens, simplify the L-shape grid */
    .cl4-timewarp-column {
        grid-template-columns: repeat(2, 50px); /* 2 columns */
        grid-template-rows: auto; /* auto rows */
        flex-basis: auto; /* Let it be auto width */
        width: 105px; /* (2 * 50px) + 5px gap */
        gap: 5px;
    }
    /* Manually re-flow the grid */
    .tw-img-1 { grid-row: 1; grid-column: 1; }
    .tw-img-2 { grid-row: 1; grid-column: 2; }
    .tw-img-3 { grid-row: 2; grid-column: 1; }
    .tw-img-4 { grid-row: 2; grid-column: 2; }
    .tw-img-5 { grid-row: 3; grid-column: 1; }
    .tw-img-6 { grid-row: 3; grid-column: 2; }
    .tw-img-7 { grid-row: 4; grid-column: 1; }
}