/*
 * DJC Offers -- DJC Skin
 *
 * Brand skin for DJC (Turning Point / David Jeremiah). Models the
 * .hsk-product promo look: gold uppercase overline, navy display
 * title with a gold-gradient <em> emphasis, muted italic description,
 * teal pill CTA, drop-shadowed product image.
 *
 * Apply class="djc" to the .djc-offer element or any ancestor.
 * Load AFTER DJC_Offers.css (structure).
 *
 * Usage:
 *   <div class="djc-offer djc">                       -- class on the offer
 *   <div class="djc"><div class="djc-offer">           -- class on a wrapper
 *   DJC_Offers.mount('#el', { skin: 'djc' });          -- via JS (default)
 */


/* fonts (DJC skin only -- remove/replace for other skins) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


.djc.djc-offer,
.djc .djc-offer {
  /* colors */
  --offer-bg: #ffffff;
  --offer-overline: #b8761e;
  /* dark gold */
  --offer-title: #1a2744;
  /* navy */
  --offer-desc: #6b6b6b;
  --offer-cta-bg: #1a7a6d;
  /* teal */
  --offer-cta-bg-hover: #14655a;
  --offer-cta-text: #ffffff;

  /* typography */
  --offer-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --offer-overline-size: 14px;
  --offer-title-size: clamp(26px, 3.4vw, 40px);
  --offer-desc-size: clamp(16px, 1.8vw, 20px);
  --offer-cta-size: 16px;

  /* spacing + shape */
  --offer-gap: 48px;
  --offer-max-width: 1000px;
  --offer-copy-max: 460px;
  --offer-image-max-h: 320px;
  --offer-cta-radius: 999px;
  --offer-cta-padding: 13px 34px;
}


/* product image -- soft drop shadow lifts it off the page */
.djc.djc-offer .djc-offer__image,
.djc .djc-offer .djc-offer__image {
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.18));
}


/* overline -- gold, uppercase, tracked out */
.djc.djc-offer .djc-offer__overline,
.djc .djc-offer .djc-offer__overline {
  font-weight: 700;
  letter-spacing: 0.14em;
}


/* title -- navy Playfair display, uppercase. <em> emphasis gets the
 * gold gradient-clipped treatment. NOTE: background-IMAGE, not the
 * background shorthand -- the shorthand resets background-clip and
 * renders a solid gold box instead of gradient-filled letterforms. */
.djc.djc-offer .djc-offer__title,
.djc .djc-offer .djc-offer__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.djc.djc-offer .djc-offer__title em,
.djc .djc-offer .djc-offer__title em {
  font-style: italic;
  background-image: linear-gradient(to right, #e8b756, #b8761e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* description -- muted, lightly italic for an editorial feel */
.djc.djc-offer .djc-offer__desc,
.djc .djc-offer .djc-offer__desc {
  font-style: italic;
}


/* cta -- teal pill with a subtle lift on hover */
.djc.djc-offer .djc-offer__cta,
.djc .djc-offer .djc-offer__cta {
  box-shadow: 0 6px 18px rgba(26, 122, 109, 0.28);
  letter-spacing: 0.01em;
}