/* ==========================================================================
   MI Workouts — PDF Download Block + slim bar (dark palette, 1.6.11)
   Loaded ONLY on single guides where the block is switched on
   (conditional enqueue in class-enqueue.php).

   Markup of record: docs/pdf-split-block-template.html (structure).
   Palette of record: docs/lead-capture.html / lead-capture.css (Liam,
   2026-08-24 — palette REFERENCE ONLY: its inline-bar <form>, cover image
   and placements are explicitly not built; CHANGELOG 1.6.11).

   Re-based on house values per docs/pdf-block-audit.md §1.6 / §4 item 2 —
   the mockup's --mie-* tokens (mi-exercises' design system) are NOT imported:
   - Ink surface  = #212121, the plugin's own hero-band surface.
   - On-ink text  = the hero band's ramp: #FFF headings,
     rgba(255,255,255,0.85) leads, rgba(255,255,255,0.6) secondary —
     not the mockup's 0.88/0.40 stops.
   - Gold = #FFD700; gold buttons follow the house .mi-hero-btn-primary
     treatment (gold on ink, ink text, #FFE34D hover, lift + gold shadow).
     Buttons we own are GOLD on ink — purple on ink is ~1.5:1 (Liam's note).
   - The mockup's color-mix() calls are replaced with static rgba() values.

   The form CARD deliberately stays a LIGHT surface on the ink block: the
   HubSpot form is a v3 IFRAME whose light-theme labels/fields cannot be
   restyled from this page — an ink card would leave HubSpot's dark label
   text unreadable. The .hs-* rules below only ever apply to a legacy v2
   (inline-DOM) form, which also sits on that light card.
   ========================================================================== */

/* ── Block card (ink surface between .mi-content-card siblings) ──────────── */
.mi-guide .mi-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: center;
  margin: 48px 0;
  padding: 40px;
  background: #212121;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  font-family: 'Montserrat', sans-serif;
}

/* Navigation anchor = the section itself (ToC / Download / slim bar all
   land here). Breathing room above the block rather than flush-to-edge. */
.mi-guide .mi-split { scroll-margin-top: 32px; }

/* ── Left column: copy ───────────────────────────────────────────────────── */
/* Short gold accent rule above the copy (the mockup's .lc-block__accent). */
.mi-split__copy::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: #FFD700;
  margin: 0 0 18px 0;
}
.mi-split__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFD700;
  margin: 0 0 14px 0;
}
.mi-split h2 {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  color: #FFF;
  letter-spacing: -0.5px;
  margin: 0 0 12px 0;
}
.mi-split__sub {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin: 0 0 14px 0;
}
.mi-split__desc {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  margin: 0 0 22px 0;
}
.mi-split__list {
  /* Gold checkmark marker, masked SVG per the mockup (--lc-check), declared
     locally — never on :root. Alpha is all a mask reads; the stroke colour
     in the data URI is irrelevant. No-mask fallback = a solid gold square. */
  --miw-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  list-style: none;
  margin: 0;
  padding: 0;
}
.mi-split__list li {
  position: relative;
  padding: 0 0 0 28px;
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
}
.mi-split__list li:last-child { margin-bottom: 0; }
.mi-split__list li strong {
  display: block;
  font-weight: 800;
  color: #FFF;
  margin-bottom: 3px;
}
.mi-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #FFD700;
  -webkit-mask: var(--miw-check) center / contain no-repeat;
  mask: var(--miw-check) center / contain no-repeat;
}

/* ── Right column: form card (light panel on ink — see header note) ─────── */
.mi-split__card {
  background: #FFF;
  border-radius: 16px;
  padding: 32px 28px;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.mi-split__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.30);
}
.mi-split__card h3 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: #4A148C;
  text-align: center;
  margin: 0 0 8px 0;
}
.mi-split__card-sub {
  font-size: 14px;
  line-height: 1.55;
  color: #888;
  text-align: center;
  margin: 0 0 22px 0;
}
.mi-split__note {
  font-size: 12px;
  line-height: 1.5;
  color: #888;
  text-align: center;
  margin: 16px 0 0 0;
}

/* ── HubSpot field styling (legacy v2 inline forms only — the v3 iframe
   form is styled in HubSpot's editor and these cannot reach it) ─────────── */
