/* Offer cards: the home page's offer row and the admin form's preview.
   Admin doesn't load site.css, so each token has its light value as a fallback. */

/* The sections around it already have generous padding. Hidden with no offers, so no gap either way. */
.sn-offers {
  margin-top: -16px;
}

.sn-offers__row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.sn-offers__row:focus-visible {
  outline: 2px solid var(--sn-focus, #1E7B3C);
  outline-offset: 2px;
}

.sn-offers__row > .sn-offer {
  flex: 0 0 min(86%, 520px);
  scroll-snap-align: start;
}

.sn-offers__row--single > .sn-offer {
  flex-basis: min(100%, 640px);
}

@media (hover: none) {
  .sn-offers__row { scrollbar-width: none; }
  .sn-offers__row::-webkit-scrollbar { display: none; }
}

.sn-offer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--sn-r-card, 14px);
  background: var(--sn-marigold-tint, #FFF4D6);
  color: var(--sn-ink, #1C2B24);
  text-decoration: none;
}

a.sn-offer:focus-visible {
  outline: 2px solid var(--sn-focus, #1E7B3C);
  outline-offset: 2px;
}

/* A fixed frame, so a poster loading never moves the page. The whole poster always shows. */
.sn-offer__poster {
  position: relative;
  aspect-ratio: 2 / 1;
  background: var(--sn-raised, #EEF2EC);
}

.sn-offer__poster img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sn-offer__text {
  display: grid;
  align-content: center;
  gap: 2px;
  flex: 1;
  min-height: 96px;
  padding: 16px 20px;
}

.sn-offer__title {
  font-family: var(--sn-font-display, inherit);
  font-size: var(--sn-t-23, 1.4375rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--sn-marigold-ink, #7A4E00);
  overflow-wrap: anywhere;
}

.sn-offer__message {
  font-size: var(--sn-t-16, 1rem);
  line-height: 1.4;
  overflow-wrap: anywhere;
}