/* ============================================
   APP PROMO SECTION ("Билет приходит в приложении")
   The whole 1456×626 card uses background-qr.png as
   its background. Two columns:
   - Left: title + subtitle + QR graphic (qr.png, 533×224)
   - Right: phone mockup (fills full card height)
   ============================================ */

.app-promo {
  padding: 10rem 2rem;            /* vertical breathing room between sections */
}

.app-promo__inner {
  max-width: 145.6rem;           /* 1456px */
  min-height: 62.6rem;           /* 626px — grows if content needs it */
  margin: 0 auto;

  display: flex;
  align-items: stretch;

  /* horizontal padding on the card; NO vertical padding
     so the mockup column can fill the full height */
  padding-left: 12rem;           /* 120px */
  padding-right: 16.9rem;        /* 169px */

  /* background-qr.png is the background of the WHOLE card */
  background: url('../../img/bridge2026/background-qr.png') center / cover no-repeat;
  border-radius: 2.5rem;         /* matches the design's card radius */
  overflow: hidden;              /* clips background + mockup to the rounded corners */
}

/* ============================================
   COLUMN 1 — text + QR graphic
   ============================================ */

.app-promo__content {
  width: 53.3rem;                /* 533px */
  flex-shrink: 0;

  padding-top: 7.5rem;           /* 75px */
  padding-bottom: 7.5rem;        /* 75px */

  display: flex;
  flex-direction: column;
}

.app-promo__title {
  font-size: 7rem;             /* 72px */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-white);
}

.app-promo__subtitle {
  margin-top: 2rem;
  font-size: 2.4rem;             /* 24px */
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-white);
}

/* QR graphic — a single 533×224 image (qr.png) */
.app-promo__qr {
  margin-top: 4rem;              /* 40px gap below the subtitle */
  width: 53.3rem;                /* 533px — same width as the text block */
  max-width: 100%;
  height: auto;                  /* keeps the 224px ratio, scales on mobile */
  display: block;
}

/* ============================================
   COLUMN 2 — phone mockup
   ============================================ */

.app-promo__visual {
  position: relative;
  margin-left: 18.5rem;          /* 185px gap between columns */
  flex: 1 1 0;
  min-width: 0;
}

.app-promo__mockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;           /* whole phone always visible, no crop */
  
  /* NEW: Glues the image to the bottom if the left column makes the card taller */
  object-position: bottom center; 
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Medium screens — the 120/169px side paddings are too aggressive */
@media (max-width: 1280px) {
  .app-promo__inner {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .app-promo__visual {
    margin-left: 8rem;
  }
}

/* Tablet / mobile — stack the columns */
/* Tablet / mobile — stack the columns */
@media (max-width: 1024px) {
  .app-promo__inner {
    flex-direction: column;
    min-height: 0;               
    padding: 6rem 4rem 0;        
    gap: 5rem;
  }

  .app-promo__content {
    width: 100%;
    padding: 0;
    text-align: left;
    align-items: center; 
  }

  .app-promo__title {
    font-size: 5rem;
  }
  
  /* FIXED QR CENTERING */
  .app-promo__qr {
    margin-top: 4rem;
    margin-left: auto;
    margin-right: auto;
    align-self: center; 
  }

  .app-promo__visual {
    position: static;
    margin-left: 0;
    width: 100%;
  }

  .app-promo__mockup {
    position: static;
    width: 100%;
    height: auto;
    max-width: 36rem;
    margin: 0 auto;
    display: block;              
  }
}

@media (max-width: 480px) {
  .app-promo__inner {
    padding: 5rem 2rem 0; 
  }

  .app-promo__title {
    font-size: 4rem;
  }

  .app-promo__subtitle {
    font-size: 2rem;
  }
}