/* ============================================================================
   Swell — Mid-Article CTA  (prefix: mx-)
   ----------------------------------------------------------------------------
   Faithful build of the "Mid-Article CTA" design handoff: a deep-ocean band
   that interrupts the sand reading surface, seamed top + bottom so it reads as
   an intentional descent into the water. Left-aligned editorial header, three
   photo "doorway" cards with frosted glass caption panels, and a conversion row
   (guest-review trust widget + a primary "Plan your week" action).

   Self-contained: all tokens are scoped to .mx so the block looks identical
   regardless of the active theme. NO parallax / scroll effects — the band is
   fully static.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Host-theme cascade defense.
   The band is injected INTO the post body (.wp / .entry-content …), so the
   theme's article rules for h2/h3/p/a would otherwise bleed in (heading
   border-tops, the coral ::before dash on h3, paragraph margins/colours, link
   underlines). Each rule below is prefixed with .mx so it out-specifies a
   `.theme-class element` selector, restoring the block's own values. Elements
   that carry the block's own backgrounds/links (.mx-door, .mx__cta) are set
   explicitly, never blanket-reset.
   --------------------------------------------------------------------------- */
.mx .mx__title { margin: 18px 0 0; padding: 0; border: 0; clear: none;
  font-family: var(--mx-font-display); font-weight: 400; color: #fff;
  font-size: clamp(34px, 5vw, 62px); line-height: 1.0; letter-spacing: -0.02em; }
.mx .mx__title i { font-style: italic; color: var(--mx-teal-300); }
.mx .mx__sub { margin: 16px 0 0; padding: 0;
  font-family: var(--mx-font-sans); font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.62; color: rgba(244,238,227,0.82); }
.mx .mx-door__t { display: block; gap: 0; margin: 6px 0 0; padding: 0; border: 0; clear: none;
  font-family: var(--mx-font-display); font-weight: 400; color: #fff;
  font-size: clamp(22px, 1.9vw, 28px); line-height: 1.05; }
.mx .mx-door__t::before, .mx .mx-door__t::after { content: none; }
.mx .mx-door__d { margin: 7px 0 0; padding: 0;
  font-family: var(--mx-font-sans); font-weight: 400; font-size: 13px;
  line-height: 1.5; color: rgba(244,238,227,0.86); }
/* neutralize theme link underlines only — keep each element's own box-shadow
   (card lift / coral button glow) and background colour. !important is needed
   to beat layout-scoped selectors like `.art-main[data-links="reversed"] .wp a`. */
.mx a.mx-door, .mx a.mx-door:hover,
.mx a.mx__cta, .mx a.mx__cta:hover {
  text-decoration: none !important; background-image: none !important;
}

.mx {
  /* --- design tokens (scoped) --- */
  --mx-coral-400: #ff8b6a;
  --mx-coral-500: #ee6a47;
  --mx-coral-600: #d4502e;
  --mx-teal-300:  #6ec7c6;
  --mx-sand-50:   #f8f1e6;
  --mx-font-display: 'Instrument Serif', 'Cormorant Garamond', 'Times New Roman', serif;
  --mx-font-sans:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mx-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --mx-gutter:    clamp(20px, 4vw, 48px);
  --mx-radius-md: 10px;
  --mx-shadow-xs: 0 1px 2px rgba(10,31,36,0.06);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(130% 90% at 82% -12%, rgba(15,154,154,0.28), transparent 55%),
    radial-gradient(120% 90% at 8% 8%, rgba(20,120,140,0.20), transparent 52%),
    linear-gradient(176deg, #0b2429 0%, #0c2a30 46%, #081e24 100%);
  /* trimmed vertical padding so the band reads as an interruption, not the end
     of the article. */
  padding: clamp(34px, 4vw, 62px) 0 clamp(26px, 3vw, 44px);
}

/* thin coral filament across the top edge — the section-break accent */
.mx::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(238,106,71,0.7), transparent);
}

/* top + bottom horizon seams — sand melts into ocean and back */
.mx__seam { position: absolute; left: 0; right: 0; height: clamp(48px, 6vw, 90px); z-index: 0; pointer-events: none; }
.mx__seam--top    { top: 0;    background: linear-gradient(180deg, var(--mx-sand-50) 0%, rgba(248,241,230,0) 100%); opacity: 0.14; }
.mx__seam--bottom { bottom: 0; background: linear-gradient(0deg,   var(--mx-sand-50) 0%, rgba(248,241,230,0) 100%); opacity: 0.10; }

