/* Page styles for nptel.html — mobile/tablet hardening */

/* The 4-column course table is wider than a phone screen: let it scroll
   sideways inside its wrapper instead of crushing the columns */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll > .table {
    min-width: 640px;
}

/*==================================================================
  Heritage-theme polish (redesign 2026-07)
==================================================================*/

/* Section heading above the course archive table */
.nptel-courses .nptel-heading {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--iith-indigo);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.4;
    margin-bottom: 1.25rem;
    max-width: 40em;
}

/* Syllabus links inside the table read (and tap) like small buttons:
   comfortable >=40px tap targets on phones, external-link glyph cue */
.nptel-courses .table td a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--iith-vermillion);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.nptel-courses .table td a::after {
    content: "\f1c5"; /* bi-box-arrow-up-right */
    font-family: "bootstrap-icons";
    font-size: .78em;
    line-height: 1;
}
.nptel-courses .table td a:hover,
.nptel-courses .table td a:focus-visible {
    border-color: var(--iith-vermillion);
    color: var(--iith-vermillion);
    box-shadow: var(--shadow-md);
}

/* Tablet/phone: slightly tighter chips so the Link column stays narrow
   while the wrapper handles the sideways scroll */
@media (max-width: 767.98px) {
    .nptel-courses .table td a {
        padding: 5px 11px;
        gap: 6px;
    }
}