/**
 * CMBN Mobility Data Blocks - Department Hub
 * Aligned with TAD public reference
 * Version: 2026.08.27 - Header Alignment Update
 */

.cmbn-department-hub {
    line-height: 1.6;
    color: #1a1a1a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Hero Section - Aligned with TAD Reference */
.cmbn-department-hub .hub-hero {
  background:linear-gradient(100deg,#173d73,#245a9a);
  color:#fff;
  padding:42px 32px 50px;
  border-radius:0;
  margin-bottom:40px;
  text-align:left;
  position:relative;
  overflow:hidden;
}

.cmbn-department-hub .hub-hero::after {
  content:""; position:absolute; width:360px; height:360px;
  border:1px dashed rgba(255,255,255,.22); border-radius:50%;
  right:-100px; bottom:-220px;
}

.cmbn-department-hub .hub-hero > * { position:relative; z-index:1; }

.cmbn-department-hub .hub-hero .kicker {
  font:800 11px ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing:.11em; text-transform:uppercase; color:#ffd166;
  margin:0 0 12px;
}

.cmbn-department-hub .hub-hero h1 {
  font-size:clamp(36px,5vw,58px); line-height:1.04;
  letter-spacing:-.045em; max-width:17ch; margin:0; color:#fff;
}

.cmbn-department-hub .hub-hero .chapo {
  font-size:18px; line-height:1.55; color:#edf5fc;
  max-width:64ch; margin:20px 0 0; opacity:1;
}

@media (max-width:560px) {
 .cmbn-department-hub .hub-hero { padding:34px 18px 40px; }
 .cmbn-department-hub .hub-hero::after { display:none; }
 .cmbn-department-hub .hub-hero h1 { font-size:39px; }
 .cmbn-department-hub .hub-hero .chapo { font-size:16px; }
}

/* Navigation - Family .btn-outline (derived from jumps) */
.cmbn-department-hub .department-jump {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
    border: none;
    position: static; /* Non sticky */
}

.cmbn-department-hub .department-jump ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.cmbn-department-hub .department-jump a {
    display: inline-block;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid #0056b3;
    border-radius: 5px;
    text-decoration: none;
    color: #0056b3;
    font-weight: 600;
    font-size: 0.95rem;
    min-height: 44px;
    min-width: 44px;
    transition: all 0.2s ease;
}

.cmbn-department-hub .department-jump a:hover,
.cmbn-department-hub .department-jump a:focus {
    background: #004494;
    color: white;
    border-color: #004494;
}

/* Warning blocks - Family .warning-block */
.cmbn-department-hub .hub-summary,
.cmbn-department-hub .hub-region {
    background-color: #eef6ff;
    border-left: 5px solid #0056b3;
    padding: 30px;
    margin-bottom: 40px;
    border-radius: 0 8px 8px 0;
    text-align: left;
    font-size: inherit;
}

.cmbn-department-hub .hub-summary strong,
.cmbn-department-hub .hub-region strong {
    color: #0056b3;
}

/* Sections & H2 */
.cmbn-department-hub .department-section {
    margin-bottom: 40px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    max-width: none;
}

.cmbn-department-hub .department-section h2,
.cmbn-department-hub .hub-region h2 {
    font-size: 1.8rem;
    color: #0056b3;
    margin-bottom: 20px;
    border-bottom: 2px solid #eef6ff;
    padding-bottom: 10px;
    grid-column: 1 / -1;
}

.cmbn-department-hub .department-section .stat {
    grid-column: 1 / -1;
    font-size: 1.25rem;
    margin-top: 0;
    color: #444;
}

.cmbn-department-hub .department-section .stat strong {
    font-size: 2rem;
    color: #0056b3;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.cmbn-department-hub .check-list {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.cmbn-department-hub .check-list p {
    margin-top: 0;
    color: #0056b3;
    font-weight: bold;
}

/* Internal Links - Family .btn */
.cmbn-department-hub .internal-links {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.cmbn-department-hub .internal-links a {
    display: inline-block;
    background-color: #0056b3;
    color: #ffffff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    min-height: 44px;
    transition: background-color 0.2s;
}

.cmbn-department-hub .internal-links a:hover {
    background-color: #004494;
    color: #ffffff;
}

/* Sources - Family .sources */
.cmbn-department-hub .hub-sources {
    border-top: 1px solid #e0e0e0;
    padding-top: 40px;
    font-size: 0.95rem;
    margin-top: 40px;
    background: #ffffff;
    border-left: none;
    border-radius: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.cmbn-department-hub .hub-sources h2 {
    color: #0056b3;
    font-size: 1.5rem;
    border-bottom: none;
    padding-bottom: 0;
}

.cmbn-department-hub .hub-sources a {
    color: #0056b3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.cmbn-department-hub .hub-sources a:hover {
    text-decoration: underline;
}

.cmbn-department-hub .hub-sources p:last-child {
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 5px;
    color: #555;
    font-size: 0.9rem;
    margin-top: 20px;
}

/* Accessibility & Utils */
.cmbn-department-hub a:focus-visible,
.cmbn-department-hub .btn:focus-visible,
.cmbn-department-hub .department-jump a:focus-visible {
    outline: 3px solid #ffcc00 !important;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cmbn-department-hub * {
        transition: none !important;
        animation: none !important;
    }
}

/* Breakpoint 390px (Mobile) - Legacy Support */
@media screen and (max-width: 390px) {
    .cmbn-department-hub {
        padding: 15px;
    }

    .cmbn-department-hub .department-section {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .cmbn-department-hub .internal-links a {
        display: block;
        width: 100%;
        margin: 5px 0;
        text-align: center;
    }

    .cmbn-department-hub .department-jump a {
        width: 100%;
        text-align: center;
    }
}