/*
 * Wild Enchantment — Landing Page Kit
 * Section design system for witchy digital-product landing pages, built from
 * native core blocks. Scoped under .wel-* so nothing leaks site-wide.
 *
 * Palette — "Lucida Mystica" brand:
 *   #272727 charcoal   #4a4149 plum   #394036 forest
 *   #9d9790 taupe      #e9e6e3 paper (off-white)
 *
 * COLOR MODEL: each section is a full-width Group with class `wel-section`
 * plus a colorway block-style (is-style-wel-charcoal, …-plum, …-forest,
 * …-taupe, …-paper) that sets the background + the --wel-* variables the
 * inner elements read. Presets carry NO !important, so the native Color
 * panel can still override with any custom hex if ever needed.
 */

/* ── Base type + defaults (falls back to the Charcoal colorway) ─────────── */
.wel-section {
  --wel-bg:        #272727;
  --wel-text:      #e9e6e3;
  --wel-muted:     #b7b1a9;
  --wel-eyebrow:   #9d9790;
  --wel-accent:    #9d9790;
  --wel-line:      rgba(233, 230, 227, 0.14);
  --wel-solid-bg:  #e9e6e3;
  --wel-solid-fg:  #272727;
  --wel-outline:   rgba(233, 230, 227, 0.5);

  font-family: "Open Sans", "Segoe UI", system-ui, sans-serif;
  color: var(--wel-text);
  padding: clamp(72px, 9vw, 96px) clamp(24px, 5vw, 40px);
  box-sizing: border-box;
}
.wel-section * { box-sizing: border-box; }
.wel-section :where(p, h1, h2, h3, ul, ol, figure, .wp-block-buttons) { margin-block: 0; }

/* ── Colorways (block styles). No !important → native colors override. ──── */
.wel-section.is-style-wel-charcoal { background: #272727;
  --wel-bg:#272727; --wel-text:#e9e6e3; --wel-muted:#b7b1a9; --wel-eyebrow:#9d9790;
  --wel-accent:#9d9790; --wel-line:rgba(233,230,227,.14);
  --wel-solid-bg:#e9e6e3; --wel-solid-fg:#272727; --wel-outline:rgba(233,230,227,.5); }

.wel-section.is-style-wel-plum { background: #4a4149;
  --wel-bg:#4a4149; --wel-text:#e9e6e3; --wel-muted:#cbc4c6; --wel-eyebrow:#b3a9ad;
  --wel-accent:#9d9790; --wel-line:rgba(233,230,227,.16);
  --wel-solid-bg:#e9e6e3; --wel-solid-fg:#4a4149; --wel-outline:rgba(233,230,227,.5); }

.wel-section.is-style-wel-forest { background: #394036;
  --wel-bg:#394036; --wel-text:#e9e6e3; --wel-muted:#c6cabf; --wel-eyebrow:#a1a596;
  --wel-accent:#9d9790; --wel-line:rgba(233,230,227,.16);
  --wel-solid-bg:#e9e6e3; --wel-solid-fg:#394036; --wel-outline:rgba(233,230,227,.5); }

.wel-section.is-style-wel-taupe { background: #9d9790;
  --wel-bg:#9d9790; --wel-text:#272727; --wel-muted:#3d3833; --wel-eyebrow:#4a4149;
  --wel-accent:#4a4149; --wel-line:rgba(39,39,39,.22);
  --wel-solid-bg:#272727; --wel-solid-fg:#e9e6e3; --wel-outline:#272727; }

.wel-section.is-style-wel-paper { background: #e9e6e3;
  --wel-bg:#e9e6e3; --wel-text:#272727; --wel-muted:#4a4149; --wel-eyebrow:#7c756e;
  --wel-accent:#394036; --wel-line:rgba(39,39,39,.16);
  --wel-solid-bg:#272727; --wel-solid-fg:#e9e6e3; --wel-outline:rgba(39,39,39,.4); }

/* ── Inner width wrappers ──────────────────────────────────────────────── */
.wel-center  { text-align: center; }
.wel-inner   { max-width: 1080px; margin-left: auto; margin-right: auto; }
.wel-narrow  { max-width: 760px;  margin-left: auto; margin-right: auto; }
.wel-tight   { max-width: 620px;  margin-left: auto; margin-right: auto; }

/* ── Split hero (edge-to-edge color panel + photo) ─────────────────────── */
.wel-section.wel-flush { padding: 0; }
.wel-hero-split > .wp-block-columns { gap: 0; align-items: stretch; min-height: 82vh; flex-wrap: nowrap; }
.wel-hero-split .wp-block-column { padding: 0; }
.wel-hero-panel {
  padding: clamp(56px, 7vw, 88px) clamp(32px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: center;
}
.wel-hero-media-fill { min-height: 420px; }
.wel-hero-media-fill .wp-block-image,
.wel-hero-media-fill figure { height: 100%; margin: 0; }
.wel-hero-media-fill img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .wel-hero-split > .wp-block-columns { flex-wrap: wrap; min-height: 0; }
  .wel-hero-media-fill { aspect-ratio: 3 / 4; min-height: 0; }
}

/* ── Typography components ─────────────────────────────────────────────── */
.wel-eyebrow {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wel-eyebrow);
}
.wel-title {
  font-family: "Marcellus", "Cormorant Garamond", Georgia, serif;
  font-weight: 400; font-size: clamp(48px, 8vw, 104px); line-height: 1.02;
  letter-spacing: 0.01em; color: var(--wel-text);
}
.wel-title.is-uppercase { text-transform: uppercase; line-height: 0.98; }
.wel-heading {
  font-family: "Marcellus", "Cormorant Garamond", Georgia, serif;
  font-weight: 400; font-size: clamp(34px, 5vw, 60px); line-height: 1.06;
  color: var(--wel-text);
}
.wel-subtitle {
  font-family: "Marcellus", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 2.2vw, 20px); line-height: 1.55; color: var(--wel-muted);
}
.wel-quote {
  font-family: "Cormorant Garamond", "Marcellus", Georgia, serif;
  font-style: italic; font-weight: 500; font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.14; color: var(--wel-text);
}
.wel-body  { font-size: 15px; line-height: 1.72; color: var(--wel-muted); }
.wel-small { font-size: 13.5px; line-height: 1.7; color: var(--wel-muted); }
.wel-label {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wel-accent);
}
.wel-rule { width: 168px; max-width: 168px; height: 1px; border: 0; background: var(--wel-line); }

/* ── Buttons (square corners, no shadow) ───────────────────────────────── */
.wel-section .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wel-section .wel-btn-solid .wp-block-button__link,
.wel-section .wel-btn-outline .wp-block-button__link {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 16px 40px; border-radius: 0; transition: all 240ms ease;
}
.wel-section .wel-btn-solid .wp-block-button__link {
  background: var(--wel-solid-bg); color: var(--wel-solid-fg); border: 0;
}
.wel-section .wel-btn-solid .wp-block-button__link:hover { opacity: 0.88; }
.wel-section .wel-btn-outline .wp-block-button__link {
  background: transparent; color: var(--wel-text); border: 1px solid var(--wel-outline);
}
.wel-section .wel-btn-outline .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--wel-text) 12%, transparent);
  border-color: var(--wel-text);
}

