/* ==========================================================================
   Rinkis Gyvenimą — ŠKL Home page
   1:1 rebuild of Figma node 1:1343. Design tokens extracted from the
   "Color palettee" + "Fonts" system frames.
   ========================================================================== */

:root {
  /* ---- Layout: Figma desktop frame ---- */
  --container: 1440px;
  --section-padding-y: 80px;
  --section-padding-x: 120px;

  /* ---- Colours (exact hex from the Figma palette) ---- */
  --c-blue:        #4382FF;  /* Primary / section backgrounds */
  --c-deep-blue:   #344BFD;  /* Cards */
  --c-dark-blue:   #2B3998;  /* Headings on light, body accents */
  --c-grey-blue:   #EBF0F5;  /* Light section background */
  --c-light-blue:  #DFF1FF;  /* Light pill buttons */
  --c-purple:      #B4BBFF;  /* Bullets, number badges */
  --c-dark-purple: #9399D8;
  --c-lime:        #F0FFB3;  /* Accent / headings on blue / buttons */
  --c-green:       #F0FFB3;
  --c-black:       #231F20;
  --c-dark-grey:   #8B8B8B;
  --c-grey:        #C7C7C7;
  --c-grey-2:      #D9D9D9;
  --c-white:       #FFFFFF;

  /* ---- Type: designer spec — Playfair Display (H1/H2) + Figtree (rest) ---- */
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Layout ---- */
  --radius-card: 24px;
  --radius-pill: 999px;

  /* ---- Type scale (Figma "Fonts" frames): desktop values, mobile @720px ---- */
  --h1-size: 100px; --h1-lh: 110px;    /* Playfair Display 800 */
  --h2-size: 60px;  --h2-lh: 80px;     /* Playfair Display 800 */
  --h3-size: 32px;  --h3-lh: 38px;     /* Figtree 600 */
  --h4-size: 24px;  --h4-lh: 30px;     /* Figtree 600 */
  --text-md: 18px;  --text-md-lh: 24px;
  --text-sm: 16px;  --text-sm-lh: 22px;
}

/* Native same-page anchor navigation for all custom Figma templates. */
html { scroll-behavior: smooth; }
html.fh-initial-hash { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 720px) {
  :root {
    --h1-size: 64px; --h1-lh: 80px;
    --h2-size: 36px; --h2-lh: 48px;
    --h3-size: 24px; --h3-lh: 30px;
    --h4-size: 20px; --h4-lh: 26px;
    --text-md: 16px; --text-md-lh: 22px;
    --text-sm: 14px; --text-sm-lh: 18px;
  }
}

/* ---- Base (scoped to .fh-page so it never leaks into the theme header/footer) ---- */
.fh-body { margin: 0; }
.fh-page { color: var(--c-black); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.fh-page * { box-sizing: border-box; }
.fh-page img { max-width: 100%; display: block; }
.fh-page p { margin: 0; }

/* Section backgrounds span the viewport. Each block's actual Figma container is
   1440px including 80px/120px padding (1200px usable content width). */
.fh-page { width: 100%; max-width: none; margin: 0; padding: 0; }
.fh-wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-padding-y) var(--section-padding-x);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---- Site header (compact; reuses the theme's menu items + logo) ---- */
.fh-header { background: var(--c-white); font-family: var(--font-body); }
.fh-header-inner {
  max-width: var(--container); margin: 0 auto; padding: 22px 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.fh-logo img { height: 60px; width: auto; display: block; }
.fh-nav-list { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.fh-nav-list a {
  color: var(--c-black); text-decoration: none; font-weight: 600; font-size: 16px;
  transition: color .2s ease;
}
.fh-nav-list a:hover, .fh-nav-list .current-menu-item > a { color: var(--c-blue); }
@media (max-width: 720px) {
  .fh-header-inner { flex-direction: column; gap: 14px; padding: 16px; }
  .fh-nav-list { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .fh-logo img { height: 48px; }
}

/* ==========================================================================
   Sections — contained panels (colored bands become centered rounded panels
   so the page reads at the same width as the rest of the site)
   ========================================================================== */
/* Sections sit flush; their backgrounds are full width and .fh-wrap owns the
   1440px container padding. */
.fh-section { width: 100%; padding: 0; }
.fh-section[id] { scroll-margin-top: 24px; }
.fh-section.is-blue  { background: var(--c-blue); }
.fh-section.is-deep  { background: var(--c-deep-blue); }
.fh-section.is-grey  { background: var(--c-grey-blue); }
.fh-section.is-white { background: transparent; padding: 0; }

.fh-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  text-align: center;
  letter-spacing: 0;
  margin: 0;
  color: var(--c-dark-blue);
}
.is-blue .fh-title, .is-deep .fh-title { color: var(--c-lime); }
.fh-title--h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
}
/* Section map header: title + subtitle grouped 30px apart (Figma Title group),
   while the section's own 60px gap separates the group from the cards. */
.fh-section-map .fh-map-header {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* Mamos campaign (Figma node 45:2275): the subtitle is H3-sized, and card text
   drops the shared 4-line min-height so the cards stay content-sized — this
   design's 4-line card title would otherwise stretch the whole row. */
.fh-page--mamos .fh-section-map .fh-section-subtitle {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
}
.fh-page--mamos .fh-section-map .fh-card p { min-height: 0; }
/* Mamos prevencijos banner title is H2-sized in Figma (node 45:2761),
   unlike the H1 used on the other campaign banners. */
.fh-page--mamos-prevencija .fh-campaign-banner h1 {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}

.fh-intro {
  max-width: 950px; margin: 0 auto; text-align: center;
  font-size: var(--text-md); line-height: var(--text-md-lh); color: var(--c-white);
}
.fh-section-subtitle,
.fh-intro-title {
  margin: 0; color: var(--c-dark-blue); font-size: var(--h4-size);
  font-weight: 600; line-height: var(--h4-lh); text-align: center;
}
.is-blue .fh-section-subtitle,
.is-deep .fh-section-subtitle,
.is-blue .fh-intro-title { color: var(--c-white); }
.fh-page .fh-myths-section .fh-wrap { gap: 50px; }
.fh-myths-has-intro-title .fh-title { margin-bottom: 0; }
.fh-myths-has-intro-title .fh-intro { color: var(--c-lime); }
.fh-myths-intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.fh-myths-intro .fh-intro-title,
.fh-myths-intro .fh-intro { width: 100%; text-align: center !important; }
.fh-page .fh-intro {
  width: 100%;
  align-self: center;
  text-align: center !important;
}
.is-white .fh-intro, .is-grey .fh-intro { color: var(--c-dark-blue); }

/* ---- "Matyti daugiau" text CTA ---- */
.fh-more {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0; padding: 4px;
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-md); line-height: var(--text-md-lh);
  color: var(--c-lime); background: none; border: 0; cursor: pointer;
  width: 100%; text-decoration: none;
  transition: color .2s ease;
}
.is-white .fh-more, .is-grey .fh-more { color: var(--c-dark-blue); }
.fh-more:hover,
.fh-more:focus-visible { color: var(--c-purple); }
.fh-more svg {
  flex: 0 0 auto; width: 18px; height: 18px;
  color: inherit; stroke: currentColor;
}
.fh-more svg path { stroke: currentColor; }
.fh-news-section .fh-more { gap: 20px; }
.fh-news-section .fh-more svg {
  width: 8px; height: 14px;
  transition: transform .2s ease;
}
.fh-news-section .fh-more:hover svg,
.fh-news-section .fh-more:focus-visible svg { transform: translateX(4px); }

/* ==========================================================================
   Hero (single exported banner image = 1:1 with Figma)
   ========================================================================== */
.fh-hero { width: 100%; padding: 0; background: var(--c-blue); }
.fh-hero-inner {
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: 0 var(--section-padding-x);
}
.fh-hero picture,
.fh-hero-inner > img { display: block; width: 100%; }
/* Reserve the hero's space before the image loads (all exports are 32:15),
   so cross-page #anchor jumps land on the right spot instead of shifting. */
.fh-hero img { width: 100%; height: auto; aspect-ratio: 32 / 15; }

/* ==========================================================================
   Campaign subpage banner
   ========================================================================== */
.fh-campaign-banner {
  position: relative; overflow: hidden; min-height: 497px;
  padding: 0; background: var(--c-blue);
}
.fh-campaign-banner__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--container); min-height: 497px; margin: 0 auto;
  padding: 100px 120px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch; gap: 30px 40px;
}
.fh-campaign-banner__art {
  position: absolute; z-index: 0; top: 0; right: max(120px, calc((100vw - 1440px) / 2 + 120px));
  width: 811px; height: 497px; object-fit: cover; object-position: center;
  opacity: .3; pointer-events: none;
}
.fh-campaign-banner__content,
.fh-campaign-banner__logos { position: relative; z-index: 1; }
.fh-campaign-banner__content {
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 30px;
}
.fh-campaign-banner h1 {
  margin: 0; max-width: 650px; color: var(--c-lime);
  font-family: var(--font-head); font-size: var(--h1-size);
  font-weight: 800; line-height: var(--h1-lh); letter-spacing: 0;
}
.fh-page .fh-campaign-banner__back,
.fh-page .fh-campaign-banner__back:visited {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 20px; width: fit-content; padding: 4px;
  color: #F0FFB3; font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 600; text-decoration: none;
  transition: color .2s ease;
}
.fh-campaign-banner__back svg {
  flex: 0 0 auto; width: 8px; height: 16px;
  transition: transform .2s ease;
}
.fh-page .fh-campaign-banner__back:hover,
.fh-page .fh-campaign-banner__back:focus-visible { color: var(--c-purple); }
@media (prefers-reduced-motion: no-preference) {
  .fh-campaign-banner__back:hover svg,
  .fh-campaign-banner__back:focus-visible svg { transform: translateX(-5px); }
}
.fh-campaign-banner__logos {
  display: flex; align-items: center; justify-content: flex-end;
  align-self: start; gap: 30px; width: 580px;
}
.fh-campaign-banner__logos img { flex: 0 0 auto; object-fit: cover; }
.fh-campaign-banner__logos img:first-child { width: 279px; height: 151px; }
.fh-campaign-banner__logos img:last-child { width: 233px; height: 235px; }

