/* Interior-only corrections. Load after existing page/footer styles. */

/* At 320px the directory's long offer name ran beneath its thumbnail.
   Let the title use both content columns; keep the photo beside the summary. */
@media (max-width: 380px) {
  .bs-page .bs-offer-row > div {
    display: contents;
  }
  .bs-page .bs-offer-row h2 {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  .bs-page .bs-offer-number {
    grid-column: 1;
    grid-row: 1;
  }
  .bs-page .bs-offer-row p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }
  .bs-page .bs-offer-row figure {
    grid-column: 3;
    grid-row: 2;
  }
  .bs-page .bs-offer-arrow {
    grid-column: 4;
    grid-row: 1 / 3;
  }
}

/* Replace the fixed 960/1100px phone stage with content-led spacing on
   phones. Keep the device, perspective and scroll animation unchanged. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference),
       (max-width: 1024px) and (max-height: 500px) and (prefers-reduced-motion: no-preference) {
  .bs-page .bs-phone .bs-phone-hero {
    height: auto;
    min-height: 0;
    padding-block: 64px 96px;
  }
}

/* Small navigation targets gain touch area without changing desktop UI. */
@media (max-width: 760px) {
  .bs-page .bs-return {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .bs-page .bs-footer.bs-footer .bs-footer-column a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .bs-page.bs-contact .back-button,
  .bs-page.bs-contact .restart-button {
    min-width: 44px;
    min-height: 44px;
  }
}