/* DJC Offers -- compact config
 *
 * The small light card for an offer placed inside another component's
 * slot (configType: 'compact'). Every selector is scoped to
 * .djc-offer--compact, so default-config offers never see these rules.
 *
 * Load order: AFTER DJC_Offers.css and skins/offers.djc.css. The skin
 * arrives twice (an @import inside the base file and its own registry
 * <link>), so its rules sit late in the cascade; this sheet repeats the
 * .djc-offer class in every selector to match the skin's weight and wins
 * on source order. compact.js also injects it on mount, for a page that
 * builds a compact offer without the registry entry.
 *
 * Container tokens (inherited -- set them on any ancestor):
 *   --offer-compact-bg      card surface      (default white)
 *   --offer-compact-border  card outline      (default 10% ink)
 *   --offer-compact-shadow  card lift         (default soft navy shadow)
 *
 * Colours read the campaign-base brand tokens when the page has them and
 * fall back to the house palette when it doesn't.
 */


/* ============================================
 * TOKENS
 * ============================================ */
.djc-offer.djc-offer--compact {
  --offer-ink: #1a2840;
  --offer-ink: var(--brand-dark, #1a2840);
  --offer-title: var(--offer-ink);
  --offer-desc: #4a5366;
  --offer-desc: color-mix(in srgb, var(--offer-ink) 84%, #fff);
  --offer-cta-text: #3d1238;
  --offer-cta-text: var(--color-2b, #3d1238);

  --offer-font: var(--font-ui, 'source-sans-pro', system-ui, sans-serif);
  --offer-title-font: var(--font-1, 'Raleway', system-ui, serif);
  --offer-cta-font: var(--font-2, 'proxima-nova', system-ui, sans-serif);
  --offer-overline-size: 12px;
  --offer-title-size: clamp(20px, 2.2vw, 24px);
  --offer-desc-size: 15px;
  --offer-cta-size: 17px;

  --offer-gap: clamp(14px, 2.4vw, 22px);
  --offer-max-width: none;
  --offer-copy-max: none;
  --offer-image-max-h: none;
  --offer-image-w: 116px;
  --offer-cta-radius: 40px;
  --offer-cta-radius: var(--radius-pill, 40px);
  --offer-cta-height: 42px;
  --offer-cta-padding: 0 24px;
  --offer-focus: #f9a825;
  --offer-focus: var(--brand-3, #f9a825);
}


/* ============================================
 * CARD
 * ============================================ */
.djc-offer.djc-offer--compact {
  max-width: 680px;
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: 16px;
  background: var(--offer-compact-bg, #fff);
  border: 1px solid var(--offer-compact-border, rgba(26, 40, 64, 0.1));
  box-shadow: var(--offer-compact-shadow, 0 14px 40px rgba(13, 27, 54, 0.16));
  color: var(--offer-desc);
  text-align: left;
}

/* image beside copy at every width above the stack point -- the base
   file stacks offers at 780px, which is too early for a card this small */
.djc-offer.djc-offer--compact .djc-offer__inner {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--offer-gap);
  text-align: left;
}

.djc-offer.djc-offer--compact.djc-offer--imgright .djc-offer__inner {
  flex-direction: row-reverse;
}


/* ============================================
 * MEDIA
 * ============================================ */
.djc-offer.djc-offer--compact .djc-offer__media {
  flex: 0 0 var(--offer-image-w);
  width: var(--offer-image-w);
}

.djc-offer.djc-offer--compact .djc-offer__image {
  width: 100%;
  height: auto;
  filter: none;
}

/* failed image: compact.js swaps this class on, the broken <img> goes
   away and a brand-gradient tile holds the column's shape */
.djc-offer.djc-offer--compact .djc-offer__media--failed {
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: #24467f;
  background: linear-gradient(135deg, var(--brand-1, #2a5298) 0%, var(--brand-2, #6b2d8b) 100%);
}

.djc-offer.djc-offer--compact .djc-offer__media--failed .djc-offer__image {
  display: none;
}


/* ============================================
 * COPY
 * ============================================ */
.djc-offer.djc-offer--compact .djc-offer__copy {
  flex: 1 1 0;
  align-items: stretch;
  gap: 0;
  max-width: none;
}

.djc-offer.djc-offer--compact .djc-offer__overline {
  margin: 0 0 2px;
  font-family: var(--offer-font);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b8761e;
  background-image: linear-gradient(to right, #f9a825, #ef6c00);
  background-image: var(--gradientX3, linear-gradient(to right, #f9a825, #ef6c00));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.djc-offer.djc-offer--compact .djc-offer__title {
  margin: 0 0 4px;
  font-family: var(--offer-title-font);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

/* plain italic emphasis -- the skin's gold gradient fill is for the big
   promo, and reads as a smear at this size */
.djc-offer.djc-offer--compact .djc-offer__title em {
  font-style: italic;
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

.djc-offer.djc-offer--compact .djc-offer__desc {
  margin: 0 0 12px;
  line-height: 1.5;
  font-style: normal;
}

.djc-offer.djc-offer--compact .djc-offer__desc cite {
  font-style: italic;
}


/* ============================================
 * CTA -- the gold pill, self-contained so it renders the same with or
 * without campaign-base on the page
 * ============================================ */
.djc-offer.djc-offer--compact .djc-offer__cta-wrap {
  margin-top: 0;
  justify-content: flex-start;
}

.djc-offer.djc-offer--compact .djc-offer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--offer-cta-height);
  font-family: var(--offer-cta-font);
  letter-spacing: 0;
  background: #f9a825;
  background: var(--gradientX3, linear-gradient(to right, #f9a825, #ef6c00));
  box-shadow: 0 4px 15px rgba(249, 168, 37, 0.3);
  box-shadow: var(--btnshadow, 0 4px 15px rgba(249, 168, 37, 0.3));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.djc-offer.djc-offer--compact .djc-offer__cta:hover {
  background: #f9a825;
  background: var(--gradientX3, linear-gradient(to right, #f9a825, #ef6c00));
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 108, 0, 0.4);
  box-shadow: var(--btnshadow-hover, 0 8px 25px rgba(239, 108, 0, 0.4));
}

.djc-offer.djc-offer--compact .djc-offer__cta:focus-visible {
  outline: 3px solid var(--offer-focus);
  outline-offset: 3px;
}


/* ============================================
 * STACKED -- image above copy, still left-aligned
 * ============================================ */
@media (max-width: 600px) {

  .djc-offer.djc-offer--compact .djc-offer__inner,
  .djc-offer.djc-offer--compact.djc-offer--imgright .djc-offer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .djc-offer.djc-offer--compact .djc-offer__media {
    flex: 0 0 auto;
    width: 120px;
  }

  .djc-offer.djc-offer--compact .djc-offer__copy {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .djc-offer.djc-offer--compact .djc-offer__cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .djc-offer.djc-offer--compact .djc-offer__cta,
  .djc-offer.djc-offer--compact .djc-offer__cta:hover {
    transition: none;
    transform: none;
  }
}