/* ==========================================================================
   ŠKL intro cards (4-up)
   ========================================================================== */
.fh-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fh-card {
  background: var(--c-deep-blue); border-radius: var(--radius-card);
  padding: 30px 26px; display: flex; flex-direction: column;
}
.fh-card h3 {
  font-family: var(--font-body); font-size: var(--h3-size); font-style: normal;
  font-weight: 600; line-height: var(--h3-lh); color: var(--c-lime);
  min-height: calc(var(--h3-lh) * 2); margin: 0 0 28px;
}
.fh-card p {
  margin: 0 0 42px;
  min-height: calc(var(--text-sm-lh) * 3);
  color: var(--c-white); font-size: var(--text-sm); line-height: var(--text-sm-lh);
}
.fh-card .fh-btn { margin-top: 0; }

.fh-btn {
  display: block; text-align: center; border-radius: var(--radius-pill);
  padding: 14px 20px; font-weight: 600; font-size: 16px; border: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.fh-page .fh-btn--light,
.fh-page .fh-btn--light:visited { background: var(--c-light-blue); color: var(--c-dark-blue); }
.fh-page .fh-btn--lime,
.fh-page .fh-btn--lime:visited { background: var(--c-lime); color: var(--c-dark-blue); }

/* Figma component hover state (nodes 1:425 and 1:409): card CTAs change to
   Button / Hover only while the button itself is hovered or keyboard-focused. */
.fh-page .fh-btn--light:hover,
.fh-page .fh-btn--light:focus-visible,
.fh-page .fh-btn--lime:hover,
.fh-page .fh-btn--lime:focus-visible {
  background: var(--c-purple); color: var(--c-dark-blue);
}

/* ==========================================================================
   Accordions (Mitai / Simptomai)
   ========================================================================== */
.fh-acc { display: flex; flex-direction: column; gap: 12px; }
/* flex-start so the number/tag stay aligned to the question row when the
   white container expands to reveal its answer. */
.fh-acc-row { display: flex; align-items: flex-start; }

/* Number circles: Figtree 400, 18px desktop / 16px mobile (--text-md) —
   purple and lime versions must differ only in circle color. */
.fh-acc-num {
  flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-body);
  font-weight: 400; font-size: var(--text-md); line-height: var(--text-md-lh);
  color: var(--c-dark-blue); position: relative; z-index: 3;
}
.fh-acc-num--lime   { background: var(--c-lime); }
.fh-acc-num--purple { background: var(--c-purple); }

.fh-acc-tag {
  flex: 0 0 auto; height: 62px; display: grid; place-items: center;
  padding: 0 26px 0 30px; margin-left: -26px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--c-lime); color: var(--c-dark-blue); font-weight: 600; font-size: 16px;
  position: relative; z-index: 2;
}
.fh-myths-section .fh-acc-num {
  flex-basis: 70px;
  width: 70px;
  height: 70px;
}
.fh-myths-section .fh-acc-tag {
  display: flex;
  width: 140px;
  height: 70px;
  padding: 12px 30px;
  justify-content: center;
  align-items: center;
  margin-left: -8px;
  border-radius: var(--radius-pill);
}
.fh-myths-section .fh-acc-item {
  margin-left: 6px;
  border-radius: 35px;
}
.fh-myths-section .fh-acc-head {
  min-height: 70px;
  padding: 12px 12px 12px 30px;
}
.fh-myths-section .fh-acc-tag,
.fh-myths-section .fh-acc-head {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--text-md-lh);
}

/* The white pill IS the question + answer container — it grows as one piece. */
.fh-acc-item {
  flex: 1; margin-left: 16px; background: var(--c-white);
  border-radius: 28px; overflow: hidden; align-self: flex-start; width: 100%;
}
.fh-acc-head {
  width: 100%; min-height: 62px; background: none; border: 0;
  padding: 16px 16px 16px 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; color: var(--c-dark-blue);
  font-family: var(--font-body); font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 400; cursor: pointer;
}
.fh-acc-head:focus-visible { outline: 2px solid var(--c-purple); outline-offset: -2px; }
.fh-acc-plus {
  flex: 0 0 auto; width: 46px; height: 46px;
  display: grid; place-items: center; color: var(--c-deep-blue);
  transform: rotate(0); transition: color .2s ease, transform .2s ease;
}
.fh-acc-plus svg {
  display: block; width: 46px; height: 46px;
  stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
}
.fh-acc-plus .fh-acc-icon--mobile { display: none; }
.fh-acc-head:hover .fh-acc-plus,
.fh-acc-head:focus-visible .fh-acc-plus { color: var(--c-purple); }
.fh-acc-head:active .fh-acc-plus,
.fh-acc-item.is-open .fh-acc-plus { color: var(--c-dark-purple); transform: rotate(45deg); }

/* A row with no answer is a statement, not an accordion control. */
.fh-acc-item.is-disabled .fh-acc-head { color: var(--c-dark-grey); cursor: default; }
.fh-acc-item.is-disabled .fh-acc-plus { color: var(--c-dark-grey); transform: none; }
.fh-acc-row.is-disabled .fh-acc-num,
.fh-acc-row.is-disabled .fh-acc-tag,
.fh-step-row.is-disabled .fh-step-number {
  background: var(--c-grey-2); color: var(--c-dark-grey);
}

