/* Helk: phone + tablet layout fixes. Loaded on every page after Elementor + Additional CSS
   (includes/helk-mobile.php). Audit + rationale: docs/superpowers/plans/2026-10-10-mobile-fixes.md
   Breakpoints follow Elementor: phone <= 767px, tablet <= 1024px. */

/* Oferta fixes apply to phones AND tablets: Additional CSS already stacks the row (<=768) and makes
   the aero card static (<=900), which is where both bugs come from. */
@media (max-width: 1024px) {

  /* ---- 1. Home > Oferta: the stacked carousel row kept flex:1 1 0 -> 0px tall ---- */
  #oferta .helk-carrow{flex-direction:column!important;gap:18px!important;height:auto!important}
  #oferta .helk-carrow > .helk-tilegrid.is-carousel{flex:none!important;height:auto!important;max-height:none!important;min-height:0!important;width:100%!important;align-items:stretch!important}
  #oferta .helk-tilegrid.is-carousel > .helk-tile{flex:0 0 46%!important;width:46%!important;height:auto!important;min-height:0!important}
  #oferta .helk-tile-dark.is-pinned{flex:0 0 auto!important;width:100%!important;min-height:0!important}

  /* ---- 2. Home > Oferta: the aero card is a child of the render box (with the OEM/Helk compare
     and the toggles absolutely positioned over it). Reserve a 4:3 band for the image with padding,
     pin the compare to that band, and let the card flow below it. ---- */
  #oferta .elementor-element-13caf9b{display:flex!important;flex-direction:column!important;gap:14px!important}
  #oferta .elementor-element-3dac93e{aspect-ratio:auto!important;height:auto!important;min-height:0!important;width:100%!important;
    padding:75% 0 0!important;display:flex!important;flex-direction:column!important;gap:0!important}
  #oferta .elementor-element-3dac93e > .helk-cmp{top:0!important;bottom:auto!important;height:auto!important;aspect-ratio:4/3!important}
  #oferta .elementor-element-c19a7ab{position:relative!important;z-index:2;inset:auto!important;width:100%!important;max-width:none!important;
    margin:0!important;padding:20px!important;background:var(--helk-surface,#131917)!important;backdrop-filter:none!important}
}

