/*
 * DJC ProductArray -- DJC Skin
 *
 * Brand skin for DJC (Turning Point / David Jeremiah).
 * Apply class="djc" to the .djc-product-array element or any ancestor.
 *
 * Load AFTER DJC_ProductArray.css (structure).
 *
 * Defaults match the live overlay used on
 * davidjeremiah.org/resources/* product-array pages:
 *   - amber-gold gradient backdrop
 *   - frosted glass columns
 *   - white type with a warm cream subtitle accent
 *   - gradient CTA pill
 *
 * Per-page colour overrides should set --product-array-* variables
 * on .djc-product-array directly (inline style or a page-specific
 * stylesheet rule). For example, a teal HSK theme would override
 * --product-array-bg-image with its own gradient.
 *
 * Usage:
 *   <div class="djc-product-array djc">                            -- class on the array
 *   <div class="djc"><div class="djc-product-array">...            -- class on a wrapper
 *   DJC_ProductArray.openOverlay({ skin: 'djc', ... });            -- via JS (default)
 */


.djc.djc-product-array,
.djc .djc-product-array {
  /* colors */
  --product-array-bg:                 #c6862a;
  --product-array-bg-image:           linear-gradient(165deg, #d4a23a, #c6862a);
  --product-array-text:               #ffffff;
  --product-array-title:              #ffffff;
  --product-array-subtitle:           #f0d6a0;
  --product-array-desc:               rgba(255, 255, 255, 0.95);
  --product-array-column-bg:          rgba(255, 255, 255, 0.28);
  --product-array-column-shadow:      0 12px 32px rgba(78, 50, 10, 0.22);
  --product-array-cta-bg:             linear-gradient(180deg, #c4501f, #a3411a);
  --product-array-cta-bg-hover:       linear-gradient(180deg, #d35e2a, #b54a20);
  --product-array-cta-text:           #ffffff;
  --product-array-close:              #ffffff;
  --product-array-close-hover:        #fff2c2;

  /* typography */
  --product-array-font:               'Archivo', system-ui, sans-serif;
  --product-array-heading-size:       clamp(28px, 3vw, 40px);
  --product-array-title-size:         clamp(20px, 1.6vw, 26px);
  --product-array-subtitle-size:      13px;
  --product-array-desc-size:          15px;
  --product-array-cta-size:           17px;

  /* overlay backdrop sits between the gradient bg and the columns;
     drop the dim tint since the gold gradient already reads as the bg. */
  --product-array-overlay-tint:       transparent;
}


/* DJC titles use Playfair Display, matching the rest of the brand */
.djc.djc-product-array .djc-product-array__heading,
.djc .djc-product-array .djc-product-array__heading,
.djc.djc-product-array .djc-product-array__product-title,
.djc .djc-product-array .djc-product-array__product-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
}