/* ==========================================================================
   Feature visuals: the shared frame.

   A feature page shows one picture of the real product, drawn in HTML and CSS,
   at the bottom of the text column, under the feature's words. This file holds
   what every picture shares: the product card, one explained highlight (ring +
   plain label), the soft-fade crop, the caption, the video block, and a reset so
   the theme's own type rules do not reach into the picture.

   Each picture keeps its own styles next to its markup:
   template-parts/feature-visuals/<slug>.css (loaded on that page only).

   Rules of the road
   - Inside a picture, every selector sits under .fv-ui (the plugin CSS copied
     into <slug>.css is scoped that way by visual-tools/fv-extract.mjs).
   - The picture is as wide as the text column: 700 to 820px on a desktop, 335px
     on a phone. Design for two tiers with container queries, never viewport media:
     wide = @container fv (min-width: 700px), narrow = @container fv (max-width: 699px).
   - Design the picture at the product's own size, then let --fv-zoom enlarge it
     (CSS zoom, about 1.05 to 1.2). Labels are counter-zoomed to stay 14px.
   - One highlight per picture at most, and only with a plain label that says what it
     shows and why it matters. No decoration. Nothing is cut off: no clipped words, half
     rows or sliced buttons. If a crop is needed, use the soft-fade helpers below.
   - Motion starts on .is-in and only inside prefers-reduced-motion: no-preference.
     The finished picture is the default state; "before" states live under
     .fv-js:not(.is-in) only.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-vf-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Stage: after the text, inside the text column ---- */
.fv-stage { margin: clamp(28px, 4vw, 44px) 0 0; }
.fv-stage__in { width: 100%; }
.fv-stage--has-video .fv-video { margin-bottom: clamp(24px, 3vw, 36px); }

/* ---- Video slot (shown only when the post has mk_feature_video) ---- */
.fv-video {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: var(--mk-ink);
  box-shadow: var(--shadow-m);
}
.fv-video iframe,
.fv-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  background: var(--mk-ink);
}

/* ---- The figure: one product card, one caption ---- */
.fv {
  container: fv / inline-size;
  width: 100%;
  max-width: 820px;
  margin: 0;
}
.fv__shot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgb(24 32 33 / 0.08);
  box-shadow: 0 1px 3px rgb(24 32 33 / 0.08), 0 28px 64px -28px rgb(24 32 33 / 0.28);
}
/* No camera zoom: nothing is cropped by a move. (.fv__cam is only a wrapper now.) */
.fv__cam { display: block; }

.fv__cap {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--mk-muted);
  text-align: left;
  text-wrap: pretty;
}
.fv__cap strong { color: var(--mk-ink); font-weight: 600; }

/* ---- Inside the picture: reset, so the theme's element rules stay out ---- */
.fv-ui {
  zoom: var(--fv-zoom, 1);
  position: relative;
  font-family: Montserrat, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: #0f172a;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  user-select: none;
  pointer-events: none;
}
.fv-ui *,
.fv-ui *::before,
.fv-ui *::after { box-sizing: border-box; }
.fv-ui :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote, pre, fieldset, legend) {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
}
.lx-feature-prose .fv-ui :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li) { margin: 0; padding: 0; }
.fv-ui :where(ul, ol) { list-style: none; }
.fv-ui :where(a) { color: inherit; text-decoration: none; }
.fv-ui :where(button, input, select, textarea) {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
}
.fv-ui :where(button) { cursor: default; }
.fv-ui :where(table) { border-collapse: collapse; border-spacing: 0; width: auto; }
.fv-ui :where(th, td) { padding: 0; text-align: left; font-weight: inherit; vertical-align: top; }
.fv-ui :where(strong, b) { font-weight: 700; }
.fv-ui :where(img, svg, video) { display: inline-block; max-width: none; height: auto; }
.fv-ui :where(svg) { flex: none; }
.fv-ui :where(hr) { margin: 0; border: 0; }

/* dashicons: WordPress's own icon font, which the plugin uses for most staff icons.
   The font file address is added by inc/enqueue.php. Glyph rules are at the end of this file. */