/* faint contour lines behind everything — sun-on-water texture (static) */
.mx__contours {
  position: absolute; inset: -10% -5%; z-index: 0; opacity: 0.5; pointer-events: none;
  background:
    repeating-radial-gradient(120% 120% at 78% 6%,
      rgba(164,211,200,0) 0 38px,
      rgba(164,211,200,0.05) 38px 39px,
      rgba(164,211,200,0) 39px 78px);
  -webkit-mask-image: radial-gradient(120% 100% at 78% 6%, #000, transparent 70%);
  mask-image: radial-gradient(120% 100% at 78% 6%, #000, transparent 70%);
}

.mx__wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 var(--mx-gutter); }

/* ---- editorial header ---- */
.mx__head { max-width: 720px; }
.mx__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mx-font-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--mx-coral-400);
}
.mx__eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.mx__title {
  font-family: var(--mx-font-display); font-weight: 400;
  font-size: clamp(34px, 5vw, 62px); line-height: 1.0; letter-spacing: -0.02em;
  color: #fff; margin: 18px 0 0; text-wrap: balance;
}
.mx__title i { font-style: italic; color: var(--mx-teal-300); }
.mx__sub {
  font-family: var(--mx-font-sans); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.62;
  color: rgba(244,238,227,0.82); margin: 16px 0 0; max-width: 52ch;
}

/* ---- triptych of doorways ---- */
.mx__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(30px, 3.4vw, 46px);
}

.mx-door {
  position: relative; display: block; text-decoration: none; color: #fff;
  border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5;
  isolation: isolate; background: #0b2429;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09), 0 22px 56px rgba(0,0,0,0.5);
  transition: transform 0.55s var(--mx-ease), box-shadow 0.55s var(--mx-ease);
}
.mx-door__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--mx-ease); }
.mx-door__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(179deg, rgba(6,29,40,0.05) 20%, rgba(6,29,40,0.28) 46%, rgba(6,29,40,0.9) 100%); }

/* editorial index number, top-left */
.mx-door__idx {
  position: absolute; top: 16px; left: 20px; z-index: 3;
  font-family: var(--mx-font-display); font-style: italic; font-weight: 400;
  font-size: 30px; line-height: 1; color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 12px rgba(6,29,40,0.5);
}
/* small pin icon, top-right */
.mx-door__pin {
  position: absolute; top: 15px; right: 16px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(13,53,55,0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
}
.mx-door__pin svg { width: 18px; height: 18px; color: #fff; }

/* frosted glass panel at the base — clean, always-legible */
.mx-door__panel {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  padding: clamp(15px, 1.5vw, 20px) clamp(16px, 1.6vw, 20px) clamp(14px, 1.4vw, 18px);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(9,32,38,0.36), rgba(9,32,38,0.62));
  -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.mx-door__cat { font-family: var(--mx-font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mx-teal-300); }
.mx-door__t { font-family: var(--mx-font-display); font-weight: 400; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.05; margin: 6px 0 0; }
.mx-door__d { font-family: var(--mx-font-sans); font-weight: 400; font-size: 13px; line-height: 1.5; color: rgba(244,238,227,0.86); margin: 7px 0 0; }
.mx-door__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 13px;
  font-family: var(--mx-font-sans); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  padding-bottom: 3px; position: relative;
}
.mx-door__go::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--mx-coral-500); transform: scaleX(0.34); transform-origin: left; transition: transform 0.45s var(--mx-ease); }
.mx-door__go svg { width: 15px; height: 15px; color: var(--mx-coral-400); transition: transform 0.4s var(--mx-ease); }

@media (hover: hover) {
  .mx-door:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(164,211,200,0.4), 0 34px 76px rgba(0,0,0,0.6); }
  .mx-door:hover .mx-door__img { transform: scale(1.08); }
  .mx-door:hover .mx-door__go::after { transform: scaleX(1); }
  .mx-door:hover .mx-door__go svg { transform: translateX(5px); }
}
.mx-door:focus-visible { outline: 3px solid var(--mx-coral-500); outline-offset: 3px; }

