/* =====================================================================
   Regional Transport — responsive layer
   Loaded after style.css. Desktop-first breakpoints.
   ===================================================================== */

@media (max-width:1100px){
    :root{--container:960px}
    .section{padding:74px 0}
    .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .footer-grid{grid-template-columns:1.4fr 1fr;gap:38px}
    .nav-list > li > a{padding:10px 11px;font-size:14.5px}
}

@media (max-width:1100px){
    .about-grid{gap:40px}
    .hero-strip .item{padding:22px 20px}
}

@media (max-width:960px){
    .nav,.header-cta .btn{display:none}
    .burger{display:flex}
    .header-inner{gap:16px;min-height:70px}
    .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
    .topbar .topbar-item.hide-md{display:none}

    .blog-layout{grid-template-columns:1fr;gap:38px}
    .sidebar{position:static;grid-template-columns:1fr 1fr}
    .contact-layout{grid-template-columns:1fr;gap:32px}
    .about-grid{grid-template-columns:1fr;gap:40px}
    .about-badge{right:16px;bottom:-16px}
    .hero-strip .inner{grid-template-columns:1fr}
    .hero-strip .item{border-right:0;border-bottom:1px solid var(--line)}
    .hero-strip .item:last-child{border-bottom:0}
    .slider-nav{display:none}
    .cta .actions{margin-left:0;width:100%}
}

@media (max-width:768px){
    .section{padding:60px 0}
    .section-head{margin-bottom:38px}
    .grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:22px}
    .footer-grid{grid-template-columns:1fr;gap:34px}
    .footer-main{padding:52px 0 34px}
    .page-banner{padding:56px 0}
    .topbar .container{gap:14px;justify-content:center;padding-top:8px;padding-bottom:8px}
    .topbar .spacer{margin-left:0;width:100%;display:flex;justify-content:center;gap:14px}
    .footer-bottom .container{justify-content:center;text-align:center}
    .to-top{right:16px;bottom:16px;width:42px;height:42px}

    /* Height now comes from the slide content itself (grid stack), so a
       modest floor is enough — no collapsed hero on phones. */
    .hero{min-height:480px}
    .slider-dots{bottom:52px}
    .hero-inner{padding:78px 0}
    .hero-strip{margin-top:-30px}
    .about-points{grid-template-columns:1fr}
    .counters{padding:44px 0}
    .faq-a .inner{padding:0 22px 20px}
    .faq-q{padding:17px 18px;font-size:15.5px;gap:12px}
    .cta{padding:50px 0}
    .cta .container{gap:20px}
    .sidebar{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr;gap:0}
    .form-card{padding:24px}
    .map-embed iframe{height:320px}
    .team-section{margin-bottom:44px}
}

@media (max-width:560px){
    .hero-actions .btn{width:100%}
    .about-badge{position:static;margin-top:16px;display:inline-block}
    .counter .value{font-size:1.9rem}
    .team-card h3{font-size:16.5px}
    body{font-size:15.5px}
    .container{padding:0 18px}
    .section{padding:48px 0}
    .btn{padding:12px 22px;font-size:14.5px}
    .logo img{max-height:40px}
    .logo-text strong{font-size:17px}
    .topbar{font-size:12.5px}
    .topbar-item.hide-sm{display:none}
    .eyebrow{font-size:11px}
}

/* --- Blog post gallery + code blocks --- */
@media (max-width:768px){
    .post-swiper img{aspect-ratio:4/3}
    .post-swiper figcaption{padding:26px 15px 12px;font-size:13.5px}
    .post-swiper .swiper-button-prev,
    .post-swiper .swiper-button-next{width:34px;height:34px}
    .post-swiper .swiper-button-prev:after,
    .post-swiper .swiper-button-next:after{font-size:13px}
    .rich pre{padding:16px 15px;font-size:13px}
    .rich .code-lang{left:14px}
}

/* Print: drop chrome, keep content */
@media print{
    .topbar,.site-header,.mobile-nav,.overlay,.to-top,.site-footer,.btn,
    .code-copy,.post-swiper .swiper-button-prev,.post-swiper .swiper-button-next,
    .post-swiper .swiper-pagination,.post-thumbs{display:none !important}
    /* Swiper hides all but the active slide — print every gallery image. */
    .post-swiper,.post-swiper .swiper-wrapper{display:block !important;transform:none !important;height:auto !important}
    .post-swiper .swiper-slide{width:100% !important;page-break-inside:avoid}
    .rich pre{background:#f4f4f4 !important;color:#000 !important;border:1px solid #ccc}
    body{color:#000;font-size:12pt}
    .section{padding:12pt 0}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}