.fv-ui .dashicons,
.fv-ui .dashicons-before::before {
  font-family: dashicons;
  display: inline-block;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 20px;
  height: 20px;
  font-size: 20px;
  vertical-align: top;
  text-align: center;
}

/* ---- Highlight ring and label (the "look here" device) ----
   Put <i class="fv-ring"></i> and <b class="fv-tag fv-tag--t">Label</b> inside any
   element that has the class fv-hot (position: relative). Labels are counter-zoomed
   so they read as 14px site type whatever the picture's zoom is. */
.fv-hot { position: relative; }
.fv-ring {
  position: absolute;
  inset: -6px;
  z-index: 2;
  display: block;
  border: 2px solid var(--mk-blue);
  border-radius: 12px;
  box-shadow: 0 0 0 5px rgb(4 120 87 / 0.14);
  pointer-events: none;
  transition: opacity 0.7s ease 0.6s, scale 0.8s var(--ease-out) 0.6s;
}
.fv-tag {
  position: absolute;
  z-index: 4;
  zoom: calc(1 / var(--fv-zoom, 1));
  width: max-content;
  max-width: 230px;
  padding: 7px 12px;
  border-radius: 12px;
  background: var(--mk-blue);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: normal;
  text-wrap: balance;
  box-shadow: var(--shadow-s);
  pointer-events: none;
  transition: opacity 0.6s ease 0.9s, translate 0.7s var(--ease-out) 0.9s;
}
.fv-tag--t  { bottom: calc(100% + 14px); left: 0; }
.fv-tag--tr { bottom: calc(100% + 14px); right: 0; }
.fv-tag--b  { top: calc(100% + 14px); left: 0; }
.fv-tag--br { top: calc(100% + 14px); right: 0; }
.fv-tag--l  { right: calc(100% + 14px); top: 50%; translate: 0 -50%; }
.fv-tag--r  { left: calc(100% + 14px); top: 50%; translate: 0 -50%; }
.fv-tag--dark { background: var(--mk-ink); }

.fv-js:not(.is-in) .fv-ring { opacity: 0; scale: 0.97; }
.fv-js:not(.is-in) .fv-tag { opacity: 0; }
.fv-js:not(.is-in) .fv-tag--t,
.fv-js:not(.is-in) .fv-tag--tr { translate: 0 6px; }
.fv-js:not(.is-in) .fv-tag--b,
.fv-js:not(.is-in) .fv-tag--br { translate: 0 -6px; }

/* ---- Soft-fade crop: when a picture must stop short of the product's full screen, stop on a
   clean boundary and fade out, never through words. Put class fv-fade-b on any position: relative
   box and its bottom fades to white; fv-fade-t fades the top, fv-fade-r the right edge. ---- */
