/* ==========================================================================
   Latviešu Centrs Gaŗezers, modern redesign
   Hand-built, dependency-free, mobile-first stylesheet.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Brand palette, drawn from the Gaŗezers logo: blue + green on white.
     Variable names kept as-is; primary is now the logo BLUE. */
  --carmine: #1c6bb0;       /* primary, logo blue */
  --carmine-dark: #124f83;
  --carmine-soft: #6fabd9;
  --pine: #2f9e46;          /* secondary, logo green */
  --lake: #3f93d8;          /* sky-blue accent */
  --gold: #158a86;          /* teal accent (kept cool, on-palette) */

  --ink: #1c2530;           /* body text */
  --ink-soft: #4b5563;
  --cream: #f6f9fb;         /* page background, cool near-white */
  --cream-2: #eaf1f7;       /* alt band, light blue-gray */
  --paper: #ffffff;         /* cards */
  --line: #d8e4ec;          /* hairlines */

  --shadow-sm: 0 1px 3px rgba(20, 40, 60, .08), 0 1px 2px rgba(20, 40, 60, .05);
  --shadow-md: 0 10px 30px rgba(18, 55, 90, .12), 0 4px 10px rgba(18, 55, 90, .07);
  --shadow-lg: 0 24px 60px rgba(18, 55, 90, .18);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;

  --maxw: 1180px;
  --gutter: clamp(1.1rem, 4vw, 3rem);

  --font-head: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --header-h: 74px;
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; height: auto; }
a { color: var(--carmine); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--carmine-dark); }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.1; color: var(--ink); margin: 0 0 .5em; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--lake); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 12px; z-index: 1000;
  background: var(--carmine); color: #fff; padding: 12px 18px; border-radius: 8px;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---- Layout helpers ----------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.2rem, 8vw, 6rem); }
.section--tint { background: var(--cream-2); }
.section--ink { background: #1b2430; color: #e9edf3; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p { color: #c3ccd8; }

.lat { color: var(--carmine); }              /* Latvian text emphasis in headings */
.section--ink .lat { color: var(--carmine-soft); }

.kicker {
  /* Block, not inline-flex: the bilingual pair is two spans plus a separator, and
     as flex items they broke into odd columns on narrow phones. As normal inline
     content the phrase wraps like text. */
  display: block;
  font-family: var(--font-body); font-weight: 700; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--carmine);
  margin: 0 0 .9rem;
}
.kicker::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 2px; background: var(--carmine); border-radius: 2px;
  margin-right: .55em; position: relative; top: -.08em;
}
.section--ink .kicker { color: var(--gold); }
.section--ink .kicker::before { background: var(--gold); }

