/* ============================================================================
   YWF Media Kit — public page.
   Matches the Yoga with Florentia site language (same tokens as the Open
   Class form): Poppins, babe-blue on white, ink text, thin --line borders,
   paper panels, uppercase tracked labels. Scoped under .ywf-mk with its own
   tokens so it can neither be restyled by, nor leak into, the theme.
   Full-width layout; every platform is a collapsible fold. Print-friendly.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&family=Poppins:wght@300;400;500;600;700;800&display=swap');

.ywf-mk {
  --white:#FFFFFF; --paper:#F2F8FC; --cream:#DCEBF6;
  --ink:#15323F; --charcoal:#1F404D; --soft:#51626C; --mute:#8AA0AD;
  --line:#D5E5F1; --gold:#4E9BD0; --babe:#A8D6F0; --babe-deep:#7FC1E8;
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* full-bleed: break out of any theme/builder content column (same
     technique as the site's .hero-full in the Open Class form.css).
     !important is required: WP core's constrained-layout styles clamp
     entry-content children with max-width + margin:auto !important. */
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:0 !important;
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.ywf-mk *, .ywf-mk *::before, .ywf-mk *::after { box-sizing:border-box; }

/* ---------- full-width sections ---------- */
.ywf-mk-section { width:100%; max-width:none; margin:0; padding:clamp(2rem,4vw,3.2rem) clamp(1.25rem,4vw,4rem); border-bottom:1px solid var(--line); }
.ywf-mk-section:last-child { border-bottom:0; }
.ywf-mk-title {
  margin:0 0 1.6rem; font-weight:800; font-size:clamp(1.4rem,2.6vw,1.9rem);
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink);
}
.ywf-mk-handle { font-weight:500; font-size:.72em; color:var(--gold); text-transform:none; letter-spacing:0; }

/* ---------- hero banner ---------- */
.ywf-mk-hero { position:relative; width:100%; min-height:clamp(320px,55vh,560px); display:flex; align-items:flex-end; overflow:hidden; }
.ywf-mk-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.ywf-mk-hero-scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(13,28,38,.6), rgba(13,28,38,.08) 45%, rgba(13,28,38,.2)); }
.ywf-mk-hero-inner { position:relative; width:100%; padding:0 clamp(1.25rem,4vw,4rem) clamp(2rem,5vw,3.5rem); color:#fff; }
.ywf-mk-hero-title { margin:0; color:#fff; font-family:var(--sans); font-weight:800; text-transform:uppercase; font-size:clamp(2.2rem,5vw,4rem); line-height:1; letter-spacing:-.01em; }

/* ---------- full-width rows (stat cards & chart blocks) ----------
   Every row fills the whole line: 4 items → 1/4 each, 3 → 1/3 each;
   a partial last row stretches its items across the full width. */
.ywf-mk-row { display:flex; gap:1rem; margin-bottom:1rem; }
.ywf-mk-row > * { flex:1 1 0; min-width:0; }
.ywf-mk-row-charts { gap:1.5rem; margin-top:1.4rem; }
.ywf-mk-row-charts .ywf-mk-block { min-width:0; }

/* ---------- stat blocks ---------- */
.ywf-mk-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:1.8rem; }
.ywf-mk-stat { display:flex; flex-direction:column; padding:1.1rem 1.2rem; background:var(--white); border:1px solid var(--line); }
.ywf-mk-stat-num { font-weight:800; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.1; color:var(--ink); }
.ywf-mk-stat-label { margin-top:.35rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-weight:600; }
.ywf-mk-global .ywf-mk-stat { background:var(--paper); border-color:var(--cream); }
.ywf-mk-global .ywf-mk-stat-num { font-size:clamp(1.9rem,3vw,2.6rem); }

/* ---------- charts ---------- */
.ywf-mk-charts { display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:flex-start; }
/* inside a row, blocks must NOT fix their width — the row's flex:1 1 0
   distributes the full line evenly with no hole (standalone shortcode
   context keeps the old sizing) */
.ywf-mk-charts .ywf-mk-block { flex:0 1 280px; min-width:230px; }
.ywf-mk-block-title { margin:0 0 .7rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); }
.ywf-mk-chart canvas { max-width:100%; height:auto; }
.ywf-mk-row-charts .ywf-mk-chart { display:flex; justify-content:flex-start; }
/* the country ranking needs real room for its share bars */
.ywf-mk-row-charts .ywf-mk-block-wide { flex-grow:1.9; }