.fh-acc-panel { height: 0; overflow: hidden; transition: height .32s cubic-bezier(.4, 0, .2, 1); }
/* Answer sits in the same white pill, separated from the question by a
   hairline in the section's blue (matches the Figma question/answer split). */
.fh-acc-inner {
  padding: 20px 30px 24px; color: var(--c-dark-blue);
  font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; line-height: var(--text-md-lh);
  border-top: 1px solid var(--c-blue);
}

/* "Matyti daugiau" reveal (extra myths / bullets) */
.fh-reveal { height: 0; overflow: hidden; transition: height .45s cubic-bezier(.22, 1, .36, 1); }
.fh-reveal > .fh-acc { padding-top: 12px; }
.fh-reveal > .fh-bullets { padding-top: 20px; }
.fh-more-toggle { margin-top: 24px; }
.fh-more-toggle--mobile-only { display: none; }
.fh-more-toggle svg { width: 16px; height: 8px; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.fh-more-toggle.is-open svg { transform: rotate(180deg); }

.fh-sub {
  text-align: center; font-weight: 600; font-size: var(--text-md); line-height: var(--text-md-lh);
  color: var(--c-white); margin: 0;
}
.fh-page .fh-symptoms-section .fh-wrap { gap: 50px; }
.fh-page .fh-symptoms-section .fh-more-toggle { margin-top: 0; }
.fh-symptoms-section .fh-acc-num {
  flex-basis: 70px;
  width: 70px;
  height: 70px;
}
.fh-symptoms-section .fh-acc-item { border-radius: 35px; }
.fh-symptoms-section .fh-acc-head { min-height: 70px; }
/* Negalia „Sveika gyvensena" (Figma 112:3145 — instances are "Lime Accordion"):
   this campaign's symptom circles are lime, not the default purple. Disabled
   rows keep their grey. */
.fh-page--zmones-su-negalia .fh-symptoms-section .fh-acc-row:not(.is-disabled) .fh-acc-num {
  background: var(--c-lime);
}
.fh-sub em { color: var(--c-lime); font-style: normal; }
.fh-divider { border: 0; border-top: 1px solid rgba(255,255,255,.5); margin: 0; width: 100%; }

/* Info / warning card */
.fh-info {
  width: 100%; max-width: 611px; align-self: center; margin: 0;
  border: 2px solid var(--c-lime); border-radius: 40px; padding: 30px;
  display: flex; align-items: center; gap: 30px; overflow: hidden;
}
.fh-info svg { flex: 0 0 58px; width: 58px; height: 58px; color: var(--c-lime); }
.fh-info p {
  flex: 1 1 auto; min-width: 0; color: var(--c-lime);
  font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: 400; line-height: var(--text-sm-lh);
}
/* Info card on light section backgrounds is dark blue (Figma node 45:2770). */
.fh-text-section.is-white .fh-info,
.fh-text-section.is-grey .fh-info { border-color: var(--c-dark-blue); }
.fh-text-section.is-white .fh-info svg,
.fh-text-section.is-grey .fh-info svg { color: var(--c-dark-blue); }
.fh-text-section.is-white .fh-info p,
.fh-text-section.is-grey .fh-info p { color: var(--c-dark-blue); }

/* ==========================================================================
   Risk-factor bullets (2 columns)
   ========================================================================== */
.fh-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 14px;
  column-gap: 24px;
}
.fh-bullet {
  background: var(--c-white); border-radius: var(--radius-pill);
  padding: 16px 24px; display: flex; align-items: center; gap: 16px;
  color: var(--c-dark-blue); font-family: var(--font-body);
  font-size: var(--text-md); font-weight: 400; line-height: var(--text-md-lh);
}
.fh-bullet::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 50%; background: var(--c-purple);
}
.fh-risk-mobile-extras { display: contents; }

.fh-risk-layout { display: grid; gap: 40px; }
.fh-page .fh-risk-section .fh-wrap { gap: 60px; }
.fh-page .fh-risk-section .fh-more-toggle { margin-top: 0; }
.fh-risk-intro {
  max-width: 900px; align-self: center; color: var(--c-dark-blue);
  font-size: var(--text-md); line-height: var(--text-md-lh); text-align: center;
}
.fh-risk--blue-image { background: var(--c-blue); }
.fh-page .fh-risk--blue-image .fh-wrap { padding: 80px 120px; gap: 50px; }
.fh-risk--blue-image .fh-title { color: var(--c-lime); }
.fh-risk--blue-image .fh-risk-intro { width: 734px; max-width: 100%; color: var(--c-lime); }
.fh-risk--blue-image .fh-risk-layout {
  width: 100%; grid-template-columns: 561px 584.879px;
  align-items: center; gap: 58px;
}
.fh-risk--blue-image .fh-bullets-wrap {
  width: 561px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 0;
}
.fh-risk--blue-image .fh-bullets { width: 588px; grid-template-columns: 1fr; gap: 10px; }
.fh-risk--blue-image .fh-bullet { width: 100%; min-height: 56px; padding: 16px 24px; gap: 16px; }
.fh-risk--blue-image .fh-bullet::before { background: var(--c-purple); }
.fh-risk--blue-image .fh-reveal > .fh-bullets { padding-top: 12px; }
.fh-risk--blue-image .fh-more { justify-content: flex-start; width: auto; color: var(--c-lime); }
.fh-risk--blue-image .fh-more:hover,
.fh-risk--blue-image .fh-more:focus-visible { color: var(--c-purple); }
.fh-page .fh-risk--blue-image .fh-more-toggle { margin-top: 30px; }
.fh-risk--blue-image .fh-more svg { width: 16px; height: 8px; }
.fh-risk-illustration { width: 584.879px; height: 317px; max-height: none; object-fit: cover; }

/* ==========================================================================
   Icon bullet list (Figma 112:2342) — H3 title + two-column hand-icon grid
   ========================================================================== */
.fh-page .fh-icon-list-section .fh-wrap { gap: 60px; }
/* Column-flow grid: DOM holds the left column first, then the right column
   inside .fh-icon-list-extras — same visual as row-major on desktop, and the
   mobile design stacks exactly the left column before its „Matyti daugiau". */
.fh-icon-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--fh-icon-rows, 4), auto);
  grid-template-columns: repeat(2, minmax(0, 550px));
  column-gap: 24px; row-gap: 30px;
  justify-content: center;
}
.fh-icon-list-extras { display: contents; }
.fh-steps-mobile-extras { display: contents; }
.fh-icon-item { display: flex; align-items: center; gap: 16px; color: var(--c-dark-blue); }
.fh-icon-item svg { width: 24px; height: 24px; flex: 0 0 24px; }
.fh-icon-item p {
  margin: 0; font-size: var(--text-md); line-height: var(--text-md-lh);
}

/* ==========================================================================
   Two-column body text (Ai praeis / Profilaktiniai)
   ========================================================================== */
