/* =========================================================
   CAMPUS FEATURE SECTION
========================================================= */

.campus-feature-section {
    width: 100%;
    margin: 10px 0 0;
    padding: 0;

    background: #ffffff;

    box-sizing: border-box;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}


/* =========================================================
   CONTAINER
========================================================= */

.campus-feature-container {
    width: 96%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   VIDEO COLUMN
========================================================= */

.campus-video-column {
    min-width: 0;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.campus-video-card {
    width: 100%;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.05);
}


/* =========================================================
   VIDEO
========================================================= */

.campus-video {
    width: 100%;

    min-height: 300px;

    background: #0f172a;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/*
   Make embedded iframe/video responsive.
*/

.campus-video iframe,
.campus-video video,
.campus-video embed,
.campus-video object {
    display: block;

    width: 100%;
    max-width: 100%;

    min-height: 300px;

    border: 0;
}


/* =========================================================
   CAMPUS MENU COLUMN
========================================================= */

.campus-menu-column {
    min-width: 0;
}


/* =========================================================
   MENU CARD
========================================================= */

.campus-menu-card {
    width: 100%;
    height: 100%;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 8px;

    overflow: hidden;

    box-sizing: border-box;

    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.05);
}


/* =========================================================
   MENU HEADER
========================================================= */

.campus-menu-header {
    min-height: 58px;

    display: flex;
    align-items: center;

    padding: 0 16px;

    background: #f8fafc;

    border-bottom: 1px solid #e2e8f0;

    box-sizing: border-box;
}


/* =========================================================
   HEADER ICON
========================================================= */

.campus-menu-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 10px;

    color: #1e3a8a;
    background: #eff6ff;

    border: 1px solid #dbeafe;

    border-radius: 6px;

    font-size: 14px;
}


/* =========================================================
   HEADER TITLE
========================================================= */

.campus-menu-title {
    min-width: 0;
}


.campus-menu-heading {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #1e3a8a;

    font-family: "Segoe UI", Arial, sans-serif;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.3px;

    text-decoration: none;
}


.campus-menu-heading span {
    color: #1e3a8a;
}


.campus-menu-heading em {
    color: #dc2626;

    font-style: normal;
}


/* =========================================================
   HEADER HOVER
========================================================= */

.campus-menu-heading:hover {
    text-decoration: none;
}


.campus-menu-heading:hover span,
.campus-menu-heading:hover em {
    opacity: 0.8;
}


/* =========================================================
   DIVIDER
========================================================= */

.campus-menu-divider {
    height: 1px;

    margin: 0 16px;

    background: #e2e8f0;
}


/* =========================================================
   MENU LIST
========================================================= */

.campus-menu-list {
    width: 100%;

    padding: 4px 0;

    box-sizing: border-box;
}


/* =========================================================
   MENU ITEM
========================================================= */

.campus-menu-item {
    position: relative;

    min-height: 48px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    color: #334155;

    text-decoration: none;

    border-bottom: 1px solid #f1f5f9;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;
}


.campus-menu-item:last-child {
    border-bottom: 0;
}


/* =========================================================
   MENU ITEM ICON
========================================================= */

.campus-menu-item-icon {
    width: 24px;

    flex: 0 0 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 7px;

    color: #64748b;

    font-size: 13px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/* =========================================================
   MENU TEXT
========================================================= */

.campus-menu-item-text {
    flex: 1;

    min-width: 0;

    color: #334155;

    font-family: "Segoe UI", Arial, sans-serif;

    font-size: 12.5px;
    font-weight: 500;

    line-height: 1.4;

    text-align: left;
}


/* =========================================================
   RIGHT ARROW
========================================================= */

.campus-menu-arrow {
    width: 20px;

    flex: 0 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #94a3b8;

    font-size: 12px;

    opacity: 0;

    transform: translateX(-4px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease;
}


/* =========================================================
   MENU HOVER
========================================================= */

.campus-menu-item:hover {
    color: #1e3a8a;

    background: #f8fafc;

    text-decoration: none;

    padding-left: 17px;
}


.campus-menu-item:hover .campus-menu-item-icon {
    color: #1e3a8a;

    transform: translateX(2px);
}


.campus-menu-item:hover .campus-menu-item-text {
    color: #1e3a8a;
}


.campus-menu-item:hover .campus-menu-arrow {
    opacity: 1;

    color: #1e3a8a;

    transform: translateX(0);
}


/* =========================================================
   FOOTER
========================================================= */

.campus-menu-footer {
    padding: 10px 14px;

    background: #f8fafc;

    border-top: 1px solid #e2e8f0;

    text-align: right;
}


/* =========================================================
   VIEW ALL
========================================================= */

.campus-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #1d4ed8;

    font-family: "Segoe UI", Arial, sans-serif;

    font-size: 10.5px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}


.campus-view-all:hover {
    color: #dc2626;

    gap: 8px;

    text-decoration: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .campus-feature-container {
        width: 94%;

        grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr);

        gap: 18px;
    }

    .campus-video,
    .campus-video iframe,
    .campus-video video,
    .campus-video embed,
    .campus-video object {
        min-height: 260px;
    }

    .campus-menu-item {
        min-height: 44px;
    }

    .campus-menu-item-text {
        font-size: 11.5px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .campus-feature-section {
        margin-top: 8px;
    }

    .campus-feature-container {
        width: 94%;

        display: flex;
        flex-direction: column;

        gap: 16px;
    }

    .campus-video-column,
    .campus-menu-column {
        width: 100%;
    }

    .campus-video {
        min-height: 220px;
    }

    .campus-video iframe,
    .campus-video video,
    .campus-video embed,
    .campus-video object {
        min-height: 220px;
    }

    .campus-menu-card {
        height: auto;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.campus-menu-item:focus-visible,
.campus-menu-heading:focus-visible,
.campus-view-all:focus-visible {
    outline: 2px solid #2563eb;

    outline-offset: 2px;
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .campus-menu-item,
    .campus-menu-item-icon,
    .campus-menu-arrow,
    .campus-view-all {
        transition: none;
    }
}