/* ===== CSS VARIABLES ===== */
:root{
    --ieee-blue: #0066cc;
    --ieee-dark-blue: #003d7a;
    --ieee-light-blue: #4d9fff;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --dark-gray: #6c757d;
    --text-dark: #212529;
    --border-light: #dee2e6;
    --shadow-light: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-medium: 0 5px 20px rgba(0,0,0,0.15);
    --shadow-heavy: 0 10px 30px rgba(0,0,0,0.2);
    --gradient-primary: linear-gradient(135deg, var(--ieee-blue), var(--ieee-dark-blue));
    --gradient-light: linear-gradient(135deg, var(--ieee-light-blue), var(--ieee-blue));

    /* softer shadows + shorter transitions */
    --shadow-1:0 2px 8px rgba(0,0,0,.06);
    --shadow-2:0 6px 18px rgba(0,0,0,.08);
    --transition:.2s ease;
}

/* Base */
*{box-sizing:border-box}
body{
    background:var(--light-gray);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text-dark);
    line-height:1.6;
    margin:0;
}

/* Navbar*/
.navbar{
   background: var(--gradient-primary);
    padding: 15px 0;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
}
.navbar.scrolled {
    background: var(--gradient-primary);
    background: rgba(0, 102, 204, 0.95);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--white) !important;
}

.brand-text {
    display: inline-block;
}

@media (max-width: 576px) {
    .brand-text {
        font-size: 0.9rem;
    }
}

.navbar-nav .nav-link {
    color: var(--white) !important;
    font-weight: 500;
    margin: 0 10px;
    position: relative;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--ieee-light-blue) !important;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background: var(--ieee-light-blue);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 100%;
}

.ieee-logo-container {
    padding: 2rem;
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease;
}

.ieee-logo-container:hover {
    transform: translateY(-10px);
}

.ieee-main-logo {
    max-width: 180px;
    height: auto;
}

/* Main wrapper clears fixed nav */
.event-detail-main{ padding-top:80px; }

/* Breadcrumbs */
.breadcrumb-section{
    background:var(--white); border-bottom:1px solid var(--border-light);
    padding:.75rem 0;
}
.breadcrumb{ margin:0; background:transparent; }
.breadcrumb-item a{ color:var(--ieee-blue); text-decoration:none; }
.breadcrumb-item a:hover{ color:var(--ieee-dark-blue); }
.breadcrumb-item.active{ color:var(--dark-gray); }

