/* =========================================================================
   Sightica - mobile responsive layer
   -------------------------------------------------------------------------
   Loaded LAST, after style.min.css and custom.css, so it wins on equal
   specificity without needing !important everywhere.

   Breakpoints follow the Bootstrap 4.1 scale the theme already uses:
     <  576px  phones
     <  768px  large phones / small tablets
     <  992px  tablets (theme swaps to the hamburger menu here)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Global overflow guard
   -------------------------------------------------------------------------
   A single over-wide child (fixed-px image, carousel stage, blurred hero
   backdrop bleeding past the viewport) drags the whole page sideways and
   produces the "everything is zoomed out and scrolls right" feel on a
   phone. Clip it at the root and make every replaced element fluid.
   ------------------------------------------------------------------------- */
html,
body {
   max-width: 100%;
   overflow-x: hidden;
}

img,
video,
iframe,
embed,
object {
   max-width: 100%;
}

/* Images keep their aspect ratio once width is capped. Explicitly excluded:
   owl's 1px lazy placeholder, which custom rules position absolutely. */
img:not(.owl-lazy) {
   height: auto;
}

/* Long unbroken strings (emails, URLs, IDs) must not force a wide line box. */
p,
li,
td,
h1, h2, h3, h4, h5, h6 {
   overflow-wrap: break-word;
   word-wrap: break-word;
}

/* -------------------------------------------------------------------------
   2. Header / branding on mobile
   -------------------------------------------------------------------------
   Below 992px the theme hides .header-center and reveals .mobile-menu-toggler.
   The toggler is display:flex (block-level), so it stacked ABOVE the logo
   instead of sitting beside it, leaving a tall lopsided header. Lay the
   .header-left out as a row and shrink the oversized 3rem icon.
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
   .header-bottom .header-left {
      display: flex;
      align-items: center;
      padding-top: 10px;
      padding-bottom: 10px;
   }
   .mobile-menu-toggler {
      font-size: 22px;
      margin-right: 12px;
      padding: 6px 4px;
      /* 44x44 minimum touch target (WCAG 2.5.5 / iOS HIG) */
      min-width: 44px;
      min-height: 44px;
      flex: 0 0 auto;
   }
   .header-bottom .header-left .logo img {
      width: 112px !important;
      height: auto !important;
   }
   .header-bottom .header-left strong {
      font-size: 10px;
      letter-spacing: .6px;
   }
}

@media (max-width: 400px) {
   .header-bottom .header-left .logo img { width: 96px !important; }
   .header-bottom .header-left strong { font-size: 9px; letter-spacing: .4px; }
   .mobile-menu-toggler { font-size: 20px; margin-right: 8px; }
}

/* The slide-in drawer itself: comfortable tap targets, and never wider
   than the viewport on a small phone. */
@media (max-width: 575px) {
   .mobile-menu-container { max-width: 86vw; }
}
.mobile-menu li a {
   padding-top: 12px;
   padding-bottom: 12px;
   font-size: 14px;
}

/* -------------------------------------------------------------------------
   3. Hero slider
   -------------------------------------------------------------------------
   Banners are 960x366. Scaled to a 360px phone the artwork lands at ~137px
   tall, and the absolutely-positioned CTA sat on top of it. Give the slide
   a sensible floor and move the CTA under the image on small screens.
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
   .sg-home-hero .home-slide img {
      box-shadow: none;
   }
   .sg-home-hero .topright .btn {
      font-size: 12px;
      padding: 9px 16px;
   }
}

@media (max-width: 767px) {
   /* Below this the banner is too short to host an overlaid button legibly,
      so the CTA becomes a normal full-width block beneath the artwork. */
   .sg-home-hero .home-slide {
      display: flex;
      flex-direction: column;
   }
   .sg-home-hero .topright {
      position: static;
      transform: none;
      width: 100%;
      max-width: 100%;
      padding: 12px 14px 16px;
      text-align: center;
      z-index: 3;
   }
   .sg-home-hero .topright .btn {
      width: 100%;
      max-width: 340px;
      white-space: normal;
      line-height: 1.4;
   }
   /* The blurred backdrop is decorative; at phone size it only muddies the
      already-small artwork and costs a full-screen blur composite. */
   .sg-home-hero .home-slide::before { display: none; }
   .sg-home-hero .home-slide { background-image: none !important; background: #10141b; }

   /* Owl arrows overlap the artwork badly at this size. */
   .sg-home-hero .owl-nav .owl-prev,
   .sg-home-hero .owl-nav .owl-next { display: none; }
}

/* -------------------------------------------------------------------------
   4. App Stack carousel cards
   ------------------------------------------------------------------------- */
/* Must mirror the home page's inline .sg-home .sg-app-thumb rule (square,
   cover, card-radius corners). The old width:100%/object-fit:contain version
   letterboxed the logo against the white card whenever this rule won the
   cascade, showing white bands beside the icon. */
.sg-app-thumb {
   width: 150px;
   height: 150px;
   object-fit: cover;
   border-radius: 16px;
}

/* Phone-size overrides for these cards live in the home page's inline
   style block (index.blade.php): it loads after this sheet, so identical
   selectors written here never win the cascade. */