.fv-fade-b::after,
.fv-fade-t::before,
.fv-fade-r::after {
  content: "";
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.fv-fade-t::before { left: 0; right: 0; top: 0; height: var(--fv-fade, 56px); background: linear-gradient(to top, rgb(255 255 255 / 0), var(--fv-fade-bg, #fff)); }
.fv-fade-b::after { left: 0; right: 0; bottom: 0; height: var(--fv-fade, 56px); background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--fv-fade-bg, #fff)); }
.fv-fade-r::after { top: 0; bottom: 0; right: 0; width: var(--fv-fade, 56px); background: linear-gradient(to right, rgb(255 255 255 / 0), var(--fv-fade-bg, #fff)); }

/* ---- Narrow column: calmer card ---- */
@container fv (max-width: 699px) {
  .fv__shot { border-radius: 14px; }
}

/* ---- Reduced motion: the finished picture, nothing moving ---- */
@media (prefers-reduced-motion: reduce) {
  .fv-ring,
  .fv-tag { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Dashicons glyphs: only the ones the pictures use (from WordPress core's dashicons.css).
   ========================================================================== */
.fv-ui .dashicons-arrow-down-alt2:before{content:"\f347"}
.fv-ui .dashicons-calendar-alt:before{content:"\f508"}
.fv-ui .dashicons-calendar:before{content:"\f145"}
.fv-ui .dashicons-clipboard:before{content:"\f481"}
.fv-ui .dashicons-clock:before{content:"\f469"}
.fv-ui .dashicons-dismiss:before{content:"\f153"}
.fv-ui .dashicons-download:before{content:"\f316"}
.fv-ui .dashicons-lightbulb:before{content:"\f339"}
.fv-ui .dashicons-lock:before{content:"\f160"}
.fv-ui .dashicons-media-document:before{content:"\f497"}
.fv-ui .dashicons-media-spreadsheet:before{content:"\f495"}
.fv-ui .dashicons-money-alt:before{content:"\f18e"}
.fv-ui .dashicons-portfolio:before{content:"\f322"}
.fv-ui .dashicons-search:before{content:"\f179"}
.fv-ui .dashicons-text-page:before{content:"\f121"}
.fv-ui .dashicons-warning:before{content:"\f534"}
.fv-ui .dashicons-yes-alt:before{content:"\f12a"}
.fv-ui .dashicons-yes:before{content:"\f147"}

/* ==========================================================================
   Marketing shots: the style every feature page now uses.

   A real, cropped screenshot (made by _tools/marketing/shoot-mkt.mjs) in a clean
   frame on a light backdrop, with an optional smaller second shot overlapping a
   corner. Markup comes from mk_fv_shot() in template-parts/feature-visuals/_loader.php.
   Rules for the pictures themselves: _tools/marketing/STYLE.md.

   <figure class="fvs fvs--blue [fvs--has-detail fvs--detail-br|bl|side] [fvs--detail-phone]" data-fv>
     <div class="fvs__stage">
       <div class="fvs__shot fvs__main"><img|picture></div>
       <div class="fvs__shot fvs__detail"><img></div>        (optional)
     </div>
     <figcaption class="fv__cap">...</figcaption>             (optional)
   </figure>

   Sizes are in cqi (1% of the figure's width), so the overlap keeps its shape
   at every width. Tune one figure with --fvs-detail-w and --fvs-drop (set by
   mk_fv_shot() from detail_width / detail_drop). Nothing else is per page.
   ========================================================================== */

.fvs {
  container: fvs / inline-size;
  --fvs-pad: 4.5cqi;          /* backdrop padding around the main shot */
  --fvs-detail-w: 38cqi;      /* width of the detail shot */
  --fvs-drop: 10cqi;          /* how far the detail hangs below the main shot */
  --fvs-radius: 14px;         /* corners of a shot */
  --fvs-line: rgb(24 32 33 / 0.08);
  width: 100%;
  max-width: 820px;
  margin: 0;
}

/* ---- The backdrop: soft, light, on the site's tokens ---- */
.fvs__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--fvs-pad);
  border-radius: var(--radius-xl);
  border: 1px solid rgb(24 32 33 / 0.05);
  background:
    radial-gradient(90% 70% at 0% 0%, var(--mk-pale-blue) 0%, rgb(236 253 245 / 0) 70%),
    radial-gradient(70% 60% at 100% 100%, rgb(4 120 87 / 0.07) 0%, rgb(4 120 87 / 0) 70%),
    var(--mk-soft);
}
.fvs--soft .fvs__stage { background: var(--mk-soft); }
.fvs--has-detail .fvs__stage { padding-bottom: calc(var(--fvs-pad) + var(--fvs-drop)); }

/* ---- A shot: rounded, a hairline edge, a soft layered shadow ---- */
.fvs__shot {
  position: relative;
  grid-area: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--fvs-radius);
  background: #fff;
  box-shadow:
    0 0 0 1px var(--fvs-line),
    0 1px 2px rgb(24 32 33 / 0.05),
    0 8px 20px -10px rgb(24 32 33 / 0.14),
    0 28px 56px -28px rgb(24 32 33 / 0.26);
}
.fvs__shot img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.fvs__shot picture { display: block; }
.lx-feature-prose .fvs img { margin: 0; }

/* ---- The detail: smaller, on top, overlapping a bottom corner ---- */
.fvs__detail {
  z-index: 2;
  width: var(--fvs-detail-w);
  align-self: end;
  justify-self: end;
  margin-right: calc(var(--fvs-pad) * -0.4);
  margin-bottom: calc(var(--fvs-drop) * -1);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgb(24 32 33 / 0.1),
    0 2px 4px rgb(24 32 33 / 0.06),
    0 14px 30px -10px rgb(24 32 33 / 0.24),
    0 36px 64px -24px rgb(24 32 33 / 0.32);
}
.fvs--detail-bl .fvs__detail {
  justify-self: start;
  margin-right: 0;
  margin-left: calc(var(--fvs-pad) * -0.4);
}

/* The detail beside the main shot instead of over it (detail_pos 'side'): for a tall detail that must not
   cover anything. Both stay fully visible; on a narrow figure it stacks like the others. */
.fvs--detail-side .fvs__stage {
  grid-template-columns: minmax(0, 1fr) var(--fvs-detail-w);
  column-gap: calc(var(--fvs-pad) * 0.7);
  align-items: center;
  padding-bottom: var(--fvs-pad);
}
.fvs--detail-side .fvs__main { grid-area: 1 / 1; }
/* It tucks a little over the main shot's right edge, so the two read as one scene. */
.fvs--detail-side .fvs__detail {
  position: relative;
  z-index: 2;
  grid-area: 1 / 2;
  width: auto;
  justify-self: stretch;
  align-self: center;
  margin: 0 0 0 calc(var(--fvs-pad) * -0.7 - 10px);
}

/* A client-side shot drawn in the same phone as the promo videos (Marketing guide 13, the phone in
   projects/chat-bubble-to-messages): 776 by 1396 at video size, a 4px rim and 10px bezel, concentric corners
   (105, 101, 91), side keys, a camera island, a status bar, the studio's site bar and a home bar. Every size is that
   video size times --u, so the phone keeps its proportions at any width. */
.fvs--detail-phone .fvs__detail {
  --u: calc(29cqi / 776);
  position: relative;
  box-sizing: border-box;
  width: calc(var(--u) * 776);
  height: calc(var(--u) * 1396);
  padding: calc(var(--u) * 10);
  border: calc(var(--u) * 4) solid #3A4560;
  border-radius: calc(var(--u) * 105);
  background: #05070D;
  box-shadow: 0 calc(var(--u) * 28) calc(var(--u) * 56) rgb(9 70 46 / 0.3);
}
.fvs--detail-phone .fvs__btn {
  position: absolute;
  width: calc(var(--u) * 9);
  border-radius: calc(var(--u) * 5);
  background: #2F3A52;
}
.fvs--detail-phone .fvs__btn--mute { top: calc(var(--u) * 214); left: calc(var(--u) * -12); height: calc(var(--u) * 52); }
.fvs--detail-phone .fvs__btn--up { top: calc(var(--u) * 318); left: calc(var(--u) * -12); height: calc(var(--u) * 96); }
.fvs--detail-phone .fvs__btn--down { top: calc(var(--u) * 440); left: calc(var(--u) * -12); height: calc(var(--u) * 96); }
.fvs--detail-phone .fvs__btn--power { top: calc(var(--u) * 390); right: calc(var(--u) * -12); height: calc(var(--u) * 150); }
.fvs--detail-phone .fvs__screen {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--u) * 91);
  background: #F6F7F9;
}
.fvs--detail-phone .fvs__island {
  position: absolute;
  top: calc(var(--u) * 12);
  left: 50%;
  z-index: 3;
  width: calc(var(--u) * 196);
  height: calc(var(--u) * 46);
  border-radius: calc(var(--u) * 23);
  background: #05070D;
  transform: translateX(-50%);
}
.fvs--detail-phone .fvs__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 70);
  padding: 0 calc(var(--u) * 58) 0 calc(var(--u) * 70);
  background: #FFFFFF;
  font: 600 calc(var(--u) * 28)/1 Inter, system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #0B0B0C;
}
.fvs--detail-phone .fvs__icons { display: flex; align-items: center; gap: calc(var(--u) * 14); }
.fvs--detail-phone .fvs__icons svg { display: block; width: auto; height: calc(var(--u) * 24); fill: #0B0B0C; }
.fvs--detail-phone .fvs__sitebar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  height: calc(var(--u) * 96);
  padding: 0 calc(var(--u) * 40);
  border-bottom: 1px solid #ECEDEF;
  background: #FFFFFF;
  font-size: calc(var(--u) * 30);
  color: #1B1A17;
}
.fvs--detail-phone .fvs__sitebar b { font-family: Georgia, serif; font-weight: 700; }
.fvs--detail-phone .fvs__sitebar span { flex: 1; color: #6A6A66; }
.fvs--detail-phone .fvs__sitebar svg { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.fvs--detail-phone .fvs__screen img { display: block; width: 100%; border-radius: 0; }
.fvs--detail-phone .fvs__home {
  position: absolute;
  bottom: calc(var(--u) * 18);
  left: 50%;
  z-index: 3;
  width: calc(var(--u) * 260);
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: #0B0B0C;
  transform: translateX(-50%);
}

/* ---- Motion: a gentle rise when the picture scrolls in (assets/js/feature-visuals.js adds
   .fv-js, then .is-in), and a slight lift on hover. The finished picture is the default state;
   nothing moves for visitors who asked for reduced motion. ---- */
@media (prefers-reduced-motion: no-preference) {
  .fvs__shot {
    transition:
      opacity 0.8s var(--ease-out),
      translate 0.9s var(--ease-out),
      box-shadow 0.35s var(--ease-soft);
  }
  .fvs__detail { transition-delay: 0.18s, 0.18s, 0s; }
  .fvs.fv-js:not(.is-in) .fvs__main { opacity: 0; translate: 0 18px; }
  .fvs.fv-js:not(.is-in) .fvs__detail { opacity: 0; translate: 0 30px; }

  @media (hover: hover) {
    .fvs.is-in .fvs__stage:hover .fvs__shot { transition-delay: 0s; }
    .fvs.is-in .fvs__stage:hover .fvs__main { translate: 0 -3px; }
    .fvs.is-in .fvs__stage:hover .fvs__detail { translate: 0 -7px; }
  }
}

/* ---- Narrow figure (phones): the detail still overlaps a bottom corner of the main shot, as on desktop, a
   little wider so its text stays readable. Every figure gets the same size and drop here, so phones look alike
   across pages (the per-figure detail_width / detail_drop are desktop tuning). ---- */
@container fvs (max-width: 560px) {
  .fvs__stage { --fvs-pad: 4cqi; --fvs-radius: 10px; border-radius: var(--radius-l); }
  .fvs--has-detail .fvs__stage { padding-bottom: calc(var(--fvs-pad) + 12cqi); }
  .fvs--has-detail .fvs__detail {
    width: 50cqi;
    margin: 0 -1.5cqi -12cqi 0;
    border-radius: 10px;
    box-shadow:
      0 0 0 1px rgb(24 32 33 / 0.1),
      0 2px 6px rgb(24 32 33 / 0.08),
      0 18px 36px -12px rgb(24 32 33 / 0.35);
  }
  .fvs--has-detail.fvs--detail-bl .fvs__detail { margin: 0 0 -12cqi -1.5cqi; }

  /* The side detail (the client portal's sign-in) drops off the side and tucks over the bottom-right corner. */
  .fvs--detail-side .fvs__stage { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--fvs-pad) * 2); }
  .fvs--detail-side .fvs__detail {
    grid-area: 2 / 1;
    width: 58%;
    justify-self: end;
    align-self: start;
    margin: -9cqi calc(var(--fvs-pad) * -0.5) 0 0;
  }

  /* The client's phone overlaps a bottom corner too, with its own rounded corners. */
  .fvs--has-detail.fvs--detail-phone .fvs__stage { padding-bottom: 14cqi; }
  .fvs--has-detail.fvs--detail-phone .fvs__detail {
    --u: calc(44cqi / 776);
    width: calc(var(--u) * 776);
    margin: 0 -1.5cqi -10cqi 0;
    border-radius: calc(var(--u) * 105);
    box-shadow: 0 calc(var(--u) * 28) calc(var(--u) * 56) rgb(9 70 46 / 0.3);
  }
  .fvs--has-detail.fvs--detail-phone.fvs--detail-bl .fvs__detail { margin: 0 0 -10cqi -1.5cqi; }
}