/* css/engineering-style.css */
/* Styles specific to the 3D Modeling & RC Engineering page */

/* ===== Overall Page Theme ===== */
body.engineering-page {
    background-color: #282c34; /* Dark slate grey background */
    /* Optional: Add a subtle blueprint grid pattern */
    /* background-image: linear-gradient(rgba(40, 44, 52, 0.95), rgba(40, 44, 52, 0.98)), url('../img/blueprint_pattern.png'); */
    /* background-size: auto; */
    color: #EAEAEA; /* Light grey text */
    font-family: 'Lato', sans-serif; /* Default text font */
}

/* Link styling */
body.engineering-page a {
    color: #00BFFF; /* Deep Sky Blue accent */
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

body.engineering-page a:hover,
body.engineering-page a:focus {
    color: #87CEFA; /* Lighter blue on hover */
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.5);
}

/* CSS Variables for this theme */
body.engineering-page {
    --eng-text-primary: #EAEAEA;
    --eng-text-secondary: #B0C4DE; /* Light Steel Blue */
    --eng-accent: #00BFFF; /* Deep Sky Blue */
    --eng-accent-light: #87CEFA;
    --eng-bg: #282c34;
    --eng-border: rgba(0, 191, 255, 0.3); /* Semi-transparent blue border */
    --eng-card-bg: rgba(58, 63, 75, 0.5); /* Semi-transparent darker card bg */
}

/* ===== Header and Footer Overrides ===== */
body.engineering-page #header.scrolled {
    background-color: rgba(25, 28, 33, 0.9); /* Darker, slightly transparent header */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--eng-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.engineering-page #header .logo-text {
    color: var(--eng-text-primary);
}
body.engineering-page #header .logo-text:hover {
    color: var(--eng-accent);
}

body.engineering-page #header .nav-link.back-link {
    color: var(--eng-text-secondary);
    border-color: var(--eng-border);
    transition: all 0.3s ease;
}
body.engineering-page #header .nav-link.back-link:hover {
    color: var(--eng-text-primary);
    border-color: var(--eng-accent-light);
    background-color: rgba(0, 191, 255, 0.1);
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.3);
}

/* Mobile nav adjustments */
@media (max-width: 767.98px) {
     body.engineering-page .nav-list {
         background-color: var(--eng-bg);
         border-left: 1px solid var(--eng-border);
     }
      body.engineering-page .nav-link {
          color: var(--eng-text-secondary);
      }
      body.engineering-page .nav-link:hover,
      body.engineering-page .nav-link.active {
          color: var(--eng-accent-light);
      }
 }

/* Footer adjustments */
body.engineering-page #footer {
    background-color: #1e2127; /* Even darker footer */
    border-top: 1px solid var(--eng-border);
}
body.engineering-page #footer p {
    color: var(--eng-text-secondary);
}
body.engineering-page #footer .footer-link {
    color: var(--eng-accent);
}
body.engineering-page #footer .footer-link:hover {
    color: var(--eng-accent-light);
}


/* ===== Engineering Header Section ===== */
.eng-header {
    padding: clamp(5rem, 12vh, 7rem) 0 clamp(3rem, 7vh, 4rem) 0;
    text-align: center;
    border-bottom: 1px solid var(--eng-border);
    margin-bottom: clamp(3rem, 8vw, 5rem);
    position: relative;
}

.eng-title {
    font-family: 'Orbitron', sans-serif; /* Techy font */
    font-size: clamp(2.2rem, 5.5vw, 3.5rem);
    color: var(--eng-text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.4); /* Blue glow */
}

.eng-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--eng-text-secondary);
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Optional decorative lines */
.eng-header-lines {
    position: absolute;
    bottom: -1px; /* Sit on the border */
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--eng-accent), transparent);
}
.eng-header-lines::before,
.eng-header-lines::after {
    content: '';
    position: absolute;
    bottom: 5px; /* Position above the main line */
    width: 40px;
    height: 1px;
    background-color: var(--eng-border);
}
.eng-header-lines::before { left: -50px; }
.eng-header-lines::after { right: -50px; }


/* ===== Engineering Gallery Section ===== */
.eng-content {
    padding: 0 0 clamp(4rem, 10vw, 6rem) 0;
}

.eng-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 2rem; /* Slightly reduced gap */
}

.eng-gallery-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10; /* Keep aspect ratio consistent */
    object-fit: cover;
    border-radius: 4px; /* Slightly smaller radius */
    border: 1px solid var(--eng-border); /* Use accent border */
    padding: 4px; /* Inner padding to create frame effect */
    background-color: var(--eng-card-bg); /* Dark semi-transparent bg */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: block;
}

.eng-gallery-grid img:hover {
     transform: scale(1.04) translateZ(0); /* Slight zoom */
     box-shadow: 0 0 15px rgba(0, 191, 255, 0.4), 0 8px 25px rgba(0, 0, 0, 0.3);
     border-color: var(--eng-accent-light);
     cursor: pointer;
}

/* ===== Back to Top Button Adjustment ===== */
body.engineering-page .back-to-top {
    background: var(--eng-accent);
    color: var(--eng-bg); /* Dark icon on blue */
    box-shadow: 0 4px 10px rgba(0, 191, 255, 0.3);
}
body.engineering-page .back-to-top:hover {
    background: var(--eng-accent-light);
    color: var(--eng-bg);
    box-shadow: 0 6px 15px rgba(135, 206, 250, 0.4);
}


/* ===== Responsive Adjustments ===== */
@media (max-width: 767.98px) {
     .eng-gallery-grid {
         grid-template-columns: 1fr; /* Single column */
         gap: 1.5rem;
     }
     .eng-title {
         font-size: clamp(1.8rem, 7vw, 2.8rem);
     }
     .eng-subtitle {
         font-size: clamp(0.9rem, 3vw, 1.1rem);
     }
     .eng-header-lines::before,
     .eng-header-lines::after { display: none; } /* Hide smaller lines */
 }

@media (max-width: 576px) {
    .eng-header {
        padding: 4rem 0 2.5rem 0;
        margin-bottom: 2.5rem;
    }
     .eng-gallery-grid {
         gap: 1.2rem;
     }
     .eng-gallery-grid img {
         padding: 3px;
     }
}