/* mobile-rescue.css — stabilizacja layoutu mobile (hero + produkty + marginesy) */

/* 0) Ogólne bezpieczeństwo grafiki */
img, video, svg { max-width: 100%; height: auto; display: block; }

/* 1) Uniwersalny padding na mobile (żeby treść nie kleiła się do krawędzi) */
@media (max-width: 900px){
  .container { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
  .contact .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* 2) HERO – mobilny obraz + układ jeden pod drugim */
@media (max-width: 767px){
  .hero .container { display: block !important; }
  .hero .copy    { margin-bottom: 14px; }
  .hero .hero-art{ overflow: hidden; border-radius: 18px; }
  .hero .hero-art picture, 
  .hero .hero-art img { width: 100%; height: auto; display: block; }
  .hero .hero-art img { object-fit: cover; }
}

/* 3) GRID PRODUKTÓW – 1 kolumna na mobile, kontrola szerokości i łamania treści */
@media (max-width: 767px){
  .products-grid, .product-grid, .grid-products { 
    display: grid; grid-template-columns: 1fr; gap: 16px;
  }
  /* Ważne, by element karty nie rozszerzał kolumny */
  .product-card, .card.product, .product { 
    min-width: 0; display: flex; flex-direction: column; height: auto;
  }

  /* Sekcja ze zdjęciem w karcie – zachowuje proporcje i nie ucina produktów */
  .product-card .media, .card.product .media, .product .media { 
    aspect-ratio: 4/3; overflow: hidden; border-radius: 12px; background: #f7f7f7;
  }
  .product-card .media img, .card.product .media img, .product .media img {
    width: 100%; height: 100%; object-fit: contain; /* contain, bo to packshoty */
  }

  /* Treść + przyciski w karcie */
  .product-card .content, .card.product .content, .product .content { 
    flex: 1 1 auto; min-width: 0;
  }
  .product-card .card-footer, .product-card .actions, 
  .card.product .card-footer, .product .actions { 
    display: flex; gap: 12px; align-items: center; justify-content: space-between; 
    margin-top: 10px;
  }
  .product-card .card-footer .btn, .product-card .actions .btn,
  .card.product .card-footer .btn, .product .actions .btn {
    flex: 1 1 0; min-width: 0; white-space: nowrap; text-align: center;
  }
}

/* 4) Nagłówki w kartach – zapobieganie „wyjeżdżaniu” tekstu */
.o-apacare .feature { min-width: 0; }
.o-apacare .feature h3 { 
  word-break: break-word; overflow-wrap: anywhere; hyphens: auto;
  line-height: 1.2; margin-top: 8px;
}
.o-apacare .feature p, .o-apacare .feature ul { overflow-wrap: anywhere; word-break: break-word; }

/* 5) Dodatkowy oddech dla CTA i kart na mobile */
@media (max-width: 767px){
  .cta-row, .contact-cta { padding-left: 4px; padding-right: 4px; }
}