/* =============================================================================
   audax-responsive.css
   -----------------------------------------------------------------------------
   PURPOSE: Mobile + tablet READABILITY ONLY for www.audax.gr.
            Smallest-possible responsive CSS overrides. NO content, NO copy,
            NO CTA, NO branding, NO design-identity, NO desktop changes.

   SCOPE RULES (enforced):
     - EVERY rule lives inside a mobile/tablet media query (max-width based),
       so desktop (>=1025px) rendering is byte-for-byte UNCHANGED.
     - EXACTLY ONE rule sits outside a media query: a tightly-scoped
       img{max-width:100%} limited to content wrappers only (flagged below).
       It cannot change desktop because content images already render at or
       below their container width on desktop; it only prevents overflow when
       a raw width="NNN" attribute exceeds a narrow viewport.
     - Selectors are targeted (no bare element resets, no `*` resets) to avoid
       disturbing the bespoke landing-page design system or the theme.

   LOADING: enqueued LAST by solutech-child/functions.php
            (handle 'audax-responsive', depends on 'pixtheme-responsive',
             priority 999) so it wins the cascade over the theme's own
             responsive.css. The existing Customizer "Additional CSS" blob is
             NOT touched; this file only ADDS coverage the blob lacks
             (theme .pix-* components, generic WPBakery rows, raw-content
             images, the [video] shortcode wrapper, and TABLET widths).

   AUDIT BASIS (live DOM, 2026-06-24):
     - No global img{max-width:100%} in theme main.css/responsive.css.
     - Raw-content images carry fixed width attrs (e.g. width="843",
       YouTube lazyload placeholder width="480") with no responsive class.
     - WP [video] shortcode emits <div class="wp-video" style="width:1330px">
       + <video class="wp-video-shortcode"> -> horizontal overflow on phones.
     - Contact-page Google Maps iframes are already width:100% (left alone).
     - NIS2 .maptable already has its own mobile (display:block) stacking
       (left alone). Article .audax-uc table already width:100% (left alone).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   [A0] SOLE NON-MEDIA-QUERY RULE  (FLAGGED EXCEPTION)
   Content-area images must never exceed their column. Scoped to content
   wrappers ONLY so it cannot touch logos, icons, sliders, or design-system
   art that is sized deliberately. Desktop-safe: content imgs already fit
   their column on desktop, so this is a no-op there and only clamps overflow
   on narrow viewports.
   --------------------------------------------------------------------------- */
.entry-content img,
.blog-post img,
.rtd img,
.wpb_text_column img,
.wpb_wrapper > img,
.audax-uc img,
.woocommerce-product-gallery img,
.single-product .product img {
  max-width: 100% !important;
  height: auto !important;
}


/* =============================================================================
   [B] TABLET  (<= 1024px)
   iPad / small-laptop. Keep desktop look but stop overflow and squeeze.
   ============================================================================= */