/* ---- conversion row: trust widget + primary action ---- */
.mx__convert {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(30px, 3.6vw, 48px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid rgba(255,255,255,0.14);
}

.mx-trust { display: inline-flex; align-items: center; gap: clamp(12px, 1.3vw, 16px); }
.mx-trust__faces { display: inline-flex; }
.mx-trust__face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #0f2a30; }
.mx-trust__face + .mx-trust__face { margin-left: -13px; }
.mx-trust__rating { font-family: var(--mx-font-display); font-weight: 400; font-size: 32px; line-height: 1; color: #fff; }
.mx-trust__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mx-trust__stars { display: inline-flex; gap: 2px; color: var(--mx-coral-500); }
.mx-trust__stars svg { width: 15px; height: 15px; display: block; }
.mx-trust__src { font-family: var(--mx-font-sans); font-size: 12.5px; line-height: 1.2; color: rgba(244,238,227,0.72); }
.mx-trust__src b { color: #fff; font-weight: 600; }

.mx__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mx-font-sans); font-weight: 600; font-size: 14px; letter-spacing: 0.04em;
  color: #fff; text-decoration: none; cursor: pointer;
  padding: 15px 26px; border-radius: var(--mx-radius-md); border: 0;
  background: var(--mx-coral-500); box-shadow: 0 12px 30px rgba(238,106,71,0.32);
  transition: background 0.3s var(--mx-ease), transform 0.2s var(--mx-ease), box-shadow 0.3s var(--mx-ease);
}
.mx__cta svg { width: 18px; height: 18px; }
.mx__cta:hover { background: var(--mx-coral-600); box-shadow: 0 16px 38px rgba(238,106,71,0.42); }
.mx__cta:active { transform: scale(0.98); box-shadow: var(--mx-shadow-xs); }
.mx__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- "the article pauses / continues below" marker ----------------------
   Sits on the LIGHT reading surface, in the article column, just above the
   band — so the reader knows the article pauses for a CTA and resumes after it.
   It is a sibling of .mx (not full-bleed) and inherits the article's current
   text colour, so it stays legible on both the light and dark reading surfaces.
   Only the down arrow is brand coral. */
.mx-pause {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: clamp(30px, 4vw, 46px) 0 0; color: inherit;
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.mx-pause__line { height: 1px; width: min(90px, 16vw); background: currentColor; opacity: 0.2; }
.mx-pause__txt {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  opacity: 0.62;
}
.mx-pause__txt svg { width: 14px; height: 14px; color: #ee6a47; opacity: 1; }
@media (max-width: 520px) {
  .mx-pause { gap: 12px; }
  .mx-pause__line { width: 10vw; }
  .mx-pause__txt { font-size: 10px; letter-spacing: 0.16em; }
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .mx__grid { grid-template-columns: 1fr; max-width: 480px; }
  /* taller than the desktop hint's 16/10 so the top-left index number always
     clears the frosted caption panel on a single-column stack. */
  .mx-door { aspect-ratio: 4 / 3; }
}
@media (max-width: 620px) {
  .mx__convert { flex-direction: column; align-items: stretch; text-align: center; }
  .mx-trust { justify-content: center; }
  .mx-trust__meta { align-items: center; }
  .mx__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-door, .mx-door__img, .mx-door__go::after, .mx-door__go svg, .mx__cta { transition: none; }
}

/* ---- placement inside the article ----------------------------------------
   Break the band full-bleed out of the centered reading column, and clip the
   resulting horizontal overflow on the article wrapper WITHOUT breaking the
   theme's sticky surface toggle (clip, never hidden). The reading column
   (.wp / .ed-wrap) is centered, so 50% maps to the viewport centre. */
.swell-mid-cta {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(13px, 1.7vw, 20px);
  margin-bottom: clamp(20px, 2.4vw, 34px);
}
.art-main { overflow-x: clip; }

/* Fallback for themes where a full-bleed break-out isn't wanted / possible:
   add class .swell-mid-cta--contained on the section to keep it column-width. */
.swell-mid-cta--contained {
  width: auto; margin-left: 0; margin-right: 0;
  border-radius: 24px;
}
.swell-mid-cta--contained::before { border-radius: 24px 24px 0 0; }