/* Add to layout.css or create hub.css and @import it in style.css */

/* --- Hub Page 3-Column Layout --- */
.hub-layout {
    display: grid;
    /* Define columns: Left Nav | Main Content | Ad Sidebar */
    /* Adjust widths: e.g., 200px Nav, Flexible Content, 250px Ad */
    grid-template-columns: 200px 1fr 250px;
    gap: 30px; /* Space between columns */
    padding: 30px 20px 60px 20px; /* Overall padding */
    flex-grow: 1; /* For sticky footer */
    /* Optional: Center grid on very wide screens */
    /* max-width: 1600px; */
    /* margin: 0 auto; */
}

/* Hub layout when NO ad sidebar is shown (class added by layout EJS) */
.hub-layout.no-sidebar {
    grid-template-columns: 200px 1fr; /* Left Nav | Main Content */
    gap: 30px; /* Maintain gap between nav and content */
}
.hub-layout.no-sidebar .ad-sidebar {
    display: none; /* Ensure sidebar column space collapses */
}

/* --- Hub Left Navigation Sidebar --- */
.hub-left-nav {
    background-color: #ffffff;
    padding: 25px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    height: fit-content; /* Adjusts height */
    position: sticky; /* Make left nav sticky */
    top: 90px; /* Adjust based on header height + desired gap */
}
.hub-left-nav h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.hub-left-nav ul { list-style: none; padding: 0; margin: 0; }
.hub-left-nav li { margin-bottom: 4px; }
.hub-left-nav a {
    display: block;
    padding: 9px 12px;
    color: #0056b3;
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 4px;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    font-weight: 500;
}
.hub-left-nav a:hover,
.hub-left-nav a:focus {
    background-color: #eef3f9;
    color: #003d7a;
    outline: none;
}

/* --- Hub Main Content Area (Center Column) --- */

/* Styles for elements within hub main content */
.hub-main-content section { margin-bottom: 35px; }
.hub-main-content section:last-of-type { margin-bottom: 10px; }
.hub-main-content h2 { margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid #eee; font-size: 1.6rem; color: #333; font-weight: 500; }
.hub-main-content .lead { font-size: 1.15rem; color: #555; margin-bottom: 30px; font-weight: 400; line-height: 1.7; }
.hub-main-content ul { list-style: disc; padding-left: 25px; margin-left: 5px; margin-bottom: 1em; }
.hub-main-content li { margin-bottom: 8px; }
.hub-main-content strong { font-weight: 600; }


/* --- Ad Sidebar (Right Column) --- */
/* Reuse existing .ad-sidebar styles or define them here if needed */
.ad-sidebar {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    height: fit-content;
    position: sticky; /* Optional: Make ad sidebar sticky */
    top: 90px;      /* Match left nav sticky position */
}
.ad-sidebar h2 { font-size: 0.75rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 15px; text-align: center; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.ad-sidebar img { max-width: 100%; height: auto; display: block; margin: 0 auto 10px auto; }
.ad-sidebar .ad-sidebar-tagline { font-size: 0.75rem; text-align: center; color: #888; }


/* --- Responsive Adjustments for Hub Layout --- */
@media (max-width: 1024px) { /* Adjust breakpoint as needed */
    .hub-layout {
        grid-template-columns: 180px 1fr 220px; /* Adjust column widths */
        gap: 20px;
    }
    .hub-layout.no-sidebar {
        grid-template-columns: 180px 1fr;
    }
     .hub-left-nav h3 { font-size: 1rem; }
     .hub-left-nav a { font-size: 0.9rem; padding: 7px 10px; }
}

@media (max-width: 767px) { /* Mobile stacking */
    .hub-layout {
        grid-template-columns: 1fr; /* Stack all columns */
        padding: 25px 15px 40px 15px;
        gap: 30px; /* Vertical gap */
    }
     /* Remove sticky positioning on mobile */
     .hub-left-nav, .ad-sidebar {
         position: static;
         height: auto;
         box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Maybe slightly less shadow */
         /* Optional: Add margin between stacked elements */
         /* margin-bottom: 30px; */
     }
      .hub-main-content h2 { font-size: 1.4rem; }
      .hub-main-content .lead { font-size: 1.1rem; }
}