/*
 * Home page only: "Academic Structure" and "Latest News & Updates" sections.
 * Loaded from website/index.html via {% block extra_css %} in base.html.
 * Brand colours come from the :root custom properties in style.css.
 */

/* ---------- Shared ---------- */
.home-pill,
.home-eyebrow {
    color: var(--primary-dark);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border: 1px solid rgba(var(--primary-rgb, 193, 133, 11), .25);
    /*border-radius: 50rem;*/
    /* white fill keeps --primary-dark text above 4.5:1 (a gold tint drops it to ~4.1:1) */
    background: var(--bs-white, #fff);
}

.home-heading {
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    line-height: 1.15;
    color: var(--dark);
}

.home-accent {
    color: var(--primary-dark);
}

.home-intro {
    max-width: 760px;
}

.home-lead {
    font-size: 1.125rem;
    line-height: 1.7;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 1.5rem;
    /*border-radius: .75rem;*/
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s;
}

.home-btn-pill {
    /*border-radius: 50rem;*/
}

.home-btn .fa-arrow-right {
    transition: transform .3s;
}

.home-btn:hover .fa-arrow-right,
.home-btn:focus-visible .fa-arrow-right {
    transform: translateX(4px);
}

/* Scoped by section id: the section wrappers carry no home-* class. */
#academic-structure a:focus-visible,
#latest-news a:focus-visible {
    outline: 3px solid var(--primary-dark);
    outline-offset: 3px;
    box-shadow: none;
}

#academic-structure .home-cta a:focus-visible {
    outline-color: var(--primary);
}

/* ---------- Academic Structure ---------- */
.home-schools {
    background: var(--light);
    border-top: 1px solid rgba(var(--dark-rgb, 3, 33, 71), .08);
    border-bottom: 1px solid rgba(var(--dark-rgb, 3, 33, 71), .08);
}

.home-school-card {
    overflow: hidden;
    border: 1px solid rgba(var(--dark-rgb, 3, 33, 71), .1);
    /*border-radius: 1.5rem;*/
    background: var(--bs-white, #fff);
    box-shadow: 0 .5rem 1.5rem rgba(var(--dark-rgb, 3, 33, 71), .08);
    transition: box-shadow .5s;
}

.home-school-card:hover,
.home-school-card:focus-within {
    box-shadow: 0 1.25rem 2.5rem rgba(var(--dark-rgb, 3, 33, 71), .18);
}

.home-school-card--eng {
    --school-color: var(--dark);
    --school-color-rgb: var(--dark-rgb, 3, 33, 71);
    --school-color-hover: var(--dark-light);
}

.home-school-card--agric {
    --school-color: var(--secondary);
    --school-color-rgb: var(--secondary-rgb, 5, 83, 43);
    --school-color-hover: var(--secondary-dark);
}

.home-school-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.home-school-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(var(--dark-rgb, 3, 33, 71), .92) 0%,
        rgba(var(--dark-rgb, 3, 33, 71), .4) 45%,
        rgba(var(--dark-rgb, 3, 33, 71), 0) 75%);
    pointer-events: none;
}

.home-school-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s;
}

.home-school-card:hover .home-school-img,
.home-school-card:focus-within .home-school-img {
    transform: scale(1.05);
}

.home-school-badges {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.home-school-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, .2);
    /*border-radius: .75rem;*/
    background: var(--school-color);
    color: var(--primary);
    box-shadow: 0 .5rem 1rem rgba(var(--dark-rgb, 3, 33, 71), .25);
}

