/* National Exams timetable pages (index and exam type). All rules are scoped with the ne- prefix. */

.ne-page {
    overflow-wrap: break-word;
    min-width: 0;
}

.ne-page .container {
    padding: 0 20px;
}

.ne-page :focus-visible {
    outline: 3px solid #FF8C00;
    outline-offset: 3px;
}

.ne-top {
    padding-top: 30px;
}

#schedule {
    scroll-margin-top: 100px;
}

/* Sections */

.ne-section {
    padding: 80px 0;
    background: #fff;
}

.ne-section--alt {
    background: #f8f9fa;
}

.ne-h2 {
    text-align: center;
    font-size: 2.5rem;
    line-height: 1.25;
    margin-bottom: 50px;
    color: #333;
}

.ne-h2--sub {
    font-size: 1.8rem;
    line-height: 1.3;
    color: #01574c;
    margin-bottom: 24px;
}

.ne-h2--muted {
    color: #666;
}

.ne-section__meta {
    text-align: center;
    color: #666;
    margin: -30px 0 50px;
}

.ne-group + .ne-group {
    margin-top: 50px;
}

/* Hero (gradient band with carousel or empty state) */

.ne-hero {
    background: linear-gradient(135deg, #01574c 0%, #FF8C00 100%);
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

.ne-hero__inner {
    max-width: 780px;
    margin: 0 auto;
}

.ne-hero h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.ne-hero__lead {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 30px;
}

.ne-hero__empty {
    opacity: 0.9;
}

.ne-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 50px;
    background: #fff;
    color: #b85c00;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Hero entrance, same timing as the home and Products heroes (fadeInUp is defined in base.html) */
@media (prefers-reduced-motion: no-preference) {
    .ne-hero h1 {
        animation: fadeInUp 1s ease-out;
    }

    .ne-hero__lead {
        animation: fadeInUp 1s ease-out 0.2s both;
    }
}

/* Carousel (dependency-free, see nationalexams.js) */

.ne-carousel {
    max-width: 720px;
    margin: 0 auto;
}

.ne-slide {
    display: none;
}

.ne-slide.is-active {
    display: block;
    animation: ne-fade 0.6s ease;
}

@keyframes ne-fade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ne-carousel__title {
    font-size: 2rem;
    line-height: 1.25;
    margin-bottom: 8px;
}

.ne-carousel__programme {
    opacity: 0.9;
    margin-bottom: 12px;
}

.ne-carousel__date {
    font-weight: 600;
    margin-bottom: 6px;
}

.ne-carousel__date i {
    margin-right: 8px;
}

.ne-carousel__status {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 24px;
}

.ne-carousel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.ne-carousel__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}

.ne-carousel__dots {
    display: flex;
    gap: 10px;
}

.ne-carousel__dot {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.ne-carousel__dot.is-active {
    background: #fff;
}

.ne-carousel__btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.ne-carousel__btn:hover {
    background: #fff;
    color: #01574c;
}

/* Buttons */

.ne-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s;
}

.ne-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.ne-btn--primary {
    background: #01574c;
    border-color: #01574c;
    color: #fff;
}

.ne-btn--primary:hover {
    background: #013f38;
    border-color: #013f38;
    color: #fff;
}

.ne-btn--outline {
    background: transparent;
    border-color: #01574c;
    color: #01574c;
}

.ne-btn--outline:hover {
    background: #01574c;
    color: #fff;
}

.ne-btn--light {
    background: #fff;
    border-color: #fff;
    color: #01574c;
}

.ne-btn--ghost {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.ne-btn--ghost:hover {
    background: #fff;
    color: #01574c;
}

/* Badges and pills */

.ne-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ne-badge--ongoing {
    background: #FF8C00;
    color: #fff;
}

.ne-badge--next {
    background: #e6f2f0;
    color: #01574c;
}

.ne-hero .ne-badge--ongoing,
.ne-hero .ne-badge--next {
    border: 2px solid #fff;
}

.ne-hero .ne-badge--next {
    background: #fff;
    color: #01574c;
}

.ne-days {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.ne-pill {
    display: inline-block;
    padding: 8px 18px;
    border: 2px solid #01574c;
    border-radius: 50px;
    background: #fff;
    color: #01574c;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.ne-pill:hover {
    background: #e6f2f0;
}

.ne-pill.is-active,
.ne-pill.is-active:hover {
    background: #01574c;
    color: #fff;
}

.ne-pill__count {
    opacity: 0.75;
}

/* Index cards */

.ne-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.ne-card {
    display: block;
    height: 100%;
    padding: 40px 30px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
}

.ne-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.ne-card h3 {
    font-size: 1.4rem;
    line-height: 1.3;
    color: #FF8C00;
    margin-bottom: 6px;
}

.ne-card__full {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.ne-card__text {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.ne-card__text strong {
    color: #333;
}

.ne-card__count {
    color: #666;
    font-size: 0.9rem;
    margin-top: 12px;
}

/* Live panels (happening now / next paper) */

.ne-live {
    margin-bottom: 40px;
    padding: 30px;
    background: #fff;
    border-radius: 15px;
    border-left: 4px solid #01574c;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.ne-live--ongoing {
    border-left-color: #FF8C00;
}

.ne-live--quiet {
    border: 1px solid #e0e0e0;
    box-shadow: none;
}

.ne-live__paper {
    font-size: 1.8rem;
    line-height: 1.25;
    color: #01574c;
    margin-bottom: 6px;
}

.ne-live__meta {
    font-weight: 600;
    margin-bottom: 6px;
}

.ne-hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

/* Session cards */

.ne-sessions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ne-session {
    padding: 30px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.ne-session__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ne-session__head > div:first-child {
    min-width: 0;
}

.ne-session__title {
    font-size: 1.3rem;
    line-height: 1.3;
    color: #01574c;
    margin-bottom: 6px;
}

.ne-session__date {
    font-weight: 600;
    margin-bottom: 6px;
}

.ne-session__date i {
    color: #FF8C00;
    margin-right: 8px;
}

.ne-session__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ne-session__source {
    margin-top: 16px;
}

@media (min-width: 769px) {
    .ne-session__head {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

/* Paper table: scrolls inside its own wrapper */

.ne-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.ne-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.ne-table th {
    padding: 14px 16px;
    background: #01574c;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.ne-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.ne-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.ne-table tbody tr:hover {
    background: #e6f2f0;
}

.ne-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Breadcrumb, links and helpers */

.ne-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

.ne-breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: #999;
}

.ne-link {
    color: #01574c;
    font-weight: 600;
    text-decoration: none;
}

.ne-link:hover {
    color: #FF8C00;
}

.ne-muted {
    color: #666;
}

.ne-small {
    font-size: 0.9rem;
}

.ne-nowrap {
    white-space: nowrap;
}

.ne-note {
    margin-top: 50px;
    color: #666;
    font-size: 0.9rem;
    text-align: center;
}

.ne-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ne-page .ne-mt {
    margin-top: 16px;
}

/* Small screens */

@media (max-width: 768px) {
    .ne-page .container {
        padding: 0 16px;
    }

    .ne-hero {
        padding: 60px 0;
    }

    .ne-hero h1 {
        font-size: 2.5rem;
    }

    .ne-section {
        padding: 60px 0;
    }

    .ne-h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .ne-section__meta {
        margin-bottom: 30px;
    }

    .ne-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ne-card {
        padding: 28px 22px;
    }

    .ne-live,
    .ne-session {
        padding: 20px;
    }

    .ne-live__paper {
        font-size: 1.5rem;
    }

    .ne-carousel__title {
        font-size: 1.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ne-slide.is-active {
        animation: none;
    }

    .ne-card,
    .ne-btn,
    .ne-carousel__btn {
        transition: none;
    }
}