/* =========================================================
   CATERTEC FINAL MOBILE / RESPONSIVE SAFETY LAYER
   Loaded after the main stylesheet.
========================================================= */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }

@media (max-width: 780px) {
  :root {
    --section-content-gutter: 16px;
    --site-edge-gutter: 16px;
  }

  body { font-size: 15px; }

  .section-inner { width: 100%; }
  .section-visible-title,
  .section-visible-body { margin-left: 16px; margin-right: 16px; }
  .section-contact .contact-box { margin-left: 16px; margin-right: 16px; }
  .section-hero .hero-content { padding-left: 16px; padding-right: 16px; }

  .top-bar-inner { padding-left: 12px; padding-right: 12px; }
  .top-bar-left { overflow-wrap: anywhere; }
  .top-bar-right a { overflow-wrap: anywhere; }

  .header-main { width: 100%; padding-left: 12px; padding-right: 12px; }
  .header-main-left, .header-main-center, .header-main-right { min-width: 0; width: 100%; }
  .logo { min-width: 0; max-width: 100%; }
  .logo-content { min-width: 0; }
  .logo-title, .logo-subtitle { overflow-wrap: anywhere; }
  .header-search { width: 100%; max-width: 100%; }
  .header-search input[type="search"] { min-width: 0; }

  .main-nav { max-width: 100%; }
  .nav-link { overflow-wrap: anywhere; }

  .product-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .product-card, .product-card-link { min-width: 0; max-width: 100%; }
  .product-image { min-width: 0; }
  .product-image img { width: 100%; height: auto; object-fit: contain; }

  .products-catalog-hero { width: auto !important; margin-left: 16px; margin-right: 16px; }
  .catalog-control-panel { width: auto !important; margin-left: 16px; margin-right: 16px; }

  .media-grid { grid-template-columns: 1fr !important; }
  .media-card { min-width: 0; }

  .media-slider { padding-left: 42px !important; padding-right: 42px !important; }
  .media-slider-track .media-card { flex-basis: 82vw !important; width: 82vw !important; min-width: 82vw !important; max-width: 82vw !important; }

  .site-footer { overflow: hidden; }
  .footer-shell { width: 100%; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .footer-brand-column { grid-column: auto !important; min-width: 0; }
  .footer-newsletter-row { grid-template-columns: 1fr !important; }
  .footer-newsletter-row button { min-height: 44px; }
  .footer-social-row { grid-template-columns: 1fr !important; }
  .footer-column { min-width: 0; }
  .footer-contact-row { overflow-wrap: anywhere; }

  /* Contact page */
  .contact-box {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 24px 14px 28px !important;
    border-radius: 16px !important;
  }
  .contact-info-row {
    width: 100% !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
  }
  .contact-info-item {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  .contact-info-item > div:first-child {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    font-size: 23px !important;
  }
  .contact-info-item a { font-size: 17px !important; }
  .contact-info-item > div:last-child { min-width: 0; }
  .contact-map-wrap { width: 100% !important; border-radius: 12px !important; }
  .contact-map { height: 300px !important; }

  /* Admin/editor controls must remain usable without horizontal scrolling. */
  .admin-bar { width: 100%; overflow-x: auto; }
  .admin-modal-card { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
  .form-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 520px) {
  .top-bar { font-size: 13px; }
  .header-main { padding-top: 12px; padding-bottom: 12px; }
  .logo-image { width: 48px !important; height: 48px !important; flex-basis: 48px !important; }
  .logo-title { font-size: 1.25rem !important; line-height: 1.12; }
  .logo-subtitle { font-size: .65rem !important; }
  .header-main-right { gap: 4px !important; }
  .header-icon-btn span { font-size: .58rem !important; }
  .mobile-menu-btn { min-width: 44px; min-height: 44px; }

  .section-visible-title { font-size: clamp(1.35rem, 7vw, 2rem); }
  .section-visible-body { overflow-wrap: anywhere; }

  .products-catalog-hero { padding: 18px !important; }
  .products-catalog-hero h1 { font-size: 1.8rem !important; }

  .contact-box { padding: 20px 10px 22px !important; }
  .contact-edit-btn { right: 10px !important; top: 10px !important; }
  .contact-info-item { padding-right: 4px; }
  .contact-info-item a { font-size: 16px !important; }
  .contact-map { height: 270px !important; }
}