/* ============================================
   DESIGN VARIANCE PARAMETERS
   Applied via body class alongside mood.
   Fine-tune layout independent of mood choice.

   All values reference :root --zs-* tokens.
   ============================================ */


/* ── Card Style: Elevated ── */

body.zs-cards-elevated .zs-service-card,
body.zs-cards-elevated .zs-testimonial-card,
body.zs-cards-elevated .zs-pricing-card {
  box-shadow: var(--zs-shadow-md);
  border: none;
}

body.zs-cards-elevated .zs-service-card:hover,
body.zs-cards-elevated .zs-testimonial-card:hover,
body.zs-cards-elevated .zs-pricing-card:hover {
  box-shadow: var(--zs-shadow-lg);
}


/* ── Card Style: Bordered ── */

body.zs-cards-bordered .zs-service-card,
body.zs-cards-bordered .zs-testimonial-card,
body.zs-cards-bordered .zs-pricing-card {
  border: var(--zs-border-width) solid var(--zs-border);
  box-shadow: none;
}


/* ── Card Style: Flat ── */

body.zs-cards-flat .zs-service-card,
body.zs-cards-flat .zs-testimonial-card,
body.zs-cards-flat .zs-pricing-card {
  background: var(--zs-bg-alt);
  box-shadow: none;
  border: none;
}


/* ── Card Style: Outlined ── */

body.zs-cards-outlined .zs-service-card,
body.zs-cards-outlined .zs-testimonial-card,
body.zs-cards-outlined .zs-pricing-card {
  background: transparent;
  border: var(--zs-border-width) solid var(--zs-border-light);
  box-shadow: none;
}


/* ── Card Style: Glass ── */

body.zs-cards-glass .zs-service-card,
body.zs-cards-glass .zs-testimonial-card,
body.zs-cards-glass .zs-pricing-card {
  background: oklch(100% 0 0 / 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--zs-border-width) solid oklch(100% 0 0 / 0.1);
}

[data-theme="dark"] body.zs-cards-glass .zs-service-card,
[data-theme="dark"] body.zs-cards-glass .zs-testimonial-card,
[data-theme="dark"] body.zs-cards-glass .zs-pricing-card {
  background: oklch(100% 0 0 / 0.03);
  border-color: oklch(100% 0 0 / 0.08);
}


/* ============================================
   DENSITY
   ============================================ */

/* ── Compact ── */

body.zs-density-compact {
  --zs-section-padding: 2.5rem var(--zs-container-padding);
}

body.zs-density-compact .zs-service-card { padding: 1.25rem; }
body.zs-density-compact .zs-testimonial-card { padding: var(--zs-space-lg); }
body.zs-density-compact .zs-pricing-card { padding: var(--zs-space-lg); }
body.zs-density-compact .zs-hero { min-height: 45vh; }
body.zs-density-compact .zs-faq-section details summary { padding: var(--zs-space-md) 0; }
body.zs-density-compact .zs-stats-bar { padding: var(--zs-space-xl) var(--zs-container-padding); }
body.zs-density-compact .zs-cta { padding: var(--zs-space-xl) var(--zs-container-padding); }

/* ── Balanced ── (default, no overrides) */
body.zs-density-balanced { /* intentionally empty */ }

/* ── Spacious ── */

body.zs-density-spacious {
  --zs-section-padding: 6rem var(--zs-container-padding);
}

body.zs-density-spacious .zs-service-card { padding: var(--zs-space-xl); }
body.zs-density-spacious .zs-testimonial-card { padding: var(--zs-space-xl); }
body.zs-density-spacious .zs-pricing-card { padding: var(--zs-space-xl); }
body.zs-density-spacious .zs-hero { min-height: 65vh; }
body.zs-density-spacious .zs-faq-section details summary { padding: var(--zs-space-lg) 0; }
body.zs-density-spacious .zs-stats-bar { padding: var(--zs-space-3xl) var(--zs-container-padding); }
body.zs-density-spacious .zs-cta { padding: var(--zs-space-3xl) var(--zs-container-padding); }


/* ============================================
   HERO TREATMENT
   ============================================ */

body.zs-hero-full-bleed .zs-hero {
  clip-path: none;
  min-height: 75vh;
}

body.zs-hero-split .zs-hero {
  /* Handled by hero-split block pattern */
}

body.zs-hero-overlap .zs-hero {
  margin-bottom: -6rem;
}

.zs-hero-overlap .zs-hero + * {
    z-index: 2;
    position: relative;
}

.zs-hero-overlap .zs-hero ~ .zs-content > .zs-container > .zs-content__text {
    padding-top: 6rem;
}

body.zs-hero-minimal .zs-hero {
  min-height: 45vh;
}

body.zs-hero-angled .zs-hero {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}


/* ============================================
   DIVIDER STYLE
   ============================================ */

/* ── Angle ── */
body.zs-divider-angle .zs-section:not(:first-child) {
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
  margin-top: -2rem;
  padding-top: calc(var(--zs-space-section) + 2rem);
}