/* .mi-guide-prefixed to out-specify Flatsome's global input rules. */
.mi-guide .mi-split__form .hs-form-field { margin-bottom: 16px; }
.mi-guide .mi-split__form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}
.mi-guide .mi-split__form input[type="text"],
.mi-guide .mi-split__form input[type="email"] {
  width: 100% !important;
  box-sizing: border-box;
  background: #FFF;
  border: 1px solid #E8E8E8;
  border-radius: 10px;
  box-shadow: none;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  color: #212121;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.mi-guide .mi-split__form input::placeholder { color: #888; }
.mi-guide .mi-split__form input[type="text"]:hover,
.mi-guide .mi-split__form input[type="email"]:hover { border-color: rgba(74,20,140,0.35); }
/* Gold submit, house .mi-hero-btn-primary treatment. */
.mi-guide .mi-split__form input[type="submit"],
.mi-guide .mi-split__form .hs-button {
  width: 100%;
  margin-top: 6px;
  background: #FFD700;
  color: #212121;
  border: 0;
  border-radius: 10px;
  padding: 15px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(255,215,0,0.2);
  transition: transform 0.16s ease, box-shadow 0.16s ease,
              background 0.16s ease;
}
.mi-guide .mi-split__form input[type="submit"]:hover,
.mi-guide .mi-split__form .hs-button:hover {
  background: #FFE34D;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255,215,0,0.3);
}

/* Error + success states (legacy inline forms, on the light card). */
.mi-guide .mi-split__form .hs-error-msgs {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
}
.mi-guide .mi-split__form .hs-error-msgs li { padding: 0; }
.mi-guide .mi-split__form .hs-error-msg {
  color: #C62828;
  font-size: 12px;
  font-weight: 600;
}
.mi-guide .mi-split__form input.hs-input.error { border-color: #C62828; }
.mi-guide .mi-split__form .submitted-message {
  font-size: 15px;
  line-height: 1.6;
  color: #212121;
  text-align: center;
}

/* ── Slim bar (ink anchor row after "Who Is This For?") ──────────────────── */
/* Own eyebrow class — NOT .mi-section-tag (Customizer golds it outside a
   card, §1.1); gold on ink is now the design, at readable contrast. */
.mi-guide a.mi-pdf-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 32px 0;
  padding: 16px 20px;
  background: #212121;
  border: 0;
  border-left: 4px solid #FFD700;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mi-guide a.mi-pdf-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.mi-pdf-bar__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #FFD700;
  margin-bottom: 3px;
}
.mi-pdf-bar__title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFF;
  margin-bottom: 2px;
}
.mi-pdf-bar__sub {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.6);
}
.mi-pdf-bar__cta {
  background: #FFD700;
  color: #212121;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 11px 18px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(255,215,0,0.2);
  transition: background 0.2s ease;
}
.mi-guide a.mi-pdf-bar:hover .mi-pdf-bar__cta { background: #FFE34D; }
/* Wraps to two lines at 560px — the template's value (the SOW's 520px was
   the earlier artefact). */
@media (max-width: 560px) {
  .mi-guide a.mi-pdf-bar { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .mi-pdf-bar__cta { grid-column: 1 / -1; text-align: center; }
}

/* ── Action-bar Download button ──────────────────────────────────────────── */
/* An <a> among <button> siblings: .miw-action-btn supplies the shared
   treatment; these two lines cover what a button never needed declared. */
a.miw-action-btn.miw-download-btn { text-decoration: none; color: #555; }
a.miw-action-btn.miw-download-btn:hover { text-decoration: none; color: #1a1a1a; }
/* Download makes the action row four buttons (~357px) — wider than a
   ~380px viewport allows. The row is flex-shrink:0 and sizes to max-content
   (the 768px action-bar stack uses align-items:flex-start, so nothing
   constrains it) — cap it at its container and let the buttons wrap. */
@media (max-width: 560px) {
  .miw-action-btns { flex-wrap: wrap; max-width: 100%; }
}

/* ── Focus + motion (3px gold focus-visible kept; on ink it still reads) ── */
.mi-split a:focus-visible,
.mi-split button:focus-visible,
.mi-split input:focus-visible,
.mi-guide a.mi-pdf-bar:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .mi-split *,
  .mi-guide a.mi-pdf-bar { transition: none !important; }
  .mi-split__card:hover,
  .mi-guide a.mi-pdf-bar:hover,
  .mi-guide .mi-split__form input[type="submit"]:hover,
  .mi-guide .mi-split__form .hs-button:hover { transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Stacks at 900px per the split template. */
@media (max-width: 900px) {
  .mi-guide .mi-split { grid-template-columns: 1fr; gap: 32px; }
  .mi-split h2 { font-size: 24px; }
  .mi-split__sub { font-size: 17px; }
  .mi-split__card:hover { transform: none; box-shadow: none; }
}
/* Match .mi-content-card's mobile padding step. */
@media (max-width: 768px) {
  .mi-guide .mi-split { padding: 28px 22px; }
  .mi-split__card { padding: 26px 20px; }
}