.section-head { max-width: 760px; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.section-head h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; margin-bottom: 0; }
.section--ink .section-head p { color: #b6c0cd; }
.center { text-align: center; margin-inline: auto; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  --bg: var(--carmine); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .92em 1.6em; border-radius: 999px; font-weight: 700; font-size: .98rem;
  background: var(--bg); color: var(--fg); border: 2px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: var(--shadow-sm); line-height: 1;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }
.btn:active { transform: translateY(0); }
.btn--lake { --bg: var(--lake); }
.btn--pine { --bg: var(--pine); }
.btn--ghost {
  --bg: transparent; --fg: #fff; border-color: rgba(255,255,255,.6);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn--outline { --bg: transparent; --fg: var(--carmine); border-color: var(--carmine); box-shadow: none; }
.btn--outline:hover { --bg: var(--carmine); color: #fff; }
.btn--lg { padding: 1.05em 2em; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.topbar {
  background: var(--carmine-dark); color: #f3d9d9; font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; padding-block: 6px; }
.topbar a { color: #fff; font-weight: 600; }
.topbar a:hover { color: #ffd7d7; }
.topbar__addr { display: inline-flex; align-items: center; gap: .5em; opacity: .95; }
.topbar__links { display: flex; gap: 1.2rem; align-items: center; }
@media (max-width: 720px) {
  .topbar__addr span.long { display: none; }
  .topbar { font-size: .78rem; }
  .topbar .wrap { justify-content: center; gap: .9rem; }
}
@media (max-width: 560px) {
  .topbar__addr { display: none; }              /* keep the bar clean; address lives in header/footer */
  .topbar .wrap { justify-content: center; gap: 1.4rem; }
}

.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(246, 249, 251, .82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--line); background: rgba(246,249,251,.94); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand img { width: auto; height: 40px; }
@media (max-width: 400px) { .brand img { height: 34px; } }

/* Desktop nav */
.mainnav { display: none; }
.header-cta { display: none; }   /* hidden until there is room on large screens */
.header-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
@media (min-width: 1060px) {
  .mainnav { display: flex; align-items: center; gap: .1rem; }
  .mainnav a {
    position: relative; color: var(--ink); font-weight: 600; font-size: .82rem;
    padding: .5rem .58rem; border-radius: 8px; line-height: 1.15; text-align: center; white-space: nowrap;
  }
  .mainnav a .t-sub { display: block; font-size: .72rem; font-weight: 500; color: var(--ink-soft); }
  .mainnav a::after {
    content: ""; position: absolute; left: .58rem; right: .58rem; bottom: .3rem; height: 2px;
    background: var(--carmine); border-radius: 2px; transform: scaleX(0); transform-origin: center;
    transition: transform .2s ease;
  }
  .mainnav a:hover { color: var(--carmine); }
  .mainnav a:hover::after, .mainnav a.is-active::after { transform: scaleX(1); }
}
@media (min-width: 1360px) {
  .header-cta { display: inline-flex; }
}
/* Header pill: single line, tighter than a body button so it matches the nav height. */
.header-cta { padding: .6em 1.15em; font-size: .84rem; white-space: nowrap; }

/* Hamburger */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px; border: 1px solid var(--line);
  background: var(--paper); border-radius: 12px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.nav-toggle span { display: block; height: 2.5px; width: 100%; background: var(--carmine); border-radius: 3px; transition: transform .25s ease, opacity .2s ease; }
@media (min-width: 1060px) { .nav-toggle { display: none; } }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--cream); transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  visibility: hidden;
}
.mobile-nav.open { transform: translateX(0); visibility: visible; }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--gutter); border-bottom: 1px solid var(--line); min-height: var(--header-h); }
.mobile-nav__top img { height: 38px; }
.mnav-close {
  width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper);
  font-size: 1.5rem; line-height: 1; color: var(--carmine); cursor: pointer; box-shadow: var(--shadow-sm);
}
.mobile-nav__links { overflow-y: auto; padding: .6rem var(--gutter) 1rem; -webkit-overflow-scrolling: touch; }
.mobile-nav__links a {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: 1rem .4rem; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 1.18rem;
}
.mobile-nav__links a .t-sub { color: var(--ink-soft); font-weight: 500; font-size: .92rem; }
.mobile-nav__links a:active, .mobile-nav__links a:hover { color: var(--carmine); }
.mobile-nav__foot { padding: 1.1rem var(--gutter) 1.6rem; border-top: 1px solid var(--line); display: grid; gap: .7rem; }
.mobile-nav__foot .btn { width: 100%; }
.mobile-nav__social { display: flex; gap: .8rem; justify-content: center; margin-top: .4rem; }

/* Drawer link stagger animation */
.mobile-nav.open .mobile-nav__links a { animation: slideIn .4s both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; min-height: min(94vh, 820px); display: flex; align-items: center;
  color: #fff; overflow: hidden; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; background: #10202b center/cover no-repeat; }
.hero__video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.77vh;
  border: 0; pointer-events: none; z-index: 1;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(12,20,28,.55) 0%, rgba(12,20,28,.30) 40%, rgba(12,20,28,.72) 100%),
    radial-gradient(120% 90% at 15% 20%, rgba(18,79,131,.48), transparent 60%);
}
.hero__inner {
  position: relative; z-index: 3;
  padding-block: clamp(4rem, 12vh, 8rem); max-width: 780px;
  transform: translateZ(0);   /* own compositing layer, so the video cannot swallow it */
}
.hero .kicker { color: #c4e9b4; }
.hero .kicker::before { background: #c4e9b4; }
.hero h1 {
  color: #fff; font-size: clamp(2.6rem, 8vw, 5.3rem); font-weight: 600; line-height: .98;
  text-shadow: 0 2px 30px rgba(0,0,0,.35); margin-bottom: .35em;
}
.hero h1 .t-sub { display: block; font-size: .42em; font-weight: 500; letter-spacing: .04em; opacity: .92; margin-top: .3em; font-family: var(--font-body); text-transform: uppercase; }
.hero__lead { font-size: clamp(1.05rem, 2.4vw, 1.35rem); max-width: 40ch; color: #f2f2f2; text-shadow: 0 2px 16px rgba(0,0,0,.4); margin-bottom: 1.8rem; }
.hero .btn-row { margin-top: .4rem; }
.hero__scroll {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 3;
  color: rgba(255,255,255,.85); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.hero__scroll .chevron { width: 18px; height: 18px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(4px,4px); } }

/* Motto ribbon under hero */
.ribbon { background: var(--carmine); color: #fff; }
.ribbon .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; justify-content: center; align-items: center; padding-block: 1.1rem; text-align: center; }
.ribbon strong { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; }
.ribbon span { opacity: .9; font-size: .95rem; }

/* ==========================================================================
   Welcome / intro
   ========================================================================== */
.intro__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .intro__grid { grid-template-columns: 1.3fr .9fr; } }
.intro h2 { font-size: clamp(1.8rem, 4.4vw, 2.8rem); }
.intro p { color: var(--ink-soft); font-size: 1.08rem; }
.intro__aside { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.4rem); box-shadow: var(--shadow-md); text-align: center; }
.intro__aside img { width: 96px; margin: 0 auto 1rem; filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)); }
.intro__aside .motto { font-family: var(--font-head); font-size: 1.35rem; color: var(--carmine); margin-bottom: .2rem; }
.intro__aside .motto-en { color: var(--ink-soft); font-size: .95rem; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--font-head); font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--carmine); line-height: 1; }
.stat span { font-size: .8rem; color: var(--ink-soft); letter-spacing: .02em; }