/* ── Media (rounded, cover, NO drop shadow) ────────────────────────────── */
.wel-media { border-radius: 8px; overflow: hidden; margin: 0; line-height: 0; }
.wel-media.is-square { border-radius: 0; }
.wel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wel-ar-16x8 { aspect-ratio: 16 / 8; }
.wel-ar-4x5  { aspect-ratio: 4 / 5; }
.wel-ar-3x4  { aspect-ratio: 3 / 4; }
.wel-ar-1x1  { aspect-ratio: 1 / 1; }

/* ── Lists ─────────────────────────────────────────────────────────────── */
.wel-list-bullet { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.wel-list-bullet li {
  position: relative; padding-left: 25px; font-size: 16px; line-height: 1.55;
  color: var(--wel-muted); margin: 0;
}
.wel-list-bullet li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px;
  border: 1px solid currentColor; opacity: 0.6; border-radius: 50%;
}
.wel-list-bullet li strong { color: var(--wel-text); font-weight: 700; }

.wel-list-numbered { list-style: none; padding: 0; counter-reset: welnum; }
.wel-list-numbered li {
  counter-increment: welnum; display: grid; grid-template-columns: 40px 1fr; gap: 18px;
  padding: 16px 0; border-top: 1px solid var(--wel-line);
  font-size: 14px; line-height: 1.65; color: var(--wel-muted); margin: 0;
}
.wel-list-numbered li::before {
  content: counter(welnum, decimal-leading-zero);
  font-family: "Marcellus", Georgia, serif; font-size: 15px; color: var(--wel-accent);
  padding-top: 2px;
}

/* ── Price ─────────────────────────────────────────────────────────────── */
.wel-price-amount {
  font-family: "Marcellus", "Cormorant Garamond", Georgia, serif; font-weight: 400;
  font-size: clamp(72px, 12vw, 150px); line-height: 1; color: var(--wel-text);
}

/* ── Column layouts ────────────────────────────────────────────────────── */
.wel-section .wp-block-columns { margin: 0; }

/* ── Vertical rhythm (explicit so preview == live) ─────────────────────── */
.wel-eyebrow      { margin-bottom: 28px; }
.wel-title        { margin-bottom: 36px; }
.wel-subtitle     { margin-bottom: 14px; }
.wel-heading      { margin-bottom: 34px; }
.wel-quote        { margin-block: 0; }
.wel-body         { margin-bottom: 20px; }
.wel-body:last-child { margin-bottom: 0; }
.wel-label        { margin-bottom: 16px; }
.wel-small        { margin-block: 0; }
.wel-price-amount { margin-bottom: 22px; }
.wel-list-numbered, .wel-list-bullet { margin-bottom: 8px; }
.wel-section .wp-block-buttons { margin-top: 28px; }
.wel-section > .wp-block-columns:not(:first-child) { margin-top: 44px; }
.wel-section .wp-block-columns + .wp-block-buttons { margin-top: 52px; }
.wel-section .wp-block-buttons + .wel-small        { margin-top: 56px; }
.wel-hero-panel .wel-rule { margin: 36px 0 28px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wel-section .wp-block-columns { flex-wrap: wrap; }
  .wel-section .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important; width: 100% !important;
  }
  .wel-inside-inner > .wp-block-columns { gap: 40px; }
  .wel-split-media { order: 2; }
}
@media (max-width: 600px) {
  .wel-title { font-size: clamp(44px, 13vw, 64px); }
  .wel-quote { font-size: clamp(30px, 8.5vw, 40px); }
  .wel-section .wel-btn-solid .wp-block-button__link,
  .wel-section .wel-btn-outline .wp-block-button__link { display: block; text-align: center; }
}