/* ============================================
   RESPONSIVE.CSS - MT-OIL
   Breakpoints: 1100 / 1024 / 768 / 600 / 480
   ============================================ */

/* ------------------------------------------
   1100px – Katalog siatka
   ------------------------------------------ */
@media (max-width: 1100px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .layout { grid-template-columns: 220px 1fr; gap: 24px; }
  .pg-cta-inner { flex-direction: column; text-align: center; padding: 32px 24px; }
  .cta-r { align-items: center; flex-direction: column; gap: 12px; width: 100%; }
  .cta-r .btn { width: 100%; justify-content: center; }
  .cta-r .cta-ph { display: none; }
  .cta-r a[href^="tel:"] .btn,
  .cta-r a[href^="tel:"]::after { content: none; }
}

/* ------------------------------------------
   1024px – Tablet
   ------------------------------------------ */
@media (max-width: 1024px) {
  .hero { min-height: auto; }
  .hero-text { min-height: auto; padding: 32px 0 48px; max-width: none; }
  .hero-img { position: relative; width: 100%; height: 44vh; }
  .hero-img::before { background: linear-gradient(to top, #0f0f0f 0%, transparent 60%); width: 100%; left: 0; height: 60%; top: auto; bottom: 0; }
  .hero h1 { font-size: 32px; max-width: none; }
  .hero .accent { display: inline; }
  .hero-sub { font-size: 15px; }

  .bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .about-tech-grid { grid-template-columns: repeat(2, 1fr); }
  .about-pillars { grid-template-columns: 1fr; }

  .hurt-benefits { grid-template-columns: repeat(2, 1fr); }
  .kontakt-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .kontakt-quick-grid { grid-template-columns: 1fr !important; }
  .kontakt-loc-grid { grid-template-columns: 1fr !important; }

  .cta-banner { flex-direction: column; text-align: center; padding: 48px 32px; }
  .cta-actions { align-items: center; }
  .cta-strip-inner { flex-direction: column; text-align: center; gap: 12px; }

  .prod-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
  .prod-left { position: static !important; top: auto !important; align-self: auto !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ------------------------------------------
   768px – Mobile
   ------------------------------------------ */
@media (max-width: 768px) {

  /* === GLOBAL — typography & word wrap === */
  body { padding-bottom: 72px; }
  .container { padding: 0 20px; }
  h1, h2, h3, h4, .section-title, .pcard-name, .benefit-title,
  .service-title, .blog-card-body h2, .kontakt-quick-title,
  .about-tech-item h4, .pc-benefit strong {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  .categories, .prod-preview, .benefits, .industries, .technology,
  .standards, .services, .faq, .contact { padding: 48px 0; }
  .section-title { font-size: 26px; }
  .section-subtitle { font-size: 15px; }
  .form-row { grid-template-columns: 1fr !important; }
  .btn { width: 100%; justify-content: center; }

  /* Forms — 16px minimum to prevent iOS zoom */
  .form-input, .form-textarea, input[type="text"], input[type="email"],
  input[type="tel"], input[type="number"], textarea, select {
    font-size: 16px !important;
  }

  /* Phone & email — never break */
  a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }

  /* === TOPBAR & NAVBAR — fixed on mobile === */
  .top-bar { display: none; }
  .navbar {
    position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .navbar-inner { height: 64px; padding: 0 16px; }
  body { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
  .logo-img { height: 40px; }
  .nav-center, .nav-cta, .nav-cart { display: none; }
  .mobile-toggle { display: flex; }
  .mobile-menu {
    position: fixed; top: calc(64px + env(safe-area-inset-top, 0px));
    left: 0; right: 0; bottom: 0; z-index: 999;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 90px;
  }
  /* body.menu-open / body.lightbox-open hides sticky CTA (toggled by JS) */
  body.menu-open .sticky-cta,
  body.lightbox-open .sticky-cta,
  body.lightbox-open .back-top { display: none !important; }

  /* === HERO === */
  .hero { min-height: auto; }
  .hero-grid { padding: 0; }
  .hero-text { padding: 24px 20px 40px; max-width: none; min-height: auto; }
  .hero-img { position: relative; width: 100%; height: 44vh; }
  .hero-img img { object-position: 65% center; }
  .hero-img::before { width: 100%; left: 0; top: auto; bottom: 0; height: 60%;
    background: linear-gradient(to top, #0f0f0f 0%, rgba(15,15,15,.6) 50%, transparent 100%); }
  .hero-img::after { display: none; }
  .hero h1 { font-size: 28px; max-width: none; }
  .hero .accent { display: inline; }
  .hero-sub { font-size: 15px; max-width: none; }
  .hero-badge { font-size: 10px; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn-primary, .hero-btns .btn-outline { width: 100%; height: 52px; justify-content: center; }
  .hero-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px; }
  .hero-chips::-webkit-scrollbar { display: none; }
  .hero-chip { flex-shrink: 0; font-size: 13px; }

  /* === TRUST STRIP — auto-scroll === */
  .trust-strip { overflow: hidden; }
  .trust-strip-inner {
    animation: trustScroll 20s linear infinite;
    padding: 12px 20px; gap: 24px; height: auto;
    flex-wrap: nowrap; width: max-content;
  }
  .trust-strip .trust-bar-item { flex-shrink: 0; font-size: 13px; white-space: nowrap; }

  /* === BENTO === */
  .bento-grid { grid-template-columns: 1fr !important; grid-template-rows: auto; gap: 16px; }
  .bento-card { min-height: 220px; }

  /* === HOMEPAGE PRODUCTS PREVIEW — tabs scrollable === */
  .pp-tabs-wrap { position: relative; }
  .pp-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
    scrollbar-width: none; gap: 6px; justify-content: flex-start; }
  .pp-tabs::-webkit-scrollbar { display: none; }
  .pp-tab { flex-shrink: 0; padding: 8px 16px; font-size: 13px; }
  .pp-more a { display: flex; width: 100%; justify-content: center; }

  /* === ALL MULTI-COL GRIDS → 1 COL === */
  .benefits-grid,
  .services-grid,
  .tech-grid,
  .about-tech-grid,
  .about-pillars,
  .about-team,
  .about-stats-grid,
  .blog-grid,
  .kontakt-quick-grid,
  .kontakt-grid,
  .kontakt-loc-grid,
  .about-two-col,
  .pc-benefits,
  .pc-specs-grid,
  .wrt-contact,
  .sub-steps, .sub-steps-3,
  .sub-benefits,
  .dlv-methods, .dlv-packs,
  .prod-layout,
  .prod-related .pgrid,
  .blog-article-layout,
  .blog-products-grid,
  .pf-grid { grid-template-columns: 1fr !important; }

  /* === BENEFITS & SERVICES — vertical stack === */
  .benefit-card, .service-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px;
  }
  .benefit-icon, .service-icon { margin-bottom: 0; width: 44px; height: 44px; flex-shrink: 0; }
  .benefit-icon svg, .service-icon svg { width: 22px; height: 22px; }

  /* === INDUSTRIES — 2 col on mobile === */
  .ind-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* === STANDARDS — left-aligned, consistent === */
  .standards-grid { flex-direction: column; gap: 12px; align-items: stretch; }
  .standard-pill { min-width: auto !important; flex: none; padding: 20px 24px; text-align: left; }
  .standard-name { text-align: left; }
  .standard-desc { text-align: left; }

  /* === FAQ === */
  .faq-q { padding: 16px 20px; }
  .faq-q h3 { font-size: 16px; }
  .faq-a p { padding: 0 20px 20px; font-size: 15px; }

  /* === FOOTER === */
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .fn-inner { flex-direction: column; text-align: center; gap: 20px; }
  .fn-form { flex-direction: column; width: 100%; }
  .fn-input { width: 100%; }
  .fb-inner { flex-direction: column; gap: 8px; text-align: center; }
  .fb-reg { text-align: center; font-size: 12px; }
  .fc-strip { gap: 16px; flex-wrap: wrap; justify-content: center; }

  /* === CTA BLOCKS — stack on mobile === */
  .pg-cta-inner { flex-direction: column; text-align: center; padding: 28px 20px; gap: 20px; }
  .pg-cta-inner h3 { font-size: 20px; hyphens: manual; text-wrap: balance; }
  .cta-r { flex-direction: column; gap: 12px; width: 100%; align-items: stretch; }
  .cta-r .cta-ph { display: none; }
  .cta-r .btn { width: 100%; justify-content: center; font-size: 14px; letter-spacing: 0.03em; }
  .cta-ph-mobile { display: inline; }
  .cta-banner { flex-direction: column; text-align: center; padding: 32px 20px; gap: 20px; }
  .cta-banner::before { display: none; }
  .cta-actions { flex-direction: column; gap: 12px; width: 100%; align-items: stretch; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .cta-phone { font-size: 22px; }
  .cta-content p { max-width: none; }

  /* === OVERFLOW FIX — pseudo-elements that escape viewport === */
  .footer::before { display: none; }

  /* === SCROLLABLE ELEMENTS — contain overscroll === */
  .m-tabs, .hero-chips, .pp-tabs, .trust-strip-inner {
    overscroll-behavior-x: contain;
  }

  /* === STICKY CTA === */
  .sticky-cta { display: flex; }
  .back-top { bottom: 80px; right: 16px; width: 40px; height: 40px; border-radius: 10px; }

  /* =========================================================
     KATALOG PRODUKTÓW
     ========================================================= */
  .pg-header { padding: 24px 0; }
  .pg-header h1 { font-size: 26px; }
  .pg-top { flex-direction: column; align-items: stretch; gap: 14px; }
  .pg-tools { width: 100%; }
  .srch { flex: 1; }
  .view-toggle { display: none; }
  .layout { grid-template-columns: 1fr !important; padding: 0 0 40px; }
  .side { display: none; }
  .m-tabs { display: flex; padding: 0 20px; }

  /* Product cards — full width, image on top */
  .pgrid { grid-template-columns: 1fr !important; gap: 16px; }
  .pgrid > *, .pp-wrap { min-width: 0; max-width: 100%; }
  .pcard { flex-direction: column; width: 100%; max-width: 100%; }
  .pcard-img { width: 100% !important; min-width: 0 !important; aspect-ratio: 4/3; padding: 24px;
    border-bottom: 1px solid #eeece8; border-right: none; }
  .pcard-body { padding: 16px 20px; }
  .pcard-name { font-size: 17px; -webkit-line-clamp: 2; }
  .pcard-cat { font-size: 10px; }
  .pcard-lead-price { font-size: 19px; }
  .pcard-price-summary { white-space: normal; font-size: 13px; }
  .pcard-pricing { margin-bottom: 10px; }
  .pcard-foot { padding-top: 10px; }
  .pcard-cta { font-size: 13px; }
  .cat-hdr { flex-wrap: wrap; }
  .cat-hdr h2 { font-size: 20px; }
  .inq-card { padding: 24px 20px; }
  .inq-card h3 { font-size: 15px; }

  /* List view override */
  .pgrid.list-view .pcard { flex-direction: row; }
  .pgrid.list-view .pcard-img { width: 110px !important; min-width: 110px !important; aspect-ratio: 1/1; padding: 12px;
    border-bottom: none; border-right: 1px solid #eeece8; }
  .pgrid.list-view .pcard-body { padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .pgrid.list-view .pcard-name { -webkit-line-clamp: 2; font-size: 15px; }
  .pgrid.list-view .pcard-desc { display: none; }

  /* =========================================================
     STRONA PRODUKTU
     ========================================================= */
  .prod-bc { padding: 12px 0 0; }
  .prod-bc .bc { flex-wrap: wrap; gap: 4px 6px; font-size: 12px; }

  /* Image on top, full width, no gap */
  .prod-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
  .prod-left {
    position: static !important;
    top: auto !important;
    align-self: auto !important;
    height: auto !important;
  }
  .prod-img {
    width: 100% !important; min-height: 0; height: 300px; aspect-ratio: auto;
    padding: 16px; display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .prod-img .prod-photo,
  .prod-img .product-placeholder { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }

  /* Trust badges — one set only; hide the upper one, keep the inline one */
  .prod-trust { display: none !important; }
  /* The inline "Faktura VAT / Wysyłka / Roczna gwarancja" stays visible */

  /* Details section */
  .prod-detail { padding-top: 20px; }
  .prod-detail h1 { font-size: 24px; }
  .prod-tags { grid-template-columns: 1fr !important; }
  .prod-variants h3 { font-size: 16px; }
  .variant-row { padding: 14px 16px; }
  .v-cap { font-size: 15px; }
  .v-price { font-size: 16px; text-align: right; }
  .prod-add-btn { font-size: 16px; height: 54px; }

  /* Related products */
  .prod-related .pgrid { grid-template-columns: 1fr !important; }
  .prod-related .pcard { flex-direction: column; }
  .prod-related .pcard-img { width: 100% !important; aspect-ratio: 4/3;
    border-right: none; border-bottom: 1px solid #eeece8; }
  .prod-related .pcard-name { -webkit-line-clamp: 2; font-size: 16px; }

  /* Product content sections — 1 col on mobile */
  .pf-grid { grid-template-columns: 1fr !important; }
  .pf-card { display: flex; align-items: flex-start; gap: 16px; text-align: left; padding: 20px; }
  .pf-card .pf-icon { margin-bottom: 0; flex-shrink: 0; }
  .pc-compat { grid-template-columns: repeat(3, 1fr); }
  .pc-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -20px; padding: 0 20px; overscroll-behavior-x: contain; }
  .pc-compare { min-width: 600px; }
  .pc-faq-a p { padding-left: 20px; }

  /* =========================================================
     O NAS
     ========================================================= */
  .about-hero { padding: 24px 0; }
  .about-certs-grid { flex-direction: column; }
  .about-cert { min-width: auto !important; }

  /* =========================================================
     KONTAKT
     ========================================================= */
  .kontakt-hero { padding: 24px 0; }

  /* Quick contact cards — full width, stacked */
  .kontakt-quick-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .kontakt-quick-card { padding: 20px; }

  /* Form + info — stacked */
  .kontakt-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .kontakt-form-wrap { padding: 20px; }

  /* Location — map full-width on top */
  .kontakt-loc-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .kontakt-loc-map { min-height: 280px; width: 100%; order: -1; border-radius: 12px; }
  .kontakt-loc-btns { flex-direction: column; }
  .kontakt-loc-btns .btn { width: 100%; }

  /* =========================================================
     BLOG
     ========================================================= */
  .blog-hero { padding: 24px 0; }
  .blog-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .blog-card-img { height: 180px; }
  .blog-card-body { padding: 16px; }
  .blog-card-body h2 { font-size: 17px; -webkit-line-clamp: 3; }
  .blog-article-layout { grid-template-columns: 1fr !important; }
  .blog-sidebar { display: none; }
  .blog-engineer { flex-direction: column; }
  .blog-engineer-actions { flex-direction: column; }
  .blog-products-grid { grid-template-columns: 1fr !important; }

  /* =========================================================
     DLA HURTOWNI
     ========================================================= */
  .kontakt-main .benefits-grid { grid-template-columns: 1fr !important; }
  .hurt-benefits { grid-template-columns: 1fr !important; }
  .hurt-process { margin-top: 48px; }

  /* =========================================================
     PODSTRONY — sub-hero, dostawy, gwarancja
     ========================================================= */
  .sub-hero { padding: 24px 0 28px; }
  .sub-facts { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .sub-benefits { grid-template-columns: 1fr !important; }
  .sub-steps, .sub-steps-3 { grid-template-columns: 1fr !important; }
  .page-callout { flex-direction: column; padding: 20px; }
  .sub-cta-btns { flex-direction: column; width: 100%; }
  .sub-cta-btns .btn { justify-content: center; }

  /* Table card view */
  .info-table-wrap, .dlv-table-wrap { background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .info-table thead, .dlv-table thead { display: none; }
  .info-table, .info-table tbody, .info-table tr, .info-table td,
  .dlv-table, .dlv-table tbody, .dlv-table tr, .dlv-table td { display: block; width: 100%; }
  .info-table tbody, .dlv-table tbody { display: flex; flex-direction: column; gap: 12px; }
  .info-table tr, .dlv-table tr { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 18px; box-shadow: var(--shadow-sm); }
  .info-table td, .dlv-table td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; text-align: right; border-bottom: 1px solid var(--border); }
  .info-table tbody tr td:last-child, .dlv-table tbody tr td:last-child { border-bottom: none; }
  .info-table td::before, .dlv-table td::before { content: attr(data-label); font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-align: left; flex-shrink: 0; }

  .dlv-units { flex-direction: column; }
  .dlv-facts { grid-template-columns: 1fr 1fr; }
  .wrt-contact { grid-template-columns: 1fr !important; }

  /* =========================================================
     KOSZYK
     ========================================================= */
  .cart-layout { grid-template-columns: 1fr !important; }
  .cart-table { font-size: 13px; }
  .cart-table th, .cart-table td { padding: 10px 12px; }
  .cart-form { padding: 20px; }
  .cart-page.cart-v2 { padding: 28px 0 56px; }
  .cart-v2 .cart-form { padding: 24px 20px; position: static; }
  .cart-v2 .cart-empty, .cart-result .cart-empty { padding: 40px 24px; }
}

/* ------------------------------------------
   600px – Small mobile
   ------------------------------------------ */
@media (max-width: 600px) {
  .hero h1 { font-size: 24px; }
  .hero-chips { gap: 6px; }
  .hero-chip { font-size: 12px; padding: 0 10px; height: 32px; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats-grid { grid-template-columns: 1fr !important; }
  .bento-card { min-height: 200px; }
  .sub-facts { grid-template-columns: 1fr !important; }
  .dlv-methods, .dlv-packs { grid-template-columns: 1fr !important; }
  .dlv-facts { grid-template-columns: 1fr !important; }
  .kontakt-main .benefits-grid.hurt-benefits { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------
   480px – Narrow
   ------------------------------------------ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section-title { font-size: 22px; }
  .m-tabs { padding: 0 16px; }
  .about-team { grid-template-columns: 1fr !important; }
  .pc-compat { grid-template-columns: repeat(2, 1fr); }
  .ind-grid { grid-template-columns: 1fr; }

  .prod-img { height: 260px; }
  .prod-detail h1 { font-size: 20px; }
  .prod-desc, .prod-intro { font-size: 14px; }
  .variant-row { padding: 12px 14px; }
  .v-cap { font-size: 14px; }
  .v-price { font-size: 15px; }
}

/* ------------------------------------------
   Animations
   ------------------------------------------ */
@keyframes trustScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}