/* ============================================================
   Investiciju Pulsas — page-level layout & section styles
   ============================================================ */

/* Charts lazy-load and report their real height back via postMessage after
   the page's first paint (see js/site.js), so the page grows in steps as
   you scroll. Without reserving the scrollbar's track up front, the very
   first height increase crosses the "needs a scrollbar" threshold and the
   browser inserts one mid-load — narrowing the content area and reading as
   a scrollbar popping in / a second bar appearing. Reserving the gutter
   from the start keeps the content width constant throughout. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; background: #ffffff; }

/* The carousel bleeds its viewport to the true screen edge via
   calc(50% - 50vw) (.il-carousel__viewport). vw units include the vertical
   scrollbar's width while % doesn't, so on any desktop with a scrollbar that
   math overshoots the real edge by the scrollbar's width — hence a
   page-wide horizontal scrollbar with nothing actually needing it. The fix
   is overflow-x:hidden, but NOT on html/body: position:sticky (used by
   .site-header) stops working on an element if ANY ancestor has overflow
   set to anything but visible, and html/body are ancestors of the sticky
   header. Scoping the guard to .site-overflow-guard (the <main> wrapper
   around everything except the header) keeps the header's ancestor chain
   clean while still containing the bleed. */
/* clip, not hidden: overflow-x:hidden forces overflow-y from `visible` to
   `auto` (CSS spec — one non-visible axis makes the other non-visible too),
   which silently turned <main> into its own vertical scroll container. Any
   fractional overflow inside it then produced a SECOND page scrollbar, with
   scrolling handed off between the two scrollers mid-gesture (and a touch
   scroll "delay" on mobile while main's scroller absorbed the gesture
   first). overflow-x:clip clips the carousel bleed the same way but never
   creates a scroll container, so overflow-y stays truly visible. The
   overflow-x:hidden line before it is a fallback for old browsers without
   `clip` support (pre-2022), which get the previous behavior. */
.site-overflow-guard { overflow-x: hidden; overflow-x: clip; }

.section-h2 { font-family: "TT Hoves", sans-serif; }

.site-shell { max-width: 1626px; margin: 0 auto; padding-left: 120px; padding-right: 120px; box-sizing: border-box; }
.site-section { padding-top: 120px; padding-bottom: 120px; }