/* ── Wave ── */
body.zs-divider-wave .zs-section { position: relative; }

body.zs-divider-wave .zs-section::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 40px;
  background: var(--zs-bg);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q300 0 600 20 T1200 20 V0 H0z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q300 0 600 20 T1200 20 V0 H0z'/%3E%3C/svg%3E");
  mask-size: 600px 40px;
  -webkit-mask-size: 600px 40px;
  mask-repeat: repeat-x;
  -webkit-mask-repeat: repeat-x;
  z-index: 1;
  pointer-events: none;
}

/* ── Dots ── */
body.zs-divider-dots .zs-section::before {
  content: '\2022 \2022 \2022';
  display: block;
  text-align: center;
  color: var(--zs-border);
  font-size: var(--zs-text-xl);
  letter-spacing: var(--zs-space-md);
  padding: var(--zs-space-md) 0;
}

/* ── None ── */
body.zs-divider-none .zs-section { /* no dividers */ }

/* ── Gradient Fade ── */
body.zs-divider-gradient-fade .zs-section {
  border-top: var(--zs-border-width) solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--zs-border), transparent) 1;
}


/* ============================================
   IMAGE TREATMENT
   ============================================ */

/* ── Sharp ── */
body.zs-images-sharp .zs-portfolio-card img,
body.zs-images-sharp .zs-two-col img {
  border-radius: 0;
}

/* ── Rounded ── */
body.zs-images-rounded .zs-portfolio-card img,
body.zs-images-rounded .zs-two-col img {
  border-radius: var(--zs-radius-lg);
}

/* ── Masked ── */
body.zs-images-masked .zs-two-col img {
  clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%);
}

/* ── Offset Shadow ── */
body.zs-images-offset-shadow .zs-portfolio-card img,
body.zs-images-offset-shadow .zs-two-col img {
  box-shadow: 8px 8px 0 var(--zs-accent);
}

/* ── Duotone ── */
body.zs-images-duotone .zs-portfolio-card img,
body.zs-images-duotone .zs-two-col img {
  filter: grayscale(100%) contrast(1.1);
  mix-blend-mode: luminosity;
}

body.zs-images-duotone .zs-portfolio-card:hover img {
  filter: none;
  mix-blend-mode: normal;
  transition: filter var(--zs-transition-slow);
}


/* ============================================
   ANIMATION STYLE
   ============================================ */

/* ── None ── */
body.zs-anim-none * {
  transition-duration: 0s !important;
}

/* ── Gentle ── */
body.zs-anim-gentle .zs-service-card,
body.zs-anim-gentle .zs-testimonial-card,
body.zs-anim-gentle .zs-portfolio-card,
body.zs-anim-gentle .zs-pricing-card,
body.zs-anim-gentle .wp-block-button {
  transition: all var(--zs-transition-slow);
}

/* ── Snappy ── */
body.zs-anim-snappy .zs-service-card,
body.zs-anim-snappy .zs-testimonial-card,
body.zs-anim-snappy .zs-portfolio-card,
body.zs-anim-snappy .zs-pricing-card,
body.zs-anim-snappy .wp-block-button {
  transition: all var(--zs-transition-fast) var(--zs-ease-out);
}

/* ── Staggered ── */
body.zs-anim-staggered .zs-service-card:nth-child(1) { transition-delay: 0s; }
body.zs-anim-staggered .zs-service-card:nth-child(2) { transition-delay: 0.07s; }
body.zs-anim-staggered .zs-service-card:nth-child(3) { transition-delay: 0.14s; }
body.zs-anim-staggered .zs-service-card:nth-child(4) { transition-delay: 0.21s; }
body.zs-anim-staggered .zs-service-card:nth-child(5) { transition-delay: 0.28s; }
body.zs-anim-staggered .zs-service-card:nth-child(6) { transition-delay: 0.35s; }

body.zs-anim-staggered .zs-testimonial-card:nth-child(1) { transition-delay: 0s; }
body.zs-anim-staggered .zs-testimonial-card:nth-child(2) { transition-delay: 0.07s; }
body.zs-anim-staggered .zs-testimonial-card:nth-child(3) { transition-delay: 0.14s; }

body.zs-anim-staggered .zs-portfolio-card:nth-child(1) { transition-delay: 0s; }
body.zs-anim-staggered .zs-portfolio-card:nth-child(2) { transition-delay: 0.07s; }
body.zs-anim-staggered .zs-portfolio-card:nth-child(3) { transition-delay: 0.14s; }
body.zs-anim-staggered .zs-portfolio-card:nth-child(4) { transition-delay: 0.21s; }

body.zs-anim-staggered .zs-pricing-card:nth-child(1) { transition-delay: 0s; }
body.zs-anim-staggered .zs-pricing-card:nth-child(2) { transition-delay: 0.1s; }
body.zs-anim-staggered .zs-pricing-card:nth-child(3) { transition-delay: 0.2s; }