.fh-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 24px; }
.fh-page .fh-text-section .fh-wrap { gap: 50px; }
.fh-2col p,
.fh-text-reveal-extra p {
  font-family: var(--font-body); font-size: var(--text-md);
  font-weight: 400; line-height: var(--text-md-lh); color: var(--c-dark-blue);
}
.fh-2col strong,
.fh-2col b,
.fh-text-reveal-extra strong,
.fh-text-reveal-extra b { font-weight: 600; }
.fh-2col p + p,
.fh-text-reveal-extra p + p { margin-top: 20px; }
.fh-2col a,
.fh-2col a:visited,
.fh-text-reveal-extra a,
.fh-text-reveal-extra a:visited { color: var(--c-blue); }
.fh-2col .with-info { position: relative; }
.fh-text-section.is-blue .fh-2col p,
.fh-text-section.is-blue .fh-text-reveal-extra p { color: var(--c-lime); }
.fh-text-section--centered .fh-2col { display: block; max-width: 800px; margin: 0 auto; text-align: center; }
.fh-text-section--centered .fh-2col > div:empty { display: none; }
.fh-page #kokybiskas-miegas-ir-streso-valdymas .fh-2col,
.fh-page #kokybiskas-miegas-ir-streso-valdymas .fh-2col p { max-width: 1000px; }
.fh-text-section--text-image .fh-2col {
  grid-template-columns: 1fr 1fr;
  column-gap: 100px; align-items: center; justify-content: center;
}
.fh-2col-illustration { width: 100%; max-height: 310px; object-fit: contain; }
.fh-mobile-text-copy,
.fh-mobile-text-toggle { display: none; }
.fh-text-reveal { width: 100%; }
.fh-text-reveal-extra { width: 100%; padding-top: 20px; }
.fh-text-reveal-toggle { width: auto; align-self: center; margin-top: 0; }
.fh-text-section--inline-reveal .fh-text-copy {
  display: flex; flex-direction: column; align-items: flex-start;
}
.fh-text-section--inline-reveal .fh-text-reveal-toggle {
  width: auto; align-self: flex-start; justify-content: flex-start; margin-top: 30px;
}

/* Accessible, collision-aware tooltip (JS positions it: flip + shift, shadcn-style) */
.fh-tip { display: inline-flex; align-items: center; margin-top: 10px; cursor: help; color: var(--c-dark-blue); outline: none; }
.fh-tip svg { width: 22px; height: 22px; }
.fh-tip:focus-visible { outline: 2px solid var(--c-dark-blue); outline-offset: 3px; border-radius: 50%; }
.fh-tip-bubble {
  position: fixed; top: 0; left: 0; z-index: 1000;
  width: 610px; max-width: calc(100vw - 16px);
  background: var(--c-white); color: var(--c-black);
  border: 1px solid var(--c-grey-blue);
  box-shadow: 0 4px 16px rgba(43, 57, 152, .08);
  padding: 30px; border-radius: 40px;
  font-family: var(--font-body); font-size: var(--text-md);
  font-weight: 400; line-height: var(--text-md-lh); letter-spacing: 0;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease; pointer-events: none;
}
.fh-tip-bubble.is-open {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  cursor: text;
}

/* ==========================================================================
   Prevention cards (2x2, some with illustration)
   ========================================================================== */
.fh-prev { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fh-page .fh-prevention-section .fh-wrap { gap: 60px; }
.fh-prev-card {
  background: var(--c-deep-blue); border-radius: 40px; min-height: 156px;
  padding: 30px 40px; display: flex; align-items: center;
  grid-row: span 1; grid-column: span 1;
  color: var(--c-white); font-family: var(--font-body); font-size: var(--h3-size);
  font-style: normal; font-weight: 600; line-height: var(--h3-lh);
  position: relative; overflow: hidden;
  transform: scale(1);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.fh-prev-card .fh-ill {
  position: absolute; right: 0; bottom: 0; height: 100%; width: auto; pointer-events: none;
}
.fh-prev-card:hover { transform: scale(1.03); }
.fh-prev-card span { position: relative; z-index: 1; max-width: 60%; }
.fh-page a.fh-prev-card,
.fh-page a.fh-prev-card:visited { color: var(--c-white); text-decoration: none; }
.fh-page a.fh-prev-card:focus-visible {
  outline: 3px solid var(--c-lime); outline-offset: 3px;
}
.fh-prev-intro {
  max-width: 900px; margin: 0 auto !important; color: var(--c-lime);
  font-size: var(--text-md); line-height: var(--text-md-lh); text-align: center;
}
.is-grey .fh-prev-intro { color: var(--c-dark-blue); }
.fh-page--onkologines-ligos .fh-prevention-section .fh-section-subtitle {
  width: 100%;
  max-width: 1000px;
  align-self: center;
}

/* Prevention "links" variant (Figma node 112:2267): centered intro, hairline
   divider in the text color, then a 2x2 grid of chain-icon links instead of
   cards. */
.fh-page .fh-prevention--links .fh-wrap { gap: 50px; }
.fh-prevention--links .fh-prev-intro { max-width: 1008px; }
.fh-prevention--links .fh-section-subtitle {
  width: 100%;
  max-width: 1008px;
  align-self: center;
}
.fh-prev-divider {
  width: 100%;
  margin: 0;
  border: none;
  border-top: 1px solid var(--c-dark-blue);
}
.fh-prev-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 550px));
  justify-content: center;
  column-gap: 24px;
  row-gap: 30px;
}
.fh-prev-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--c-dark-blue);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--text-md-lh);
}
.is-blue .fh-prev-link { color: var(--c-white); }
.fh-prev-link svg { flex: 0 0 auto; }
.fh-page a.fh-prev-link,
.fh-page a.fh-prev-link:visited { color: var(--c-dark-blue); text-decoration: none; }
.fh-page .is-blue a.fh-prev-link,
.fh-page .is-blue a.fh-prev-link:visited { color: var(--c-white); }
.fh-page a.fh-prev-link:hover span { text-decoration: underline; }
.fh-page a.fh-prev-link:focus-visible {
  outline: 3px solid var(--c-dark-blue);
  outline-offset: 3px;
}

/* ==========================================================================
   News carousel
   ========================================================================== */
.fh-news-outer { display: flex; align-items: stretch; gap: 40px; }
.fh-news-arrow {
  flex: 0 0 auto; align-self: center; width: 40px; height: 40px;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
  color: var(--c-dark-blue);
}
.fh-news {
  flex: 1; display: flex; gap: 14px;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  scrollbar-width: none; cursor: grab; touch-action: pan-y; user-select: none;
}
.fh-news::-webkit-scrollbar { display: none; }
.fh-news.is-dragging {
  cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none;
}
.fh-news.is-dragging * { pointer-events: none; }
.fh-news-card {
  flex: 0 0 calc((100% - 42px) / 4); scroll-snap-align: start;
  background: var(--c-blue); border-radius: 40px; overflow: hidden;
  display: flex; flex-direction: column;
}
.fh-news-card > img { width: 100%; height: 186px; object-fit: cover; }
.fh-news-card .body {
  display: flex; padding: 30px; flex-direction: column;
  justify-content: center; align-items: center; gap: 24px;
  align-self: stretch; flex: 1;
}
.fh-news-card .body p {
  color: var(--c-white); font-size: var(--text-md); line-height: var(--text-md-lh);
  font-weight: 600;
}
.fh-news-card .fh-btn {
  display: flex; padding: 12px 30px;
  justify-content: center; align-items: center; gap: 10px;
  /* Figma node 45:2258 — the button is pinned to the card bottom regardless
     of how long the card text is, so buttons align across the row. */
  align-self: stretch; margin-top: auto;
  font-size: var(--text-md); line-height: var(--text-md-lh);
  font-weight: 400;
}
.fh-news-card .body { justify-content: flex-start; }

