/* ============================================================================
   No Name Advertising — Responsive corrections
   Loaded LAST (after pixora-brand.css). This file ONLY touches tablet/mobile
   widths (<=992 / <=767 / <=575 / <=479). Desktop (>=993px) is never altered,
   so the approved LTR desktop design stays byte-for-byte identical.

   Fixes the real mobile problems found by screenshot testing:
     A) horizontal overflow -> text/media clipped off the right edge
     B) giant display titles the theme leaves too large on phones -> overflow
     C) two-column video+text rows whose desktop negative margin makes the text
        overlap the video once the columns stack
     D) fixed-height counter/stat cards -> huge empty gaps when stacked
     E) media (img/video/iframe) wider than the viewport
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0) GLOBAL SAFETY — fluid media everywhere (harmless on desktop).
   Width only: never force height, so aspect-ratio/object-fit rules still win.
   --------------------------------------------------------------------------- */
img, svg, video, iframe, canvas, object { max-width: 100%; }

/* ---------------------------------------------------------------------------
   1) TABLET & DOWN (<=992px)
   --------------------------------------------------------------------------- */
@media (max-width: 992px) {
   /* Kill any horizontal scroll/shift. `clip` (not hidden) keeps position:sticky
      working because it doesn't create a scroll container. */
   html, body { overflow-x: clip; }

   /* Elementor containers must never exceed the viewport. */
   .elementor, .e-con, .e-con-inner, .elementor-widget-container { max-width: 100%; }

   /* C) About "our approach" text column: the theme pulls it up 95px for a
      desktop side-by-side overlap effect. Once the columns stack, that margin
      drags the paragraph on top of the video. Reset it while stacked. */
   .elementor-element-973af2f { margin-top: 0 !important; --margin-top: 0px !important; }
}

/* ---------------------------------------------------------------------------
   2) MOBILE (<=767px) — headings must wrap, never clip.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
   .elementor .tp-el-title,
   .elementor .elementor-heading-title,
   .elementor h1, .elementor h2, .elementor h3 {
      white-space: normal !important;
      overflow-wrap: break-word;
      word-break: normal;
   }

   /* D) Counter / "fun-fact" stat cards: the theme gives them a fixed height for
      an equal-height desktop row. Stacked on mobile that becomes a tall empty
      card. Collapse to content height. */
   .elementor-widget-tp-px-counter-box,
   .elementor-widget-tp-px-counter-box .px-funfact-inner-style,
   .elementor-widget-tp-px-counter-box .px-funfact,
   .px-funfact-inner-style, .px-funfact {
      min-height: 0 !important;
      height: auto !important;
   }

   /* D2) Home "tp-about-info" stat cards (7+/120+/50+). The card is a fixed-height
      flex column whose body uses justify-content:space-between, so on a stacked
      mobile card the title sits at the top and the description is pushed far down,
      leaving a big empty gap. Collapse the height and pack the content together. */
   .elementor-widget-tp-about-info,
   .elementor-widget-tp-about-info .elementor-widget-container,
   .px-about-info,
   .px-about-info-head,
   .px-about-info-body {
      min-height: 0 !important;
      height: auto !important;
   }
   .px-about-info-body {
      justify-content: flex-start !important;
      row-gap: 10px;
   }
}

/* ---------------------------------------------------------------------------
   3) SMALL MOBILE (<=575px) — cap the oversized DISPLAY titles.
   The theme's smallest per-breakpoint size for these still overflows a phone
   (e.g. 100-110px). Cap to a fluid size that always fits. Class + per-id
   selectors below cover every big title found across the site.
   --------------------------------------------------------------------------- */
@media (max-width: 575px) {
   .px-hero-title.tp-el-title,
   .px-hero-2-title .tp-el-title,
   .px-about-2-title,
   .elementor-element-db3eab9 .tp-el-title,
   .elementor-element-5ab4688 .tp-el-title,
   .elementor-element-29d7547 .tp-el-title,
   .elementor-element-e22d6e1 .tp-el-title,
   .elementor-element-3b1c960 .tp-el-title,
   .elementor-element-13e1dca .tp-el-title,
   .elementor-element-2f1fc3a .tp-el-title,
   .elementor-element-159e8a9 .tp-el-title,
   .elementor-element-5c8a597 .tp-el-title,
   .elementor-element-5ab4688 .elementor-heading-title,
   .elementor-element-29d7547 .elementor-heading-title {
      font-size: clamp(30px, 12vw, 60px) !important;
      line-height: 1.07 !important;
      letter-spacing: -0.02em !important;
   }

   /* Portfolio hero "OUR WORK" (our own clamp min of 4rem was too big at 390) */
   .page-id-10841 .px-hero-4-bigtitle .tp-el-title,
   .page-id-10841 .px-hero-4-bigtitle h1,
   .page-id-10841 .px-hero-4-bigtitle h2,
   .page-id-10841 .px-hero-4-bigtitle h3 {
      font-size: clamp(46px, 15vw, 84px) !important;
   }
}

/* ---------------------------------------------------------------------------
   4) EXTRA-SMALL (<=479px) — tighten the caps a touch more.
   --------------------------------------------------------------------------- */
@media (max-width: 479px) {
   .px-hero-title.tp-el-title,
   .px-hero-2-title .tp-el-title,
   .px-about-2-title,
   .elementor-element-db3eab9 .tp-el-title,
   .elementor-element-5ab4688 .tp-el-title,
   .elementor-element-29d7547 .tp-el-title,
   .elementor-element-e22d6e1 .tp-el-title,
   .elementor-element-3b1c960 .tp-el-title,
   .elementor-element-13e1dca .tp-el-title,
   .elementor-element-2f1fc3a .tp-el-title,
   .elementor-element-159e8a9 .tp-el-title,
   .elementor-element-5c8a597 .tp-el-title,
   .elementor-element-5ab4688 .elementor-heading-title,
   .elementor-element-29d7547 .elementor-heading-title {
      font-size: clamp(26px, 11vw, 46px) !important;
      line-height: 1.08 !important;
   }
   .page-id-10841 .px-hero-4-bigtitle .tp-el-title,
   .page-id-10841 .px-hero-4-bigtitle h1,
   .page-id-10841 .px-hero-4-bigtitle h2,
   .page-id-10841 .px-hero-4-bigtitle h3 {
      font-size: clamp(40px, 13vw, 64px) !important;
   }
}

/* ---------------------------------------------------------------------------
   5) Service 1 (#11093) "How We Work" step cards — keep the whole card on screen.
   On tablet the card is ~573px tall (a 260px "04" number + an 80px title + big
   60/45 padding), so on a tablet / short / landscape viewport the step title
   ("DELIVER AND SUPPORT") falls below the fold and reads as cut off. Compact the
   card so the title is always visible. Desktop (>=992px), where the card is
   pinned to a tall viewport by design, is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
   .page-id-11093 .px-step-card {
      padding-top: 34px !important;
      padding-bottom: 30px !important;
   }
   .page-id-11093 .px-step-card .tp-el-footer-number {
      font-size: clamp(120px, 22vw, 180px) !important;
      line-height: 0.9 !important;
   }
   .page-id-11093 .px-step-title {
      font-size: clamp(34px, 6vw, 50px) !important;
      line-height: 1.06 !important;
   }
}