.home-school-abbr {
    padding: .25rem .75rem;
    border: 1px solid rgba(255, 255, 255, .35);
    /*border-radius: 50rem;*/
    background: rgba(var(--dark-rgb, 3, 33, 71), .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--bs-white, #fff);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-school-caption {
    position: absolute;
    right: 1.5rem;
    bottom: 1.25rem;
    left: 1.5rem;
    z-index: 1;
    color: var(--bs-white, #fff);
}

/* --primary-light: plain --primary is under 4.5:1 on the thinner part of the overlay */
.home-school-tagline {
    color: var(--primary-light);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-school-title {
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.15;
    color: var(--bs-white, #fff);
}

.home-label {
    color: var(--dark-light);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-label .fa {
    color: var(--school-color);
}

.home-programme-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    border: 1px solid rgba(var(--dark-rgb, 3, 33, 71), .08);
    /*border-radius: .75rem;*/
    background: var(--light);
    color: var(--dark);
    font-size: .875rem;
    font-weight: 600;
    transition: border-color .3s, background-color .3s;
}

.home-programme-chip::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    /*border-radius: 50%;*/
    background: var(--school-color);
}

.home-programme-chip:hover {
    border-color: rgba(var(--school-color-rgb), .4);
    background: rgba(var(--school-color-rgb), .05);
}

.home-programme-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-school-btn {
    /*border: 1px solid var(--school-color);*/
    background: var(--school-color);
    color: var(--bs-white, #fff);
    box-shadow: 0 .25rem .75rem rgba(var(--dark-rgb, 3, 33, 71), .15);
}

.home-school-btn:hover,
.home-school-btn:focus {
    border-color: var(--school-color-hover);
    background: var(--school-color-hover);
    color: var(--bs-white, #fff);
}

.home-school-card:hover .home-school-btn .fa-arrow-right {
    transform: translateX(4px);
}

/* ---------- CTA band ---------- */
.home-cta {
    border: 1px solid rgba(var(--primary-rgb, 193, 133, 11), .3);
    /*border-radius: 1.5rem;*/
    background: var(--dark);
    color: var(--light);
}

.home-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: var(--primary);
    color: var(--dark);
    font-size: 1.5rem;
}

.home-cta-title {
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    color: var(--bs-white, #fff);
}

.home-cta-apply {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--dark);
}

.home-cta-apply:hover,
.home-cta-apply:focus {
    border-color: var(--bs-white, #fff);
    background: var(--bs-white, #fff);
    color: var(--dark);
}

.home-cta-secondary {
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .1);
    color: var(--bs-white, #fff);
}

.home-cta-secondary:hover,
.home-cta-secondary:focus {
    background: rgba(255, 255, 255, .2);
    color: var(--bs-white, #fff);
}

/* ---------- Latest News ---------- */
.home-news-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    /*border-radius: 1.5rem;*/
}

.home-news-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s;
}

.home-news-featured:hover .home-news-media img,
.home-news-featured:focus-within .home-news-media img {
    transform: scale(1.05);
}

.home-news-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    padding: .35rem .9rem;
    /*border-radius: 50rem;*/
    background: var(--bs-white, #fff);
    color: var(--dark);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 .25rem .75rem rgba(var(--dark-rgb, 3, 33, 71), .2);
}

.home-news-meta {
    color: var(--dark-light);
    font-size: .875rem;
}

.home-news-meta .fa {
    color: var(--primary-dark);
}

.home-news-title {
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.2;
    color: var(--dark);
}

.home-news-title a {
    color: inherit;
    text-decoration: none;
    transition: color .3s;
}

.home-news-title a:hover,
.home-news-title a:focus {
    color: var(--primary-dark);
}

.home-btn-navy {
    border: 1px solid var(--dark);
    background: var(--dark);
    color: var(--bs-white, #fff);
}

.home-btn-navy:hover,
.home-btn-navy:focus {
    border-color: var(--dark-light);
    background: var(--dark-light);
    color: var(--bs-white, #fff);
}

.home-btn-outline-navy {
    border: 2px solid var(--dark);
    background: transparent;
    color: var(--dark);
}

.home-btn-outline-navy:hover,
.home-btn-outline-navy:focus {
    background: var(--dark);
    color: var(--bs-white, #fff);
}

.home-story {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem;
    /*border-radius: 1rem;*/
    color: inherit;
    text-decoration: none;
    transition: background-color .3s, box-shadow .3s;
}

.home-story:hover,
.home-story:focus-visible {
    background: var(--bs-white, #fff);
    color: inherit;
    box-shadow: 0 .5rem 1.25rem rgba(var(--dark-rgb, 3, 33, 71), .08);
}

.home-story-thumb {
    flex-shrink: 0;
    width: 7rem;
    height: 5rem;
    /*border-radius: .75rem;*/
    object-fit: cover;
}

.home-story-thumb--contain {
    padding: .375rem;
    background: var(--bs-white, #fff);
    object-fit: contain;
}

/* overflow: hidden clips the separator dot of whichever meta item starts a line */
.home-story-body {
    min-width: 0;
    overflow: hidden;
}

.home-story-meta {
    row-gap: .125rem;
    margin-left: -1.25rem;
    color: var(--dark-light);
    font-size: .75rem;
    font-weight: 600;
}

/* Each item carries a leading dot in a 1.25rem slot; the negative margin above
   pushes the first item's slot (and a wrapped date's slot) out of view. */
.home-story-meta > * {
    position: relative;
    padding-left: 1.25rem;
}

.home-story-meta > *::before {
    content: "";
    position: absolute;
    top: 50%;
    left: .5rem;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    /*border-radius: 50%;*/
    background: var(--border-light);
}

.home-story-meta time {
    white-space: nowrap;
}

.home-story-cat {
    color: var(--primary-dark);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-story-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    color: var(--dark);
    font-family: "Nunito", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    transition: color .3s;
}

.home-story:hover .home-story-title,
.home-story:focus-visible .home-story-title {
    color: var(--primary-dark);
}

.home-news-more {
    border-top: 1px solid var(--border-light);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .home-school-img,
    .home-news-media img,
    .home-btn .fa-arrow-right,
    .home-story,
    .home-school-card {
        transition: none;
    }

    .home-school-card:hover .home-school-img,
    .home-school-card:focus-within .home-school-img,
    .home-news-featured:hover .home-news-media img,
    .home-news-featured:focus-within .home-news-media img,
    .home-btn:hover .fa-arrow-right,
    .home-btn:focus-visible .fa-arrow-right,
    .home-school-card:hover .home-school-btn .fa-arrow-right {
        transform: none;
    }
}