/* ===========================================================================
   mobile-fixes.css — targeted mobile (<=767px) layout corrections.

   Loaded AFTER /css/584f8d7.css so these rules win by cascade order.
   Kept in a separate file (the main stylesheet is a frozen assetic dump) so the
   fixes stay small, reviewable and easy to revert. Shared CommonBundle markup,
   so this applies to all three brands (alpine / azure / urban).

   Issues addressed (reported on mobile, elements overlapping each other):
   1. Hotel teaser (block_hotel_full_width): the "Show Hotel" button and the
      "Price from" block are position:absolute and pinned to the card bottom.
      On desktop the photo/text sit side-by-side so the card is tall enough; on
      mobile they stack, the card collapses to the text height, and the pinned
      button + price land on top of the description paragraph. -> return them to
      normal flow below the text.
   2. reCAPTCHA v2 badge: the floating "protected by reCAPTCHA" badge is anchored
      bottom-left and its tab pokes over page content. -> hide it on mobile and
      show the required Google attribution text in the footer instead.
   =========================================================================== */

@media (max-width: 767px) {

  /* --- 1. hotel teaser: un-pin the action button + price on mobile --------- */
  .block-hotel-left-col .block-hotel-action,
  .block-hotel-left-col .block-hotel-price {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
  }

  .block-hotel-left-col .block-hotel-action {
    margin-top: 14px;
  }

  .block-hotel-left-col .block-hotel-price {
    margin-top: 10px;
  }

  .block-hotel-left-col .block-hotel-price .price_from_div {
    text-align: left;
  }

  /* --- 2. hide the overlapping reCAPTCHA badge on mobile ------------------- */
  /* inline style on the element sets visibility, so !important is required */
  .grecaptcha-badge {
    visibility: hidden !important;
  }

  /* footer attribution, shown only where the badge is hidden (Google ToS) */
  .recaptcha-tos-note {
    display: block;
  }
}

/* attribution is hidden on >=768px where the badge itself is visible */
.recaptcha-tos-note {
  display: none;
  font-size: 11px;
  color: #999;
  margin-top: 8px;
}

.recaptcha-tos-note a {
  color: #999;
  text-decoration: underline;
}