/* Figma news listing variant. */
.fh-news-section .fh-wrap { gap: 60px; }
.fh-news-section--carousel {
  container-type: inline-size; container-name: news-carousel;
}
.fh-news-section--carousel .fh-wrap { padding: 60px; }
.fh-news-section--grid {
  padding: 0; container-type: inline-size; container-name: blogs;
}
.fh-news-section--grid .fh-title {
  font-family: var(--font-body); font-size: var(--h3-size); line-height: var(--h3-lh);
  font-weight: 600; text-align: left; letter-spacing: 0;
}
.fh-news-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 14px; }
.fh-news-grid .fh-news-card { min-width: 0; border-radius: 40px; }
.fh-news-grid .fh-news-card > img { height: 160px; }
.fh-news-grid .fh-news-card .body { padding: 30px; gap: 24px; }
.fh-news-grid .fh-news-card .body p {
  font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 600;
}
.fh-news-grid .fh-news-card .fh-btn {
  padding: 12px 30px; font-size: var(--text-md); line-height: var(--text-md-lh);
  font-weight: 400;
}
@container blogs (max-width: 1279px) {
  .fh-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container blogs (max-width: 1024px) {
  .fh-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container blogs (max-width: 720px) {
  .fh-news-grid { grid-template-columns: 1fr; gap: 24px; }
}
@container news-carousel (max-width: 1279px) {
  .fh-news-card { flex-basis: calc((100% - 28px) / 3); }
}
@container news-carousel (max-width: 1024px) {
  .fh-news-card { flex-basis: calc((100% - 14px) / 2); }
}
@container news-carousel (max-width: 720px) {
  .fh-news-card { flex-basis: 82%; }
}

/* ==========================================================================
   Numbered steps accordion
   ========================================================================== */
.fh-steps-section { background: var(--c-blue); padding: 0; }
.fh-steps-section .fh-wrap { align-items: center; gap: 60px; }
.fh-steps-section .fh-title { color: var(--c-lime); }
.fh-steps-list {
  width: 100%; display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px;
}
.fh-step-row {
  width: calc(100% - 8px); display: flex;
  align-items: flex-start; gap: 8px;
}
.fh-step-number {
  flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-lime); color: var(--c-dark-blue);
  font-family: var(--font-body); font-size: var(--text-md);
  font-weight: 400; line-height: var(--text-md-lh);
}
.fh-step-item { margin-left: 0; border-radius: 40px; }
.fh-step-item .fh-acc-head {
  height: 70px; min-height: 70px; padding: 16px 16px 16px 30px; gap: 4px;
  font-family: var(--font-body); font-size: var(--text-md);
  font-weight: 400; line-height: var(--text-md-lh);
}
.fh-step-item .fh-acc-plus { width: 46px; height: 46px; }
/* Mamos prevencijos accordion (Figma 112:2335) uses purple number badges,
   unlike the default lime (112:2401). */
.fh-steps--purple-num .fh-step-number { background: var(--c-purple); }
.fh-steps-outro {
  width: 699px; max-width: 100%; margin: 0 auto !important; color: var(--c-lime);
  font-size: var(--text-md); line-height: var(--text-md-lh); text-align: center;
  font-weight: 400;
}
.fh-steps-intro {
  max-width: 900px; margin: 0 auto; color: var(--c-lime);
  font-size: var(--text-md); line-height: var(--text-md-lh); text-align: center;
}
.fh-steps-intro p { color: inherit; }

/* Match the purple symptoms accordion to the lime numbered accordion on
   desktop. Mobile retains its dedicated Figma geometry below. */
@media (min-width: 721px) {
  .fh-page .fh-symptoms-section .fh-sub {
    margin: 0;
    color: var(--c-white);
    font-size: var(--h4-size);
    font-weight: 600;
    line-height: var(--h4-lh);
    text-align: center;
  }

  .fh-page .fh-symptoms-section .fh-acc {
    gap: 10px;
  }
  .fh-page .fh-symptoms-section .fh-acc-row {
    width: calc(100% - 8px);
    gap: 8px;
  }
  .fh-page .fh-symptoms-section .fh-acc-item {
    margin-left: 0;
    border-radius: 40px;
  }
  .fh-page .fh-symptoms-section .fh-acc-head {
    height: 70px;
    min-height: 70px;
    padding: 16px 16px 16px 30px;
    gap: 4px;
  }
}

/* Reusable section-map component geometry. */
.fh-section-map .fh-wrap {
  gap: 60px;
  container-type: inline-size;
  container-name: section-map;
}
.fh-section-map .fh-cards { gap: 14px; }
.fh-section-map .fh-card { border-radius: 40px; }
.fh-section-map .fh-card p { min-height: calc(var(--text-sm-lh) * 4); }
.fh-section-map .fh-card .fh-btn {
  display: flex;
  height: 50px;
  padding: 12px 30px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  align-self: stretch;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--text-md-lh);
}

