/*!
 * 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;
}

/* ------------------------------------------------------------------ *
 * 5. Mobile header: keep the logo on the far LEFT, not centered.
 *    The source layout puts .btn-toggle as position:absolute (right:0)
 *    while the container uses justify-content:center, which pushes the
 *    logo to the middle. Switch the mobile-only bar to space-between so
 *    the logo sits on the left edge, mirroring the desktop layout and
 *    balancing the hamburger on the right.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .header-btn-container {
        justify-content: flex-start;
    }
}

/* ------------------------------------------------------------------ *
 * 6. Mobile header: show the company name next to the logo.
 *    The theme hides .logo-text under 575px (phone widths), so the bar
 *    only shows the logo image. Override that so the company name is
 *    visible alongside the logo, sized down so it fits the narrow bar
 *    without pushing the hamburger button off-screen.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .header-btn-container .logo-wrap {
        overflow: hidden;
        max-width: calc(100% - 0.6rem); /* leave room for the hamburger on the right */
    }
    .header-btn-container .logo-wrap .logo-text {
        display: block !important;
        font-size: 0.072917rem;   /* ~14px, fits the 48px-tall bar */
        line-height: 0.083333rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ------------------------------------------------------------------ *
 * 7. Mobile drawer: keep the menu text at a normal size.
 *    The theme sizes the drawer menu with rem, but the root font-size
 *    on phones is inflated to ~192px by the project's rem adapter, and
 *    the scoped rule on .nav-item .text does not win, so the text falls
 *    back to the inherited ~182px and each glyph fills the screen. Pin
 *    the drawer typography to px values so it renders at a sensible
 *    mobile size regardless of the rem adapter, and tighten the row
 *    padding/spacing so the whole list fits a phone screen.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* reset the inflated inherited font-size for the drawer body */
    .nav-mobile-box > .content-box {
        font-size: 14px;
    }
    /* menu links: comfortable tap targets with normal padding */
    .nav-mobile-box > .content-box > .nav-list-1 > .nav-item > .link {
        padding: 13px 20px !important;
    }
    /* .text sits inside .link > a, so use a descendant selector */
    .nav-mobile-box > .content-box > .nav-list-1 > .nav-item .text {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    /* list vertical rhythm; the theme's rem padding also blows up here */
    .nav-mobile-box > .content-box > .nav-list-1 {
        padding: 16px 0 60px !important;
    }
    /* language switch row inherits the same inflated size — normalise it */
    .nav-mobile-box > .content-box > .lang-switch {
        font-size: 14px;
    }
    .nav-mobile-box > .content-box > .lang-switch a {
        font-size: 14px;
    }
}

/* ------------------------------------------------------------------ *
 * 8. Desktop header: unify nav-bar size across all pages.
 *    The homepage (geo-home.css) enlarges the desktop nav bar — taller
 *    nav items, larger logo and nav text. The inner pages (products,
 *    solutions, about, contact, support, hardware) don't load geo-home.css,
 *    so they fall back to the smaller base sizing. Hoist the same rules
 *    here (loaded by every page) so the header looks identical everywhere.
 *    Mobile (<=768px) keeps the hamburger layout untouched, as before.
 * ------------------------------------------------------------------ */
@media (min-width: 769px) {
    .layout-container .header .content-wrap { padding-top: 14px !important; padding-bottom: 14px !important; }
    .layout-container .header .header-nav-container .header-nav-item { padding-top: 26px !important; padding-bottom: 26px !important; }
    .layout-container .header .header-nav-container .header-nav-item .header-nav-item-text { font-size: 18px !important; line-height: 1.4 !important; }
    .layout-container .header .logo-wrap .logo-img { height: 68px !important; }
    .layout-container .header .logo-wrap .logo-text { font-size: 36px !important; line-height: 1.2 !important; }
}