/* ============================================================
   Invest Lithuania — component styles
   Hand-implemented equivalents of the design-system React
   components (Button, Fact/FactGrid, NewsCard, Carousel, Tabs,
   SplitContent, Divider, Testimonial), built directly on the
   design tokens in _ds/.../tokens/*.css.
   ============================================================ */

/* ---------- Button ---------- */
.il-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.1;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}
.il-btn--lg { padding: 18px 18px 18px 36px; gap: 18px; font-size: 16px; }
.il-btn--md { padding: 12px 12px 12px 24px; gap: 12px; }
.il-btn--sm { padding: 9px 9px 9px 18px; gap: 9px; }

.il-btn__chevron { flex: none; display: inline-flex; }
.il-btn__chevron svg { display: block; }

/* Fallback literals mirror tokens/colors.css so buttons keep their colours
   even if the design-system token sheet fails to load (e.g. file:// opens).
   Hover rules re-assert `color` explicitly (at 2-class specificity) because
   the global `a:hover { color: var(--text-link-hover) }` rule in
   tokens/base.css otherwise wins over the base `.il-btn--*` color and turns
   button text green on hover. */
.il-btn--primary { background: var(--btn-primary-bg, #195236); color: var(--btn-primary-fg, #ffffff); }
.il-btn--primary:hover { background: var(--btn-primary-bg-hover, #1b8f45); color: var(--btn-primary-fg, #ffffff); }

.il-btn--secondary { background: transparent; color: var(--btn-secondary-fg, #121212); border-color: var(--btn-secondary-border, #195236); border-width: 1.75px; }
.il-btn--secondary:hover { background: rgba(27,143,69,.2); color: var(--btn-secondary-fg, #121212); /* Green 500 @ 20% fill; text stays as rest state */ }

.il-btn--hero { background: var(--btn-hero-bg, #fed530); color: var(--btn-hero-fg, #121212); }
.il-btn--hero:hover { background: var(--btn-hero-bg-hover, #ffdd47); color: var(--btn-hero-fg-hover, #121212); }

.il-btn--link { background: transparent; color: var(--il-green-900); padding: 0 !important; border: none; border-radius: 0; gap: 8px; }
.il-btn--link:hover { color: var(--il-green-500); }

.il-btn--on-dark.il-btn--secondary { color: var(--il-white); border-color: var(--il-green-500); }
.il-btn--on-dark.il-btn--secondary:hover { color: var(--il-white); }
.il-btn--on-dark.il-btn--link { color: var(--il-white); }

/* ---------- FactGrid / Fact ---------- */
.il-fact-grid {
  display: grid;
  grid-template-columns: repeat(var(--fg-cols, 3), minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 56px;
}
@media (max-width: 768px) {
  .il-fact-grid { grid-template-columns: 1fr !important; column-gap: 0; row-gap: 40px; }
}

.il-fact { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
@media (max-width: 768px) {
  .il-fact { flex-direction: row; align-items: flex-start; gap: 18px; }
}

.il-fact-icon {
  width: 138px; height: 138px; flex: none;
  border-radius: 54px;
  background: var(--fact-icon-bg, #cfe5ef);
  display: flex; align-items: center; justify-content: center;
}
.il-fact-icon i { font-size: 64px; color: var(--fact-icon-color, var(--il-green-900)); }
@media (max-width: 768px) {
  .il-fact-icon { width: 72px; height: 72px; border-radius: 24px; }
  .il-fact-icon i { font-size: 33px; }
}

/* ---------- Grouped fact box (equation: fact = fact + fact, outlined) ---------- */
.il-fact-layout { display: flex; align-items: stretch; gap: 40px; }
@media (max-width: 1180px) { .il-fact-layout { flex-direction: column; gap: 40px; } }

.il-fact-box {
  display: flex; align-items: center; justify-content: space-evenly; gap: 24px;
  border: 1.5px solid var(--il-green-500); border-radius: 6px 54px 54px 54px;
  padding: 40px 48px; flex: 1; min-width: 0;
}
@media (max-width: 1180px) {
  .il-fact-box { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 20px; border-radius: 6px 36px 36px 36px; padding: 28px; }
}

.il-fact-eq-op {
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 36px;
  color: var(--il-green-500); flex: none; line-height: 1;
}
@media (max-width: 1180px) { .il-fact-eq-op { margin-left: 34px; } }

.il-fact--sm { flex-direction: row; align-items: center; gap: 18px; }
.il-fact--sm .il-fact-icon { width: 72px; height: 72px; border-radius: 24px; }
.il-fact--sm .il-fact-icon i { font-size: 33px; }

.il-fact--standalone { flex: none; height: 100%; justify-content: flex-start; padding-top: 40px; }
@media (max-width: 1180px) { .il-fact--standalone { height: auto; justify-content: flex-start; padding: 0 0 0 28px; } }

.il-fact-body { display: flex; flex-direction: column; min-width: 0; }
.il-fact-number {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: 54px; line-height: 0.74; color: var(--il-black); letter-spacing: -0.01em;
}
.il-fact-number sup { font-size: 24px; line-height: 0; vertical-align: super; margin-left: 2px; }
@media (max-width: 768px) { .il-fact-number { font-size: 48px; } .il-fact-number sup { font-size: 16px; } }
.il-fact-desc { margin-top: 15px; color: var(--text-secondary); }
@media (max-width: 768px) { .il-fact-desc { margin-top: 6px; } }
.il-fact-source {
  margin-top: 15px; display: flex; align-items: center;
  font-family: var(--font-sans); font-size: 13px; color: var(--il-black);
}
@media (max-width: 768px) { .il-fact-source { margin-top: 12px; } }
.il-fact-source-trigger {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: help; padding: 0;
}
/* Solid green-900 circle with a fully-opaque white glyph — no hover toggle,
   no lighter/whitened rest state. */
.il-tooltip-circle { fill: var(--il-green-900); }
.il-tooltip-glyph { fill: var(--il-white); }

/* ---------- NewsCard ---------- */
.il-news-card { display: flex; flex-direction: column; width: 100%; height: auto; box-sizing: border-box; cursor: pointer; text-decoration: none; }
.il-news-card__body {
  background: var(--surface-subtle); border-radius: 54px 54px 54px 0;
  padding: 30px; flex: 1; display: flex; flex-direction: column; box-sizing: border-box;
}
.il-news-card__title { color: var(--text-primary); margin: 0; }
.il-news-card__footer { display: flex; align-items: center; margin-top: auto; padding-top: 24px; }
.il-news-card__cta {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 20px;
  color: var(--text-primary); user-select: none;
}
.il-news-card__arrow { flex: none; display: block; margin-left: auto; }
.il-news-card__arrow circle { fill: #195236; transition: fill var(--dur-base) var(--ease-standard); }
.il-news-card:hover .il-news-card__arrow circle { fill: #1b8f45; }
.il-news-card__media { border-radius: 0 54px 54px 54px; overflow: hidden; flex: none; }
.il-news-card__media-inner { aspect-ratio: 1.91 / 1; background: var(--il-lavender-200); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.il-news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-standard); }
.il-news-card:hover .il-news-card__media img { transform: scale(1.05); }
.il-news-card__media-placeholder { font-family: var(--font-sans); font-size: 13px; color: rgba(0,0,0,.4); text-align: center; padding: 12px; }
@media (max-width: 700px) {
  .il-news-card__body { border-radius: 36px 36px 36px 0; padding: 18px; }
  .il-news-card__media { border-radius: 0 36px 36px 36px; }
}

/* ---------- Carousel ----------
   Per the DS Carousel: in-focus cards span the content column; the viewport
   then bleeds to the right edge of the browser window so upcoming
   (out-of-focus) cards peek in at reduced opacity, signaling more content.
   Sizing/paging/opacity are computed in JS (wireCarousels() in site.js);
   this CSS only sets up the bleed viewport and the transition. */
.il-carousel { position: relative; }
.il-carousel__viewport { overflow: hidden; margin-right: calc(50% - 50vw); touch-action: pan-y; }
.il-carousel__track {
  display: flex; align-items: stretch; gap: 30px; padding: 4px 4px 8px;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.il-carousel__item { flex: none; min-width: 260px; opacity: .6; transition: opacity var(--dur-base) var(--ease-standard); }
.il-carousel__item.is-in-focus { opacity: 1; }
@media (max-width: 699px) { .il-carousel__track { gap: 18px; } }
.il-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 30px; }
.il-carousel__arrow {
  background: none; border: none; padding: 0; line-height: 0; cursor: pointer; border-radius: 50%; flex: none;
}
.il-carousel__arrow circle { stroke: #195236; fill: none; transition: fill var(--dur-base) var(--ease-standard); }
.il-carousel__arrow path { stroke: #195236; }
.il-carousel__arrow:hover circle { fill: rgba(25,82,54,.15); }
.il-carousel__arrow:disabled { opacity: .35; cursor: not-allowed; }
/* Pagination dots — max 5 full-size dots visible at once (see wireCarousels()
   in site.js for the sliding-window logic). When there are more pages, a
   half-size dot appears on the overflow side(s) to signal more pages exist. */
.il-carousel__dots { display: flex; align-items: center; gap: 12px; }
.il-carousel__dot { width: 12px; height: 12px; border-radius: 6px; background: #e1e1eb; border: none; padding: 0; cursor: pointer; flex: none; transition: width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out), background var(--dur-base) var(--ease-standard); }
.il-carousel__dot.is-active { width: 36px; background: #195236; }
.il-carousel__dot--sm { width: 6px; height: 6px; border-radius: 3px; }
.il-carousel__dot--hidden { visibility: hidden; pointer-events: none; }
@media (max-width: 699px) {
  .il-carousel__dots { gap: 8px; }
  .il-carousel__dot { width: 8px; height: 8px; border-radius: 4px; }
  .il-carousel__dot.is-active { width: 24px; }
  .il-carousel__dot--sm { width: 4px; height: 4px; border-radius: 2px; }
}

/* ---------- Tabs ---------- */
.il-tabs__bar-row { display: flex; justify-content: center; }
.il-tabs__pills {
  display: inline-flex; gap: 4px; padding: 9px; background: var(--tab-bar-bg, #efeff4);
  border-radius: var(--radius-pill); flex-wrap: wrap; position: relative;
}
/* Sliding active-pill highlight — measured & positioned in JS (site.js),
   animates left/top/width/height instead of instantly recoloring a pill. */
.il-tabs__highlight {
  position: absolute; left: 9px; top: 9px; width: 0; height: 0;
  background: var(--tab-active-bg, #afd4e4); border-radius: var(--radius-pill);
  z-index: 0; pointer-events: none;
  transition: left var(--dur-base) var(--ease-standard), top var(--dur-base) var(--ease-standard),
    width var(--dur-base) var(--ease-standard), height var(--dur-base) var(--ease-standard);
}
.il-tabs__pill {
  border: none; cursor: pointer; font-family: var(--font-sans); font-weight: var(--fw-medium);
  font-size: 18px; line-height: 1.1; padding: 18px 36px; border-radius: var(--radius-pill);
  background: transparent; color: var(--il-black); position: relative; z-index: 1;
}
.il-tabs__panels { margin-top: 60px; }
.il-tabs__panel { display: none; animation: il-tab-in 480ms cubic-bezier(.4,0,.2,1); }
.il-tabs__panel.is-active { display: block; }
@keyframes il-tab-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 860px) {
  .il-tabs__bar-row { justify-content: stretch; }
  .il-tabs__pills { display: flex; flex-direction: column; gap: 12px; padding: 0; background: transparent; border-radius: 0; width: 100%; }
  .il-tabs__highlight { display: none; }
  .il-tabs__pill { width: 100%; text-align: center; background: var(--tab-bar-bg, #efeff4); padding: 16px 24px; transition: background var(--dur-base) var(--ease-standard); }
  .il-tabs__pill.is-active { background: var(--tab-active-bg, #afd4e4); }
  /* Accordion: site.js reparents each panel to sit right after its own pill
     inside .il-tabs__pills, so .il-tabs__panels is left empty — hide it and
     give the relocated panel its own spacing instead of the desktop margin. */
  .il-tabs__panels { display: none; }
  .il-tabs__pills .il-tabs__panel { margin: 20px 0 32px; }
}

/* ---------- SplitContent ---------- */
.il-split { display: grid; grid-template-columns: var(--split-ratio, 5fr 6fr); column-gap: 54px; align-items: center; }
.il-split__media img, .il-split__media iframe { width: 100%; display: block; border: none; }
@media (max-width: 860px) {
  .il-split { grid-template-columns: 1fr; row-gap: 36px; }
}

/* ---------- Divider ---------- */
.il-divider { width: 100%; border: none; border-top: 1px solid var(--border-subtle); margin: 0; }

/* ---------- Testimonial ----------
   Default (non-compact): photo top-aligned on the left, content on the
   right — quote, then a footer row of name/position + a fixed-size logo
   slot bottom-right. Below 860px it stacks into a single column.
   Compact (used as a SplitContent aside next to a chart): always a single
   column — avatar+logo row on top, quote below, name, then position —
   at a medium type scale, regardless of viewport. */
.il-testimonial {
  background: var(--testimonial-bg, var(--il-blue-100));
  border-radius: 6px 54px 54px 54px;
  padding: 48px; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: row; align-items: flex-start; gap: 54px;
}

.il-testimonial__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.il-testimonial__avatar { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #fff; }

.il-testimonial__quote { margin: 0; color: var(--il-black); font-family: var(--font-sans); font-weight: var(--fw-light); font-size: 24px; line-height: 36px; }

.il-testimonial__footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-top: 24px; }
.il-testimonial__meta { display: flex; flex-direction: column; gap: 9px; min-width: 0; margin-top: 6px; }
.il-testimonial__name { font-family: var(--font-sans); font-weight: var(--fw-demibold); font-size: 20px; line-height: 28px; color: var(--il-black); }
.il-testimonial__position { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: 18px; line-height: 27px; color: var(--il-black); }

/* Logo slot: fixed box, image right-aligned, grayscale (brand convention
   so partner logos sit quietly against the tinted block background). */
.il-testimonial__logo-slot { width: 148px; height: 62px; flex: none; display: flex; align-items: center; justify-content: flex-end; }
.il-testimonial__logo { max-width: 100%; max-height: 100%; object-fit: contain; object-position: right center; filter: grayscale(100%); opacity: .7; }

@media (max-width: 860px) {
  .il-testimonial { flex-direction: column; align-items: stretch; gap: 24px; border-radius: 6px 36px 36px 36px; }
  .il-testimonial__avatar { width: 90px; height: 90px; }
  /* Matches the compact variant's fixed mobile scale (below) so a full
     testimonial and a compact one read at the same size side by side. */
  .il-testimonial__quote { font-size: 18px; line-height: 28px; }
  .il-testimonial__name { font-size: 18px; line-height: 26px; }
  .il-testimonial__position { font-size: 16px; line-height: 24px; }
  .il-testimonial__logo-slot { width: 100px; height: 42px; }
}

/* ---- Compact variant: always column, fixed medium scale ---- */
.il-testimonial--compact { flex-direction: column; align-items: stretch; padding: 36px; gap: 0; }
.il-testimonial--compact .il-testimonial__toprow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; row-gap: 16px; }
.il-testimonial--compact .il-testimonial__avatar { width: 90px; height: 90px; }
.il-testimonial--compact .il-testimonial__quote { font-size: 18px; line-height: 28px; margin-top: 24px; }
.il-testimonial--compact .il-testimonial__name { font-size: 18px; line-height: 26px; margin-top: 18px; }
.il-testimonial--compact .il-testimonial__position { font-size: 16px; line-height: 24px; margin-top: 6px; }
.il-testimonial--compact .il-testimonial__logo-slot { width: 120px; height: 50px; }