/* ---------- top countries: name + share bar + %, two columns of five ---------- */
.ywf-mk-countries { display:flex; gap:clamp(1.2rem,3vw,2.5rem); }
.ywf-mk-countries-col { flex:1 1 0; min-width:0; margin:0; padding:0; list-style:none; counter-reset:none; }
.ywf-mk-country { display:flex; align-items:center; gap:.6rem; padding:.34rem 0; }
.ywf-mk-country-name { flex:0 0 clamp(104px,36%,150px); font-size:.8rem; font-weight:600; color:var(--charcoal); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ywf-mk-country-track { flex:1 1 auto; height:6px; background:var(--cream); border-radius:999px; overflow:hidden; }
.ywf-mk-country-bar { display:block; height:100%; width:0; background:var(--ink); border-radius:999px; transition:width 1s cubic-bezier(.22,1,.36,1); }
.ywf-mk-country-pct { flex:0 0 auto; font-size:.76rem; font-weight:700; color:var(--soft); min-width:2.6em; text-align:right; }
@media (max-width:560px) { .ywf-mk-countries { flex-direction:column; gap:0; } }

/* ---------- top posts (global strip + per-platform strip) ---------- */
.ywf-mk-posts-title { margin:2rem 0 .9rem; font-size:.8rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); }
.ywf-mk-row-posts { gap:1rem; align-items:stretch; }
.ywf-mk-post {
  display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  text-decoration:none !important; color:var(--ink) !important; overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
a.ywf-mk-post:hover { box-shadow:0 10px 26px rgba(21,50,63,.13); transform:translateY(-3px); }
.ywf-mk-post-img { display:block; width:100%; aspect-ratio:4/5; background:var(--paper); overflow:hidden; }
.ywf-mk-post-img img { width:100%; height:100%; object-fit:cover; display:block; }
.ywf-mk-post-img-flat { background:linear-gradient(150deg, var(--paper), var(--cream)); }
.ywf-mk-post-body { display:flex; flex-direction:column; gap:.35rem; padding:.75rem .85rem .9rem; flex:1; }
.ywf-mk-post-meta { display:flex; align-items:center; gap:.6rem; }
.ywf-mk-post-platform { font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.ywf-mk-post-date { font-size:.66rem; color:var(--mute); }
.ywf-mk-post-title {
  font-size:.78rem; line-height:1.45; color:var(--charcoal); font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ywf-mk-post-stats { display:flex; flex-wrap:wrap; gap:.25rem .7rem; margin-top:auto; padding-top:.45rem; border-top:1px solid var(--line); }
.ywf-mk-post-stat { font-size:.66rem; color:var(--mute); white-space:nowrap; }
.ywf-mk-post-stat b { font-size:.78rem; color:var(--ink); font-weight:700; }
@media (max-width:760px) { .ywf-mk-row-posts { flex-wrap:wrap; } .ywf-mk-row-posts > * { flex:1 1 calc(50% - .5rem); } }

/* ---------- niches ---------- */
.ywf-mk-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.ywf-mk-chip { padding:.32rem .85rem; background:var(--cream); color:var(--charcoal); font-size:.8rem; font-weight:500; border-radius:999px; white-space:nowrap; }

/* ---------- trusted by: auto-sliding, swipeable carousel ---------- */
.ywf-mk-logos { overflow-x:auto; overflow-y:hidden; -ms-overflow-style:none; scrollbar-width:none; cursor:grab; -webkit-overflow-scrolling:touch; }
.ywf-mk-logos::-webkit-scrollbar { display:none; }
.ywf-mk-logos.is-dragging { cursor:grabbing; }
.ywf-mk-logos-track { display:flex; align-items:center; gap:clamp(2rem,5vw,4.5rem); width:max-content; padding:.4rem .2rem; }
.ywf-mk-logo { display:inline-flex; align-items:center; justify-content:center; min-height:56px; text-decoration:none !important; filter:grayscale(1); opacity:.75; transition:filter .2s, opacity .2s; flex:none; user-select:none; }
.ywf-mk-logo:hover { filter:grayscale(0); opacity:1; }
.ywf-mk-logo-img { max-height:56px; max-width:150px; width:auto; height:auto; object-fit:contain; display:block; pointer-events:none; }
.ywf-mk-logo-name { font-weight:800; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; color:var(--charcoal); white-space:nowrap; }

/* ---------- platform folds ---------- */
.ywf-mk-accounts .ywf-mk-title { margin-bottom:1.2rem; }
.ywf-mk-fold { background:var(--white); border:1px solid var(--line); margin-bottom:.7rem; }
.ywf-mk-fold-head {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; list-style:none; padding:1.1rem clamp(1.1rem,2vw,1.6rem);
  font-weight:800; font-size:1.02rem; text-transform:uppercase; letter-spacing:.05em;
}
.ywf-mk-fold-head::-webkit-details-marker { display:none; }
.ywf-mk-fold-head:hover { background:var(--paper); }
.ywf-mk-fold-name { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.ywf-mk-fold-teaser { display:flex; align-items:center; gap:.6rem; font-size:1rem; color:var(--ink); white-space:nowrap; }
.ywf-mk-fold-teaser small { font-size:.62rem; letter-spacing:.14em; color:var(--mute); font-weight:600; }
.ywf-mk-acc-arrow, .ywf-mk-fold .ywf-mk-acc-arrow { width:.55em; height:.55em; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(45deg); transition:transform .2s; margin-left:.3rem; }
.ywf-mk-fold[open] > summary .ywf-mk-acc-arrow { transform:rotate(-135deg); }
.ywf-mk-fold-body { padding:1.4rem clamp(1.1rem,2vw,1.6rem) 1.6rem; border-top:1px solid var(--line); }

/* ---------- portfolio accordion ---------- */
.ywf-mk-acc-item { border:1px solid var(--line); margin-bottom:.7rem; background:var(--white); }
.ywf-mk-acc-head {
  display:flex; align-items:center; gap:.7rem; cursor:pointer; list-style:none;
  padding:1.1rem 1.4rem; font-weight:800; font-size:.98rem; text-transform:uppercase; letter-spacing:.05em;
}
.ywf-mk-acc-head::-webkit-details-marker { display:none; }
.ywf-mk-acc-head:hover { background:var(--paper); }
.ywf-mk-acc-head .fa { color:var(--gold); width:1.2em; text-align:center; }
.ywf-mk-acc-head .ywf-mk-acc-arrow { margin-left:auto; }
.ywf-mk-acc-item[open] .ywf-mk-acc-arrow { transform:rotate(-135deg); }
.ywf-mk-acc-body { padding:0 1.4rem 1.4rem; border-top:1px solid var(--line); }
.ywf-mk-acc-desc { margin:1rem 0; color:var(--soft); max-width:75ch; }
.ywf-mk-cases { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; align-items:start; }
.ywf-mk-case { border:1px solid var(--line); background:var(--white); padding:0 0 .9rem; display:flex; flex-direction:column; gap:.4rem; }
.ywf-mk-case-img { width:100%; height:140px; object-fit:cover; display:block; }
/* embedded post preview (Instagram / TikTok blockquotes, YouTube iframe) —
   one homogeneous card size: every embed fills its card's width */
.ywf-mk-case-embed { padding:.5rem .5rem 0; }
.ywf-mk-case-embed .instagram-media,
.ywf-mk-case-embed .tiktok-embed { margin:0 auto !important; min-width:0 !important; width:100% !important; max-width:100% !important; }
.ywf-mk-yt { display:block; width:100%; aspect-ratio:16/9; border:0; }
/* cards with embeds need room for the platforms' fixed minimum widths */
.ywf-mk-cases:has(.ywf-mk-case-embedded) { grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); }
.ywf-mk-case-brand { margin:.6rem .9rem 0; font-size:.95rem; font-weight:700; color:var(--ink); }
.ywf-mk-case-year { font-weight:400; color:var(--mute); font-size:.85em; }
.ywf-mk-case-results { display:flex; flex-wrap:wrap; gap:.3rem .7rem; margin:0 .9rem; font-size:.78rem; color:var(--soft); }
.ywf-mk-case-metric::before { content:'•'; margin-right:.35rem; color:var(--babe-deep); }
.ywf-mk-case-metric:first-child::before { content:''; margin:0; }
.ywf-mk-case-link { margin:.2rem .9rem 0; align-self:flex-start; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink) !important; border-bottom:2px solid var(--babe-deep); text-decoration:none !important; padding-bottom:2px; font-weight:600; }
.ywf-mk-case-link:hover { color:var(--gold) !important; }

/* ---------- rates + bundles ----------
   Bundles render as stacked horizontal bands (never side-by-side columns).
   Both columns stretch to the same height; the bands share it equally. */
.ywf-mk-rates-layout { display:flex; gap:clamp(1.5rem,4vw,4rem); align-items:stretch; flex-wrap:wrap; }
.ywf-mk-rates-col { flex:1 1 420px; min-width:300px; }
.ywf-mk-bundles-col { flex:1 1 460px; min-width:300px; display:flex; flex-direction:column; }
.ywf-mk-subtitle { margin:0 0 1rem; font-size:.8rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); }
/* three identical cards: equal heights (they share the column exactly),
   constant 1rem gap, content anchored top-left — no floating whitespace */
.ywf-mk-bundles { flex:1; display:grid; grid-auto-rows:1fr; gap:1rem; }
.ywf-mk-bundle { display:flex; align-items:flex-start; gap:clamp(1rem,2vw,1.8rem); background:var(--paper); border:1px solid var(--cream); padding:.95rem 1.15rem; }
.ywf-mk-bundle-head { flex:0 0 130px; }
.ywf-mk-bundle-title { margin:0 0 .25rem; font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); }
.ywf-mk-bundle-price { font-weight:800; font-size:1.1rem; color:var(--ink); }
.ywf-mk-bundle-body { flex:1; min-width:0; }
.ywf-mk-bundle-desc { margin:0 0 .45rem; font-size:.76rem; color:var(--soft); }
.ywf-mk-bundle-items { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); gap:.3rem 1rem; }
.ywf-mk-bundle-items li { font-size:.76rem; color:var(--charcoal); padding-left:1rem; position:relative; }
.ywf-mk-bundle-items li::before { content:'✓'; position:absolute; left:0; color:var(--gold); font-weight:700; }
@media (max-width:560px) {
  .ywf-mk-bundle { flex-direction:column; gap:.6rem; }
  .ywf-mk-bundle-head { flex-basis:auto; }
}
/* elegant price lines, full column width — no table, no visible frame */
.ywf-mk-rates-list { width:100%; }
.ywf-mk-rate-row { display:flex; align-items:baseline; gap:.8rem; padding:.72rem .1rem; border-bottom:1px solid var(--line); }
.ywf-mk-rate-row:hover { background:var(--paper); }
.ywf-mk-rate-name { font-weight:600; font-size:.92rem; color:var(--ink); white-space:nowrap; }
.ywf-mk-rate-lead { flex:1 1 auto; min-width:2rem; border-bottom:1px dotted var(--mute); opacity:.45; transform:translateY(-.3em); }
.ywf-mk-rate-price { font-weight:700; font-size:.95rem; white-space:nowrap; color:var(--ink); }
.ywf-mk-rates-note { margin-top:1rem; font-size:.78rem; color:var(--mute); }

