/* ==========================================================================
   Fastkava — B13 SEO / info text
   Flat elevated panel: big two-tone heading (max 60% wide) + long-form prose
   column capped at a 1248px reading measure. Sub-headings come from the
   WYSIWYG body (h3 by default).
   ========================================================================== */

.fk-info {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 96px) clamp(64px, 9vw, 104px);
}

.fk-info__inner { position: relative; }

/* ---- Heading ------------------------------------------------------------- */
.fk-info__title {
  margin: 0 0 clamp(24px, 3vw, 40px);
  max-width: 60%;
  /* design: 52px @1440 · 36px @834 · 26px @390 */
  font-size: clamp(26px, 4.3vw, 52px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--fk-heading);
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.fk-info__title .fk-info__title-accent { color: var(--fk-accent); }

/* ---- Prose body ---------------------------------------------------------- */
.fk-info__body {
  max-width: 1248px;
  font-weight: 500;
  /* design: 16px @1440 · 15px @834 · 14px @390 */
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.8;
  overflow-wrap: break-word;
  color: var(--fk-text-muted);
  color: color-mix(in srgb, var(--fk-text) 62%, var(--fk-text-muted)); /* ≈ #CFC7BC on dark */
}
.fk-info__body > *:first-child { margin-top: 0; }
.fk-info__body > *:last-child { margin-bottom: 0; }

.fk-info__body p {
  /* design gap: 22px @1440 · 18px @834 · 16px @390 */
  margin: 0 0 clamp(16px, 2.15vw, 22px);
  text-wrap: pretty;
}

.fk-info__body h2,
.fk-info__body h3,
.fk-info__body h4 {
  /* design: 44/18 @1440 · 34/14 @834 · 28/12 @390 */
  margin: clamp(28px, 4.1vw, 44px) 0 clamp(12px, 1.7vw, 18px);
  /* design: 24px @1440 · 20px @834 · 17px @390 */
  font-size: clamp(17px, 2.4vw, 24px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--fk-heading);
  text-wrap: pretty;
}
.fk-info__body h4 { font-size: clamp(15px, 1.4vw, 19px); }

.fk-info__body strong,
.fk-info__body b { color: var(--fk-heading); font-weight: 700; }

.fk-info__body a {
  color: var(--fk-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--fk-ease);
}
.fk-info__body a:hover { color: var(--fk-accent-bright); }

.fk-info__body ul,
.fk-info__body ol {
  margin: 0 0 clamp(16px, 2.15vw, 22px);
  padding-left: 1.35em;
}
.fk-info__body li { margin-bottom: 8px; }
.fk-info__body ul { list-style: none; padding-left: 0; }
.fk-info__body ul > li { position: relative; padding-left: 22px; }
.fk-info__body ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fk-accent);
}

/* Wide embedded content must never widen the page. */
.fk-info__body table,
.fk-info__body pre { display: block; max-width: 100%; overflow-x: auto; }
.fk-info__body img { max-width: 100%; height: auto; border-radius: var(--fk-radius); }

/* ---- Responsive ---------------------------------------------------------- */
/* Tablet/mobile drop the desktop-only 60% heading cap (see FINAL chunk). */
@media (max-width: 900px) {
  .fk-info__title { max-width: 100%; }
  .fk-info__body { line-height: 1.75; }
}

@media (max-width: 640px) {
  .fk-info__body { line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  .fk-info__body a { transition: none; }
}