/**
 * FusedFormations lesson format (brand identity).
 * Loaded on /learn/ and every lesson (see inc/services.php). Used by single-project.php.
 * Ported from the Lesson 0 design: kicker, two-tone title, floating hero art, drop-cap lede,
 * info strip, numbered steps, figures, sidebars, pull quote, scroll reveal.
 */

  .ff-lesson {
    --ink: #0b0d12;
    --muted: #5b6272;
    --blue: #1a6cf0;
    --blue-deep: #0b4bbd;
    --blue-soft: #eaf1fe;
    --line: #e4e7ed;
    --amber: #e8a317;
    --amber-soft: #fff7e6;
    --green-soft: #eaf7ef;
    max-width: 780px;
    margin: 0 auto;
    padding: 40px 16px 72px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.65;
    background: #fff;
  }
  .ff-lesson * { box-sizing: border-box; }
  .ff-lesson p, .ff-lesson li { font-size: 1.02rem; }
  .ff-lesson a { color: var(--blue); }
  .ff-lesson code { background: #f2f4f8; padding: 1px 6px; border-radius: 5px; font-size: .92em; }
  .ff-lesson pre { background: var(--ink); color: #e8edf5; padding: 14px 16px; border-radius: 12px; overflow-x: auto; margin: 12px 0; }
  .ff-lesson pre code { background: none; padding: 0; color: inherit; }

  /* ---------- Header ---------- */
  .ff-kicker { display: flex; align-items: center; gap: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
  .ff-kicker::after { content: ""; flex: 1; height: 3px; background: var(--blue); border-radius: 2px; }
  .ff-title { font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: .98; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 22px; text-transform: uppercase; }
  .ff-title span { display: block; }
  .ff-title .accent { color: var(--blue); }

  .ff-lede { font-size: 1.15rem; line-height: 1.55; margin: 0 0 8px; }
  .ff-lede::first-letter { float: left; font-size: 4.2rem; line-height: .82; font-weight: 800; color: var(--blue); margin: 6px 10px 0 0; }
  .ff-lede strong { font-weight: 700; }

  .ff-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 26px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ff-meta li { padding: 12px 10px; border-right: 1px solid var(--line); }
  .ff-meta li:last-child { border-right: 0; }
  .ff-meta span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
  .ff-meta strong { font-size: .98rem; }
  @media (max-width: 420px) { .ff-meta { grid-template-columns: 1fr; } .ff-meta li { border-right: 0; border-bottom: 1px solid var(--line); } .ff-meta li:last-child { border-bottom: 0; } }

  /* ---------- Section headings ---------- */
  .ff-lesson h2 { font-size: .95rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin: 48px 0 14px; }
  .ff-lesson h3 { font-size: 1.1rem; margin: 0 0 6px; }

  /* ---------- Figures ---------- */
  .ff-fig { margin: 22px 0; }
  .ff-fig svg, .ff-fig video, .ff-fig img { display: block; width: 100%; height: auto; background: #fff; }
  .ff-fig video, .ff-fig img { max-width: 560px; margin: 0 auto; border-radius: 12px; }
  .ff-fig.screen video, .ff-fig.screen img { border: 1px solid var(--line); }
  .ff-fig figcaption { font-size: .9rem; color: var(--muted); margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); }
  .ff-fig figcaption b { color: var(--blue); font-weight: 700; margin-right: 4px; }

  /* ---------- Parts table ---------- */
  .ff-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .96rem; }
  .ff-table th, .ff-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .ff-table th { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
    .ff-small { font-size: .88rem !important; color: var(--muted); }

  /* ---------- Steps ---------- */
  .ff-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
  .ff-steps > li { counter-increment: step; position: relative; padding: 0 0 8px 54px; margin-bottom: 26px; }
  .ff-steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -4px; font-size: 1.6rem; font-weight: 800; color: var(--blue); letter-spacing: -.02em; }
  .ff-board { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 10px; margin: 14px 0; }
  .ff-board h3 { font-size: 1rem; }
  .ff-board ol { padding-left: 20px; }

  /* ---------- Pull quote ---------- */
  .ff-pull { font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--blue); margin: 26px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--ink); }

  /* ---------- Sidebars ---------- */
  .ff-box { border: 2px solid var(--blue); border-radius: 14px; margin: 26px 0; overflow: hidden; }
  .ff-box-head { background: var(--blue); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 8px 16px; }
  .ff-box-body { padding: 14px 18px 8px; }
  .ff-box-body h3 { margin-bottom: 4px; }
  .ff-box.story { border-color: var(--ink); }
  .ff-box.story .ff-box-head { background: var(--ink); }
  .ff-box.caution { border: 2px dashed var(--amber); background: var(--amber-soft); }
  .ff-box.caution .ff-box-head { background: transparent; color: #8a5a00; padding-bottom: 0; }
  .ff-box.caution .ff-box-head::before { content: "⚠ "; }

  .ff-success { background: var(--green-soft); border-left: 4px solid #23945a; padding: 12px 16px; border-radius: 0 12px 12px 0; margin: 14px 0; }
  .ff-success p { margin: 4px 0; }

  .ff-check { list-style: none; padding: 0; }
  .ff-check li { padding-left: 28px; position: relative; margin-bottom: 8px; }
  .ff-check li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border: 2px solid var(--blue); border-radius: 4px; }

  .ff-docs { list-style: none; padding: 0; margin: 0; }
  .ff-docs li { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ff-docs li span { display: block; font-size: .86rem; color: var(--muted); }

  .ff-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
  .ff-next a { display: block; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
  .ff-next a:hover { border-color: var(--blue); }
  .ff-next strong { display: block; margin-bottom: 4px; }
  .ff-next span { color: var(--muted); font-size: .92rem; }
  .ff-tagline { margin-top: 28px; font-weight: 700; }
  .ff-tagline span { color: var(--blue); }

  /* ===================== MOTION =====================
     Everything that moves lives here. To turn ALL motion off, delete this block
     (or the page already turns it off for visitors who ask their device for "reduce motion"). */
  .ff-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 12px; }
  .ff-hero-art { width: 100%; height: auto; overflow: visible; }
  .ff-hero-photo { width: 100%; height: auto; display: block; }
  @media (max-width: 680px) { .ff-hero { grid-template-columns: 1fr; } .ff-hero-art { max-width: 380px; margin: 0 auto; } }

  .ff-float-a, .ff-float-b { transform-box: fill-box; }
  .ff-float-a { animation: ff-float 6s ease-in-out infinite; }
  .ff-float-b { animation: ff-float 7.5s ease-in-out -2.5s infinite; }
  @keyframes ff-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  .ff-led-a { animation: ff-blink 1.2s steps(1) infinite; }
  .ff-led-b { animation: ff-pulse 2.4s ease-in-out infinite; }
  @keyframes ff-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .12; } }
  @keyframes ff-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

  .ff-flow { stroke-dasharray: 6 8; animation: ff-dash .9s linear infinite; }
  @keyframes ff-dash { to { stroke-dashoffset: -14; } }

  /* Scroll reveal: blocks with class "ff-reveal" fade up as they scroll into view */
  .ff-js .ff-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .ff-js .ff-reveal.is-in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .ff-float-a, .ff-float-b, .ff-led-a, .ff-led-b, .ff-flow { animation: none !important; }
    .ff-js .ff-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  }

  /* ===================== WORDPRESS ADDITIONS ===================== */
  .ff-lesson { padding-top: 28px; }
  .ff-back { display: inline-block; font-size: .92rem; color: var(--muted) !important; text-decoration: none; margin-bottom: 18px; }
  .ff-back:hover { color: var(--ink) !important; }
  .ff-hero-slot { min-width: 0; }
  .ff-hero-slot svg, .ff-hero-slot img { width: 100%; height: auto; display: block; overflow: visible; }

  /* Lede comes from the editor as a <p> inside .ff-lede */
  .ff-lede p { margin: 0; font-size: 1.15rem; line-height: 1.55; }
  .ff-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
  .ff-meta { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  .ff-lesson p { margin: 0 0 12px; }
  .ff-lesson ol, .ff-lesson ul { margin: 0 0 12px; }
  /* main.css resets list padding to 0; give plain lists their indent back */
  .ff-lesson ul:not([class]), .ff-lesson ol:not([class]) { padding-left: 1.4em; }
  .ff-lesson li + li { margin-top: 4px; }
  .ff-steps > li ol, .ff-steps > li ul { padding-left: 20px; }
  .ff-steps > li > h3 { font-size: 1.15rem; margin-bottom: 8px; }

  /* Standards */
  .ff-standards { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
  .ff-standards li { border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 10px; padding: 10px 14px; }
  .ff-standards strong { display: block; font-size: .85rem; letter-spacing: .02em; color: var(--blue); }
  .ff-standards span { display: block; font-size: .96rem; }

  /* Run the code */
  .code-frame { position: relative; margin: 8px 0 14px; }
  .code-frame pre { margin: 0; }
  .btn-copy-code { position: absolute; top: 10px; right: 10px; padding: 5px 12px; font: inherit; font-size: .8rem; font-weight: 600; color: #e8edf5; background: rgba(255,255,255,.12); border: 0; border-radius: 980px; cursor: pointer; }
  .btn-copy-code:hover { background: rgba(255,255,255,.22); }
  .btn-ide, .btn-next { display: inline-block; padding: 12px 26px; border-radius: 980px; font-weight: 600; text-decoration: none; }
  .btn-ide { background: var(--ink); color: #fff !important; }
  .btn-ide:hover { background: #1d1d1f; }
  .btn-next { border: 2px solid var(--ink); color: var(--ink) !important; }
  .btn-next:hover { background: var(--ink); color: #fff !important; }

  /* Finish line */
  .ff-finish { text-align: center; margin-top: 56px; }
  .ff-circuit { width: 220px; max-width: 60%; height: auto; display: block; margin: 0 auto 6px; overflow: visible; }
  .ff-finish .ff-tagline { margin: 6px 0 18px; }

  /* Comments */
  .ff-comments { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 8px; }
  .ff-comments h2, .ff-comments h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--ink); margin: 18px 0 12px; }
  .ff-comments .comment-list, .ff-comments .children { list-style: none; padding: 0; margin: 0 0 20px; }
  .ff-comments .children { margin-left: 28px; }
  .ff-comments .comment-body { background: #f6f7f9; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
  .ff-comments .comment-author { font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .ff-comments .comment-author .avatar { border-radius: 50%; }
  .ff-comments .says { display: none; }
  .ff-comments .comment-metadata { font-size: .8rem; margin-bottom: 6px; }
  .ff-comments .comment-metadata a { color: var(--muted); }
  .ff-comments label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
  .ff-comments input[type="text"], .ff-comments input[type="email"], .ff-comments textarea { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
  .ff-comments .submit { padding: 12px 26px; border: 0; border-radius: 980px; background: var(--ink); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

  /* Extra motion helpers for lesson art */
  .ff-blink { animation: ff-blink 1.2s steps(1) infinite; }
  .ff-spin { transform-box: fill-box; transform-origin: center; animation: ff-spin .5s linear infinite; }
  .ff-float { transform-box: fill-box; animation: ff-float 6s ease-in-out infinite; }
  @keyframes ff-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .ff-blink, .ff-spin, .ff-float { animation: none !important; }
  }

  /* ===================== LEARN LIST (/learn/) ===================== */
  .ff-learn-head { max-width: 1100px; padding: 56px 24px 64px; background: transparent; }
  .ff-learn-head .ff-hero { grid-template-columns: 1.15fr 1fr; gap: 24px; margin-top: 8px; }
  .ff-learn-title { font-size: clamp(4rem, 13vw, 8.5rem); line-height: .9; letter-spacing: -.04em; margin: 10px 0 18px;
    background: linear-gradient(135deg, #0b0d12 0%, #0b0d12 45%, var(--blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ff-learn-lead { font-size: 1.2rem; line-height: 1.5; color: var(--muted); max-width: 30ch; margin: 0; }
  .ff-learn-unit { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1a6cf0; margin: 0 0 6px !important; }
  @media (max-width: 680px) { .ff-learn-head .ff-hero { grid-template-columns: 1fr; } .ff-learn-lead { max-width: none; } }

  /* Lesson video (YouTube embed): full width, 16:9, rounded like the figures */
  .ff-lesson .ff-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0b0d12; }
  .ff-lesson .ff-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  /* Step photos (wide composites): use the full column width */
  .ff-lesson .ff-fig.photo img { max-width: 100%; border-radius: 12px; }