/* Hero */
.event-hero{
    background:var(--white);
    border-bottom:1px solid var(--border-light);
    padding:2.25rem 0;
}
.event-meta-badges{ display:flex; gap:.5rem; flex-wrap:wrap; }
.badge{
    border-radius:999px; padding:.4rem .75rem; font-size:.8rem; font-weight:600;
}
.event-status.completed{ background:#adb5bd; color:#fff; }
.event-status.upcoming{ background:#28a745; color:#fff; }
.event-category{ background:var(--ieee-light-blue); color:#fff; }

.event-hero-title{
    font-size:2rem; font-weight:800; margin:.5rem 0 .35rem;
}
.event-hero-subtitle{ color:var(--dark-gray); font-size:1.05rem; }

/*!* Quick info *!*/
/*.event-quick-info{*/
/*    background:var(--light-gray); border:1px solid var(--border-light);*/
/*    border-radius:12px; padding:1.25rem; box-shadow:var(--shadow-1);*/
/*}*/
/*.quick-info-item{ display:flex; gap:.75rem; align-items:center; margin-bottom:1rem; }*/
/*.quick-info-item:last-child{ margin-bottom:0; }*/
/*.quick-info-item i{*/
/*    width:36px; height:36px; border-radius:50%;*/
/*    background:var(--ieee-blue); color:#fff; display:inline-flex; align-items:center; justify-content:center;*/
/*    flex-shrink:0;*/
/*}*/
/*.quick-info-item strong{ display:block; font-weight:700; }*/
/*.quick-info-item span{ color:var(--dark-gray); font-size:.95rem; }*/

/* Section titles */
.section-title{
    font-size:1.35rem; font-weight:800; margin:0 0 1rem; position:relative; padding-bottom:.4rem;
}
.section-title::after{
    content:""; position:absolute; left:0; bottom:0; width:48px; height:3px;
    background:var(--ieee-blue); border-radius:2px;
}

/* Card shells */
.card-like{
    background:var(--white);
    border:1px solid var(--border-light);
    border-radius:12px;
    box-shadow:var(--shadow-1);
    padding:1.25rem;
}

/* Gallery */
.event-gallery-section{
    background:var(--white);
    border:1px solid var(--border-light);
    border-radius:12px;
    box-shadow:var(--shadow-1);
    padding:1.25rem;
}
.event-description-section{
    background:var(--white);
    border:1px solid var(--border-light);
    border-radius:12px;
    box-shadow:var(--shadow-1);
    padding:1.25rem;
}

.gallery-main{ border-radius:12px; overflow:hidden; box-shadow:var(--shadow-2); }
.main-gallery-image{ width:100%; height:360px; object-fit:cover; transition:transform .25s ease; }
.main-gallery-image:hover{ transform:scale(1.02); }

.gallery-thumbnails{
    display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill, minmax(96px,1fr));
    margin-top:.5rem;
}
.thumbnail-image{
    width:100%; height:70px; object-fit:cover; border-radius:8px; cursor:pointer;
    border:2px solid transparent; transition:border var(--transition), transform var(--transition);
}
.thumbnail-image:hover{ transform:translateY(-2px); }
.thumbnail-image.active{ border-color:var(--ieee-blue); }

/* Description */
.event-description-section{ composes: card-like; }
.highlight-box{
    background:linear-gradient(90deg, var(--ieee-blue), var(--ieee-light-blue));
    color:#fff; border-radius:10px; padding:1rem; display:flex; gap:.75rem; align-items:center;
}
.highlight-box i{ font-size:1.4rem; }
.event-description p{ margin:1rem 0; }
.feature-list{ list-style:none; padding:0; margin:1rem 0; }
.feature-list li{ display:flex; gap:.5rem; align-items:center; margin:.5rem 0; }
.feature-list i{ color:#28a745; }

/* Speaker */
.speaker-section{
    background:var(--white);
    border:1px solid var(--border-light);
    border-radius:12px;
    box-shadow:var(--shadow-1);
    padding:1.25rem;
}

.speaker-card{
    display:flex; gap:1rem; align-items:center; background:var(--light-gray);
    border:1px solid var(--border-light); border-radius:10px; padding:1rem;
}
.speaker-avatar{
    width:64px; height:64px; border-radius:50%; background:var(--ieee-blue);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.35rem; flex-shrink:0;
}
.speaker-title{ color:var(--ieee-blue); font-weight:600; margin:.15rem 0; }
.speaker-company{ color:var(--dark-gray); }

/* Sidebar */
.event-sidebar{ position:sticky; top:92px; }
.sidebar-card{
    background:var(--white);
    border:1px solid var(--border-light);
    border-radius:12px;
    box-shadow:var(--shadow-1);
    padding:1.25rem;
    margin-bottom:1rem;
}
.sidebar-card .card-title{ font-weight:800; margin:0 0 .9rem; }
.detail-item{ display:flex; gap:.75rem; align-items:center; margin:.75rem 0; }
.detail-item i{
    width:28px; height:28px; border-radius:50%; background:var(--ieee-light-blue);
    color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem;
}

/* Organizers + related */
.organizer-item{ display:flex; gap:.75rem; align-items:center; margin:.75rem 0; }
.organizer-logo{ width:38px; height:38px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.organizer-logo img{ width:100%; height:100%; object-fit:contain; }
.collaborator-list{ border-top:1px solid var(--border-light); margin-top:1rem; padding-top:.75rem; }
.collaborator-list ul{ margin:0; padding-left:1rem; }
.collaborator-list li{ color:var(--dark-gray); margin:.35rem 0; }

.related-event a{
    display:flex; gap:.75rem; align-items:center; text-decoration:none; color:inherit;
    padding:.6rem; border-radius:8px; transition:background var(--transition), transform var(--transition);
}
.related-event a:hover{ background:var(--light-gray); transform:translateY(-2px); }
.related-event img{ width:60px; height:44px; object-fit:cover; border-radius:6px; }

/* Footer*/
.footer {
    background: var(--gradient-primary);
    color: var(--white);
    padding: 3rem 0 1rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: var(--white);
    color: var(--ieee-blue);
    transform: translateY(-3px);
}

.footer hr {
    border-color: rgba(255, 255, 255, 0.2);
}

.social-icons a{
    width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.12); color:#fff; text-decoration:none; transition:var(--transition);
}
.social-icons a:hover{ background:#fff; color:var(--ieee-blue); }

/* Simple reveal */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.reveal.appear{ opacity:1; transform:none; }

/* Responsive */
@media (max-width:991.98px){
    .event-hero{ padding:1.75rem 0; }
    .event-hero-title{ font-size:1.7rem; }
    .event-hero-subtitle{ font-size:1rem; }
    .event-quick-info{ margin-top:1rem; }
    .main-gallery-image{ height:300px; }
    .event-sidebar{ position:static; margin-top:1.25rem; }
}
@media (max-width:767.98px){
    .event-detail-main{ padding-top:72px; }
    .main-gallery-image{ height:240px; }
    .speaker-card{ flex-direction:column; text-align:center; }
}
@media (max-width:575.98px){
    .event-hero-title{ font-size:1.45rem; }
    .gallery-thumbnails{ grid-template-columns:repeat(2,1fr); }
    .thumbnail-image{ height:54px; }
}