/*!
 * turing-fix.css — layout corrections for the statically-rendered homepage.
 *
 * The original page is a Nuxt SPA that relies on Swiper.js + Element UI at
 * runtime. Since we render the DOM statically (no Nuxt/Swiper runtime), a few
 * areas need CSS help so they look right without JavaScript:
 *
 *   1. NEWS CARDS — the source DOM dumps each article's FULL body text into
 *      the card's <p>. The live site clamps it to a 2-line summary and shows
 *      the rest in a modal. We replicate the clamped card here.
 *   2. SWIPER — without the Swiper runtime the slides would stack vertically
 *      and explode the page height. We turn each swiper into a sensible
 *      responsive grid / single active slide so the content is readable.
 *   3. minor safety caps on max-height so a stray unstyled block can never
 *      blow up the document height again.
 *
 * Loaded after turing.css so it wins specificity ties via source order.
 */

/* ------------------------------------------------------------------ *
 * 1. News cards: clamp the article <p> to 2 lines, cap card height.
 * ------------------------------------------------------------------ */
.news-item .news-content p.esp_2,
.news-content > p.esp_2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 0.42rem;       /* ~3 lines at the source line-height */
    margin-bottom: 0.0625rem;
}

/* Hard cap so a card can never exceed the visible card size, even if the
   inner markup is unexpectedly long. The image box is fixed at 1.21875rem. */
.news-item {
    max-height: 2.6rem;
    overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * 2. Swiper fallback: no JS means slides stack. Constrain the wrapper so
 *    the document height stays sane. We let the FIRST slide of each swiper
 *    show and hide the rest (mirrors the live "one card per view" behaviour)
 *    unless overridden for the news list, where we lay the slides out as a
 *    tidy grid so all news is reachable without the carousel.
 * ------------------------------------------------------------------ */
.swiper-wrapper {
    height: auto !important;
}
.swiper-slide {
    height: auto !important;
}

/* NEWS list: lay the 15 slides out as a responsive 2-col grid instead of a
   carousel. Each slide normally holds 2 news-items (desktop pair), so the
   resulting grid shows the full catalogue cleanly. */
.news .news-list,
.news .three-swiper-wrap,
.news .three-swiper-wrap .row1 {
    display: block;
}
.news .swiper-container {
    overflow: visible;
}
.news .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.125rem;
    transform: none !important;
}
@media (max-width: 768px) {
    .news .swiper-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ *
 * 3. Partners / honours: if those use swipers too, fall back to a grid so
 *    logos wrap instead of stretching the page. (No-op if not present.)
 * ------------------------------------------------------------------ */
.partners .swiper-wrapper,
.honor .swiper-wrapper,
.honors .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.083333rem;
    transform: none !important;
}
.partners .swiper-slide,
.honor .swiper-slide,
.honors .swiper-slide {
    width: auto !important;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------ *
 * 4. Mobile nav drawer sanity (Element UI collapse ran at runtime).
 *    The .nav-mobile-box uses .showMobileNav to open; turing.js toggles it.
 *    Make sure the close transition does not leave the drawer half-open.
 * ------------------------------------------------------------------ */
.nav-mobile-box {
    z-index: 10000;
    transition: background 0.3s ease;
}
.nav-mobile-box .content-box {
    transition: transform 0.3s ease, top 0.3s ease;
}