/* ============================================================
   UNIVERSITY OF LAYYAH - MASTER LABORATORY STYLES
   ============================================================ */

/* 1. CORE LAYOUT & GRID OVERVIEW */
.labs-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.lab-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 60px; /* Space before story starts */
}

/* 2. MODERN HERO SECTION */
.lab-hero {
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */

}

/* Lab Banners */
.dld-banner { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/dld-highres.jpg'); }
.electronics-banner { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/DSC04307.jpg'); }
.computing-banner { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/computing-highres.jpg'); }

.hero-content {
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(8px);
    padding: 10px 15px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-content h1 { color: #F58220; font-size: 3rem; margin: 0; }

/* 3. STORY ISOLATION (The Critical Fix) */
.lab-story, 
.computing-story, 
.electronics-journal, 
.lab-inventory {
    width: 100% !important;
    display: block !important;
    clear: both !important; /* Clears sidebar influence */
    margin-top: 80px;
}

/* 4. DLD LAB: STAGGERED STORY ROWS */
.story-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
    margin-bottom: 100px;
}

.story-row.reverse { flex-direction: row-reverse; }

.story-image {
    flex: 0 0 55%; /* Fixed width to prevent squashing */
    max-width: 55%;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0,0,0,0.15);
}

.story-image img { width: 100%; display: block; transition: 0.6s; }
.story-image:hover img { transform: scale(1.05); }
.story-content { flex: 1; }

.step-number {
    font-size: 5rem;
    font-weight: 900;
    color: rgba(245, 130, 32, 0.1);
    display: block;
    line-height: 1;
    margin-bottom: -15px;
}

/* 5. COMPUTING LAB: MASONRY & FOCUS */
.computing-masonry {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 250px;
    gap: 20px;
    margin: 40px 0;
}

.masonry-item { border-radius: 15px; overflow: hidden; position: relative; }
.masonry-item.tall { grid-row: span 2 !important; }
.masonry-item img { width: 100%; height: 100%; object-fit: cover; }

.focus-section {
    background: #0f172a;
    color: white;
    padding: 80px 50px;
    border-radius: 35px;
}

.focus-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: center;
}

.focus-images { display: flex; gap: 20px; }
.focus-images img { width: 50%; border-radius: 15px; }

/* 6. ELECTRONICS LAB: JOURNAL GRID */
.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.journal-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* 7. GLOBAL UI ELEMENTS */
.course-chips .chip {
    display: inline-block;
    padding: 8px 18px;
    background: #edf2f7;
    color: #1f7a34;
    border-radius: 50px;
    margin: 5px;
    font-weight: 600;
}

.spec-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-left: 6px solid #F58220;
}

/* 8. MOBILE SHIELD */
@media (max-width: 992px) {
    .lab-grid, .story-row, .journal-grid, .computing-masonry, .focus-content {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }
    .story-row.reverse { flex-direction: column !important; }
    .story-image { max-width: 100%; }
}


/* --- Computing Lab: Story Entry Fix --- */
.story-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    background: #fff;
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 80px;
    width: 100%;
    box-sizing: border-box;
}

.entry-img {
    flex: 0 0 45%; /* Keeps the image at a steady 45% width */
    max-width: 45%;
    border-radius: 15px;
    overflow: hidden;
    line-height: 0; /* Removes ghost spacing at the bottom */
}

.entry-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.entry-text {
    flex: 1;
}

/* Mobile fix for the entry section */
@media (max-width: 992px) {
    .story-entry {
        flex-direction: column;
        padding: 30px;
        gap: 30px;
    }
    .entry-img {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- DLD INVENTORY SECTION FIX --- */
.lab-inventory {
    width: 100% !important;
    display: block !important;
    clear: both !important;
    background: #1a202c; /* Deep slate/dark background */
    color: white;
    padding: 80px 60px;
    border-radius: 30px;
    margin: 60px 0;
    box-sizing: border-box;
}

.inventory-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Balanced split */
    gap: 60px;
    align-items: center;
}

.inventory-text h3 {
    font-size: 2.2rem;
    color: #F58220; /* University Orange for high contrast */
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.inventory-text p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #cbd5e0; /* Light gray for readability on dark */
}

.inventory-image {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    line-height: 0;
}

.inventory-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Mobile Fix for Inventory */
@media (max-width: 992px) {
    .lab-inventory {
        padding: 40px 20px;
    }
    .inventory-grid {
        grid-template-columns: 1fr; /* Stacks on mobile */
        gap: 30px;
        text-align: center;
    }
}

/* --- ELECTRONICS JOURNAL FIX --- */
.electronics-journal {
    width: 100% !important;
    display: block !important;
    clear: both !important;
    margin-top: 80px;
    padding-bottom: 50px;
}

.journal-intro {
    text-align: center;
    margin-bottom: 60px;
}

/* 1. The Large Journal Hero */
.journal-hero {
    position: relative;
    width: 100%;
    height: 550px; /* Increased height for impact */
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 50px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.hero-image-wrapper {
    width: 100%;
    height: 100%;
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 2. The Floating Text Box Fix */
.image-overlay-text {
    position: absolute;
    bottom: 50px; /* Locked to the bottom left of the image */
    left: 50px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    max-width: 450px;
    border-left: 8px solid #F58220; /* University Orange */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    z-index: 5;
}

.image-overlay-text h3 {
    font-size: 1.8rem;
    color: #1f7a34;
    margin-bottom: 15px;
}

/* 3. The Three-Card Grid Fix */
.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.journal-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.journal-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.card-img-container {
    height: 250px;
    width: 100%;
    overflow: hidden;
}

.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile Responsiveness for Journal */
@media (max-width: 992px) {
    .journal-grid {
        grid-template-columns: 1fr;
    }
    
    .journal-hero {
        height: 400px;
    }

    .image-overlay-text {
        position: relative; /* Stacks below image on mobile */
        bottom: 0;
        left: 0;
        max-width: 100%;
        margin-top: -20px; /* Overlaps slightly for style */
        border-radius: 0 0 20px 20px;
    }
}