/* ============================================================================
   Swell — Blog "Convert" section  ·  Three doorways (dark)
   ----------------------------------------------------------------------------
   The end-of-article conversion block: a deep-ocean band that interrupts the
   sand reading surface, carrying a header, a guest-review widget, three photo
   "doorway" links, and a credibility stat row. Sits between the article body
   and "Related reading" (see single.php + template-parts/blog-convert.php).
   Prefix: cx-

   Tokens this component needs that aren't in tokens.css are defined here, scoped
   to .cx-convert so nothing global is overridden (notably --ease-swell, which
   the theme already defines with a different curve). Tokens the theme already
   provides (--font-display, --shadow-sm/lg, --ease-swell, --gutter) are reused.
   ========================================================================== */
.cx-convert {
  --font-body:   var(--font-sans);
  --cream:       #faf6ec;   /* article sand surface (light)        */
  --ink:         #0d1c20;   /* primary text on light               */
  --ink-soft:    #2a3b3f;   /* secondary text on light             */
  --coral:       #ee6a47;   /* accent — stars, focus rings, seam   */
  --coral-deep:  #c8462a;
  --teal-deep:   #0b6b6c;
  --teal-pale:   #a4d3c8;   /* italic emphasis + eyebrow on dark   */
  --teal-300:    #6ec7c6;
  --night:       #0a1d22;   /* band top                            */
  --night-2:     #0f2a30;   /* band bottom                         */
  --hairline:    rgba(13, 28, 32, 0.16);
}

/* ---------------------------------------------------------------------------
   Section shell — a deliberate deep-ocean band that interrupts the (sand)
   article surface so the photography pops.
   --------------------------------------------------------------------------- */
.cx-c1 { padding: clamp(40px, 5vw, 64px) 0 clamp(8px, 2vw, 16px); }   /* base */

.cx-c1--dark {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(15,154,154,0.18), transparent 58%),
    linear-gradient(178deg, var(--night, #0a1d22) 0%, var(--night-2, #0f2a30) 100%);
  padding: clamp(54px, 7vw, 92px) 0 clamp(48px, 6vw, 80px);
}
/* coral hairline seam along the top edge */
.cx-c1--dark::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238,106,71,0.55), transparent);
}

/* ---------------------------------------------------------------------------
   Header (eyebrow · headline · sub) — centered
   --------------------------------------------------------------------------- */
.cx-c1__head { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; display: flex; flex-direction: column; align-items: center; }
.cx-c1__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); margin: 16px 0 0; max-width: 18ch; text-wrap: balance; }
.cx-c1__title i { font-style: italic; color: var(--teal-deep); }
.cx-c1__sub { font-family: var(--font-body); font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; max-width: 52ch; }

.cx-c1--dark .cx-c1__title { color: #fff; }
.cx-c1--dark .cx-c1__title i { color: var(--teal-pale); }
.cx-c1--dark .cx-c1__sub { color: rgba(244,238,227,0.78); }

/* eyebrow */
.cx-eyebrow { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--coral); display: inline-flex; align-items: center; gap: 12px; }
.cx-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.cx-eyebrow--center { justify-content: center; }
.cx-eyebrow--light { color: var(--teal-pale); }

/* ---------------------------------------------------------------------------
   Review / trust widget — a frosted pill: guest faces · rating · stars
   --------------------------------------------------------------------------- */
.cx-trust { display: inline-flex; align-items: center; gap: clamp(13px, 1.4vw, 18px); margin-top: clamp(22px, 2.6vw, 30px); padding: 10px 22px 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cx-trust__faces { display: inline-flex; }
.cx-trust__face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #14313a; }
.cx-trust__face + .cx-trust__face { margin-left: -11px; }
.cx-trust__rating { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; color: #fff; }
.cx-trust__div { width: 1px; height: 28px; background: rgba(255,255,255,0.18); }
.cx-trust__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.cx-trust__stars { display: inline-flex; gap: 2px; color: var(--coral); }
.cx-trust__stars svg { width: 14px; height: 14px; display: block; }
.cx-trust__src { font-family: var(--font-body); font-size: 12.5px; line-height: 1.2; color: rgba(244,238,227,0.72); }
.cx-trust__src b { color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------------------
   The three doorway cards
   --------------------------------------------------------------------------- */
.cx-c1__grid { max-width: 1180px; margin: clamp(30px, 3.5vw, 46px) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); }

.cx-door { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; color: #fff; text-decoration: none; box-shadow: var(--shadow-sm); isolation: isolate; transition: transform 0.5s var(--ease-swell), box-shadow 0.5s var(--ease-swell); }
.cx-door__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-swell); }
.cx-door__veil { position: absolute; inset: 0; background: linear-gradient(178deg, rgba(6,29,40,0) 26%, rgba(6,29,40,0.22) 48%, rgba(6,29,40,0.82) 100%); }
.cx-door__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px, 2vw, 28px); }
.cx-door__cat { font-family: var(--font-body); font-weight: 600; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
.cx-door__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2vw, 30px); line-height: 1.04; margin: 8px 0 0; text-shadow: 0 1px 18px rgba(6,29,40,0.4); }
/* description is collapsed at rest and expands on hover (see @media hover) */
.cx-door__d { font-family: var(--font-body); font-weight: 400; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.9); margin: 9px 0 0; max-width: 30ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease-swell), opacity 0.4s var(--ease-swell), margin 0.5s var(--ease-swell); }
.cx-door__go { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.cx-door__go svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease-swell); }
/* corner pin — frosted disc holding the lucide icon */
.cx-door__pin { position: absolute; top: 16px; left: 16px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(13,53,55,0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.cx-door__pin svg { width: 18px; height: 18px; color: #fff; }

@media (hover: hover) {
  .cx-door:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .cx-door:hover .cx-door__img { transform: scale(1.06); }
  .cx-door:hover .cx-door__d { max-height: 80px; opacity: 1; margin-top: 9px; }
  .cx-door:hover .cx-door__go svg { transform: translateX(5px); }
}
.cx-door:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

/* darker, light-ringed cards on the dark band */
.cx-c1--dark .cx-door { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 20px 54px rgba(0,0,0,0.5); }
@media (hover: hover) {
  .cx-c1--dark .cx-door:hover { box-shadow: inset 0 0 0 1px rgba(164,211,200,0.4), 0 30px 72px rgba(0,0,0,0.62); }
}

/* ---------------------------------------------------------------------------
   Credibility stat row
   --------------------------------------------------------------------------- */
.cx-c1__stats { max-width: 1180px; margin: clamp(38px, 4.5vw, 60px) auto 0; padding: clamp(28px, 3vw, 40px) var(--gutter) 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; justify-content: center; align-items: flex-start; gap: clamp(26px, 5vw, 80px); flex-wrap: wrap; }
.cx-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; position: relative; }
.cx-stat + .cx-stat::before { content: ""; position: absolute; left: calc(clamp(26px, 5vw, 80px) / -2); top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,0.14); }
.cx-stat b { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1; color: #fff; }
.cx-stat span { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,238,227,0.6); }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .cx-c1__grid { grid-template-columns: 1fr; max-width: 460px; }
  .cx-door { aspect-ratio: 16 / 10; }
  .cx-door__d { max-height: 80px; opacity: 1; margin-top: 9px; }   /* show desc; no hover on touch */
}
@media (max-width: 560px) {
  .cx-trust { flex-wrap: wrap; justify-content: center; border-radius: 22px; }
  .cx-stat + .cx-stat::before { display: none; }
}