/* ---------- standard terms: collapsible full-width rows ---------- */
.ywf-mk-terms-intro { margin:0 0 1.4rem; color:var(--soft); max-width:85ch; }
.ywf-mk-term-item .ywf-mk-acc-head { text-transform:none; letter-spacing:.01em; font-weight:700; font-size:1rem; }
.ywf-mk-term-text { margin:1rem 0 0; font-size:.92rem; color:var(--soft); max-width:90ch; }

/* ---------- responsive ---------- */
@media (max-width:760px) {
  .ywf-mk-row { flex-wrap:wrap; }
  .ywf-mk-row > * { flex:1 1 calc(50% - .5rem); min-width:150px; }
  .ywf-mk-row-charts > * { flex:1 1 100%; }
}
@media (max-width:560px) {
  .ywf-mk-stats { grid-template-columns:repeat(2,1fr); }
  .ywf-mk-block { flex-basis:100%; }
  .ywf-mk-fold-teaser { display:none; }
}

/* ---------- entrance animations (public.js drives the .is-in flips) ----------
   Sections drift up as they enter the viewport; stat numbers count up and
   charts draw themselves (Chart.js renders lazily on reveal). Everything
   collapses to static for reduced-motion users and for print. */
.ywf-mk [data-ywf-mk-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.ywf-mk [data-ywf-mk-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .ywf-mk [data-ywf-mk-reveal] { opacity:1; transform:none; transition:none; }
  .ywf-mk-country-bar { transition:none; }
}

/* ---------- print ---------- */
@media print {
  .ywf-mk { color:#000; }
  .ywf-mk-section { page-break-inside:avoid; border-bottom:1px solid #ddd; padding:1.2rem 0; }
  .ywf-mk-fold, .ywf-mk-acc-item { border:1px solid #ddd; }
  .ywf-mk-acc-arrow { display:none; }
  .ywf-mk-case-link { display:none; }
  .ywf-mk-stat, .ywf-mk-term { border:1px solid #ddd; }
  .ywf-mk-logo { filter:none; opacity:1; }
  .ywf-mk-hero { min-height:40vh; page-break-after:avoid; }
  .ywf-mk-logos { overflow:visible; }
  .ywf-mk-logos-track { flex-wrap:wrap; width:auto; }
  /* third-party embeds don't paginate — hide them on paper */
  .ywf-mk-case-embed { display:none; }
  .ywf-mk [data-ywf-mk-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
  .ywf-mk-country-bar { transition:none; }
}