/* DJC Offers -- Skeleton
 *
 * Structural layout only + skeleton defaults for the offer component.
 * All visual properties are driven by --offer-* CSS custom properties.
 *
 * Parts:
 *   __inner      -- flex row container (image + copy)
 *   __media      -- product image column
 *   __image      -- the product <img>
 *   __copy       -- text column
 *   __overline   -- small eyebrow above the title
 *   __title      -- h3 heading (HTML allowed -- e.g. <em> emphasis)
 *   __desc       -- body copy
 *   __cta-wrap   -- positioned wrapper for the CTA button
 *   __cta        -- the CTA button
 *
 * Modifiers:
 *   --imgleft    -- product image on the left  (default)
 *   --imgright   -- product image on the right
 *
 * NO SKIN: renders a visible skeleton -- neutral colors, readable type,
 * sensible spacing. Functional but unbranded.
 *
 * TO SKIN: set --offer-* variables on .djc-offer.
 * See /skins/offers.djc.css for the DJC brand skin.
 */

@import url('skins/offers.djc.css');


.djc-offer {
  /* colors */
  --offer-bg: transparent;
  --offer-overline: #8a6d2b;
  --offer-title: #111;
  --offer-desc: #555;
  --offer-cta-bg: #1a7a6d;
  --offer-cta-bg-hover: #14655a;
  --offer-cta-text: #fff;

  /* typography */
  --offer-font: inherit;
  --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;
  --offer-stack-bp: 780px;
  /* width at/below which the layout stacks */
}


/* reset */
.djc-offer *,
.djc-offer *::before,
.djc-offer *::after {
  box-sizing: border-box;
}


/* wrapper */
.djc-offer {
  display: block;
  width: 100%;
  background: var(--offer-bg);
  font-family: var(--offer-font);
}


/* inner -- flex row holding the image + copy columns */
.djc-offer__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--offer-gap);
  width: 100%;
  max-width: var(--offer-max-width);
  margin: 0 auto;
}

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


/* media -- product image column */
.djc-offer__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.djc-offer__image {
  width: auto;
  max-width: 100%;
  max-height: var(--offer-image-max-h);
  height: auto;
  display: block;
  object-fit: contain;
  /* image fires the same CTA action as the button (see DJC_Offers.js) */
  cursor: pointer;
}


/* copy -- text column */
.djc-offer__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: var(--offer-copy-max);
}

.djc-offer__overline {
  font-size: var(--offer-overline-size);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--offer-overline);
}

.djc-offer__title {
  margin: 0;
  font-size: var(--offer-title-size);
  line-height: 1.15;
  color: var(--offer-title);
}

.djc-offer__desc {
  margin: 0;
  font-size: var(--offer-desc-size);
  line-height: 1.45;
  color: var(--offer-desc);
}


/* cta */
.djc-offer__cta-wrap {
  display: flex;
  margin-top: 6px;
}

.djc-offer__cta {
  appearance: none;
  border: 0;
  padding: var(--offer-cta-padding);
  border-radius: var(--offer-cta-radius);
  background: var(--offer-cta-bg);
  color: var(--offer-cta-text);
  font-size: var(--offer-cta-size);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.djc-offer__cta:hover {
  background: var(--offer-cta-bg-hover);
  transform: translateY(-1px);
}

.djc-offer__cta:active {
  transform: translateY(0);
}


/* stacked layout -- image above copy, centered */
@media (max-width: 780px) {

  .djc-offer__inner,
  .djc-offer--imgright .djc-offer__inner {
    flex-direction: column;
    gap: 28px;
    text-align: center;
  }

  .djc-offer__copy {
    align-items: center;
    max-width: 100%;
  }

  .djc-offer__cta-wrap {
    justify-content: center;
  }
}


/* ============================================
 * Global premcheckout overlay -- mobile padding
 *
 * The premcheckout overlay (templates/premiums.php) is opened from the
 * offer CTA via window.premcheckout.show, and on narrow viewports the
 * panel reads as cut off against the viewport edges. Padding on the
 * outer wrapper pushes the whole panel in from the edges. The fix lives
 * here -- alongside the component that opens it -- so it ships
 * everywhere offers do. Selectors target the global checkout-overlay
 * classes; effect is global wherever the overlay renders.
 * ============================================ */
@media (max-width: 640px) {
  .checkout-overlay-wrapper {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}