/* ==========================================================================
   Program cards
   ========================================================================== */
.cards { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.pcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.6rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  border-top: 4px solid var(--accent, var(--carmine));
}
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.pcard__age { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent, var(--carmine)); margin-bottom: .5rem; }
.pcard h3 { font-size: 1.28rem; margin-bottom: .1rem; }
.pcard h3 .t-sub { display: block; font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.pcard ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.pcard li { font-size: .9rem; padding-left: 1.1rem; position: relative; color: var(--ink); }
.pcard li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--carmine)); }
.pcard li .t-sub { display: block; color: var(--ink-soft); font-size: .82rem; }
.pcard li.fest { color: var(--pine); font-weight: 700; }
.pcard li.fest::before { background: var(--pine); }

.note {
  margin-top: 1.6rem; padding: 1rem 1.2rem; background: #eef5fb; border: 1px solid #cfe2f2;
  border-left: 4px solid var(--carmine); border-radius: var(--radius-sm); font-size: .92rem; color: #2b4a63;
}
.note strong { color: #123f60; }

/* ==========================================================================
   Weekly-fun gallery (flyers) + posters
   ========================================================================== */
.tiles { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  background: var(--paper); border: 1px solid var(--line); display: block; aspect-ratio: 1/1;
  transition: transform .2s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-md); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .9rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(10,15,20,.82)); color: #fff;
  font-weight: 700; font-size: .92rem;
}
.tile__label .t-sub { display: block; font-weight: 500; opacity: .85; font-size: .78rem; }

