/* Desktop / laptop fit (992px and wider ONLY — the phone layout below 992px is never touched).
   Fixes for parts that were sized for 1440px+ screens and broke on smaller laptops (1024–1366px).
   Found with a layout audit at 1024/1152/1280/1366/1600/1920 on 2026-10-29. Loaded site-wide from
   layouts/app.blade.php; selectors are a notch more specific than the rules they override, so the
   order of the stylesheets doesn't matter. */
@media (min-width: 992px) {

    /* Home › Managed Security Services tabs: were 375px wide each with `nowrap` and 60px padding, so on
       laptops narrower than ~1260px the third tab was cut off and the page scrolled sideways.
       Now three equal columns that always fit; a long name wraps instead of being cut. */
    ul.home-tabs2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    ul.home-tabs2 li {
        width: auto; white-space: normal; padding: 17px 20px;
        display: flex; align-items: center; justify-content: center;
    }

    /* Home › Career: the picture was a fixed 385px (+50px padding) inside a narrow column and stuck out at 1024px. */
    .box-image-career123 .img-fluid-career12 { max-width: 100%; height: auto; box-sizing: border-box; object-fit: contain; }

    /* Blogs (v2-blogs) › category list: long names were cut with "…" at every desktop width; let them wrap. */
    .resc-sec .resc-cat-text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
}

@media (min-width: 992px) {
    /* Home tab sliders (Security Assessment / GRC / Managed Security): the cards were a fixed 340px with overflow hidden,
       which fits at 1440px but cut the text off on narrower laptops. Now 340px is the minimum and every card in the
       slider grows to the tallest one (slides stretch in the flex wrapper), so nothing is cut and the row stays even. */
    .home-slider .swiper-wrapper { align-items: stretch; }
    .home-slider .swiper-slide:has(> .itmes) { height: auto; }
    .home-slider .swiper-slide > .itmes .tab-content-box { height: 100% !important; min-height: 340px; overflow: visible; }
}