@media (max-width: 860px) {
  .site-shell { padding-left: 24px; padding-right: 24px; }
  .site-section { padding-top: 60px; padding-bottom: 60px; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid #e1e1eb;
}
.site-header-inner { padding-top: 18px; padding-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header-inner > a { display: flex; align-items: center; flex-shrink: 0; }
.site-header-inner > a img { height: 44px; display: block; }
.site-nav-desktop { display: flex; align-items: center; gap: 32px; flex-wrap: nowrap; }
.il-nav-link { font-family: "TT Hoves", sans-serif; font-weight: 500; font-size: 15px; color: #121212; text-decoration: none; padding: 8px 2px; border-bottom: 2px solid transparent; transition: color .16s ease, border-color .16s ease; }
.il-nav-link:hover { color: #1B8F45; border-bottom-color: #1B8F45; }

@media (min-width: 1241px) and (max-width: 1560px) {
  .site-header-inner { padding-left: 60px; padding-right: 60px; gap: 18px; }
  .site-nav-desktop { gap: 22px; }
  .site-nav-desktop .il-nav-link { font-size: 14px; }
}
@media (max-width: 1240px) {
  .site-nav-desktop { display: none !important; }
  /* Without this, the header keeps .site-shell's full 120px desktop
     padding all the way down to 860px (where .site-shell itself finally
     drops to 24px) — the CTA button ends up flush with that 120px inset
     instead of the actual screen edge, reading as "not aligned right". */
  .site-header-inner { gap: 12px; justify-content: flex-start; padding-left: 24px; padding-right: 24px; }
  /* :first-child, not a bare `> a` — the CTA button is also a direct <a>
     child, so the unscoped selector gave it margin-right:auto too. Flexbox
     then split the row's free space across BOTH auto margins (after the
     logo, and after the button itself), leaving the button stranded well
     short of the true right edge instead of flush against it. */
  .site-header-inner > a:first-child { margin-right: auto; }
}

/* ---------- Hero ---------- */
.hero-full {
  position: relative; width: 100%; overflow: hidden;
  padding: 120px 0 100px; box-sizing: border-box;
  background-color: #195236;
  background-image: url("../assets/hero-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 860px) { .hero-full { padding: 64px 0 56px; } }
@media (max-width: 767px) { .hero-full { background-attachment: scroll; } }
.hero-full::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.08), transparent 55%);
}
.hero-content { position: relative; z-index: 1; max-width: 820px; }

/* ---------- Tooltip (hover reveal) ---------- */
.tip-anchor { position: relative; border-bottom: 1.5px dotted #1B8F45; cursor: help; }
.tip-anchor-dark { border-bottom-color: rgba(255,255,255,.7) !important; }
.tip-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px);
  background: #195236; color: #ffffff; font-family: "TT Hoves", sans-serif; font-weight: 500;
  font-size: 13px; line-height: 1.5; padding: 12px 14px; border-radius: 8px; width: 280px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 20; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease;
}
.tip-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #195236; }
.tip-anchor:hover .tip-bubble, .tip-anchor:focus .tip-bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) { .tip-bubble { width: 220px; } }

.fact-tip-bubble { bottom: calc(100% + 12px); left: auto; right: -8px; transform: translateY(6px); background: #195236; }
.fact-tip-bubble::after { left: auto; right: 16px; transform: none; }
.il-fact-source-trigger:hover .fact-tip-bubble,
.il-fact-source-trigger:focus .fact-tip-bubble { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- Chart embeds ---------- */
.chart-embed { width: 100%; border: none; display: block; background: transparent; opacity: 0; transition: opacity .6s ease; }
.chart-embed.is-loaded { opacity: 1; }
.two-col-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; margin-top: 22px; }
.two-col-charts--2-1 { grid-template-columns: 2fr 1fr; }

.il-image-placeholder {
  border-radius: 6px 44px 44px 44px;
  border: 1.5px dashed var(--border-strong, #b4b5c0);
  background-image: repeating-linear-gradient(45deg, rgba(18,18,18,.04) 0 10px, rgba(18,18,18,.015) 10px 20px);
  display: flex; align-items: center; justify-content: center;
  min-height: 300px;
  font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-medium);
  color: rgba(18,18,18,.45); letter-spacing: .04em; text-transform: uppercase;
}
/* fdi-projects has stacked -24%/-7% callouts above the line, so it needs extra
   height on mobile (where the heading wraps to 3 lines and squeezes the plot). */
.fdi-projects-embed { min-height: 400px; }
@media (max-width: 700px) { .fdi-projects-embed { min-height: 520px; } }
@media (max-width: 700px) { .two-col-charts { grid-template-columns: 1fr; gap: 36px; } }
/* min-height, not a forced `height` — this chart is auto-fit by js/site.js
   (FIT_SRCS), which measures its real content and sets an inline height.
   An `!important` height here would always win over that inline style and
   clip the chart to a fixed size regardless of what it actually needs, which
   is exactly what caused the internal scrollbar: on narrow screens the two
   panels stack vertically and need more room than a flat 900px allows.
   min-height only acts as a floor for the moment before JS has measured
   anything yet, and never fights the JS-calculated height afterwards. */
@media (max-width: 700px) { .gbs-combo-embed { min-height: 900px; } }
@media (max-width: 700px) { .context-divider { margin: 30px 0 !important; } }

/* Matches the regions-waffle iframe's own fixed height instead of stretching
   to the taller sibling column (heading + paragraph + chart together), and
   sits at the bottom of the row so it lines up with the chart rather than
   the heading/paragraph above it. */
.regionai-photo { align-self: end; height: 700px; border-radius: 6px 54px 54px 54px; }
@media (max-width: 860px) { .regionai-photo { border-radius: 6px 36px 36px 36px; } }
@media (max-width: 700px) { .regionai-photo { display: none; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Sektoriai / Ateitis ---------- */
.tesiantis-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 860px) { .tesiantis-grid { grid-template-columns: 1fr; gap: 36px; } }

.strategy-box { background: var(--il-blue-200); border-radius: 6px 44px 44px 44px; padding: 36px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.strategy-box img { width: 100%; max-width: 340px; height: auto; object-fit: contain; border-radius: 10px; }
@media (max-width: 860px) {
  .strategy-box { padding: 28px; border-radius: 6px 36px 36px 36px; }
  .strategy-box a { white-space: normal; text-align: center; }
}

/* ---------- Kontaktai ---------- */
.kontaktai-grid { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 48px; align-items: center; }
.kontaktai-grid img { width: 220px; height: auto; object-fit: contain; flex-shrink: 0; }
@media (max-width: 860px) {
  .kontaktai-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; justify-items: center; }
  .kontaktai-grid a { justify-content: center; }
}

.contact-link { width: fit-content; border-bottom: 1.5px solid transparent; transition: border-color var(--dur-base) var(--ease-standard); }
.contact-link:hover, .contact-link:focus { border-bottom-color: var(--il-green-500); }
@media (max-width: 860px) { .contact-link { width: auto; } }

/* ---------- Footer ---------- */
.site-footer { background-color: var(--brand-primary); }
.site-footer-inner { padding-top: 48px; padding-bottom: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }