/* =========================================================================
   Screenly – Mobile-only fixes
   -------------------------------------------------------------------------
   EVERY rule in this file lives inside a `max-width` media query, so it ONLY
   runs on phones/tablets. The desktop layout (>= 992px) never sees these
   rules and cannot be affected.

   To fully revert: delete this file and remove its <link> from index.html.
   ========================================================================= */


/* ---- Tablet & phone (<= 991px) -------------------------------------------
   Service-card photos have an inline `width: 410px; height: 320px`, which is
   wider than a phone/tablet column and forces the page to scroll sideways.
   Override (needs !important to beat the inline style) so the photo simply
   fills its card while keeping the intended landscape crop.
-------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {

  .services-two__img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 41 / 32;   /* same shape as the original 410x320 */
    /* object-fit: cover is already set inline, so it crops cleanly */
    display: block;
  }
}


/* ---- Phones only (<= 767px) --------------------------------------------- */
@media only screen and (max-width: 767px) {

  /* Safety net: never allow horizontal scrolling on phones. */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Header logo: 260px crowds the menu button on small phones. */
  .main-menu-two__logo img {
    width: 200px !important;
    height: auto !important;
  }

  /* Footer logo: keep it in proportion too. */
  .footer-widget__about-logo img {
    width: 210px !important;
    height: auto !important;
  }

  /* The "Warum Screenly" scrolling headline is 120px with a 251px line-height,
     which creates a huge, broken-looking band on phones. Scale it down to
     something that reads as a section accent. */
  .why-choose-two__sliding-text-title {
    font-size: 40px !important;
    line-height: 1.5em !important;
  }

  /* Tighten the gap above the custom card grids so the sections that follow
     a heading don't feel disconnected on a narrow screen. */
  .services-two__grid,
  .team-two__grid {
    margin-top: 24px;
  }

  /* Belt-and-suspenders: keep any decorative / content image inside its box. */
  .why-choose-two__img img,
  .video-one__inner img {
    max-width: 100%;
    height: auto;
  }
}