@media (max-width: 767px) {
  #oferta .helk-tilegrid.is-carousel > .helk-tile{flex:0 0 82%!important;width:82%!important}

  /* ---- 7. Home rhythm: desktop section padding was 110-140px ---- */
  .elementor-19 > .e-con.e-parent,
  .elementor-19 .elementor-element.elementor-element-0312b61,
  .elementor-19 .elementor-element.elementor-element-f383a55,
  .elementor-19 .elementor-element.elementor-element-4026807,
  .elementor-19 .elementor-element.elementor-element-17b7654,
  .elementor-19 .elementor-element.elementor-element-de386e6{--padding-top:64px;--padding-bottom:64px}
  .elementor-19 .elementor-element.elementor-element-005edbe{--padding-top:72px;--padding-bottom:72px}
  .elementor-19 .elementor-element.elementor-element-r0z1000{--padding-top:56px;--padding-bottom:56px}

  /* ---- 8. Home > Realizacje header: heading left, full width, button under it ---- */
  #realizacje .elementor-element-daf0dd3,
  .elementor-19 .elementor-element-daf0dd3{flex-direction:column!important;align-items:flex-start!important;gap:18px!important}
  .elementor-19 .elementor-element-daf0dd3 > *{width:100%!important;max-width:none!important;margin:0!important}
  .elementor-19 .elementor-element-daf0dd3 .elementor-heading-title{text-align:left!important}

  /* ---- 5. Home > Technologia comparison table: card per row ---- */
  .elementor-19 .elementor-element-fab1816{display:none!important}
  .elementor-19 .elementor-element-619ae8f,
  .elementor-19 .elementor-element-8882054,
  .elementor-19 .elementor-element-eee1725,
  .elementor-19 .elementor-element-d757100,
  .elementor-19 .elementor-element-dacb41b{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px 14px!important;
    padding:18px 0!important;border-top:1px solid rgba(255,255,255,.10)}
  .elementor-19 .elementor-element-619ae8f > :first-child,
  .elementor-19 .elementor-element-8882054 > :first-child,
  .elementor-19 .elementor-element-eee1725 > :first-child,
  .elementor-19 .elementor-element-d757100 > :first-child,
  .elementor-19 .elementor-element-dacb41b > :first-child{grid-column:1/-1!important;width:100%!important;padding:0!important;min-height:0!important}
  .elementor-19 .elementor-element-619ae8f > :first-child p,
  .elementor-19 .elementor-element-8882054 > :first-child p,
  .elementor-19 .elementor-element-eee1725 > :first-child p,
  .elementor-19 .elementor-element-d757100 > :first-child p,
  .elementor-19 .elementor-element-dacb41b > :first-child p{font-family:"IBM Plex Mono",monospace!important;font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:#9BA39E!important;margin:0!important}
  .elementor-19 .elementor-element-619ae8f > :nth-child(n+2),
  .elementor-19 .elementor-element-8882054 > :nth-child(n+2),
  .elementor-19 .elementor-element-eee1725 > :nth-child(n+2),
  .elementor-19 .elementor-element-d757100 > :nth-child(n+2),
  .elementor-19 .elementor-element-dacb41b > :nth-child(n+2){width:100%!important;padding:10px 12px!important;min-height:0!important;border:0!important;justify-content:flex-start!important}
  /* the Helk column's highlight band already lives in ::before (absolute); the column label goes in ::after, ordered first */
  .elementor-19 .elementor-element-619ae8f > :nth-child(n+2)::after,
  .elementor-19 .elementor-element-8882054 > :nth-child(n+2)::after,
  .elementor-19 .elementor-element-eee1725 > :nth-child(n+2)::after,
  .elementor-19 .elementor-element-d757100 > :nth-child(n+2)::after,
  .elementor-19 .elementor-element-dacb41b > :nth-child(n+2)::after{display:block;order:-1;position:static;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7FCBA4;margin:0 0 6px}
  .elementor-19 .elementor-element-619ae8f > :nth-child(2)::after,
  .elementor-19 .elementor-element-8882054 > :nth-child(2)::after,
  .elementor-19 .elementor-element-eee1725 > :nth-child(2)::after,
  .elementor-19 .elementor-element-d757100 > :nth-child(2)::after,
  .elementor-19 .elementor-element-dacb41b > :nth-child(2)::after{content:"Prepreg · Helk"}
  .elementor-19 .elementor-element-619ae8f > :nth-child(3)::after,
  .elementor-19 .elementor-element-8882054 > :nth-child(3)::after,
  .elementor-19 .elementor-element-eee1725 > :nth-child(3)::after,
  .elementor-19 .elementor-element-d757100 > :nth-child(3)::after,
  .elementor-19 .elementor-element-dacb41b > :nth-child(3)::after{content:"Infuzja";color:#9BA39E}
  .elementor-19 .elementor-element-4c971da p{font-size:14px!important;line-height:1.5!important;word-break:normal!important;hyphens:manual!important}

  /* ---- 11. Home > Technologia prose + FAQ density ---- */
  .elementor-19 .elementor-element-807ec80 p{font-size:15px!important;line-height:1.6!important}
  .elementor-19 .elementor-element-008052e .elementor-tab-title,
  .elementor-19 .elementor-element-4fccc3b .elementor-tab-title{padding:14px 0!important}
  .elementor-19 .elementor-element-008052e .elementor-tab-title a,
  .elementor-19 .elementor-element-4fccc3b .elementor-tab-title a{font-size:15px!important;line-height:1.35!important}

  /* ---- 13. Footer: one column below 480px ---- */
  footer .elementor-element-e2a8c14{column-gap:24px!important}

  /* ---- 3. Zostan partnerem hero: two forced grid columns -> stack ---- */
  .elementor-284 .elementor-element-pnr01000 > .e-con-inner{grid-template-columns:1fr!important;row-gap:28px!important}
  .elementor-284 .elementor-element-pnr01000 > .e-con-inner > *{width:100%!important;max-width:none!important}
  .elementor-284 .elementor-element-pnr01000 .elementor-widget-image,
  .elementor-284 .elementor-element-pnr01000 [class*="placeholder"]{min-height:220px}

  /* ---- 4. Model page: hotspot labels overflow the compare image ---- */
  .helk-spot-label{display:none!important}
  .helk-spot{width:28px;height:28px}

  /* ---- 6. Cart line: thumb + text; price and controls under the title ---- */
  .helk-cart-line{grid-template-columns:72px 1fr!important;gap:14px!important;align-items:start!important}
  .helk-cart-line > .helk-cart-price{grid-column:2!important;text-align:left!important;align-items:flex-start!important;margin-top:-6px}
  .helk-cart-line .helk-cart-ctrls{flex-wrap:wrap;gap:12px}

  /* ---- 10. Product page: compact finish swatches (3 per row) ---- */
  .helk-fin-stripRow{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
  .helk-fin-tile{padding:0!important}
  .helk-fin-tile .helk-fin-tileMedia{aspect-ratio:4/3;height:auto!important}
  .helk-fin-tile .helk-fin-tileLabel,
  .helk-fin-tile > span:last-child{font-size:9.5px!important;letter-spacing:.08em!important;padding:6px 6px!important;line-height:1.3;white-space:normal!important;text-align:left}

  /* ---- 12. Projekty indywidualne prose ---- */
  .elementor-32 .helk-prose p,
  .elementor-32 .elementor-widget-text-editor p{font-size:1.0625rem!important;line-height:1.65!important}

  /* ---- 9. Mobile menu drawer: brand skin + legal pages live in the footer ---- */
  .xpro-elementor-horizontal-navbar-wrapper{background:#0A0F0D!important;color:#F4F5F6!important}
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li > a,
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link,
  .xpro-elementor-horizontal-navbar-wrapper .dropdown-toggle{background:transparent!important;color:#F4F5F6!important;
    border-bottom:1px solid #39433D!important;padding:16px 8px!important;font-size:12.5px!important;letter-spacing:.14em!important}
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a{color:#7FCBA4!important}
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-dropdown-item{background:#131917!important;color:#A8ACB2!important}
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-menu-close{background:transparent!important;color:#F4F5F6!important;border:1px solid #39433D!important;border-radius:0!important}
  .xpro-elementor-horizontal-navbar-wrapper .xpro-dropdown-menu-toggle{color:#A8ACB2!important}
  .xpro-elementor-horizontal-navbar-wrapper li.menu-item-432,
  .xpro-elementor-horizontal-navbar-wrapper li.menu-item-433,
  .xpro-elementor-horizontal-navbar-wrapper li.menu-item-434,
  .xpro-elementor-horizontal-navbar-wrapper li.menu-item-435,
  .xpro-elementor-horizontal-navbar-wrapper li.menu-item-436,
  .xpro-elementor-horizontal-navbar-wrapper li.menu-item-437{display:none!important}
}

@media (max-width: 480px) {
  footer .elementor-element-e2a8c14{grid-template-columns:1fr!important;row-gap:28px!important}
}

@media (max-width: 1024px) and (min-width: 768px) {
  /* tablet: the partner hero already has room for two columns; keep, but never below 300px each */
  .elementor-284 .elementor-element-pnr01000 > .e-con-inner{grid-template-columns:minmax(300px,1fr) minmax(220px,1fr)!important}
}