Refine career carousel overlay layout

index.html

@@ -147,12 +147,42 @@ <h3>
             <h2 class="section-title">Career</h2>
             <div class="image-carousel" role="list" id="careerCarousel">
                 <div class="carousel-item" role="listitem">
+                    <div class="carousel-overlay" aria-hidden="false">
+                        <p class="overlay-label">Internship</p>
+                        <h3 class="overlay-title">Electromagnetic Compatibility Testing</h3>
+                        <p class="overlay-subtitle">L3Harris · Melbourne, FL</p>
+                        <p class="overlay-date">August 2025</p>
+                        <p class="overlay-description">
+                            Supported avionics testing campaigns to safeguard onboard systems from signal interference
+                            during integration and launch readiness.
+                        </p>
+                    </div>
                     <img src="images/L3Harris-1.jpg" alt="L3Harris Tactical Communication" />
                 </div>
                 <div class="carousel-item" role="listitem">
+                    <div class="carousel-overlay" aria-hidden="false">
+                        <p class="overlay-label">Automation</p>
+                        <h3 class="overlay-title">Pricing Intelligence Platform</h3>
+                        <p class="overlay-subtitle">L3Harris · Melbourne, FL</p>
+                        <p class="overlay-date">June 2024</p>
+                        <p class="overlay-description">
+                            Delivered a WPF-based CPQ solution that accelerated quoting workflows and introduced versioned
+                            pricing governance across teams.
+                        </p>
+                    </div>
                     <img src="images/L3Harris-2.jpg" alt="L3Harris Tactical Communication" />
                 </div>
                 <div class="carousel-item" role="listitem">
+                    <div class="carousel-overlay" aria-hidden="false">
+                        <p class="overlay-label">Operations</p>
+                        <h3 class="overlay-title">Logistics Optimization</h3>
+                        <p class="overlay-subtitle">C U Plastic · Orlando, FL</p>
+                        <p class="overlay-date">May 2024</p>
+                        <p class="overlay-description">
+                            Introduced cross-department workflows and staging strategies that improved throughput and
+                            reduced load times by 25%.
+                        </p>
+                    </div>
                     <img src="images/CU-Plastic.jpg" alt="C U Plastic" />
                 </div>
             </div>

style.css

@@ -120,8 +120,9 @@ body {
 }
 
 .image-carousel {
+    --carousel-gap: 1.5rem;
     display: flex;
-    gap: 1.5rem;
+    gap: var(--carousel-gap);
     overflow-x: auto;
     padding-bottom: 1rem;
     scroll-snap-type: x mandatory;
@@ -146,6 +147,8 @@ body {
     aspect-ratio: 16 / 9;
     background: transparent;
     border-radius: 0;
+    position: relative;
+    overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -166,6 +169,82 @@ body {
     pointer-events: none;
 }
 
+.carousel-overlay {
+    position: absolute;
+    left: var(--carousel-gap);
+    bottom: var(--carousel-gap);
+    padding: clamp(1rem, 2.5vw, 1.75rem);
+    max-width: min(24rem, 80%);
+    background: rgba(6, 9, 16, 0.82);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0;
+    box-shadow: 0 18px 35px rgba(3, 5, 10, 0.45);
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    color: #f8f9fb;
+    pointer-events: none;
+}
+
+.overlay-label {
+    font-size: 0.7rem;
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.7);
+    margin: 0;
+}
+
+.overlay-title {
+    font-size: clamp(1.1rem, 2.2vw, 1.55rem);
+    font-weight: 700;
+    line-height: 1.2;
+    margin: 0;
+}
+
+.overlay-subtitle,
+.overlay-date,
+.overlay-description {
+    font-size: clamp(0.85rem, 1.6vw, 0.95rem);
+    line-height: 1.5;
+    margin: 0;
+    font-weight: 400;
+}
+
+.overlay-date {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.overlay-description {
+    margin-top: 0.35rem;
+    max-width: none;
+}
+
+@media (max-width: 640px) {
+    .carousel-item {
+        flex: 0 0 85vw;
+        max-width: 85vw;
+    }
+
+    .image-carousel {
+        --carousel-gap: clamp(0.75rem, 4vw, 1.25rem);
+    }
+
+    .carousel-overlay {
+        left: var(--carousel-gap);
+        right: var(--carousel-gap);
+        max-width: none;
+        border-radius: 0;
+        padding: clamp(0.85rem, 4vw, 1.25rem);
+    }
+
+    .overlay-label {
+        font-size: 0.65rem;
+        letter-spacing: 0.22em;
+    }
+}
+
 .image-carousel.is-free-scroll {
     scroll-snap-type: none;
 }
@@ -528,6 +607,17 @@ body {
         aspect-ratio: auto;
     }
 
+    .carousel-overlay {
+        inset: 0;
+        padding: clamp(1rem, 6vw, 2.5rem);
+        gap: 0.5rem;
+        background: linear-gradient(180deg, rgba(5, 8, 15, 0.9) 0%, rgba(5, 8, 15, 0.7) 65%, rgba(5, 8, 15, 0) 100%);
+    }
+
+    .overlay-description {
+        max-width: 100%;
+    }
+
     .scroll-wrapper {
         padding-top: 0;
     }