/* -------------------------------------------------------------------------
   5. Typography and justified text
   -------------------------------------------------------------------------
   Justified copy needs a wide measure to look right. On a phone the same
   rules open huge inter-word rivers, which is the single most obvious
   "this wasn't designed for mobile" tell. Fall back to left-aligned.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
   .sg-card p,
   .sg-intro-card p,
   .sg-list li,
   .sg-home .home-apps > div,
   .sg-home .home-apps .row.row-sm,
   .home-apps div,
   .home-apps .row.row-sm {
      text-align: left !important;
   }

   /* Heading sizes (.sg-page-title, .sg-card h3, .sg-product-hero h2) are
      owned by custom.css and must not be overridden here: this sheet loads
      after custom.css, and rem values are booby-trapped by the theme's 8px
      root font-size under 576px (1.25rem rendered a 10px page title). */
   .sg-title-rule { margin-bottom: 18px; }
   .sg-page .sg-section-head,
   .sg-home .sg-section-head { margin-bottom: 24px; }
   .sg-page p, .sg-page li,
   .sg-home p, .sg-home li { font-size: 14px; line-height: 1.75; }
}

@media (max-width: 575px) {
   .sg-card { padding: 20px 16px; }
   .sg-prose { padding: 22px 16px; }
   .sg-prose p { font-size: 14px; line-height: 1.8; }
}

/* -------------------------------------------------------------------------
   6. Kuluk feature strip
   ------------------------------------------------------------------------- */
/* Fluid replacement for style="width:110px;height:80px" */
.sg-feature-icon {
   width: 110px;
   max-width: 100%;
   height: 80px;
   object-fit: contain;
}

@media (max-width: 767px) {
   .sg-home .home-apps { padding: 22px 6px 18px; }
   .sg-home .home-apps > div { padding: 6px 14px 4px; }
   .sg-home .home-apps h3 { font-size: 16px; }
   .sg-kuluk-head h4 { font-size: 15.5px; line-height: 1.5; }
   .sg-support { padding: 20px 18px; }
   .sg-srvc { padding: 20px 16px; }
}

/* -------------------------------------------------------------------------
   7. Buttons and touch targets
   -------------------------------------------------------------------------
   Anything tappable gets at least 44px of height and enough padding that
   adjacent targets do not merge under a fingertip.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
   .sg-link-pill,
   .sg-btn-play {
      display: block;
      width: 100%;
      max-width: 340px;
      margin-left: auto;
      margin-right: auto;
      padding: 13px 20px;
      text-align: center;
   }
   .sg-btn-row { flex-direction: column; align-items: center; gap: 10px; }

   .footer .footer-links a,
   .footer .footer-contact a {
      display: inline-block;
      padding: 6px 0;
   }
   .footer .footer-social a { width: 44px; height: 44px; }
}

/* -------------------------------------------------------------------------
   8. Cards, galleries, badges
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
   /* Hover lift is meaningless on touch and leaves cards stuck mid-transform
      after a tap, because :hover sticks until the next tap elsewhere. */
   .sg-card:hover,
   .sg-gallery .gallery-item:hover,
   .sg-badge:hover,
   .sg-home .product-default:hover,
   .sg-home .home-apps > div:hover {
      transform: none;
   }

   .sg-award-logo { height: 120px; padding: 12px; margin-bottom: 18px; }
   .sg-award-card h3 { font-size: 16px; }

   .sg-badge-row { gap: 12px; }
   .sg-badge { flex: 1 1 120px; padding: 10px; }

   .sg-gallery .gallery-item { padding: 10px; }

   .sg-contact-card { padding: 24px 16px; }
   .sg-contact-icon { width: 48px; height: 48px; margin-bottom: 14px; }
}

/* Product hero image should not dominate the fold once stacked. */
@media (max-width: 767px) {
   .sg-product-hero .sg-product-art img { max-width: 190px; }
   .sg-product-hero .sg-product-art { padding: 0 0 6px; margin-bottom: 16px; }
}

/* -------------------------------------------------------------------------
   9. Media embeds
   -------------------------------------------------------------------------
   .sg-video already uses a padding-bottom ratio box, so it is fluid. The
   map keeps a usable height without eating the whole screen.
   ------------------------------------------------------------------------- */
@media (max-width: 575px) {
   .sg-map { height: 260px; }
   .sg-map-card { padding: 8px; margin-bottom: 24px; }
}

/* -------------------------------------------------------------------------
   10. Modals
   -------------------------------------------------------------------------
   Bootstrap 4 gives .modal-dialog a 10px margin on xs, which leaves a
   certificate scan rendered at a size nobody can read. Use the width.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
   .modal-dialog { margin: 12px auto; max-width: calc(100% - 24px); }
   .modal-body { padding: 12px; }
   .modal-title { font-size: 15px; }
   .modal-body img { width: 100%; height: auto; }
}

/* -------------------------------------------------------------------------
   11. Section rhythm
   -------------------------------------------------------------------------
   Desktop vertical padding is far too generous on a phone; it turns the
   page into a long scroll of empty space between short blocks.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
   .sg-home .container,
   .sg-page .container { padding-left: 16px; padding-right: 16px; }
   .sg-home .featured-items { padding: 12px 0 6px !important; }
   .footer .footer-top { padding: 34px 0 8px; }
   .sg-page .breadcrumb-nav { padding: 10px 0; }
   .sg-page .breadcrumb { font-size: 11.5px; }
}

/* -------------------------------------------------------------------------
   12. Tables (admin + any future content tables)
   -------------------------------------------------------------------------
   Wrap in .table-responsive where possible; this is the safety net for
   tables that are not wrapped, so they scroll themselves instead of
   widening the page.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
   .table-responsive { -webkit-overflow-scrolling: touch; }
   table { max-width: 100%; }
}