/* ═══════════════════════════════════════════════════════════════════════════
   PHONE STYLES  (loaded via <link media="(max-width: 640px)">)
   Fine-tuning for narrow viewports on top of styles-medium.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Layout fundamentals ─── */
.wrap{padding: 0 18px;}
.nav-inner{height: 64px;}

/* ─── Typography — smaller on phone ─── */
h1{font-size: clamp(28px, 8vw, 38px) !important;}
h2{font-size: clamp(22px, 5.5vw, 28px) !important; line-height: 1.2 !important;}
h3{font-size: 18px !important;}

/* ─── Uniform 50px top/bottom spacing for all sections (phone) ─── */
.hero, .hero.hero--compact,
.leading, .why, .reliable, .faq,
.history, .team, .trust, .about-intro,
.policy-page, .contact-page,
.seo-intro, .seo-block, .scope-section, .case-section, .cases{
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
.solutions, .pricing, .stations, .contact-card,
.process-section, .values, .svc-section{
  padding: 50px 22px !important;
  margin: 0 !important;
  border-radius: 22px;
}
.stations{margin-bottom: 50px !important;}

/* ─── Hero ─── */
.hero-card{min-height: 440px; border-radius: 22px;}
.hero-content{padding: 36px 22px 28px !important; gap: 24px;}
.hero h1{max-width: 100%;}
.hero-sub{font-size: 14.5px;}
.hero-cta{flex-wrap: wrap; gap: 8px;}
.hero-cta .btn{flex: 1; justify-content: center; padding: 12px 18px; font-size: 14px;}
.hero-side{align-items: stretch !important; flex-direction: column !important;}
.promo-card .num{font-size: 48px !important;}
.hero--compact .hero-card{min-height: 320px;}
.hero--compact .hero-content{padding: 40px 22px 32px !important;}

/* ─── Strip (feature row under hero) ─── */
.strip{grid-template-columns: 1fr !important; gap: 12px;}
.feat{padding: 14px 16px;}
.feat .ic{width: 34px; height: 34px;}
.feat .t{font-size: 14px;}
.feat .d{font-size: 12.5px;}

/* ─── Inner grids ─── */
.leading-grid, .testi-grid, .faq-grid, .stations-grid, .contact-card{gap: 28px !important;}

/* ─── Accordion (solutions) on homepage ─── */
.sol-head{gap: 14px;}
.sol-head h2{font-size: 26px !important;}
.acc-head{padding: 16px 18px !important; font-size: 15px;}
.acc-head .idx{font-size: 10px; margin-right: 8px;}
.acc-head .toggle{width: 28px; height: 28px;}
.acc-item.open .acc-body{padding: 0 18px 22px !important;}
.acc-body p{font-size: 14px;}

/* ─── Services bento (uslugi page) ─── */
.svc-card{padding: 22px 22px 24px !important;}
.svc-card.is-featured{padding: 26px 22px !important;}
.svc-card.is-featured .name{font-size: 24px !important;}
.svc-card .name{font-size: 19px;}

/* ─── Scope cards (service detail pages) ─── */
.scope-card{padding: 22px 22px !important; gap: 16px;}
.scope-card .ic{width: 40px; height: 40px;}
.scope-card .h{font-size: 16px;}
.scope-card .d{font-size: 13.5px;}

/* ─── Process steps ─── */
.proc-step{padding: 0 0 18px 0 !important;}
.proc-step .h{font-size: 16px;}

/* ─── Case study block ─── */
.case-block .visual{padding: 30px 24px !important;}
.case-block .visual .big-stat,
.case-block .visual .stats .v{font-size: 38px !important;}
.case-block .content{padding: 26px 22px !important; gap: 14px;}
.case-block .step{grid-template-columns: 1fr !important; gap: 6px !important;}
.case-block .step .lbl{padding-top: 0 !important; min-width: 0 !important; font-size: 10px;}
.case-block .step .txt{font-size: 13.5px; line-height: 1.6;}

/* ─── Why-grid (homepage) ─── */
.why-grid{grid-template-columns: 1fr !important; gap: 22px;}
.why-col{text-align: left !important;}
.why-card{align-items: flex-start !important;}
.why-card .h{flex-direction: row !important; font-size: 16px;}
.why-card .h .num{margin-right: 10px;}
.why-card .d{margin-left: 0 !important; max-width: 100%;}
.why-center{display: none;}

/* ─── Reliable section (homepage steps + stats) ─── */
.steps{grid-template-columns: 1fr !important; gap: 12px;}
.step{padding: 18px 18px 20px;}
.step .h{font-size: 16px;}
.stats{grid-template-columns: 1fr !important;}
.stats .v{font-size: 32px;}

/* ─── FAQ ─── */
.faq-q{font-size: 14.5px; padding: 14px 16px !important;}
.faq-a{padding: 0 16px 14px !important; font-size: 13.5px;}
.faq-img{display: none;}

/* ─── Stations / Poland map ─── */
.poland-map{aspect-ratio: 4/5; max-width: 280px; margin: 0 auto;}
.city-marker .label{font-size: 11px;}

/* ─── Contact page ─── */
.info-box{padding: 26px 22px !important;}
.info-box h2{font-size: 22px !important;}
.info-list li{flex-wrap: wrap;}
.map-box, .map-box iframe{min-height: 320px !important;}

/* ─── About (o-nas) page ─── */
.about-meta{grid-template-columns: 1fr !important; gap: 14px;}
.about-meta .num{font-size: 36px !important;}
.timeline{grid-template-columns: 1fr !important; gap: 22px;}
.values-grid, .team-grid, .trust-grid{grid-template-columns: 1fr !important;}
.team-card .photo{aspect-ratio: 5/4;}

/* ─── CTA band ─── */
.cta-band{padding: 36px 24px !important; border-radius: 22px;}
.cta-band h2{font-size: 26px !important;}
.cta-band .actions{flex-direction: column; gap: 10px; align-items: stretch;}
.cta-band .actions .btn{justify-content: center;}

/* ─── Privacy policy ─── */
.policy-content h2{font-size: 22px !important;}
.policy-content p, .policy-content li{font-size: 14.5px;}

/* ─── Footer ─── */
.foot-top{grid-template-columns: 1fr !important; gap: 28px;}
.foot-contact{grid-template-columns: 1fr !important; gap: 18px; padding: 22px 0;}
.foot-bot{flex-direction: column; gap: 12px; align-items: flex-start;}
footer{padding: 50px 0 30px;}

/* ─── Mobile menu (already in styles-medium.css, just tweaks) ─── */
.main-nav{padding: 86px 22px 24px;}
.main-nav > ul > li > a{font-size: 17px !important;}

/* ─── Hide tweaks panel on phone (already moved to bottom in styles.css) ─── */
.tweaks-panel{font-size: 13px;}

/* ─── Breadcrumb compact ─── */
.breadcrumb{font-size: 11.5px; flex-wrap: wrap;}