@media (max-width: 1024px) {

  /* B1: hard stop for any horizontal scroll at tablet width */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* B2: theme boxed containers must not exceed the viewport.
     .pix-width-1300/.pix-container-boxed are theme fixed-width shells the
     Customizer blob never covered. Clamp width, keep their own padding feel. */
  .pix-container-boxed,
  .pix-width-1300,
  .container.pix-container-boxed {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* B3: WPBakery NESTED inner rows can over-add width via negative margins on
     narrow widths; keep ONLY the inner row inside its parent. This is an
     overflow guard, not a layout change.
     NOTE (2026-06-24 regression fix): we deliberately do NOT touch
     .wpb_column / .vc_column_container here. Every content page on this site
     hosts a bespoke, self-responsive design system (site-shell / .audx / .wrap
     with its OWN breakpoints) inside those WPBakery host columns. Constraining
     the host columns fought the services-hub .audx/.svc-grid masonry layout.
     The bespoke systems handle their own stacking; we leave their hosts alone. */
  .vc_row.vc_inner {
    max-width: 100% !important;
  }

  /* B4: WP [video] shortcode hard inline width:NNNpx -> fluid */
  .wp-video,
  .wp-video-shortcode,
  .wp-block-embed__wrapper,
  .fluid-width-video-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* B5: generic embeds/iframes (maps already 100%; this is a safety net for
     any other embed) never break the viewport. */
  iframe,
  embed,
  object,
  video {
    max-width: 100% !important;
  }
}


/* =============================================================================
   [C] SMALL TABLET / LARGE PHONE  (<= 768px)
   Cover the THEME components the Customizer blob's @767 block skipped
   (it only targeted the custom .hero-grid/.platform-grid design system).
   ============================================================================= */
@media (max-width: 768px) {

  /* C1: theme boxed content padding is large on desktop; trim side padding so
     text isn't squeezed into a sliver. Vertical padding preserved. */
  .blog > .container.pix-container-boxed,
  .pix-container-boxed {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* C2: (REMOVED 2026-06-24 — regression fix)
     A previous rule here forced `.vc_row .wpb_column { width:100%; float:none }`
     to stack generic WPBakery columns. But on audax.gr EVERY content page wraps
     its layout in a bespoke, self-responsive design system (site-shell / .audx /
     .wrap) inside those WPBakery host columns, and each handles its own stacking
     at its OWN breakpoints (e.g. services hub `.audx .svc-grid` -> 1fr at 960px).
     Forcing the host columns broke the services-hub layout, so the rule is gone.
     No replacement is needed: the page-level CSS + the Customizer block already
     stack the actual content grids. */

  /* C3: long single-word / URL overflow guard for theme text blocks only */
  .wpb_text_column p,
  .rtd p,
  .blog-post p,
  .entry-content p,
  .entry-content li {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* C4: GENERIC tables fallback (NOT .maptable / .audax-uc which self-handle).
     Wrap-free scroll: let the table scroll horizontally inside its box rather
     than push the whole page wide. */
  .entry-content table:not(.maptable),
  .rtd table,
  .blog-post table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* C5: WooCommerce product layout - image column and summary stack.
     Keeps all content/CTAs, only changes from side-by-side to stacked. */
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary.entry-summary {
    width: 100% !important;
    float: none !important;
    margin: 0 0 20px 0 !important;
  }

  /* C6: defensive code/pre wrap so it never forces horizontal scroll */
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
}


/* =============================================================================
   [D] PHONE  (<= 480px)
   Final readability + tap-target pass for phones (iPhone/Android 360-430px).
   ============================================================================= */
@media (max-width: 480px) {

  /* D1: tighter side padding on the boxed theme container for small phones */
  .blog > .container.pix-container-boxed,
  .pix-container-boxed {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* D2: keep theme buttons/links tappable and inside the viewport.
     Targeted to known theme/Bootstrap/WooCommerce button classes only -
     does NOT change button text, count, or placement; only prevents a wide
     button from causing horizontal scroll. */
  .pix-btn,
  .vc_btn3,
  .woocommerce a.button,
  .woocommerce button.button,
  .single_add_to_cart_button {
    max-width: 100% !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  /* D3: WooCommerce related-products / gallery thumbs fit small screens */
  .woocommerce ul.products li.product,
  .related.products ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* D4: YouTube lazyload placeholder (<img width="480"> no responsive class)
     and any oversized inline raw image inside content - clamp to viewport. */
  .wpb_wrapper img[width],
  .entry-content img[width] {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* =============================================================================
   [E] VERY SMALL PHONE  (<= 390px)
   iPhone 12/13 mini, 375/360 Android. Last-mile no-horizontal-scroll guard.
   ============================================================================= */
@media (max-width: 390px) {

  html, body {
    overflow-x: hidden !important;
  }

  /* E1: minimal side padding so content uses available width without touching
     the screen edge; vertical rhythm untouched. */
  .pix-container-boxed {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}