@container section-map (max-width: 1160px) {
  .fh-section-map .fh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Campaign news cards. */
.fh-page--diabetas .fh-news-card,
.fh-page--onkologines-ligos .fh-news-card { border-radius: 40px; }
.fh-page--diabetas .fh-news-card > img,
.fh-page--onkologines-ligos .fh-news-card > img { height: 160px; }

/* ==========================================================================
   Ending
   ========================================================================== */
.fh-ending { width: 100%; padding: 0; text-align: center; background: var(--c-deep-blue); }
.fh-ending .fh-wrap {
  padding: 40px 120px; flex-direction: column;
  align-items: center; gap: 10px;
}
.fh-back {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0; text-decoration: none;
}
.fh-back-label {
  background: var(--c-light-blue); color: var(--c-dark-blue);
  width: 189px; min-height: 48px; margin-right: -4px;
  border-radius: 40px; padding: 12px 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: var(--text-md);
  font-style: normal; font-weight: 400; line-height: var(--text-md-lh);
  text-align: center; white-space: nowrap;
  transition: background-color .2s ease;
}
.fh-back-icon {
  flex: 0 0 50px; width: 50px; height: 50px;
  color: var(--c-dark-blue); display: block;
}
.fh-back-icon svg { display: block; width: 50px; height: 50px; }
.fh-back-icon rect { transition: fill .2s ease; }
.fh-back:hover .fh-back-label,
.fh-back:focus-visible .fh-back-label { background: var(--c-purple); }
.fh-back:hover .fh-back-icon rect,
.fh-back:focus-visible .fh-back-icon rect { fill: var(--c-purple); }

/* ==========================================================================
   Motion — ONLY the FAQ/accordion animates (slide open/close + icon rotate).
   No hover animations anywhere else.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fh-page *, .fh-acc-panel, .fh-acc-plus,
  .fh-prev-card .fh-ill { transition: none !important; }
}

/* ==========================================================================
   Responsive — falls back to the mobile type scale (H1 64 / H2 36 …)
   ========================================================================== */
@media (max-width: 1279px) {
  .fh-wrap { padding-left: 80px; padding-right: 80px; }
	.fh-hero-inner { padding-left: 80px; padding-right: 80px; }
  .fh-ending .fh-wrap { padding-left: 80px; padding-right: 80px; }
  .fh-campaign-banner__inner { padding-left: 80px; padding-right: 80px; }
  .fh-campaign-banner__art { right: 80px; }
  .fh-page .fh-risk--blue-image .fh-wrap { padding-left: 80px; padding-right: 80px; }
  .fh-risk--blue-image .fh-risk-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
	.fh-text-section--text-image .fh-2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
  .fh-risk--blue-image .fh-bullets-wrap,
  .fh-risk--blue-image .fh-bullets { width: 100%; }
  .fh-risk-illustration { width: 100%; height: auto; max-height: 317px; object-fit: contain; }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .fh-page .fh-prevention-section .fh-wrap { gap: 40px; }
  .fh-page .fh-prevention-section .fh-prev {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .fh-page .fh-prevention--links .fh-prev-links {
    grid-template-columns: minmax(0, 550px);
    row-gap: 24px;
  }
  .fh-page .fh-prevention-section .fh-prev-card {
    min-height: 120px;
    padding: 24px 30px;
    border-radius: 32px;
    font-size: var(--h4-size);
    line-height: var(--h4-lh);
  }
  .fh-page .fh-prevention-section .fh-prev-card span { max-width: 100%; }
  .fh-page .fh-prevention-section .fh-prev-card.has-illustration span {
    max-width: calc(100% - 180px);
  }
  .fh-page .fh-prevention-section .fh-prev-card .fh-ill {
    width: 180px;
    height: 120px;
    object-fit: cover;
  }
}
@media (max-width: 1024px) {
  .fh-cards { grid-template-columns: repeat(2, 1fr); }
  .fh-page .fh-section-map .fh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fh-campaign-banner__inner { grid-template-columns: 1fr; row-gap: 30px; }
  .fh-campaign-banner__content { gap: 30px; }
  .fh-campaign-banner__logos { width: 100%; justify-content: flex-start; }
  .fh-campaign-banner__logos img:first-child { width: 210px; height: auto; }
  .fh-campaign-banner__logos img:last-child { width: 175px; height: auto; }
  .fh-campaign-banner__art { right: 0; }
}
@media (max-width: 720px) {
  .fh-section,
  .fh-section.is-white { padding: 0; }
  .fh-wrap { padding: 40px 20px; }
	.fh-hero-inner { padding-left: 20px; padding-right: 20px; }
  .fh-cards, .fh-bullets, .fh-2col, .fh-prev { grid-template-columns: 1fr; }
  .fh-news-card { flex-basis: 82%; }
  .fh-prev-card .fh-ill { opacity: .5; }
  .fh-acc-num { width: 46px; height: 46px; font-size: 16px; }
  .fh-news-arrow { display: none; }
  .fh-campaign-banner { min-height: 409px; padding: 0; }
  .fh-campaign-banner__inner {
    min-height: 409px; padding: 40px 30px;
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 20px;
  }
  .fh-campaign-banner__art {
    top: 0; right: auto; left: 50%; width: 342px; height: 209px;
    transform: translateX(-50%); object-fit: cover; object-position: center;
  }
  .fh-campaign-banner__content { display: contents; }
  .fh-campaign-banner h1 {
    order: 1; width: 100%; max-width: 330px;
    font-size: var(--h1-size); line-height: var(--h1-lh);
  }
  .fh-campaign-banner__logos {
    order: 2; width: 243.345px; gap: 16px; justify-content: flex-start;
  }
  .fh-campaign-banner__logos img:first-child { width: 115.925px; height: 62.834px; }
  .fh-campaign-banner__logos img:last-child { width: 97.801px; height: 98.739px; }
  .fh-page .fh-campaign-banner__back { order: 3; }
  .fh-risk--blue-image .fh-risk-layout { grid-template-columns: 1fr; }
  .fh-page .fh-risk--blue-image .fh-wrap { padding: 40px 20px; gap: 30px; }
  .fh-risk--blue-image .fh-risk-intro {
    width: 100%; align-self: stretch; text-align: left;
    font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 400;
  }
  .fh-risk--blue-image .fh-risk-layout { width: 100%; gap: 30px; }
  .fh-risk--blue-image .fh-bullets-wrap,
  .fh-risk--blue-image .fh-bullets { width: 100%; }
  .fh-risk--blue-image .fh-bullets-wrap { align-items: stretch; }
  .fh-risk--blue-image .fh-more {
    align-self: center; justify-content: center; gap: 14px;
    padding: 4px; font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 600;
  }
  .fh-risk-illustration {
    width: 100%; height: auto; max-height: none;
    aspect-ratio: 4096 / 2220; object-fit: cover;
  }
  .fh-news-grid .fh-news-card .body { padding: 30px; }
  .fh-step-number { flex-basis: 48px; width: 48px; height: 48px; font-size: 16px; line-height: 22px; }
  .fh-step-item .fh-acc-head { min-height: 48px; padding: 14px 14px 14px 20px; }
  .fh-step-item .fh-acc-plus { width: 46px; height: 46px; }
  .fh-page--skl-prevencija .fh-section,
  .fh-page--skl-naujienos .fh-section,
  .fh-page--diabetas .fh-section,
  .fh-page--diabeto-prevencija .fh-section,
  .fh-page--diabeto-naujienos .fh-section,
  .fh-page--onkologines-ligos .fh-section,
  .fh-page--onkologines-ligos-naujienos .fh-section { padding: 0; }
}

/* ========================================================================== 
   Reusable blocks on mobile — based on the 390px Figma component system
   ŠKL 1:1203 / Oncology 1:844 / Diabetes 1:956
   ========================================================================== */
@media (max-width: 720px) {
  .hero .hero-warpper.fh-hero-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hero .hero-warpper.fh-hero-wrapper > .header-row {
    padding-left: 15px;
    padding-right: 15px;
  }

  .fh-page { width: 100%; overflow: hidden; }
  .fh-page .fh-hero img { width: 100%; aspect-ratio: 390 / 488; object-fit: cover; }
  .fh-page .fh-section,
  .fh-page .fh-section.is-white { padding: 0; }
  .fh-page .fh-wrap { padding: 40px 20px; gap: 30px; }
  .fh-page .fh-myths-section .fh-wrap { gap: 30px; }
  .fh-page .fh-myths-intro .fh-intro { text-align: left !important; }

  .fh-page .fh-cards { grid-template-columns: 1fr; gap: 14px; }
  .fh-page .fh-section-map .fh-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr; align-items: stretch; gap: 14px;
  }
  .fh-page .fh-section-map .fh-card {
    display: flex; height: 100%; min-height: 240px; padding: 24px; flex-direction: column;
    justify-content: flex-start; align-items: stretch; gap: 20px;
    border-radius: 32px;
  }
  .fh-page .fh-section-map .fh-card h3 {
    width: 100%; min-height: 0; margin: 0;
    font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: 600;
    text-align: left;
  }
  .fh-page .fh-section-map .fh-card-title-break { display: none; }
  .fh-page .fh-section-map .fh-card p {
    width: 100%; min-height: 0; margin: 0; flex: 1 1 auto;
    display: flex; align-items: center;
    font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 400;
    text-align: left;
  }
  .fh-page .fh-card p { color: var(--c-lime); }
  .fh-page .fh-card--copy-white p { color: var(--c-white); }
  .fh-page .fh-section-map .fh-card .fh-btn {
    width: 100%; height: auto; margin-top: 0; padding: 12px 30px;
    font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 400;
  }

  .fh-page .fh-myths-section .fh-acc { gap: 18px; }
  .fh-page .fh-myths-section .fh-acc-row {
    width: 100%; flex-wrap: wrap; align-items: flex-start;
  }
  .fh-page .fh-myths-section .fh-acc-num {
    flex-basis: 40px; width: 40px; height: 40px; font-size: 16px;
  }
  .fh-page .fh-myths-section .fh-acc-tag {
    width: auto; height: 40px; margin-left: -4px; padding: 0 25px;
    border-radius: 40px; font-size: 16px; line-height: 22px; font-weight: 400;
  }
  .fh-page .fh-myths-section .fh-acc-item {
    flex: 0 0 100%; margin: 8px 0 0; border-radius: 24px;
  }
  .fh-page .fh-myths-section .fh-acc-head {
    height: 68px; min-height: 68px; padding: 14px 14px 14px 20px; gap: 12px;
  }

  .fh-page .fh-bullets { grid-template-columns: 1fr; gap: 10px; }
  .fh-page .fh-bullet {
    min-height: 48px; padding: 14px 20px; gap: 12px;
  }
  .fh-page .fh-bullet::before { width: 14px; height: 14px; flex-shrink: 0; }
  .fh-page .fh-reveal > .fh-bullets { padding-top: 10px; }
  .fh-page .fh-more-toggle { margin-top: 20px; }
	.fh-page .fh-more-toggle--mobile-only { display: flex; }
  .fh-page .fh-risk-section .fh-wrap { gap: 30px; }
  .fh-page .fh-risk-section .fh-bullets { gap: 10px; }
  .fh-page .fh-risk-section .fh-bullet {
    min-height: 50px; padding: 14px 20px; gap: 12px; border-radius: 40px;
    font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 400;
  }
  .fh-page .fh-risk-section .fh-bullet::before {
    width: 10px; height: 10px; flex-shrink: 0;
  }
  .fh-page .fh-risk-section .fh-risk-mobile-extras {
    display: grid; grid-column: 1 / -1; gap: 10px;
    width: 100%; height: 0; overflow: hidden;
    transition: height .45s cubic-bezier(.22, 1, .36, 1);
  }

  .fh-page .fh-2col { grid-template-columns: 1fr; gap: 20px; }
  .fh-page .fh-2col p + p { margin-top: 20px; }
  .fh-page .fh-text-section .fh-wrap { gap: 30px; }
  .fh-page .fh-text-section--inline-reveal .fh-2col { gap: 30px; }
  .fh-page .fh-text-section--inline-reveal .fh-text-reveal-toggle {
    align-self: center; justify-content: center; margin-top: 30px;
  }
  .fh-page .fh-text-section--mobile-reveal .fh-2col--desktop-copy { display: none; }
  .fh-page .fh-mobile-text-copy { display: block; width: 100%; }
  .fh-page .fh-mobile-text-visible,
  .fh-page .fh-mobile-text-extra {
    display: flex; flex-direction: column; gap: 20px;
  }
  .fh-page .fh-mobile-text-visible p,
  .fh-page .fh-mobile-text-extra p { margin: 0; }
  .fh-page .fh-mobile-text-extra { padding-top: 20px; }
  .fh-page .fh-mobile-text-toggle {
    display: flex; width: auto; align-self: center; margin: 0;
  }

  .fh-page .fh-symptoms-section .fh-acc { gap: 10px; }
  .fh-page .fh-symptoms-section .fh-wrap { gap: 30px; }
  .fh-page .fh-symptoms-section .fh-acc-row { align-items: flex-start; gap: 8px; }
  .fh-page .fh-symptoms-section .fh-acc-num {
    flex: 0 0 50px; width: 50px; height: 50px;
    margin-top: 6px;
    font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 400;
  }
  .fh-page .fh-symptoms-section .fh-acc-item {
    flex: 1 1 auto; width: auto; margin-left: 0; border-radius: 24px;
  }
  .fh-page .fh-symptoms-section .fh-acc-head {
    height: auto; min-height: 50px; padding: 14px 14px 14px 20px; gap: 8px;
    border-radius: 24px;
  }
  .fh-page .fh-symptoms-section .fh-acc-head > span:first-child { flex: 1 1 auto; min-width: 0; }
  .fh-page .fh-acc-head {
    font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 400;
  }
  .fh-page .fh-acc-plus {
    width: 34px; height: 34px;
  }
  .fh-page .fh-acc-plus .fh-acc-icon--desktop { display: none; }
  .fh-page .fh-acc-plus .fh-acc-icon--mobile {
    display: block; width: 34px; height: 34px; stroke-width: 3;
  }
  .fh-page .fh-divider { margin: 0; }
  .fh-page .fh-info {
    width: 100%; padding: 20px; gap: 20px; border-radius: 28px;
  }
  .fh-page .fh-info svg { width: 58px; height: 58px; }
  .fh-page .fh-tip-bubble { padding: 30px; border-radius: 40px; }

  .fh-page .fh-prevention-section .fh-wrap { gap: 30px; }
  .fh-page .fh-prev { grid-template-columns: 1fr; gap: 10px; }
  .fh-page .fh-prev-card {
    min-height: 100px; height: 100px; padding: 20px 24px;
    border-radius: 28px;
    font-family: var(--font-body); font-size: 18px; line-height: 24px; font-weight: 600;
  }
  .fh-page .fh-prev-card span { max-width: 100%; }
  .fh-page .fh-prev-card.has-illustration span { width: 168px; max-width: calc(100% - 125px); }
  .fh-page .fh-prev-card .fh-ill {
    width: 125px; height: 100px; opacity: 1; object-fit: cover;
  }
  /* Links variant mobile (Figma node 112:2505): intro + subtitle go
     left-aligned, subtitle drops to Medium Mobile 16/22, tighter icon gap.
     Link order follows the mobile design's column-major stacking. */
  .fh-page .fh-prevention--links .fh-prev-links {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
  }
  .fh-page .fh-prevention--links .fh-prev-intro,
  .fh-page .fh-prevention--links .fh-section-subtitle { text-align: left; }
  .fh-page .fh-prevention--links .fh-section-subtitle {
    font-size: var(--text-md);
    line-height: var(--text-md-lh);
  }
  .fh-page .fh-prev-link { gap: 12px; }
  .fh-page--onkologines-ligos .fh-prev-link:nth-child(1) { order: 1; }
  .fh-page--onkologines-ligos .fh-prev-link:nth-child(3) { order: 2; }
  .fh-page--onkologines-ligos .fh-prev-link:nth-child(2) { order: 3; }
  .fh-page--onkologines-ligos .fh-prev-link:nth-child(4) { order: 4; }
  .fh-page--skl .fh-prev-card:nth-child(2) { order: 1; }
  .fh-page--skl .fh-prev-card:nth-child(1) { order: 2; }
  .fh-page--skl .fh-prev-card:nth-child(3) { order: 3; }
  .fh-page--skl .fh-prev-card:nth-child(4) { order: 4; }

  .fh-page #naujienos { overflow: hidden; }
  .fh-page .fh-news-outer { display: block; width: 100%; }
  .fh-page .fh-news { width: 100%; gap: 20px; overflow-x: auto; }
  .fh-page .fh-news-card { flex: 0 0 278px; border-radius: 40px; }
  .fh-page .fh-news-card > img { height: 160px; }
  .fh-page .fh-news-card .body { padding: 30px; gap: 24px; }
  .fh-page .fh-news-card .fh-btn { padding: 12px 30px; }

  .fh-page .fh-step-row { width: 100%; gap: 8px; }
  .fh-page .fh-step-number {
    flex-basis: 50px; width: 50px; height: 50px; margin-top: 6px;
    font-size: 16px; line-height: 22px; font-weight: 400;
  }
  .fh-page .fh-step-item { border-radius: 24px; }
  .fh-page .fh-step-item .fh-acc-head {
    height: auto; min-height: 50px; padding: 14px 14px 14px 20px;
    border-radius: 24px;
  }
  .fh-page .fh-step-item .fh-acc-plus { width: 34px; height: 34px; }

  .fh-page .fh-ending { padding: 0; }
  .fh-page .fh-ending .fh-wrap { padding: 40px 20px; gap: 10px; }
  .fh-page .fh-back-label { padding: 12px 30px; font-weight: 400; }
  .fh-page .fh-back-icon { width: 50px; height: 50px; }
}

@media (max-width: 480px) {
  .fh-page .fh-section-map .fh-cards { grid-template-columns: 1fr; }
}

/* On narrow phones, let exceptionally long labels determine the height
   naturally without forcing every prevention card to be 144px tall. */
@media (max-width: 375px) {
  .fh-page .fh-prevention-section .fh-prev-card {
    height: auto;
    min-height: 100px;
  }
  .fh-page .fh-prevention-section .fh-prev-card .fh-ill {
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
  }
}

/* Preserve the 64/80 mobile H1 through 380px, then scale only the campaign
   hero title smoothly on narrower screens. */
@media (max-width: 380px) {
  .fh-campaign-banner h1 {
    font-size: clamp(40px, 16.842vw, 64px);
    line-height: clamp(50px, 21.053vw, 80px);
  }
}

/* On very narrow phones, give numbered FAQ controls the full available width.
   Myth rows already use this stacked structure throughout the mobile layout. */
@media (max-width: 340px) {
  .fh-page .fh-symptoms-section .fh-acc,
  .fh-page .fh-steps-list {
    gap: 18px;
  }

  .fh-page .fh-symptoms-section .fh-acc-row,
  .fh-page .fh-step-row {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .fh-page .fh-symptoms-section .fh-acc-num,
  .fh-page .fh-step-number {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-top: 0;
    font-size: 16px;
    line-height: 22px;
  }

  .fh-page .fh-symptoms-section .fh-acc-item,
  .fh-page .fh-step-item {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ==========================================================================
   Bullet groups — Pirmieji simptomai (Figma node 112:3060)
   ========================================================================== */
.fh-page .fh-bgroups-section .fh-wrap { gap: 50px; }
.fh-bgroups-wrap { display: flex; flex-direction: column; width: 100%; }
.fh-bgroups { display: flex; flex-direction: column; gap: 50px; width: 100%; }
.fh-reveal > .fh-bgroups { padding-top: 50px; }
.fh-bgroups-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px; align-items: start;
}
.fh-bgroup { display: flex; flex-direction: column; gap: 30px; }
.fh-bgroup-title {
  margin: 0; color: var(--c-dark-blue);
  font-family: var(--font-body); font-size: var(--h4-size);
  font-weight: 600; line-height: var(--h4-lh);
}
.fh-bgroup-bullets { display: flex; flex-direction: column; gap: 10px; }
.fh-bgroup .fh-bullet { min-height: 56px; }
.fh-bgroups-divider {
  width: 100%; margin: 0; border: 0;
  border-top: 1px solid var(--c-dark-blue);
}
.fh-page .fh-bgroups-section .fh-more-toggle { margin-top: 0; }

/* ==========================================================================
   Links list — chain icon + bold label + description (Figma node 112:3052)
   ========================================================================== */
.fh-page .fh-links-section .fh-wrap { gap: 50px; }
.fh-links-section .fh-title--h3 { max-width: 1008px; align-self: center; }
.fh-links {
  display: grid; grid-template-columns: repeat(2, minmax(0, 550px));
  justify-content: center; column-gap: 24px; row-gap: 30px;
}
.fh-link-item {
  display: flex; align-items: center; gap: 16px;
  color: var(--c-dark-blue);
  font-size: var(--text-md); line-height: var(--text-md-lh);
}
.fh-link-item svg { flex: 0 0 auto; width: 24px; height: 24px; }
.fh-link-text { display: block; min-width: 0; }
.fh-link-label { display: block; font-weight: 600; }
.fh-link-desc { display: block; font-weight: 400; }
.fh-page a.fh-link-item,
.fh-page a.fh-link-item:visited { color: var(--c-dark-blue); text-decoration: none; }
.fh-page a.fh-link-item:hover .fh-link-label { text-decoration: underline; }
.fh-page a.fh-link-item:focus-visible { outline: 3px solid var(--c-dark-blue); outline-offset: 3px; }

/* Seniors campaign (Figma node 112:3010): section-map card copy is lime. */
.fh-page--vyresnio-amziaus-gyventojai .fh-section-map .fh-card--copy-lime p,
.fh-page--zmones-su-negalia .fh-section-map .fh-card--copy-lime p { color: var(--c-lime); }

/* Links list reveal — extra rows unfold below the visible grid. On mobile the
   last visible item also collapses (Figma 112:2632 shows 3 of 4) and opens
   together with the reveal via data-mobile-extra-control. */
.fh-links-wrap { display: flex; flex-direction: column; width: 100%; }
.fh-reveal > .fh-links { padding-top: 30px; }
.fh-links-mobile-extra { display: contents; }
.fh-page .fh-links-section .fh-more-toggle { margin-top: 0; }

/* Icon list contact section (Figma node 112:3162): divider line, centered H4
   subtitle, bullet pills balanced into two columns. */
.fh-icons-divider {
  width: 100%; margin: 0; border: 0;
  border-top: 1px solid var(--c-dark-blue);
}
.fh-icon-list-section .fh-section-subtitle {
  width: 100%; max-width: 1008px; align-self: center;
}
.fh-contact-bullets { width: 100%; columns: 2; column-gap: 60px; }
.fh-contact-bullets .fh-bullet {
  break-inside: avoid; margin-bottom: 10px; min-height: 56px;
}
/* Contact bullets past the first 3 collapse on mobile only (Figma 112:2638);
   on desktop the extra wrapper dissolves into the balanced columns. */
.fh-contact-extra { display: contents; }

@media (min-width: 721px) and (max-width: 1180px) {
  .fh-links { grid-template-columns: minmax(0, 550px); row-gap: 24px; }
  .fh-contact-bullets { column-gap: 24px; }
}
@media (max-width: 720px) {
  .fh-bgroups { gap: 30px; }
  .fh-reveal > .fh-bgroups { padding-top: 30px; }
  .fh-bgroups-row { grid-template-columns: 1fr; gap: 30px; }
  .fh-bgroups-divider { display: none; }
  .fh-page .fh-bgroup .fh-bullet { min-height: 48px; }
  .fh-links { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .fh-reveal > .fh-links { padding-top: 20px; }
  /* Links list mobile (Figma 112:2632): H4 Mobile title, tighter icon gap,
     last visible item collapsed until „Matyti daugiau". */
  .fh-links-section .fh-title--h3 {
    font-size: var(--h4-size);
    line-height: var(--h4-lh);
  }
  .fh-link-item { gap: 12px; }
  .fh-links-mobile-extra {
    display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px;
    height: 0; overflow: hidden;
    transition: height .45s cubic-bezier(.22, 1, .36, 1);
  }
  /* Negalia links stack column-major on mobile (item 3 before item 2). */
  .fh-page--zmones-su-negalia .fh-links-wrap > .fh-links > *:nth-child(1) { order: 1; }
  .fh-page--zmones-su-negalia .fh-links-wrap > .fh-links > *:nth-child(2) { order: 3; }
  .fh-page--zmones-su-negalia .fh-links-wrap > .fh-links > *:nth-child(3) { order: 2; }
  .fh-page--zmones-su-negalia .fh-links-wrap > .fh-links > *:nth-child(4) { order: 4; }
  .fh-contact-bullets { columns: 1; }
  .fh-contact-bullets .fh-bullet {
    min-height: 48px; border-radius: 24px;
  }
  .fh-contact-bullets .fh-bullet::before { width: 10px; height: 10px; }
  /* Contact mode: icon extras stay visible; the contact bullets collapse. */
  .fh-icon-list-section--contact .fh-icon-list-extras { display: contents; }
  .fh-contact-extra {
    display: flex; flex-direction: column; gap: 10px;
    width: 100%; height: 0; overflow: hidden;
    transition: height .45s cubic-bezier(.22, 1, .36, 1);
  }
  .fh-contact-extra .fh-bullet { margin-bottom: 0; }
}

/* ==========================================================================
   Mamos home mobile (Figma 112:2684): icon list stacks its left column and
   reveals the rest; steps accordions show 3 items behind „Matyti daugiau".
   ========================================================================== */
@media (max-width: 720px) {
  /* The desktop-only 60px section gap must not outrank the mobile 30px. */
  .fh-page .fh-icon-list-section .fh-wrap { gap: 30px; }
  .fh-page .fh-icon-list-section .fh-more-toggle,
  .fh-page .fh-steps-section .fh-more-toggle { margin-top: 0; }
  .fh-icon-list {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }
  .fh-icon-item { gap: 12px; }
  /* Mobile title is H4 Mobile (20/26), not the 24/30 the H3 token gives. */
  .fh-icon-list-section .fh-title--h3 {
    font-size: var(--h4-size);
    line-height: var(--h4-lh);
  }
  .fh-icon-list-section .fh-more { color: var(--c-dark-blue); }
  .fh-icon-list-extras {
    display: flex; flex-direction: column; gap: 18px;
    width: 100%; height: 0; overflow: hidden;
    transition: height .45s cubic-bezier(.22, 1, .36, 1);
  }
  .fh-page .fh-steps-mobile-extras {
    display: flex; flex-direction: column; gap: 10px;
    width: 100%; height: 0; overflow: hidden;
    transition: height .45s cubic-bezier(.22, 1, .36, 1);
  }
}