/* Seasonal homepage promotions: a compact card floating over the hero's top
   right corner, which fades away once the visitor scrolls down. The hero keeps
   its normal place, so hiding the wrapper changes nothing else on the page. */
.homepage-promotions {
  position: fixed;
  top: 84px; /* 72px fixed navigation + 12px breathing room. */
  right: 16px;
  z-index: 45; /* Above the page, below the navigation and its mobile menu. */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(400px, calc(100vw - 32px));
  transition: opacity .3s ease, transform .3s ease, visibility 0s;
}

.homepage-promotions.is-scrolled {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden; /* Also takes the links out of the tab order. */
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
}

.homepage-promotions[data-pending], .homepage-promotions[hidden], .homepage-promo[hidden] {
  display: none;
}

.homepage-promo {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 36px 14px 12px;
  background: #431e19eb; /* --color-dark-brown, slightly see-through. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid #9a714b;
  border-radius: 10px;
  color: #fff5e8;
  box-shadow: 0 10px 28px #0000004d;
}

.homepage-promo--text-only { grid-template-columns: minmax(0, 1fr); padding-left: 18px; }
.homepage-promo__content { min-width: 0; overflow-wrap: anywhere; }
.homepage-promo__logo { width: 80px; max-width: none; height: 80px; object-fit: contain; }
.homepage-promo__eyebrow { margin: 0 0 4px; color: var(--color-gold-light); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; text-transform: uppercase; }
.homepage-promo__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.2px; }
/* Up to four lines; a longer text is cut off with an ellipsis. */
.homepage-promo__text { display: -webkit-box; margin: 5px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; font-size: 14px; line-height: 1.45; color: #f1ded2; white-space: pre-line; }
.homepage-promo__button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin-top: 10px; padding: 6px 14px; border: 1px solid #d1aa73; border-radius: 4px; background: var(--color-gold); color: #29150e; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.homepage-promo__button:hover { background: var(--color-gold-light); }
.homepage-promo__close { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--color-gold-light); font-size: 20px; font-weight: 400; line-height: 1; cursor: pointer; }
.homepage-promo__close:hover { background: #ffffff14; color: #fff5e8; }
.homepage-promo__close:focus-visible, .homepage-promo__button:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 2px; }

/* Tablets: the hero is shorter, so a smaller card with two lines of text. */
@media (max-width: 1023px) {
  .homepage-promotions { width: min(340px, calc(100vw - 32px)); }
  .homepage-promo { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 34px 12px 10px; }
  .homepage-promo--text-only { padding-left: 16px; }
  .homepage-promo__logo { width: 64px; height: 64px; }
  .homepage-promo__eyebrow { margin-bottom: 3px; font-size: 10px; }
  .homepage-promo__title { font-size: 16px; }
  .homepage-promo__text { margin-top: 4px; -webkit-line-clamp: 2; line-clamp: 2; font-size: 13px; line-height: 1.4; }
  .homepage-promo__button { min-height: 32px; margin-top: 8px; padding: 5px 12px; font-size: 13px; }
}

/* Phones and small tablets: a slim card that stays within the hero, clear of
   the "Book now" button. The heading and title get one line each, cut off if
   longer. */
@media (max-width: 767px) {
  .homepage-promotions { top: 77px; right: 12px; width: min(400px, calc(100vw - 24px)); gap: 6px; }
  .homepage-promo { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 6px 34px 6px 8px; border-radius: 8px; }
  .homepage-promo--text-only { grid-template-columns: minmax(0, 1fr); padding-left: 12px; }
  .homepage-promo__logo { width: 40px; height: 40px; }
  .homepage-promo__eyebrow, .homepage-promo__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .homepage-promo__eyebrow { margin-bottom: 1px; letter-spacing: 1px; }
  .homepage-promo__title { font-size: 14px; line-height: 1.2; }
  .homepage-promo__text { display: none; }
  .homepage-promo__button { min-height: 24px; margin-top: 0; padding: 0; border: 0; background: none; color: var(--color-gold-light); font-size: 13px; }
  .homepage-promo__button:hover { background: none; color: #fff5e8; }
  .homepage-promo__close { top: 50%; transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-promotions, .homepage-promotions.is-scrolled { transform: none; }
}