.posters { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 760px) { .posters { grid-template-columns: repeat(3, 1fr); } }
.poster { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--paper); transition: transform .2s ease, box-shadow .25s; }
.poster:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ==========================================================================
   Video gallery (click-to-play facades)
   ========================================================================== */
.videos { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .videos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .videos { grid-template-columns: repeat(3, 1fr); } }
.vcard {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9;
  background: #0e1620; cursor: pointer; box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,.08);
}
.vcard iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vcard__facade { position: absolute; inset: 0; display: grid; place-items: center; }
/* The poster sits under a scrim so the white play button stays legible over
   any frame; the scrim warms up on hover the way the old gradient did. */
.vcard__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard__facade::after {
  content: ""; position: absolute; inset: 0; transition: background .2s ease;
  background: radial-gradient(120% 120% at 50% 40%, rgba(14,22,32,.28), rgba(14,22,32,.72));
}
.vcard:hover .vcard__facade::after { background: radial-gradient(120% 120% at 50% 40%, rgba(47,158,70,.34), rgba(14,22,32,.8)); }
.vcard__play { position: relative; z-index: 1; }
.vcard__time {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  padding: .2em .5em; border-radius: 6px; background: rgba(9,14,20,.82);
  color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.vcard__play {
  width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.4); transition: transform .2s ease;
}
.vcard:hover .vcard__play { transform: scale(1.08); }
.vcard__play::after { content: ""; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--carmine); }
.vcard__title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.4rem .9rem .8rem; background: linear-gradient(transparent, rgba(0,0,0,.85)); color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.vcard__title .t-sub { display: block; font-weight: 500; font-size: .78rem; color: #c9d3df; margin-top: .15rem; }

/* ==========================================================================
   Events timeline
   ========================================================================== */
.timeline { display: grid; gap: .9rem; }
.event {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.2rem; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .22s;
}
.event:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.event__date {
  min-width: 74px; text-align: center; background: var(--carmine); color: #fff; border-radius: 12px;
  padding: .5rem .3rem; line-height: 1;
}
.event__date b { display: block; font-family: var(--font-head); font-size: 1.5rem; }
.event__date span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.event__body h3 { font-size: 1.1rem; margin-bottom: .15rem; }
.event__body .t-sub { color: var(--ink-soft); font-size: .88rem; }
.event__body .meta { display: inline-block; margin-top: .35rem; font-size: .8rem; color: var(--pine); font-weight: 600; }

/* Two-up lists (church + board) */
.twoup { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .twoup { grid-template-columns: 1fr 1fr; } }
.listcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.listcard h3 { font-size: 1.35rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.listcard h3 .t-sub { font-family: var(--font-body); font-size: .82rem; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.rows { list-style: none; margin: 1rem 0 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 88px 1fr; gap: .3rem 1rem; padding: .85rem 0; border-top: 1px solid var(--line); font-size: .94rem; }
.rows li:first-child { border-top: 0; }
.rows .when { font-weight: 700; color: var(--carmine); }
.rows .what { color: var(--ink); }
.rows .what .t-sub { display: block; color: var(--ink-soft); font-size: .82rem; }

/* ==========================================================================
   Visit / venue
   ========================================================================== */
.visit__grid { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .visit__grid { grid-template-columns: 1.05fr .95fr; align-items: stretch; } }
.visit__photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); min-height: 260px; }
.visit__photo img { width: 100%; height: 100%; object-fit: cover; }
.visit__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.4rem); box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.contact-list { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; font-size: .98rem; }
.contact-list .ic { flex: 0 0 40px; height: 40px; display: grid; place-items: center; background: var(--cream-2); border-radius: 12px; color: var(--carmine); }
.contact-list .ic svg { width: 20px; height: 20px; }
.contact-list b { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 700; }
.contact-list a { font-weight: 600; }
.map-embed { margin-top: auto; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Support CTA band
   ========================================================================== */
.support { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--carmine) 0%, var(--carmine-dark) 100%); }
.support::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 90% 10%, rgba(255,255,255,.14), transparent 55%); pointer-events: none; }
.support .wrap { position: relative; text-align: center; }
.support h2 { color: #fff; font-size: clamp(1.9rem, 5vw, 3rem); }
.support p { color: #ffe3e3; max-width: 60ch; margin-inline: auto; font-size: 1.08rem; }
.support .btn-row { justify-content: center; margin-top: 1.6rem; }
.support .btn--outline { --fg: #fff; border-color: rgba(255,255,255,.8); }
.support .btn--outline:hover { --bg: #fff; color: var(--carmine); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #171e28; color: #aeb8c6; padding-block: clamp(2.8rem, 6vw, 4rem) 2rem; font-size: .92rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer__brand img { width: 64px; margin-bottom: 1rem; }
.footer__brand .motto { font-family: var(--font-head); color: #fff; font-size: 1.15rem; }
.footer__brand p { color: #8b96a6; }
.flinks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; columns: 1; }
.flinks a { color: #c3ccd8; }
.flinks a:hover { color: #fff; }
.footer__contact address { font-style: normal; line-height: 1.7; }
.footer__contact a { color: #c3ccd8; }
.footer__contact a:hover { color: #fff; }
.social { display: flex; gap: .7rem; margin-top: 1rem; }
.social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: background .2s, transform .2s; }
.social a:hover { background: var(--carmine); transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.4rem; padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; font-size: .82rem; color: #7d8896; }
.footer__bottom a { color: #9aa4b2; }

/* ==========================================================================
   Scroll-reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Language switch (Latvian / English)

   Bilingual pairs are two SLOTS, not two languages:
     .t-lead  the line that leads   (keeps whatever styling its component gives)
     .t-sub   the smaller line under it
   The toggle swaps the text between the slots, so styling and layout never
   move. That is why the nine component rules above target .t-sub and not .en:
   in English mode .t-sub holds the Latvian.

   Strings that only ever show ONE language use a straight swap instead:
     .lv      hidden in English mode
     .en-alt  hidden in Latvian mode
   ========================================================================== */
.en-alt { display: none; }
html[data-lang="en"] .lv { display: none; }

/* Insurance only. English mode needs a JS swap to fill the slots, so hold the two
   lines back until it has run rather than letting the Latvian paint and flip.
   Latvian mode needs no swap and is never held. */
html[data-lang="en"]:not([data-lang-ready]) .t-lead,
html[data-lang="en"]:not([data-lang-ready]) .t-sub { visibility: hidden; }
html[data-lang="en"] .en-alt { display: inline; }

/* Stat blocks stack their two lines the same way the cards do. */
.stat span .t-lead { display: block; }
.stat span .t-sub { display: block; }

/* Secondary detail line inside a .rows entry, language-neutral. */
.rows .what .sub { display: block; color: var(--ink-soft); font-size: .82rem; }

/* ---- The toggle button -------------------------------------------------- */
.lang-toggle {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em .85em; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font-family: var(--font-body); font-weight: 700;
  font-size: .78rem; line-height: 1; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color .18s ease, border-color .18s ease, transform .16s ease;
}
.lang-toggle:hover { color: var(--carmine); border-color: var(--carmine-soft); transform: translateY(-1px); }
.lang-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 420px) {
  .lang-toggle { padding: .5em .7em; }
  .lang-toggle__label { display: none; }   /* globe only, to keep the header on one line */
}

/* ---- Powered by happyllama --------------------------------------------- */
.powered-by {
  display: inline-flex; align-items: center; gap: .6rem;
  opacity: .65; transition: opacity .2s ease;
}
.powered-by:hover { opacity: 1; }
.powered-by span {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: #7d8896; font-weight: 600;
}
.powered-by img { height: 15px; width: auto; display: block; }