/* =============================================
   TYPOGRAPHY
   ============================================= */

/* ── Two families, matching the desktop design file
   ("atminties vietos desktop darbinis.ai"):

   • Oswald      — every heading, nav item, button, form label, timeline year
                   and counter. Condensed, always uppercase in this design.
   • Elms Sans   — body copy only: article text, card excerpts, field labels,
                   input and textarea text, captions.

   The design sets Oswald at Regular (400) and Elms Sans at Thin (100)
   throughout. We ship Elms Sans ExtraLight (200) instead of Thin — 100 is not
   in assets/fonts and 200 holds up far better at 14–16px on white.

   Work Sans is not used anywhere and, since 2026-08-28, is no longer shipped:
   there was never an @font-face for it and no rule ever named it. The seven
   WorkSans-*.woff2 files were removed. ── */

/* ── Oswald — headings and UI ── */
@font-face {
  font-family: "Oswald";
  font-weight: 200;
  src: url("../fonts/Oswald-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-weight: 300;
  src: url("../fonts/Oswald-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-weight: 400;
  src: url("../fonts/Oswald-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-weight: 500;
  src: url("../fonts/Oswald-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-weight: 600;
  src: url("../fonts/Oswald-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-weight: 700;
  src: url("../fonts/Oswald-Bold.woff2") format("woff2");
}

/* ── Elms Sans — body copy ── */
@font-face {
  font-family: "Elms Sans";
  font-weight: 200;
  src: url("../fonts/ElmsSans-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Elms Sans";
  font-weight: 300;
  src: url("../fonts/ElmsSans-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Elms Sans";
  font-weight: 400;
  src: url("../fonts/ElmsSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Elms Sans";
  font-weight: 500;
  src: url("../fonts/ElmsSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Elms Sans";
  font-weight: 600;
  src: url("../fonts/ElmsSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Elms Sans";
  font-weight: 700;
  src: url("../fonts/ElmsSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Elms Sans";
  font-weight: 800;
  src: url("../fonts/ElmsSans-ExtraBold.woff2") format("woff2");
}
/* The counter numbers used to run on Cassannet-Bold. They resolve through
   var(--font-heading) today; the sizes below were re-cut when they moved off
   Cassannet, whose digits ran ~14% narrower and ~6% taller per em —
   so every counter size below was re-cut to ~0.88 of its old value. That keeps
   each number block at roughly its old width (the columns they sit in are
   fixed) at a near-identical cap height. Change one, change its line-height by
   the same factor. */

/* Body copy — every block of running text an editor can write, in every area
   that renders WYSIWYG output. Same wrapper list as the inline rules below.

   It used to reach only .typography <p>/<ul> and .typography-route <p>, which
   left two visible seams. An <ol> — the terms list on /informacija/#salygos —
   fell through to the browser default and drew at weight 400, ragged-right and
   with no space between items, directly beside identically written bullets.
   And the memo intro, the news archive intro and the blog subtitle rendered
   the same editor output at the body's 400 with `body p { margin: 0 }` from
   style.css closing every gap between paragraphs. */
.typography p,
.typography ul li,
.typography ol li,
.typography-route p,
.typography-route ul li,
.typography-route ol li,
.news-page .container-info p,
.news-page .container-info ul li,
.news-page .container-info ol li,
.new-memo .memo-header p,
.new-memo .memo-header ul li,
.new-memo .memo-header ol li,
.main-content.change-ulContainer p,
.main-content.change-ulContainer ul li,
.main-content.change-ulContainer ol li,
.archive-subtitle p,
.archive-subtitle ul li,
.archive-subtitle ol li {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 500;
  /* line-height: 28px; */
  text-align: justify;
  margin: 1.2em 0;
}
/* The list box itself. ul and ol are outside the RESET further down, so both
   were running on browser defaults — identical today, but stated here so the
   pair cannot drift apart, and so a marker is never lost to one of the
   `list-style: none` rules further down the file. 40px is the indent the
   bullets have always had; the numbers now line up with it. */
.typography ul,
.typography ol,
.typography-route ul,
.typography-route ol,
.news-page .container-info ul,
.news-page .container-info ol,
.new-memo .memo-header ul,
.new-memo .memo-header ol,
.main-content.change-ulContainer ul,
.main-content.change-ulContainer ol,
.archive-subtitle ul,
.archive-subtitle ol {
  margin: 1.2em 0;
  padding-left: 40px;
}
.typography ul,
.typography-route ul,
.news-page .container-info ul,
.new-memo .memo-header ul,
.main-content.change-ulContainer ul,
.archive-subtitle ul {
  list-style: disc outside;
}
.typography ol,
.typography-route ol,
.news-page .container-info ol,
.new-memo .memo-header ol,
.main-content.change-ulContainer ol,
.archive-subtitle ol {
  list-style: decimal outside;
}
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-primary);
  /* Headings are set uppercase, and an uppercase Lithuanian compound
     ("BENDRUOMENĖS") can be wider than a phone's text column. Only kicks in
     when a word genuinely cannot fit — normal wrapping is untouched. */
  overflow-wrap: break-word;
}
.typography h1 {
  font-size: 54px;
  line-height: 1.1em;
  margin-bottom: 55px;
}
.typography h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1em;
  text-align: left;
  margin: 2em 0 1.5em;
}
.typography ul li,
.typography ol li,
.typography-route ul li,
.typography-route ol li,
.news-page .container-info ul li,
.news-page .container-info ol li,
.new-memo .memo-header ul li,
.new-memo .memo-header ol li,
.main-content.change-ulContainer p,
.main-content.change-ulContainer ul li,
.main-content.change-ulContainer ol li,
.archive-subtitle ul li,
.archive-subtitle ol li {
  margin: 0.6em;
}
/* The RESET further down hands `font: inherit` to b, strong, i, em, small, sub
   and sup, which wipes the browser's own bold and italic. Only .typography ever
   put them back, so every other rich-text area — route points above all — drew
   <strong> at the body's 300 weight and <em> upright. Same wrapper list as the
   link rule below. */
.typography i,
.typography em,
.typography-route i,
.typography-route em,
.news-page .container-info i,
.news-page .container-info em,
.new-memo .memo-header i,
.new-memo .memo-header em,
.main-content.change-ulContainer i,
.main-content.change-ulContainer em,
.archive-subtitle i,
.archive-subtitle em {
  font-style: italic;
}
.typography b,
.typography strong,
.typography-route b,
.typography-route strong,
.news-page .container-info b,
.news-page .container-info strong,
.new-memo .memo-header b,
.new-memo .memo-header strong,
.main-content.change-ulContainer b,
.main-content.change-ulContainer strong,
.archive-subtitle b,
.archive-subtitle strong {
  font-weight: 600;
}
/* Same reset, same fix: sub/sup lose their baseline shift and small its size. */
.typography sub,
.typography sup,
.typography-route sub,
.typography-route sup,
.news-page .container-info sub,
.news-page .container-info sup,
.new-memo .memo-header sub,
.new-memo .memo-header sup,
.main-content.change-ulContainer sub,
.main-content.change-ulContainer sup,
.archive-subtitle sub,
.archive-subtitle sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.typography sub,
.typography-route sub,
.news-page .container-info sub,
.new-memo .memo-header sub,
.main-content.change-ulContainer sub,
.archive-subtitle sub {
  bottom: -0.25em;
}
.typography sup,
.typography-route sup,
.news-page .container-info sup,
.new-memo .memo-header sup,
.main-content.change-ulContainer sup,
.archive-subtitle sup {
  top: -0.5em;
}
.typography small,
.typography-route small,
.news-page .container-info small,
.new-memo .memo-header small,
.main-content.change-ulContainer small,
.archive-subtitle small {
  font-size: 0.8em;
}
/* Editor-written links have to read as links in every rich-text area, not just
   inside .typography: route points, the memo intro, the news archive intro and
   the plain page template all render the same WYSIWYG output and were leaving
   their links in body colour. Gallery/lightbox anchors wrap images, not text,
   so they stay out of it. */
.typography a,
.typography-route a:not(.glightbox),
.news-page .container-info a,
.new-memo .memo-header a,
.main-content.change-ulContainer a,
.archive-subtitle a {
  color: var(--color-teal-light);
  text-decoration: none;
}
.typography a:hover,
.typography-route a:not(.glightbox):hover,
.news-page .container-info a:hover,
.new-memo .memo-header a:hover,
.main-content.change-ulContainer a:hover,
.archive-subtitle a:hover {
  text-decoration: underline;
}
.typography hr {
  text-align: left;
  width: 0;
  border: none;
  border-top: 3px solid var(--color-gray);
  margin: 8.4% 0 11%;
  transition: all 0.2s ease-in-out 0.1s;
}
.typography hr.appeared {
  width: 11%;
}
.typography blockquote {
  float: right;
  width: 40%;
  margin: 40px 0 40px 40px;
}
.typography blockquote p {
  padding: 30px;
  border: 2px solid var(--color-primary);
}
.typography blockquote.centered {
  float: none;
  width: 100%;
  padding: 0;
  margin: 50px 0;
}
.typography blockquote * {
  color: var(--color-primary);
  font-size: 26px;
  line-height: 30px;
  font-weight: 800;
}
.typography blockquote p {
  position: relative;
  text-align: left;
  margin: 0;
}
.typography blockquote p:before {
  content: " ";
  display: block;
  position: absolute;
  width: 39px;
  height: 28px;
  top: -13px;
  left: -31px;
  background: transparent url(../images/sprite.png) center no-repeat;
}
.typography blockquote.centered p {
  text-align: justify;
}
.typography blockquote i,
.typography blockquote em {
  color: var(--color-primary);
  display: block;
  position: absolute;
  right: 0;
  bottom: -40px;
  font-size: 20px;
}
.hidden {
  display: none;
}
/* =============================================
   LAYOUT
   ============================================= */

/*** RESET ***/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q,
blockquote {
  quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.container {
  max-width: 1281px;
  padding: 0 20px;
}
.relative {
  position: relative;
}
.clear {
  float: none !important;
  clear: both;
  font-size: 0;
  line-height: 0;
}

html {
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  position: relative;
  min-height: 100%;
  color: var(--color-text);
}
/* Form controls never inherit the page font on their own — without this,
   buttons, submits and selects fall back to the browser default. */
button,
input,
select,
textarea {
  font-family: var(--font-body);
}
/* main {
  min-height: 65vh;
}
main#postbuilder-page,
main#page-builder {
  min-height: 73.8vh;
} */
body.bg-gray {
  background-color: var(--color-beige);
}
body.bg-black {
  background-color: var(--color-near-black);
}

.body {
  padding-bottom: 134px;
}
.full .body {
  padding-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 35px;
  font-weight: 700;
  line-height: 45px;
  text-transform: uppercase;
}
h1.note {
  color: var(--color-dark);
  text-align: center;
}
h1.note img {
  display: block;
  margin: 1em auto;
}

.btn {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-white);
  font-size: 18px;
  height: 44px;
  line-height: 44px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--color-primary);
  overflow: hidden;
  transition:
    box-shadow 0.25s ease-in-out,
    transform 0.2s ease;
}
.btn:hover {
  color: var(--color-white);
  border-bottom: 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  transform: scale(1.03);
}
.btn u {
  display: none;
}
.btn u {
  position: absolute;
  background-color: var(--color-white);
  -webkit-transition: -webkit-transform 0.6s ease-in-out;
  -moz-transition: -moz-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
}
.btn u.t,
.btn u.b {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
.btn u.b {
  top: auto;
  bottom: 0;
}
.btn u.t.h {
  left: 200%;
}
.btn u.b.h {
  left: -200%;
}
.btn u.l,
.btn u.r {
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
}
.btn u.r {
  left: auto;
  right: 0;
}
.btn u.l.h {
  top: -200%;
}
.btn u.r.h {
  top: 200%;
}
.btn:hover u {
  transition-delay: 0.1s;
}
.btn:hover u.t {
  transform: translateX(-200%);
}
.btn:hover u.b {
  transform: translateX(200%);
}
.btn:hover u.l {
  transform: translateY(200%);
}
.btn:hover u.r {
  transform: translateY(-200%);
}
.timeline .loading {
  position: absolute;
  bottom: 40%;
  width: 100%;
  height: 55px;
}
.loading {
  background: transparent url(../images/loading.gif) center center no-repeat;
}
.overlay:before {
  content: " ";
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
  width: 43px;
  height: 43px;
  background: transparent url(../images/sprite.png) -1624px center no-repeat;
  z-index: 1;
}
.overlay.video:before {
  top: 50%;
  right: 50%;
  width: 53px;
  height: 53px;
  margin-top: -26px;
  margin-right: -26px;
  background-position: -1717px center;
}

.video-play-icon {
  background: transparent url(../images/play-btn.svg) center no-repeat;
  width: 56px;
  height: 56px;
  display: block;
  position: absolute;
}

img {
  -webkit-filter: grayscale(0.8);
  filter: grayscale(0.8);
}
#gallery img,
.fancybox-image,
.inline-gallery img,
.gslide-image img,
.gslide-media img,
.glightbox-container img,
img.no-filter,
img[src*="sprite.png"] {
  -webkit-filter: none;
  filter: none;
}

form {
  position: relative;
}
form .field input[type="text"],
form .field input[type="email"],
form .field input[type="password"],
form .field select,
.ui-selectmenu-button,
.map-container .middleColumn.pb-search-wrap input {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 14px;
  border: 2px solid var(--color-primary);
  /* border-radius: 21px; */
  background-color: transparent;
  padding: 4px 20px;
  height: 44px;
  line-height: 30px;
  outline: none;
}
.map-container .middleColumn.pb-search-wrap input {
  /* border: 2px solid var(--color-border); */
  max-width: 150px;
}
.map-container .middleColumn.pb-search-wrap input::placeholder {
  color: var(--color-primary);
}
.map-filters .pb-search-wrap {
  position: relative;
}
.map-container .pb-gc-holder .pb-gc-children-row {
  background: var(--color-white);
  color: var(--color-dark);
}
form .field input[type="text"],
form .field input[type="email"],
form .field input[type="password"],
form .field select {
  transition: all 0.2s ease-in-out;
}
form .field select {
  height: 42px;
  appearance: none;
}
form .field option {
  background-color: var(--color-near-black);
}
form div.field {
  position: relative;
}
form div.field.ico:after,
form div.field.dropdown:after,
.map-filters .pb-search-wrap::after {
  content: " ";
  display: block;
  position: absolute;
  right: 8.22%;
  bottom: 12px;
  width: 21px;
  height: 21px;
  -webkit-mask-image: url(../images/search-icon.svg);
  mask-image: url(../images/search-icon.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  background: var(--color-primary);
}
form div.field.ico:after {
  right: 20px;
}
form div.field.dropdown:after {
  background-position: -1180px center;
  transition: transform 0.1s ease-in-out;
}
form div.field.dropdown.opened:after {
  transform: rotateX(180deg);
}
form .field input::-webkit-input-placeholder {
  color: var(--color-primary);
}
form .field input:-moz-placeholder {
  color: var(--color-primary);
  opacity: 1;
}
form .field input::-moz-placeholder {
  color: var(--color-primary);
  opacity: 1;
}
form .field input:-ms-input-placeholder {
  color: var(--color-primary);
}
/* form .field input[type="text"]:hover,
form .field input[type="email"]:hover,
form .field input[type="password"]:hover,
form .field input[type="text"]:focus,
form .field input[type="email"]:focus,
form .field input[type="password"]:focus,
form .field select:hover,
form .field select:focus {
  color: var(--color-white);
  border-color: var(--color-teal-pale-2);
} */
.ui-selectmenu-button {
  width: auto !important;
  display: block;
}
.ui-selectmenu-button.ui-corner-top {
  border-radius: 20px 20px 0 0;
  border-bottom: none;
  padding-bottom: 6px !important;
}
.ui-selectmenu-button span.ui-selectmenu-text {
  padding: 0;
  height: 30px;
  line-height: 30px;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 20px;
  right: 30px;
}
.ui-selectmenu-menu {
  border-radius: 0 0 20px 20px;
  color: #5f5f5f;
  font-weight: 600;
  line-height: 50px;
  text-transform: uppercase;
  overflow: hidden;
}
.ui-selectmenu-menu .ui-menu {
  border-radius: 0 0 20px 20px;
  border: 2px solid #454545;
  border-top: none;
  background-color: var(--color-near-black);
  padding-bottom: 0;
  padding-top: 4px;
  max-height: 300px;
}
.ui-menu .ui-menu-item {
  line-height: 18px;
  padding: 14px 0;
  margin: 0 20px;
  border-top: 1px solid var(--color-gray-darker);
  transition: color 0.1s ease-in-out;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
  margin: 0 20px;
  color: var(--color-white);
}

.range-slider {
  display: block;
  background: var(--color-dark);
  height: 3px;
  border-radius: 0;
  border: none;
}
.range-slider label {
  cursor: pointer;
  position: absolute;
  /* Sized to its text and centred on its own tick. The old fixed width plus a
     negative margin was cut to Oswald's digits; in Work Sans every label
     overflowed its box and the end ones spilled past the page edge. */
  width: auto;
  white-space: nowrap;
  margin-top: 26px;
  margin-left: 0;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--font-heading);
  color: #545454;
  font-weight: 500;
  font-size: 21px;
  line-height: 1em;
  transition: all 0.1s ease-in-out;
}
.range-slider label.active {
  color: var(--color-white);
  font-size: 35px;
  margin-top: 13px;
}
/* Flows after the year instead of hanging off the box's right edge, which only
   lined up while the box was wider than the digits. */
.range-slider label b {
  font-size: 15px;
  position: relative;
  bottom: -1px;
  height: 1em;
  line-height: 1em;
}
.range-slider i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  top: -6px;
  margin-left: -6px;
  background: var(--color-primary);
  position: absolute;
  z-index: 3;
}
.range-slider .ui-slider-range {
  background: var(--color-primary);
  transition: all 0.1s ease-in-out;
}
.range-slider i.ui-state-default {
  cursor: ew-resize;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  top: -10px;
  margin-left: -10px;
  background: transparent url(../images/sprite.png) -1553px center no-repeat;
  border: none;
  outline: none;
  transition: left 0.1s ease-in-out;
  z-index: 3;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 180%;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}
.card {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card .front,
.card .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s;
}
.card .back .text {
  margin: 12% 10% 0;
}
.card .front {
  -webkit-transform: perspective(2000px) rotateY(0deg);
  transform: perspective(2000px) rotateY(0deg);
  background-color: var(--color-primary);
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card .back {
  -webkit-transform: perspective(2000px) rotateY(-179deg);
  transform: perspective(2000px) rotateY(-179deg);
  background-color: var(--color-primary);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.card:hover .front {
  -webkit-transform: perspective(2000px) rotateY(180deg);
  transform: perspective(2000px) rotateY(180deg);
}
.card:hover .back {
  -webkit-transform: perspective(2000px) rotateY(0deg);
  transform: perspective(2000px) rotateY(0deg);
  z-index: 2;
}
/* Touch screens have no hover, so the back face — and the "Skaityti daugiau"
   link on it — used to be unreachable: there was no way into the post at all.
   custom.js adds .is-flipped on tap, so the first tap turns the card and the
   second one follows the button, the way the old site behaved.

   The hover rules above are cancelled here because a touch browser keeps
   applying :hover to the last tapped element, which would fight the class and
   leave cards stuck face-down. .is-flipped is declared after this block so it
   wins on equal specificity. */
@media (hover: none) {
  .card:hover .front {
    -webkit-transform: perspective(2000px) rotateY(0deg);
    transform: perspective(2000px) rotateY(0deg);
  }
  .card:hover .back {
    -webkit-transform: perspective(2000px) rotateY(-179deg);
    transform: perspective(2000px) rotateY(-179deg);
    z-index: auto;
  }
}
.card.is-flipped .front {
  -webkit-transform: perspective(2000px) rotateY(180deg);
  transform: perspective(2000px) rotateY(180deg);
}
.card.is-flipped .back {
  -webkit-transform: perspective(2000px) rotateY(0deg);
  transform: perspective(2000px) rotateY(0deg);
  z-index: 2;
}
.card .overlay.video:before {
  top: 33%;
}
.card .front div {
  padding: 15px;
}
.card .back p {
  margin: 3% 10% 20%;
  color: var(--color-white);
  line-height: 23px;
  text-align: left;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; /* number of lines */
  line-clamp: 5;
  max-height: calc(23px * 5);
}
/* .card .back p:after {
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25px;
  background-image: linear-gradient(
    to top,
    var(--color-primary) 0%,
    rgba(0, 81, 78, 0) 100%
  );
} */
.card .back .btn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80%;
  margin: 10%;
}
.card img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.card b {
  display: block;
  overflow: hidden;
}
.card b img {
  margin: -6.66% 0;
}
.card q {
  display: block;
  overflow: hidden;
  padding-top: 61.688%;
  position: relative;
}
.card q span {
  background-size: cover;
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 0;
  right: 0;
}
.card i {
  color: var(--color-white);
  display: block;
}
.card h4 {
  color: var(--color-white);
  font-size: 17px;
  line-height: 28px;
}
.card h4.ext {
  height: 56px;
  white-space: normal;
}
.card i,
.card h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
#map {
  width: 100%;
  height: 100%;
}
div#home-map-canvas {
  height: 100%;
}
.route-info {
  display: none;
  position: absolute;
  background-color: transparent;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  margin: 10px 20px;
  width: 53px;
  height: 75px;
}
.route-info a {
  position: absolute;
  display: inline-block;
  width: 53px;
  height: 53px;
  top: 0;
  left: 0;
}
.route-info a:before,
.route-info a:after {
  content: "";
  position: absolute;
  display: block;
  width: 53px;
  height: 53px;
  top: 0;
  left: 0;
  background: transparent url(../images/sprite.png) -2718px center no-repeat;
}
.route-info a:after {
  background-position: -2821px center;
}
.route-info span {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}
.route-info a:before,
.route-info a:after,
.route-info span {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}
.route-info a:after,
.route-info span:last-of-type {
  opacity: 0;
}
.route-info.started a:before,
.route-info.started span:first-of-type {
  opacity: 0;
}
.route-info.started a:after,
.route-info.started span:last-of-type {
  opacity: 1;
}
.info_window_container {
  max-height: 400px;
}
.info_window_popup {
  padding: 23px 0 15px 23px;
  max-width: 400px;
}
.info_window_popup h1,
.info_window_popup h4 {
  color: var(--color-dark);
  font-size: 21px;
  line-height: 1.2em;
}
.info_window_popup h4 {
  font-size: 15px;
}
.info_window_popup .text {
  max-height: 250px;
  overflow-y: scroll;
  padding-right: 1em;
}
.info_window_popup p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 200;
  margin: 1em 0;
  text-align: justify;
}
.info_window_popup a {
  display: block;
  text-align: right;
  cursor: pointer;
  color: var(--color-teal-light);
  text-decoration: none;
  margin-top: 1em;
}
.info_window_popup a:hover {
  text-decoration: underline;
}
.arrow-container {
  position: absolute;
  width: 100%;
  left: 0;
  top: 47%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;
}
.arrow-container span {
  cursor: pointer;
  pointer-events: auto;
}
.arrow-container .slick-prev,
.arrow-container .slick-next {
  position: relative;
  left: unset;
  text-indent: unset;
  z-index: 3;
  pointer-events: auto;
}
.slick-prev,
.slick-next {
  content: " ";
  display: block;
  position: absolute;
  left: -20%;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 1;
}
.slick-prev svg,
.slick-next svg {
  fill: var(--color-primary);
  height: 18px;
  width: 18px;
}
.slick-prev {
  transform: rotate(90deg);
}
.slick-next {
  transform: rotate(-90deg);
}
.slick-next {
  left: auto;
}

.slick-dots {
  padding: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  display: inline;
}
.slick-dots button {
  position: relative;
  border: none;
  padding: 0;
  margin: 10px;
  width: 10px;
  min-width: 10px;
  height: 10px;
  outline: none;
  cursor: pointer;
  background: var(--color-primary);
  transition: background-color 0.2s ease-in-out;
  border-radius: 100%;
  font-size: 0;
}
.slick-dots button:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--color-white);
  border-radius: 100%;
  transition: opacity 0.2s ease-in-out;
}
.slick-dots .slick-active button {
  width: 16px;
  min-width: 16px;
  height: 16px;
}
.slick-dots .slick-active button::before {
  display: none;
}
.fancybox-nav {
  height: auto;
  bottom: 100px;
}

/* ============ HEADER ============ */
/* Sticky on the <header> itself: it stays in normal flow (reserving its
   height so the hero sits below, as in the design) and sticks to the top
   on scroll — no overlap, no layout jump. */
header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 99;
  background-color: var(--color-white);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.home header > div {
  position: relative;
}
.desktop-menu {
  background-color: var(--color-white);
  transition: box-shadow 0.25s ease;
}
.desktop-menu .menu-top {
  max-height: 200px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    transform 0.35s ease,
    padding 0.35s ease,
    visibility 0s linear 0s;
}
.desktop-menu.fixed-down .menu-top {
  max-height: 0;
  opacity: 0;
  transform: translateY(-12px);
  padding-top: 0;
  padding-bottom: 0;
  visibility: hidden;
  transition-delay: 0s, 0s, 0s, 0s, 0.35s;
}
.desktop-menu.fixed {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}
/* Logo — animate the shrink + shift */
.desktop-menu .menu-bottom .fixed-logo {
  transition:
    width 0.35s ease,
    margin-right 0.35s ease;
}
.desktop-menu.fixed-down .menu-bottom .fixed-logo {
  width: 120px;
  margin-right: 80px;
}
.desktop-menu.fixed-down .menu-bottom li:last-child a {
  padding: 0 50px;
}
.desktop-menu.fixed-down .menu-bottom li a {
  font-size: 17px;
}
/* Button padding */
header .header-nav li:last-child a {
  transition:
    padding 0.3s ease,
    box-shadow 0.25s ease-in-out,
    /* keep your existing hover effects */ transform 0.2s ease;
}
/* Mobile header block: hidden on desktop, shown <=1024px (toggle below) */
.mobile-menu {
  display: none;
}

/* ---- Top tier: logos + search + language ---- */
.menu-top {
  background-color: var(--color-white);
}
.menu-top-ins {
  display: grid; /* was flex */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 12px;
  margin: 0 auto;
}
.menu-top-ins .first-logo img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
}
.menu-top-ins .first-logo {
  padding-right: 56px;
  margin-left: auto;
}
.menu-top-ins .second-logo {
  justify-self: center;
  position: relative;
  padding-left: 56px;
}
.menu-top-ins .second-logo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 52px;
  background-color: var(--color-teal-pale);
}
.menu-top-ins .second-logo img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.menu-top-ins .second-logo img,
.menu-top-ins .first-logo img {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}
.menu-top-ins .lang-option {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* ---- Search (uses search.svg: teal circle + magnifier) ---- */
header .lang-option form {
  position: relative;
  background: transparent;
  border-radius: 0;
  top: 0;
  margin: 0;
}
header .lang-option form fieldset {
  display: flex;
  align-items: center;
  position: relative;
}
/* Fixed-size hit target (just the icon). The input below is absolutely
   positioned so expanding it never changes layout/grid width — that
   reflow was what made the cursor fall off the icon and flicker. */
header .lang-option form .field {
  position: relative;
  width: 40px;
  height: 40px;
}
header .lang-option form .field.ico:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: auto;
  width: 40px;
  height: 40px;
  opacity: 1;
  content: " ";
  display: block;
  -webkit-mask-image: url(../images/search.svg);
  mask-image: url(../images/search.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  background: var(--color-primary);
  /* Visual only — clicks pass through to the real submit button below. */
  pointer-events: none;
}
header .lang-option form:hover .field.ico:after {
  background: var(--color-teal-deep);
}
header .lang-option form .field .middleColumn {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
}
header .lang-option form .field input[type="text"] {
  width: 0;
  height: 34px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 0;
  color: var(--color-primary);
  font-size: 15px;
  box-sizing: border-box;
  transition:
    width 0.3s ease,
    padding 0.3s ease,
    border-color 0.3s ease;
}
header .lang-option form:hover .field input[type="text"],
header .lang-option form .field input[type="text"]:focus {
  width: 200px;
  padding: 0 6px;
  border-bottom-color: var(--color-primary);
}
header .lang-option form .field input::-webkit-input-placeholder {
  color: var(--color-teal-deep);
}
header .lang-option form .field input::placeholder {
  color: var(--color-teal-deep);
}
/* Make the magnifier a real clickable submit button so clicking the icon
   runs the search (previously the icon was a non-clickable ::after and the
   submit button was hidden, so only pressing Enter worked). */
header .lang-option form .action {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  z-index: 2;
}

/* ---- Language (EN) ---- */
header .lang-option .lang {
  position: static;
  right: auto;
  top: auto;
  width: auto;
  display: flex;
  align-items: center;
}
header .lang-option .lang a {
  position: static !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-primary);
  transition: color 0.2s ease-in-out;
}
header .lang-option .lang a:hover {
  color: var(--color-black);
}

/* ---- Bottom tier: nav links + CTA button ---- */
.menu-bottom {
  background-color: var(--color-white);
}
.desktop-menu .fixed-logo {
  width: 0;
  display: flex;
  align-items: center;
}
.desktop-menu .fixed-logo a {
  display: block;
  width: 100%;
}
.desktop-menu .fixed-logo a img {
  height: auto;
  width: 100%;
  object-fit: cover;
}
.menu-bottom-ins {
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin: 0 auto;
}
header .header-nav {
  width: 100%;
  padding: 14px 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  position: relative;
  /* padding-left: 6%; */
}
header .header-nav a {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition:
    border-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}
header .header-nav a:hover,
header .header-nav a.section,
header .header-nav li.current_page_item a,
header .header-nav li.current-menu-item a,
header .header-nav li.current-menu-parent a,
header .header-nav li.current-menu-ancestor a,
header .header-nav li.current_page_parent a,
header .header-nav li.current_page_ancestor a {
  border-bottom-color: var(--color-primary);
}
header .header-nav li:last-child a {
  margin: 0;
  color: var(--color-white);
  height: 46px;
  padding: 0 80px;
  border-bottom: 0;
  position: relative;
  box-sizing: border-box;
  background-color: var(--color-primary);
  overflow: hidden;
  white-space: nowrap;
  transition:
    box-shadow 0.25s ease-in-out,
    transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
header .header-nav li:last-child a:hover {
  color: var(--color-white);
  border-bottom: 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  transform: scale(1.03);
}

/* ============ FOOTER ============ */
footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: var(--color-ink); */
  background-color: var(--color-white);
  text-align: center;
  color: var(--color-primary);
  padding: 45px 4.2% 10px;
  line-height: 44px;
  z-index: 1;
  margin-top: auto;
  border-top: 2px solid var(--color-teal-pale);
}
p.all-rights {
  margin-top: 40px;
}
.glightbox-open {
  height: 100% !important;
}
.partners-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer ul li {
  height: 100%;
  max-height: 44px;
}
footer ul li a {
  display: block;
  height: 60px;
}
footer ul.partners {
  display: flex;
  gap: 25px;
}
footer ul.partners li img {
  filter: none;
  -webkit-filter: none;
  height: 100%;
  width: 100%;
  object-fit: contain;
}
footer ul.social {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}
footer ul.social li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 21px;
  transition: border-color 0.2s ease-in-out;
  mask-size: contain;
  mask-repeat: no-repeat;
  background: var(--color-primary);
}
footer ul.social li a:hover {
  background: var(--color-teal-deep);
}
footer ul.social li a.fb {
  -webkit-mask-image: url(../images/facebook.svg);
  mask-image: url(../images/facebook.svg);
}
footer ul.social li a.tw {
  -webkit-mask-image: url(../images/sprite.png) 0 center no-repeat;
  mask-image: url(../images/sprite.png) 0 center no-repeat;
  background-position: -113px center;
}
footer ul.social li a.pi {
  -webkit-mask-image: url(../images/instagram.svg);
  mask-image: url(../images/instagram.svg);
}
/* ============ HOME ============ */
.home-page,
.map-container,
.builder,
.post-page {
  /* Footer is position:absolute; this reserves space so content isn't hidden
     under it. Must clear the full desktop footer (taller than the <=1280px
     footer, which already reserves 220px). */
  padding-bottom: 240px;
}
.home .headline {
  font-size: 53px;
  height: 147px;
  line-height: 147px;
  text-align: center;
  background: var(--color-black) url(../images/tagline.jpg) center center
    no-repeat;
  background-size: cover;
}

.featured-memo {
  background-color: var(--color-primary);
  z-index: 1;
  position: relative;
  display: grid;
  grid-template-columns: 70% 30%;
}
.featured-memo .text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 60px 50px 50px;
}
.featured-memo blockquote {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  border: 2px solid var(--color-white);
  padding: 50px;
}
blockquote {
  position: relative;
}
blockquote .first-quote,
blockquote .second-quote {
  background: var(--color-white);
  padding: 7px 12px;
  position: absolute;
  z-index: 2;
}
.featured-memo blockquote .first-quote,
.featured-memo blockquote .second-quote {
  background: var(--color-primary);
}
blockquote .first-quote::before,
blockquote .second-quote::before {
  content: "";
  width: 17px;
  height: 17px;
  padding: 10px;
  box-sizing: content-box;
  -webkit-mask-image: url(../images/quote.svg);
  mask-image: url(../images/quote.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  display: block;
  background: var(--color-primary);
}
.featured-memo blockquote .first-quote::before,
.featured-memo blockquote .second-quote::before {
  background: var(--color-white);
}
blockquote .first-quote {
  right: -15px;
  top: -25px;
  transform: rotate(180deg);
}
blockquote .second-quote {
  bottom: -25px;
  left: -20px;
}
.featured-memo h3 {
  color: var(--color-white);
}
.featured-memo .btn,
.card .back .btn {
  background: var(--color-white);
  color: var(--color-primary);
  margin-top: 20px;
}
.featured-memo .photo {
  background: transparent url(../images/photo-pattern.png) center center repeat;
  aspect-ratio: 1.6/1;
  height: 100%;
}
.featured-memo .photo img {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recent-memos {
  position: relative;
  /* background-color: var(--color-beige); */
  overflow: hidden;
  padding-top: 4.16%;
}
.recent-memos h3 {
  color: var(--color-dark);
  text-align: center;
  text-decoration: underline;
  margin: 4.16% 0;
}
.recent-memos .list {
  width: 80%;
  margin: 0 auto;
}
.recent-memos .list .slick-prev,
.recent-memos .list .slick-next {
  top: 0;
  bottom: 0;
  width: 11.5%;
  height: 83%;
  transform: rotate(0deg);
  opacity: 0;
}
.recent-memos .list .slick-next {
  right: -12%;
}
.recent-memos .list .slick-prev {
  left: -12%;
}
.recent-memos .list .slick-dots {
  margin: 4.5% auto 2.5%;
}
/* Dots only — windowed like the single-post gallery. Dots are rendered into
   the fixed .slick-dots-window container (slick appendDots); JS only scrolls
   the active dot into view, by whole dots, so overflow:hidden cuts cleanly
   between them. Width comes from the shared block below. */
.recent-memos .slick-dots-window {
  max-width: 100%;
  margin: 4.5% auto 2.5%;
  overflow: hidden;
  position: relative;
  z-index: 99;
}
.recent-memos .slick-dots-window ul.slick-dots {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  transition: transform 0.35s ease;
}
.recent-memos .slick-dots-window ul.slick-dots li {
  flex: 0 0 22px;
  width: 22px;
  height: 18px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Single-post gallery dots — windowed pager. JS (custom.js) wraps the
   .slick-dots in .slick-dots-window and scrolls the active dot into view.
   overflow:hidden is the whole trick: the window always cuts between two dots
   (atmUpdateDotWindow translates by whole dots), so nothing shows at the edges.
   Width comes from the shared block below. */
.gallery-holder .slick-dots-window {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
/* ---- Windowed pager width — the one place these counts are set ----
   Six dots on a desktop, four on a tablet, three on a phone, at 22px each; the
   rest scroll behind the window as you page through. atmVisibleDots() in
   custom.js uses the same three breakpoints and sets the width inline once
   slick is up, so these values only cover the paint before JS runs — but they
   have to agree, or the pager visibly resizes on load.

   This replaces per-slider widths that had drifted apart: the memos window had
   been changed to "as many dots as fit the container", which on a desktop meant
   no limit at all, while the gallery was still on a fixed 5/3. */
.recent-memos .slick-dots-window,
.gallery-holder .slick-dots-window {
  width: 132px;
}
@media all and (max-width: 1023px) {
  .recent-memos .slick-dots-window,
  .gallery-holder .slick-dots-window {
    width: 88px;
  }
}
@media all and (max-width: 767px) {
  .recent-memos .slick-dots-window,
  .gallery-holder .slick-dots-window {
    width: 66px;
  }
}

.gallery-holder #gallery ul.slick-dots {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  transition: transform 0.35s ease;
}
.gallery-holder #gallery ul.slick-dots li {
  flex: 0 0 22px;
  width: 22px;
  height: 18px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recent-memos .list .slick-list {
  overflow: visible;
}
/* Equal-height slides: flex track stretches every card to the tallest one.
   Cards keep their slick widths/margins (flex-shrink absorbs the margin), so
   the slider layout is unchanged apart from the heights matching. */
.recent-memos .list .slick-track {
  display: flex;
}
.recent-memos .list .slick-track .slick-slide {
  height: auto;
}
.recent-memos .list .card {
  width: 228px;
  margin: 0 17px;
  opacity: 0.3;
  transition: opacity 0.2s ease-in-out;
}
.recent-memos .list .card.slick-active,
.recent-memos .list .card.active {
  opacity: 1;
}
.recent-memos .list .card .front div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.recent-memos .list .card .overlay.video:before {
  top: 24%;
}
/* .recent-memos .list .card h4 {
  font-size: 21px;
} */
.recent-memos .list .card .front p {
  color: var(--color-dark);
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-memos .list .card hr {
  border: none;
  height: 2px;
  background-color: var(--color-muted);
  width: 32%;
  margin: 9% auto;
}
.recent-memos .list .card .back > div {
  margin: 11.5% 13.3% 0;
}
.recent-memos .list .card .back p {
  margin: 30px 13.3% 23%;
}
.recent-memos .list .card .back .btn {
  width: 73.4%;
  margin: 11.5% 13.3%;
}
.recent-memos .list-memos {
  width: 100%;
  position: absolute;
  bottom: 37px;
  left: 0;
}
.recent-memos .all-memos {
  display: flex;
  justify-content: flex-end;
  padding-right: 10%;
}
.recent-memos .all-memos a {
  color: var(--color-primary);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  font-size: 18px;
  font-weight: 800;
  transition: transform 0.2s ease;
}
.recent-memos .all-memos a:hover {
  color: var(--color-teal-deep);
}
.recent-memos .all-memos a:after {
  content: "";
  position: absolute;
  right: -10px;
  top: 51%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border: solid var(--color-primary);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  -webkit-mask-image: none;
  mask-image: none;
  background: none;
  transition: transform 0.2s ease;
}
.recent-memos .all-memos a:hover:after {
  border-color: var(--color-teal-deep);
}
.infographics {
  /* background: var(--color-beige) url(../images/photo-pattern.png) center center repeat; */
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 35px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  line-height: unset;
}
.infographics .fade {
  /* background-image: linear-gradient(
    to bottom,
    var(--color-beige) 0%,
    rgba(237, 234, 229, 0) 66%
  ); */
  padding: 4% 0 6.6%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.infographics sub a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.infographics p {
  line-height: 1em;
  margin-bottom: 15px;
}
.infographics p i {
  position: relative;
}
.infographics p i:before,
.infographics p i:after {
  content: " ";
  display: block;
  position: absolute;
  left: -8px;
  top: 23px;
  width: 0;
  height: 4px;
  background-color: var(--color-primary);
  transition: all 0.2s ease-in-out 1s;
}
.infographics p i:after {
  left: auto;
  right: -8px;
}
.infographics p i.appeared:before {
  width: 25px;
  left: -33px;
}
.infographics p i.appeared:after {
  width: 25px;
  right: -33px;
}
.infographics b {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 88px;
  line-height: 72px;
  vertical-align: middle;
  color: var(--color-primary);
}
.infographics a,
.infographics sub,
.infographics sup,
.infographics u {
  color: var(--color-primary);
}
.infographics sub {
  /* width: 300px; */
  display: inline-flex;
  text-align: right;
  flex-direction: column;
  align-items: center;
}
.infographics sub:last-of-type {
  text-align: left;
}
.infographics sup {
  width: 35%;
  display: inline-block;
}
.infographics sub u {
  text-decoration: none;
  position: relative;
}
.infographics sub u:before,
.infographics sub u:after {
  content: " ";
  display: block;
  position: absolute;
  height: 4px;
  width: 0;
  background-color: var(--color-primary);
  transition: all 0.2s ease-in-out 1s;
}
.infographics sub u:before {
  left: 0;
  top: -4px;
}
.infographics sub u:after {
  right: 0;
  bottom: -4px;
}
.infographics sub u.appeared:before,
.infographics sub u.appeared:after {
  width: 100%;
}
.infographics sup b {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 120px;
  line-height: 98px;
}

.featured-text {
  background-color: var(--color-gray-dark);
}
.featured-text aside:first-of-type {
  width: 33%;
  float: left;
  text-align: center;
  height: 557px;
  padding: 8.5%;
}
.featured-text aside:first-of-type i {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin-right: -5px;
}
.featured-text aside:first-of-type img {
  vertical-align: middle;
  box-shadow: 20px 20px 80px -20px var(--color-black);
  max-width: 100%;
}
.featured-text aside:last-of-type {
  background-color: #252525;
  width: 33%;
  color: #a7a7a7;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  text-align: justify;
  float: right;
  height: 557px;
  padding: 8.5%;
}
.featured-text aside:last-of-type h3 {
  font-size: 54px;
  line-height: 70px;
  text-align: left;
  margin-bottom: 12%;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 140px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.featured-text aside:last-of-type p {
  margin-bottom: 12%;
  max-height: 50%;
  overflow: hidden;
}
.featured-text aside:last-of-type a {
  color: #bbcccd;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease-in-out;
}
.featured-text aside:last-of-type a:hover {
  color: var(--color-white);
}
.featured-text aside:last-of-type a:before {
  content: " ";
  display: block;
  position: absolute;
  left: -45px;
  top: 6px;
  width: 25px;
  height: 10px;
  background: transparent url(../images/sprite.png) -327px center no-repeat;
}

.map {
  width: 100%;
  height: 710px;
  position: relative;
}
.map .totats {
  position: absolute;
  right: 4.17%;
  bottom: 22%;
  width: 20.83%;
  min-width: 300px;
  min-height: 430px;
  background-color: var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}
.map .totats h3 {
  color: var(--color-white);
  /* "ŽEMĖLAPIS" set in Work Sans is wider than the condensed face this box was
     drawn for, so it needs a smaller size and narrower side margins to fit. */
  font-size: 34px;
  font-weight: 800;
  line-height: 75px;
  margin: 13% 10% 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map .totats hr {
  margin: 15% 20%;
  width: 0;
  border: none;
  border-top: 3px solid var(--color-white);
  -webkit-transition: all 0.2s ease-in-out 0.1s;
  -moz-transition: all 0.2s ease-in-out 0.1s;
  -ms-transition: all 0.2s ease-in-out 0.1s;
  -o-transition: all 0.2s ease-in-out 0.1s;
  transition: all 0.2s ease-in-out 0.1s;
}
.map .totats hr.appeared {
  width: 20%;
}
.map .totats > div {
  margin-top: auto;
  margin: 0 30px 30px;
  display: flex;
  flex-direction: column;
}
.map .totats b {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: 88px;
  font-weight: 800;
  line-height: 120px;
  display: block;
  text-align: center;
  margin-bottom: 20px;
}
.map .totats i {
  color: var(--color-white);
  font-size: 20.69px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  text-transform: uppercase;
  display: block;
  margin-top: -13px;
  font-style: normal;
}
.map .totats a {
  color: var(--color-primary);
  background-color: var(--color-white);
  width: 100%;
  margin-top: 15px;
}
.map img {
  height: 100%;
  width: 100%;
}
.rout-body .description {
  width: 20.83%;
  min-width: 300px;
  background-color: var(--color-white);
  z-index: 1;
}
.rout-body h3 {
  color: var(--color-dark);
  font-size: 54px;
  line-height: 75px;
}
.rout-body hr {
  width: 0;
  border: none;
  border-top: 3px solid var(--color-gray);
  transition: all 0.2s ease-in-out 0.1s;
}
.rout-body hr.appeared {
  width: 20%;
}
.rout-body b {
  font-family: var(--font-heading);
  color: var(--color-dark);
  font-size: 108px;
  font-weight: 400;
  line-height: 108px;
  margin: 0 20%;
  display: block;
  text-align: center;
  margin-top: 20px;
}
.rout-body i {
  color: var(--color-dark);
  font-size: 20.69px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  text-transform: uppercase;
  display: block;
  margin-top: -13px;
  font-style: normal;
}
.rout-body a {
  color: var(--color-dark);
  border-color: var(--color-primary);
  position: absolute;
  width: 80%;
  bottom: 9.5%;
  left: 10%;
}
.rout-body a.btn u {
  background-color: var(--color-dark);
}

.bottom-quote {
  background: transparent url(../images/photo-pattern.png) center center repeat;
  position: relative;
}
.bottom-quote:before {
  content: " ";
  display: block;
  position: absolute;
  left: 12.5%;
  top: 21.1%;
  width: 70px;
  height: 55px;
  background: transparent url(../images/sprite.png) -900px center no-repeat;
}
.bottom-quote img {
  width: 100%;
  display: block;
  z-index: -1;
  position: relative;
}
.bottom-quote blockquote {
  font-family: var(--font-heading);
  color: var(--color-white);
  color: rgba(255, 255, 255, 0.9);
  font-size: 23px;
  font-weight: 400;
  line-height: 40px;
  margin: 0 25% 0 20.83%;
  position: absolute;
  top: 25%;
}
.bottom-quote blockquote::first-letter {
  color: var(--color-white);
  font-size: 86px;
  font-weight: 700;
  line-height: 60px;
  float: left;
  margin-top: 13px;
  margin-right: 10px;
}
.bottom-quote .btn {
  width: 16.66%;
  margin-left: 20.83%;
  position: absolute;
  bottom: 22%;
}
.main.with-sidebar aside {
  position: fixed;
  top: 165px;
  left: 0;
  bottom: 0;
  width: 16.67%;
  padding: 4.17% 2.09%;
  /* background-color: var(--color-near-black); */
  border-right: 2px solid var(--color-teal-pale);
  z-index: 1;
  max-height: 100%;
  transition: top 0.3s ease;
}
/* The column is pinned to the bottom of the viewport, but the footer
   (position:absolute, same z-index, later in the document) paints over its
   lower part at the end of a listing. On Atminties biuras the counter plus four
   category tabs come to ~607px, so any viewport under ~740px loses the last tab
   behind the footer. End the box where the footer starts instead of where the
   viewport does, and let whatever no longer fits scroll inside the column.
   --footer-peek is how much of the footer is on screen, kept current by
   custom.js; while the footer is still below the fold it is 0 and none of this
   shows. Scoped to the widths where the aside is actually fixed. */
@media all and (min-width: 1024px) {
  .main.with-sidebar aside {
    bottom: var(--footer-peek, 0px);
    overflow-y: auto;
    overflow-x: hidden;
    /* Scroll chaining stays on (the default): the column is a sidebar, not a
       pane the visitor came to read, so once it reaches its end the wheel has
       to carry on scrolling the page under it. */
    scrollbar-width: thin;
  }
}
.main.with-sidebar aside h2 {
  line-height: 1em;
  padding: 0 12.5% 25%;
}
.main.with-sidebar aside a {
  display: block;
  position: relative;
  margin: 0 0 14px;
  padding: 15px 46px 15px 20px;
  border: 2px solid var(--color-teal-muted);
  border-radius: 2px;
  color: var(--color-primary);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}
.main.with-sidebar aside a.active,
.main.with-sidebar aside a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.main.with-sidebar aside a:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border: solid var(--color-primary);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  -webkit-mask-image: none;
  mask-image: none;
  background: none;
}
/* .main.with-sidebar aside a:hover,
.main.with-sidebar aside a.active,
.main.with-sidebar aside a.section {
  color: var(--color-black);
} */
.main.with-sidebar aside b,
.main.with-sidebar aside i {
  display: block;
  text-align: center;
}
.main.with-sidebar aside b {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-primary);
  font-size: 108px;
  line-height: 92px;
  margin-bottom: 20px;
}
.main.with-sidebar aside i {
  color: var(--color-primary);
  font-size: 30px;
  font-weight: 900;
  /* line-height: 2em; */
  text-transform: uppercase;
  margin-bottom: 25px;
}
.main.with-sidebar form .field input,
.main.with-sidebar form .field select,
.main.with-sidebar .ui-selectmenu-button {
  margin-top: 6.9%;
  padding: 4px 7%;
  font-weight: 700;
}
.main.with-sidebar form .field input {
  padding: 4px 20px;
}
.main.with-sidebar form .field input {
  width: stretch;
}
.main.with-sidebar .ui-selectmenu-button {
  padding-right: 16%;
}
.main.with-sidebar form .field select {
  width: 100%;
}
.main.with-sidebar form .action {
  display: none;
}

.main.split aside {
  position: fixed;
  top: 165px;
  left: 0;
  bottom: 0;
  width: 50%;
  background-color: #fff;
  transition: top 0.3s ease;
}
.main.split.remove aside {
  background: unset;
}

/* When the header shrinks on scroll (.desktop-menu gets .fixed-down via
   custom.js, header height 160px -> 74px), pull the fixed sidebars up so the
   gap below the header stays tight. Scoped to >=1024px where the asides are
   actually position:fixed (below that they go static/absolute). Pure CSS:
   header is the previous sibling of <main>, and :has() detects the scrolled
   menu inside it. */
@media all and (min-width: 1024px) {
  header:has(.desktop-menu.fixed-down) ~ main.split aside,
  /* .with-sidebar is never the <main> itself — page-builder.php and
     page-postbuilder.php put it on the two divs inside <main id="page-builder">
     / <main id="postbuilder-page">. Written as `main.with-sidebar` this half of
     the rule matched nothing, so every filter/tab sidebar stayed pinned at
     165px while the header shrank to 74px and left a ~90px hole above it. */
  header:has(.desktop-menu.fixed-down) ~ main .with-sidebar aside {
    top: 60px;
  }
}
.main.split aside .block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.gallery-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.gallery-content {
  width: 70%;
  position: relative;
}
/* Desktop height budget (mirrors the tablet one further down). The fixed
   sidebar is top:165px; bottom:0, so its usable height is 100vh - 165px.
   Everything stacked in it has to fit that band: the slide (image + 2 x 50px
   padding), the dots strip under it, and — on posts with a map point — the
   "Vieta žemėlapyje" link above it. Budgeting the image against the band keeps
   the top link and bottom dots visible instead of being pushed off / overlapped,
   and centres a small image rather than parking it at the top. Custom props so
   the value inherits down to .container-img past the id-carrying desktop rule. */
.main.split aside .gallery-content {
  --band: calc(100vh - 165px);
  --slide-padding: 100px;
  --dots-strip: 40px;
  --map-link: 0px;
}
.main.split aside .gallery-content:has(> a.map-holder) {
  --map-link: 40px;
}
.gallery-content .slick-track {
  /* No flex/equal-height here: adaptiveHeight (custom.js) sizes the list to
     the current slide, so slides must keep their natural height and top-align
     (slick's default). Forcing flex + align-items:center would pin the track
     to the tallest slide and defeat adaptiveHeight — which is why the dots and
     map link used to stay at the tallest image's position. */
  display: block;
}
/* Let each slide take its content height instead of slick.css's height:100%,
   so adaptiveHeight can measure the real image height and size the frame to it. */
.gallery-content .slick-slide {
  height: auto;
}
.main.split aside .block #gallery a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
}
.main.split aside .block #gallery a .container-img {
  /* aspect-ratio: 1/1; */
  box-shadow:
    rgba(0, 0, 0, 0.3) 0px 0px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Fit the image into whatever the band has left after the slide padding,
     the dots strip and (if present) the map link — so the pager and the top
     link are never pushed off or overlapped. 500px still caps it on tall
     screens so the image never dominates the sidebar. */
  max-height: min(
    500px,
    calc(
      var(--band) - var(--slide-padding) - var(--dots-strip) - var(--map-link)
    )
  );
  overflow: hidden;
}
.main.split.remove aside .block #gallery a .container-img {
  box-shadow: none;
}
/* Photo slides only. Video slides keep their own 16/9 box + cover (style.css),
   which deliberately trims the letterbox bars off a YouTube thumbnail — these
   selectors carry an id, so without :not(.video) they would outrank it. */
.main.split aside .block #gallery a .container-img:not(.video) {
  /* Shrink-to-fit rather than a fixed 100%, so the box (and its shadow) hugs
     the image once max-height scales the image down — otherwise the shadow
     would frame empty space beside a portrait image. */
  width: auto;
  max-width: 100%;
}
.main.split aside .block #gallery a .container-img:not(.video) img {
  /* Fit inside the box's max-height instead of overflowing it and being cut
     off by overflow:hidden. max-height:inherit picks up whichever cap is in
     play on the container (500px, or the taller footer-in-view one below), so
     the image scales down whole instead of losing its bottom. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: inherit;
  object-fit: contain;
}
.main.split aside .block #gallery a .container-img.video img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.fotorama__caption {
  position: absolute;
  z-index: 12;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-black);
}
.fotorama__caption__wrap {
  display: block;
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  padding: 5px 10px;
}
.main.split aside .block.gallery-holder {
  text-align: center;
}
.main.split aside .block.active {
  z-index: 2;
  opacity: 1;
}
@media all and (min-width: 1024px) {
  .main.split aside .gallery-container {
    transition: height 0.3s ease;
  }
  .main.split aside .gallery-content {
    transition: width 0.3s ease;
  }
  .main.split aside .block #gallery a .container-img {
    transition: max-height 0.3s ease;
  }
  body.footer-in-view .main.split aside .gallery-container {
    height: calc(100vh - 320px);
  }
  body.footer-in-view .main.split aside .gallery-content {
    /* Footer is in view: the gallery-container shrank to 100vh - 320px
       (rule above), so shrink the band to match. The image budget then
       re-fits inside it automatically and keeps the dots clear of the
       footer without a separate hard-coded cap. */
    --band: calc(100vh - 320px);
  }
}
.main.lside .map-toolbar {
  height: 42px;
  background-color: var(--color-white);
  padding: 21px 0;
  padding-left: 4.17% 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.map-inner-container {
  display: flex;
}
.main.lside .map-holder {
  width: 75%;
  display: flex;
  flex-direction: column;
}
div#map {
  aspect-ratio: 1.8/1;
  min-height: 390px;
}
.map-container {
  border-top: 2px solid var(--color-teal-pale);
  margin-top: 20px;
}
.map-container-inner {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.main.lside .map-cardholder {
  width: 25%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
  padding: 20px 0 0 20px;
  max-height: 820px;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-left: 2px solid var(--color-teal-pale);
}
.main.lside .map-cardholder::-webkit-scrollbar {
  display: none;
}
/* .main.lside .map-cardholder::-webkit-scrollbar {
  height: 6px;
} */
/* .main.lside .map-cardholder::-webkit-scrollbar-track {
  background: var(--color-near-black);
  border-radius: 10px;
}
.main.lside .map-cardholder::-webkit-scrollbar-thumb {
  background: var(--color-near-black);
  border-radius: 10px;
}
.main.lside .map-cardholder::-webkit-scrollbar-thumb:hover {
  background: var(--color-near-black);
}
.main.lside .map-cardholder {
  scrollbar-width: auto;
  scrollbar-color: var(--color-teal-light) var(--color-near-black);
} */
.map-cardholder .card .back > div {
  margin: 12% 10% 0;
}
/* .main.lside .card .front {
  background-color: var(--color-near-black);
  text-align: left;
} */
.map-container .pb-gc-select-trigger {
  color: var(--color-primary);
}
.map-container .pb-gc-select-arrow {
  background: var(--color-primary);
}
/* .map-container .pb-gc-select-trigger,
.map-container .pb-gc-holder .pb-gc-children-row {
  border-color: var(--color-border);
} */
.map-container .pb-gc-reset-opt,
.map-container .pb-gc-child-tab {
  border-top: 1px solid var(--color-border);
}
.map-container .pb-gc-filter {
  flex-direction: row;
  margin-top: 0;
}
/* The map lays the dropdowns out in a row, so the clear button sits beside
   them rather than under them. */
.map-container .pb-gc-clear-all {
  align-self: center;
  white-space: nowrap;
}
.map-container .pb-gc-child-tab:hover,
.map-container .pb-gc-child-tab.active,
.map-container .pb-gc-select-trigger {
  color: var(--color-primary);
}
.pb-gc-reset-opt .map-container .pb-gc-filter {
  flex-direction: row;
  height: 44px;
  margin-top: 0;
  width: 50%;
}
.map-container #Form_MemosSearchForm {
  width: 43%;
  margin-top: 20px;
  margin-right: 40px;
}
.map-filters {
  display: flex;
  gap: 15px;
}
.map-container .map-toolbar .range-slider i {
  width: 14px;
  height: 14px;
  top: -5px;
  margin-right: -4px;
  background: var(--color-primary);
}
.map-container .map-toolbar .range-slider i::before {
  content: "";
  background: var(--color-white);
  height: 8px;
  width: 8px;
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 100%;
}
.map-container .range-slider i.ui-state-default {
  width: 16px;
  height: 16px;
  top: -6px;
  margin-left: -6px;
  background-color: var(--color-primary);
  z-index: 2;
}
.map-container .range-slider i.ui-state-default::before {
  display: none;
}
.map-container .map-toolbar .range-slider label {
  margin-top: -26px;
  font-size: 15px;
  display: none;
}
/* No fixed widths here either — 34px/29px were cut to Oswald's digits and clip
   the wider Work Sans ones. */
.map-container .map-toolbar .range-slider label:first-of-type,
.map-container .map-toolbar .range-slider label:last-of-type {
  display: block !important;
  color: #00514e;
}
.map-container .range-slider label.active {
  color: var(--color-primary) !important;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex !important;
  align-items: flex-end;
}
.map-container .range-slider {
  background: var(--color-primary);
}
.main.lside .card .front i,
.main.lside .card .front h4 {
  color: var(--color-white);
}
.main.lside .card .front div {
  padding: 5% 0 10% 0;
}
/* .main.lside .card .back {
  background-color: var(--color-white);
}
.main.lside .card .back .btn,
.main.lside .card .back p {
  color: var(--color-gray-dark);
}
.main.lside .card .back .btn u {
  background-color: var(--color-gray-dark);
}
.main.lside .card .back p:after {
  background-image: -webkit-linear-gradient(
    bottom,
    var(--color-white) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: -moz-linear-gradient(
    bottom,
    var(--color-white) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: -ms-linear-gradient(
    bottom,
    var(--color-white) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: -o-linear-gradient(
    bottom,
    var(--color-white) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: linear-gradient(
    bottom,
    var(--color-white) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#00ffffff', GradientType=0);
} */
.typography {
  padding: 8.35% 20.83%;
}
.main.split .typography {
  padding-left: 58.34%;
  padding-right: 8.34%;
}
/* 58.34% is the room the fixed <aside> takes on the left. A place with no
   gallery, no video and no map has nothing to put there, so single-post-body.php
   renders no <aside> at all — without this the article kept the indent and read
   as a narrow column beside half a blank page. Same measure as the standalone
   .typography above. Desktop only; below 1024px the two stack anyway. */
@media all and (min-width: 1024px) {
  .main.split > div:not(:has(aside)) > .typography {
    padding-left: 20.83%;
    padding-right: 20.83%;
  }
}
.main.with-sidebar .typography {
  padding-left: 26.67%;
}
.main .pb-posts-grid {
  padding: 4.17% 4.17% 200px 25%;
}
.main section.card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.main section.card-list > .note {
  grid-column: 1 / -1;
}
.main section.card-list .card:nth-of-type(4n) {
  margin-right: 0;
}
.post-cards {
  border-top: 2px solid var(--color-teal-pale);
}
.featured-text-article {
  margin-left: 20.83%;
  position: relative;
  display: block;
  background: transparent url(../images/photo-pattern.png) center center repeat;
}
.featured-text-article .photo {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}
.featured-text-article .photo img {
  width: 100%;
  display: block;
  position: relative;
  z-index: -1;
}
.featured-text-article .text {
  position: absolute;
  bottom: 0;
  left: 5.27%;
  margin-bottom: 5.27%;
  width: 52.65%;
  max-height: 70%;
  overflow: hidden;
}
.featured-text-article .text h1 {
  line-height: 50px;
  padding: 0 5%;
  border-left: 2px solid var(--color-white);
}
.featured-text-article .text p {
  color: var(--color-white);
  font-size: 16px;
  line-height: 28px;
  text-align: justify;
  padding: 2.3% 5% 0;
}

.wp-theme-atmintiesvietos.timeline {
  min-height: 105vh;
}
.timeline {
  z-index: 1;
  position: relative;
  overflow-x: clip;
}
.timeline .time-line-texts {
  margin: 120px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.timeline .bg {
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  top: 0;
  background: rgba(38, 38, 38, 0.9) url(../images/photo-pattern.png) center
    center repeat;
}
.timeline .bg img {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.timeline .bg div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}
.timeline h1 {
  font-size: 54px;
  line-height: 0.9em;
  color: var(--color-white);
}
.timeline h1 b {
  color: var(--color-teal-lighter);
  margin: 0 5px 0 30px;
}
.timeline h1 i {
  color: var(--color-teal-lighter);
  font-size: 15px;
  font-weight: 400;
  line-height: 17px;
  display: inline-block;
  width: 1px;
  vertical-align: top;
}
.timeline hr {
  position: absolute;
  border: none;
  border-top: 3px solid var(--color-white);
  top: 90px;
  transition: width 0.2s ease-in-out 0.2s;
  width: 0;
}
.timeline hr.appeared {
  width: 60px;
  transition: width 0.2s ease-in-out 0.2s;
}
/* .timeline .list {
  position: absolute;
  left: 4.17%;
  right: 4.17%;
  bottom: 290px;
} */
/* .timeline .list .slick-list {
  overflow: visible;
} */
.timeline .list .slick-track {
  margin: auto;
  display: flex; /* equal-height slides: stretch every card to the tallest */
}
.timeline .list .slick-track .slick-slide {
  height: auto;
}
/* Filtered-posts slider: equal-height + smooth fade reload (no collapse). */
#lk-filtered-posts .slick-track {
  display: flex;
}
#lk-filtered-posts .slick-track .slick-slide {
  height: auto;
}
#lk-filtered-posts {
  transition: opacity 0.25s ease;
}
#lk-filtered-posts.is-loading {
  opacity: 0;
}
.timeline .list .card {
  width: 308px;
  margin: 0 3px;
}
.timeline .list .card .front {
  background-color: var(--color-ink);
  transition:
    background-color 0.2s ease-in-out,
    transform 0.6s;
}
.timeline .list .card .front i,
.timeline .list .card .front h4 {
  color: #737373;
  transition: color 0.2s ease-in-out;
}
.timeline .list .card.slick-active .front,
.timeline .list .card.active .front {
  background-color: var(--color-primary);
}
.timeline .list .card.slick-active .front i,
.timeline .list .card.slick-active .front h4,
.timeline .list .card.active .front i,
.timeline .list .card.active .front h4 {
  color: var(--color-white);
}
.timeline .list .card .front:after {
  content: " ";
  display: block;
  background-color: var(--color-black);
  opacity: 0.6;
  z-index: 1;
  transition: opacity 0.2s;
}
.timeline .list .card.slick-active .front:after,
.timeline .list .card.active .front:after {
  opacity: 0;
}
.timeline .list .card .front h4 {
  font-size: 21px;
}
.timeline .list .slick-prev,
.timeline .list .slick-next {
  width: 4.5%;
  left: -4.5%;
  top: 0;
  bottom: 0;
  cursor: default;
  background: transparent;
  font-size: 0;
  width: 22px;
}
.timeline .list .slick-next {
  left: auto;
  right: -4.5%;
}
.timeline .list .slick-prev:before {
  display: block;
  position: absolute;
  left: 15%;
  top: 50%;
  width: 22px;
  height: 22px;
  content: "";
  -webkit-mask-image: url(../images/chew-down.svg);
  mask-image: url(../images/chew-down.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  height: 18px;
  width: 18px;
  cursor: pointer;
  background: var(--color-primary);
}
.timeline form#Form_MemosSearchForm {
  margin: 30px 0;
}
/*
.timeline form#Form_MemosSearchForm.right {
  top: 9.5%;
  bottom: auto;
  left: auto;
  right: 4.17%;
  width: 16.67%;
} */
.new-memo {
  padding: 5% 0 245px;
}
.new-memo h1 {
  margin-bottom: 20px;
  font-size: 50px;
}
.post-page .typography p i {
  font-size: 14px;
}
#single-point-map-holder .btn {
  position: absolute;
  bottom: 8.92%;
  width: 34%;
  left: 33%;
  color: var(--color-dark);
  background-color: var(--color-white);
  z-index: 400;
}
#single-point-map-holder .btn u {
  background-color: var(--color-dark);
}
.gallery-content .map-holder::before {
  content: " ";
  display: block;
  width: 25px;
  height: 10px;
  margin: 0 auto 5px;
  background: transparent url(../images/sprite.png) -477px center no-repeat;
}
.route-body .description span,
.route-body .description .travel-info a {
  padding-left: 25px;
}
.route-body .description span,
.route-body .description a {
  color: var(--color-white);
}
.route-body .description span b {
  font-weight: 700;
}
.route-body .description span:before,
.route-body div.description a:before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 17px;
  top: 5px;
  left: 0;
}
.route-map {
  position: relative;
}
.route-body .description span.dist:before {
  background: transparent url(../images/compas.svg) 0 center no-repeat;
}
.route-body .description span.dur:before {
  background: transparent url(../images/clock.svg) 0 center no-repeat;
}
.route-body .description a:before {
  background: transparent url(../images/file.svg) 0 center no-repeat;
}
.route-body .more,
.route-body .more {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 0.25em;
  margin-top: 30px;
  line-height: 2em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  transition:
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}
.route-body .description .more,
.route-content .more {
  display: inline-block;
  font-weight: 800;
  text-decoration: none;
  padding-bottom: 0.25em;
  margin-top: 30px;
  line-height: 2em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  -webkit-transition:
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  -moz-transition:
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  -ms-transition:
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  -o-transition:
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  transition:
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  cursor: pointer;
}
.route-body .description .more {
  color: var(--color-white);
  border-bottom: 1px solid var(--color-white);
}
.route-body .more:hover,
.route-point .more:hover,
.route-body .description a:hover {
  color: var(--color-teal-light);
  border-color: var(--color-teal-light);
}
.route-point.first {
  margin-top: 4.17%;
}
.route-point {
  position: relative;
  margin: 0 16.67% 0 22.92%;
  padding-bottom: 60px;
}
.route-body {
  display: grid;
  grid-template-columns: 70% 30%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 14px;
}
.route-body .description {
  line-height: 2em;
  padding: 60px 100px 60px 60px;
}
.route-body .description h1 {
  color: var(--color-white);
}
.route-body .travel-info {
  margin: 30px 0 60px;
}
.route-body .travel-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0 25px;
}
.route-point {
  position: relative;
  margin: 0 16.67% 0 22.92%;
  padding-bottom: 60px;
  /* Anchor jumps ("Skaityti plačiau", or a map pin press) land the section at
     the very top of the viewport, where the sticky header would cover its
     heading. Keep it clear: the header is 83px here (it only shrinks >=1025px),
     plus breathing room. */
  scroll-margin-top: 99px;
}
@media all and (min-width: 1025px) {
  /* Header has shrunk to 74px by the time any route point is reached
     (.desktop-menu.fixed-down is added past 150px of scroll). */
  .route-point {
    scroll-margin-top: 90px;
  }
}
.route-point.first {
  margin-top: 60px;
}
.route-point .image-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 40px;
}
.route-point .image-gallery a {
  display: block;
}
.route-point .image-gallery a .container-img {
  aspect-ratio: 1.5/1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.route-point .image-gallery a .container-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.route-point:before {
  content: "";
  display: block;
  position: absolute;
  border-right: 2px dashed var(--color-gray-light);
  width: 24px;
  left: -10%;
  top: 50px;
  bottom: 0;
}
.route-point.first:before,
.route-point.last:before {
  display: none;
}
.route-point h2 {
  color: var(--color-text);
  position: relative;
  margin-bottom: 40px;
}
.route-point h2 i,
.route-point h2 b {
  position: absolute;
  width: 50px;
  height: 50px;
  line-height: 50px;
  left: -10%;
  top: -2px;
  border-radius: 50%;
  color: var(--color-white);
  text-align: center;
  font-size: 17px;
  background-color: var(--color-primary);
}
.route-point h2 b {
  background: var(--color-primary) url(../images/map-point.svg) center no-repeat;
}
.route-point .typography {
  padding: 0;
}
/* ============ APPEAR ANIMATIONS ============ */
.appear {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-in-out,
    transform 0.6s ease-in-out;
  font-weight: 500;
}
.appear.appeared {
  opacity: 1;
  /* transform: translateY(0); */
}

/* ============ COUNTER ============ */
.counter {
  display: inline-block;
}

/* ============ RESPONSIVE ============ */
@media all and (max-width: 1679px) {
  header nav a {
    margin-left: 2.08%;
  }
  header form {
    right: 28.17%;
  }
  header nav .lang {
    right: 20%;
  }
  header nav a:last-of-type {
    width: 15.66%;
    right: 3.17%;
  }
  header form {
    right: 26.17%;
  }
}
@media all and (max-width: 1500px) {
  .featured-memo .photo {
    aspect-ratio: 1/1;
  }
}
@media all and (max-width: 1360px) {
  header > div > a:first-of-type {
    margin-left: 2.17%;
    padding: 12px 0;
    float: left;
  }
  .route-body {
    grid-template-columns: 100%;
  }
  .route-map {
    min-height: 500px;
    height: 100%;
    max-height: 700px;
    order: 2;
  }
  header .header-nav a {
    font-size: 18px;
  }
  header .header-nav li:last-child a {
    padding: 0 55px;
  }
}
@media all and (max-width: 1280px) {
  /* Work Sans is wider than the condensed face this row was drawn for, so the
     eight items plus the CTA need trimming to survive down to 1025px, where
     the mobile menu takes over. */
  header .header-nav a {
    font-size: 16px;
  }
  header .header-nav li:last-child a {
    padding: 0 30px;
  }
  header form {
    right: 25%;
  }
  footer {
    padding-top: 25px;
    padding-bottom: 25px;
  }
  header nav .lang {
    right: 20%;
  }
  footer ul {
    top: 25px;
  }
  .body {
    padding-bottom: 94px;
  }
  .full footer {
    bottom: -94px;
  }
  .main.lside .map-toolbar {
    height: unset;
    flex-direction: column;
  }
  .map-container .pb-gc-filter,
  .map-filters,
  .map-filters .pb-gc-holder {
    width: stretch;
  }
  .map-container div#Form_MemosSearchForm_q_Holder {
    width: 50%;
  }
  .map-container #Form_MemosSearchForm {
    margin-left: 30px;
    margin-right: 36px;
    width: -webkit-fill-available;
  }
  .map-container .middleColumn.pb-search-wrap input {
    max-width: stretch;
    width: 100%;
  }
  .main.lside .map-cardholder {
    width: 25%;
  }
  .main.lside .map-holder {
    width: 75%;
  }
  .gm-style .gm-style-iw-c {
    display: none;
  }
  .home-page,
  .map-container,
  .builder,
  .post-page {
    padding-bottom: 220px;
  }
  .desktop-menu.fixed-down .menu-bottom li a {
    font-size: 17px;
  }
  .desktop-menu.fixed-down .menu-bottom li:last-child a {
    padding: 0 40px;
  }
  .desktop-menu.fixed-down .menu-bottom .fixed-logo {
    width: 110px;
    margin-right: 40px;
  }
}
@media all and (min-width: 1025px) {
  header nav {
    display: block !important;
  }
}
@media all and (max-width: 1024px) {
  .map-inner-container {
    flex-direction: column;
  }
  .desktop-menu {
    display: none;
  }
  .gallery-container {
    padding-top: 35px;
  }
  .main.split aside .block #gallery a .container-img {
    box-shadow: none;
  }
  .mobile-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-primary);
  }
  .mobile-menu .first-logo,
  .mobile-menu .second-logo {
    display: inline-block;
    vertical-align: middle;
    height: 83px;
    line-height: 83px;
  }
  .mobile-menu .second-logo {
    margin-left: 16px;
  }
  .mobile-menu .first-logo img,
  .mobile-menu .second-logo img {
    display: inline-block;
    vertical-align: middle;
    height: 60%;
    width: auto;
    max-width: 135px;
    object-fit: contain;
  }
  .mobile-logo {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .mobile-logo .second-logo img {
    padding-left: 10px;
    border-left: 1px solid var(--color-primary);
  }
  /* Two copies of the language switcher live in the markup: one beside the
     burger, one inside nav. The burger one carries the closed header; once the
     menu opens it would sit next to the X, so hand over to the copy that rides
     the search row inside the panel. */
  header .menu-nav > .lang {
    display: block !important;
  }
  header .menu-nav:has(.burger.active) > .lang {
    display: none !important;
  }
  header .menu-nav > .lang a {
    position: static !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
  }
  header nav .lang {
    display: inline-block !important;
    vertical-align: middle;
    width: 35px;
    margin: 24px 0;
    text-align: right;
  }
  header nav .lang a {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0;
    border: 0 !important;
    text-indent: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
  }
  .home .headline {
    font-size: 40px;
    height: 100px;
    line-height: 100px;
  }
  header > div a.burger {
    cursor: pointer;
    height: 24px;
    width: 35px;
    display: block;
  }
  header .mobile-menu .menu-nav {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  header span {
    margin-top: 10px;
  }
  header span,
  header span:before,
  header span:after {
    content: "";
    display: block;
    position: absolute;
    height: 3px;
    width: 28px;
    background-color: var(--color-primary);
    transition: all 0.3s ease-in-out;
    transform: translateZ(0);
  }
  header span:before {
    top: -10px;
  }
  header span:after {
    bottom: -10px;
  }
  header .active span {
    background-color: transparent;
  }
  header .active span:before {
    transform: translateY(10px) rotate(45deg);
    top: -10px;
  }
  header .active span:after {
    transform: translateY(-10px) rotate(-45deg);
    top: 10px;
  }
  header nav {
    display: none;
    position: absolute;
    top: 83px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-white);
    /* Separates the panel from the logo bar it drops out of. */
    border-top: 2px solid var(--color-teal-pale);
    padding: 0 8.34% 30px;
  }
  /* Child combinator: the language link carries .link too, but it is nested. */
  header nav > a.link {
    float: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-teal-muted) !important;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    text-indent: 0;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 52px;
    height: 52px;
    transition: color 0.2s ease-in-out;
  }
  header nav > a.link.current {
    font-weight: 700;
  }
  header nav > a.btn {
    position: relative;
    display: block;
    top: auto;
    right: auto;
    width: 100%;
    margin: 30px 0 0;
    height: 52px;
    line-height: 52px;
    border: 0 !important;
    text-indent: 0;
    font-weight: 600;
  }
  header form {
    position: static;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    /* Leaves room for the language link alongside it. */
    width: calc(100% - 45px);
    margin: 24px 0;
  }
  header nav form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }
  header form .field {
    width: 100%;
  }
  header form .field input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    color: var(--color-primary);
    border-color: var(--color-primary);
    height: 45px;
  }
  header nav form div.field.ico:after {
    background: var(--color-primary);
  }
  header nav form .field input::-webkit-input-placeholder {
    color: var(--color-primary);
  }
  header nav form .field input::placeholder {
    color: var(--color-primary);
  }
  header nav form .action {
    display: none;
  }
  .partners-container {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }
  .main .pb-posts-grid {
    padding: 4.17% 4.17% 245px 25%;
  }
  .timeline form#Form_MemosSearchForm {
    margin: 17px;
  }
  p.all-rights {
    margin-top: 0;
  }
  .featured-memo {
    display: block;
    grid-template-columns: none;
    padding-bottom: 4.17%;
    text-align: center;
  }
  .featured-memo .photo {
    width: 100%;
    margin-bottom: 4.17%;
  }
  .featured-memo .text {
    padding: 24px 6.25% 40px;
  }
  .featured-memo blockquote {
    display: none;
  }
  .featured-memo h3,
  .featured-memo .btn {
    position: relative;
    bottom: auto;
    right: auto;
  }
  .featured-memo h3 {
    width: auto;
  }
  .featured-memo h3:before {
    display: none;
  }
  .featured-memo .btn {
    display: inline-block;
    width: auto;
    min-width: 200px;
    margin-top: 4.17%;
  }
}
@media all and (max-width: 1023px) {
  .body {
    padding-bottom: 210px;
  }
  .full footer {
    bottom: -210px;
  }
  .bottom-quote img {
    display: none;
  }
  .bottom-quote div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    position: relative;
    height: 500px;
  }
  .bottom-quote blockquote {
    top: 15%;
  }
  .bottom-quote .btn {
    bottom: 10%;
    width: 29.17%;
    left: 50%;
    margin-left: -14.58%;
  }
  /* Below 1024px the sidebar no longer sits beside the text — it stacks above
     it. It used to do that as a fixed 425px band with the text pushed down by
     a matching padding, which squeezed the image into whatever the band had
     left and then left a gap under short ones. Let the aside take the
     gallery's own height instead: the image runs at its natural size, the dots
     land right under it and the text follows. The map panel stays absolutely
     positioned so the two blocks can still cross-fade — which is why the map
     brings its own floor: on its own it has no height to give the aside. */
  .main.split aside {
    /* relative, not static: the map block inside is absolutely positioned at
       height:100%, so the aside has to stay its containing block — otherwise
       the map resolves against the page and covers the whole article. The
       desktop offsets have to be unset by hand for the same reason. */
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    height: auto;
  }
  .main.split aside:has(> .block.map-holder.active) {
    min-height: 400px;
  }
  .main.split aside .block.gallery-holder {
    position: relative;
    height: auto;
  }
  .main.split .typography {
    padding-left: 8.34%;
    padding-top: 30px;
    /* Desktop draws this rule where the text column meets the fixed sidebar.
       Stacked, it just cuts the gallery off from its own caption line. */
    border-top: 0;
  }
  .main.split aside .block #gallery a {
    padding: 35px;
  }
  /* Cap against the viewport so a tall portrait shot still leaves the dots and
     the title in view on a phone. */
  .main.split aside .block #gallery a .container-img {
    max-height: 62vh;
  }
  /* 34% of a phone is narrower than "Atidaryti galeriją", and .btn clips what
     overflows — size this one to its label instead. */
  #single-point-map-holder .btn {
    width: auto;
    left: 50%;
    padding: 0 24px;
    transform: translateX(-50%);
  }
  /* .btn:hover scales with a bare transform, which would drop the centring. */
  #single-point-map-holder .btn:hover {
    transform: translateX(-50%) scale(1.03);
  }
  /* Bigger chevrons: on a phone they sit out at the screen edges, well away
     from the image, and the desktop 18px reads as a speck there. */
  .gallery-content .arrow-container .slick-prev svg,
  .gallery-content .arrow-container .slick-next svg {
    width: 30px;
    height: 30px;
  }
  /* Those chevrons are rotated a quarter turn, so a 30x33 box paints 33 wide
     and hangs ~1.5px past each end of the container. Where .gallery-content
     runs the full width (360px and below) that put the right-hand one off
     screen and gave the page a 3px horizontal scroll — inset the pair. */
  .gallery-content .arrow-container {
    width: calc(100% - 8px);
    left: 4px;
  }
  .gallery-content {
    width: 80%;
  }
  footer {
    line-height: 1.2em;
  }
  footer ul,
  footer ul li,
  footer ul li img {
    position: static;
    float: none !important;
  }
  footer ul {
    display: block;
    margin-bottom: 0;
  }
  footer ul li,
  footer ul li img {
    display: inline-block;
    margin: 0 10px !important;
  }
  .main.with-sidebar aside {
    position: static;
    width: auto;
    padding: 0;
    border-right: 0;
  }
  .main.with-sidebar .typography {
    padding-left: 8.34%;
    padding-right: 8.34%;
  }
  .main.split aside {
    width: 100%;
  }
  .main.with-sidebar aside i {
    position: relative;
    margin-bottom: 0;
    margin-bottom: 4.17%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main.with-sidebar aside a {
    padding: 4.17% 4.17%;
  }
  .main.with-sidebar .nav-hider {
    cursor: pointer;
    position: absolute;
    right: 4.17%;
    width: 14px;
    height: 14px;
    margin-top: 5px;
    content: "";
    -webkit-mask-image: url(../images/simple-arr-down.svg);
    mask-image: url(../images/simple-arr-down.svg);
    background: var(--color-primary);
    mask-size: contain;
    mask-repeat: no-repeat;
    opacity: 1;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    -ms-transition: -ms-transform 0.2s ease-in-out;
    -o-transition: -o-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
  }
  .main.with-sidebar .nav-hider.active {
    -webkit-transform: rotatex(1800deg);
    -moz-transform: rotatex(180deg);
    -ms-transform: rotatex(180deg);
    -o-transform: rotatex(180deg);
    transform: rotatex(180deg);
  }
  .post-container .side-bar form,
  .gm-style .gm-style-iw-tc {
    display: none;
  }
  .main .pb-posts-grid {
    padding: 4.17% 4.17% 260px;
  }
  .main.with-sidebar form .field input,
  .main.with-sidebar form .field select,
  .main.with-sidebar .ui-selectmenu-button {
    margin-top: 0;
    padding: 4px 7%;
  }
  .pb-gc-filter {
    padding-bottom: 15px;
  }
  .main.with-sidebar aside form {
    max-width: 500px;
    margin: auto;
    padding: 0 4.17% 4.17%;
  }
  .main.with-sidebar form .field input {
    padding: 4px 12px;
    padding-right: unset;
  }
  form div.field.ico:after {
    right: 15px !important;
  }
  .pb-gc-select-trigger {
    padding: 0 12px !important;
  }
  form div.field.ico:after,
  form div.field.dropdown:after {
    right: 5.22%;
  }
  .main.lside .map-holder,
  .main.lside .map-cardholder {
    width: 100%;
  }
  .map-container #Form_MemosSearchForm {
    margin-left: 6px;
    margin-right: 9px;
  }
  .map-container .middleColumn.pb-search-wrap input {
    padding: 4px 14px;
  }
  .map-container .middleColumn.pb-search-wrap input {
    right: 14px;
  }
  .main.lside .map-cardholder {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
    align-items: stretch;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    max-width: 100%;
    padding: 25px 0;
    border-left: 0;
  }
  .main.lside .map-cardholder .card {
    flex: 0 0 260px !important;
    width: 260px !important;
    scroll-snap-align: start;
  }
  .main.lside .map-cardholder .lk-card-loader {
    flex: 0 0 80px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  .typography blockquote.centered {
    width: 100%;
    margin-left: 0;
  }
  .typography blockquote {
    margin-right: -5%;
    padding-right: 0;
    width: 34%;
  }
  .timeline h1 {
    font-size: 44px;
  }
  .timeline .time-line-texts {
    margin: 64px 4.17% 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
  }
  .range-slider label {
    display: none;
  }
  .range-slider label.active {
    font-size: 16px;
    margin-top: 15px;
    display: block;
  }
  .timeline hr.appeared {
    width: 36px;
  }
  .timeline hr {
    top: 57px;
  }
  .wp-theme-atmintiesvietos.timeline {
    min-height: 100vh;
  }
  footer ul.social {
    gap: 0px;
  }
  .route-point .image-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  .main.with-sidebar aside h2 {
    padding-bottom: 4.17%;
  }
  .main.with-sidebar aside b {
    font-size: 84px;
    line-height: 1em;
  }
}
@media all and (max-width: 768px) {
  .home .headline {
    font-size: 32px;
    height: 80px;
    line-height: 80px;
  }
  header .lang {
    top: 5px;
  }
  header > div > a:first-of-type {
    padding: 7px 0;
  }
  header > div > a:first-of-type img {
    height: 45px;
  }
  header > div > a.burger {
    margin-top: 18px;
  }
  /* The mobile header is 83px tall at every width below 1024px, so the panel
     drops from 83px here too — 63px slid it up over the logos. */
  header nav {
    top: 83px;
  }
  .main section.card-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .featured-memo .btn {
    width: 91.67%;
  }
  .recent-memos {
    text-align: center;
  }
  .recent-memos .all-memos {
    position: static;
    margin: 0;
  }
  .recent-memos .all-memos:before {
    display: none;
  }
  .infographics {
    font-size: 26px;
    line-height: 105px;
  }
  .infographics b {
    font-size: 66px;
  }
  .infographics .fade {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .infographics sup {
    width: auto;
  }
  .infographics sub {
    width: auto;
  }
  .infographics p {
    line-height: 1em;
    margin-bottom: 15px;
    width: 100%;
  }
  .infographics p i:before,
  .infographics p i:after {
    top: 9px;
  }
  .infographics sup b {
    font-size: 132px;
  }
  .main.split aside .block.gallery-holder {
    overflow: hidden;
  }
  .map {
    height: 500px;
  }
  .map aside {
    width: 41.67%;
    min-width: 0;
  }
  .bottom-quote blockquote {
    margin: 0 4.17%;
    top: 26%;
  }
  .bottom-quote .btn {
    width: 91.67%;
    left: 4.17%;
    margin: 0;
  }
  .route-map {
    height: auto;
  }
  .route-map #map {
    position: static;
    width: auto;
    height: 400px;
  }
  .map-container {
    margin-top: 0;
  }
  .timeline h1 {
    font-size: 36px;
  }
  .timeline h1 b {
    margin-left: 15px;
  }
  .map .totats h3 {
    font-size: 31px;
    margin: 5% 10%;
    text-align: center;
  }
  .map .totats hr.appeared {
    margin: 5% 10%;
  }
  .map .totats b {
    margin: 8% 10% 0;
  }
  .route-point {
    margin: 0 4.17%;
    padding-bottom: 35px;
  }
  .route-point h2 i,
  .route-point h2 b {
    position: relative;
    display: block;
    width: 38px;
    min-width: 38px;
    height: 38px;
    line-height: 40px;
    left: 0;
    top: 0;
  }
  .route-point h2 {
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 40px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 10px;
  }
  .route-body .description {
    line-height: 2em;
    padding: 40px 4.17%;
  }
  .route-point:before {
    display: none;
  }
  .gallery-content {
    width: 90%;
  }
  .map .totats {
    min-height: auto;
  }
  .map .totats b {
    font-size: 88px;
    line-height: 121px;
  }
  .recent-memos .list-memos {
    position: relative;
    bottom: 0;
    left: 0;
  }
  .recent-memos .all-memos {
    justify-content: flex-end;
    padding-right: 8%;
    padding-top: 25px;
  }
  .recent-memos .all-memos a {
    font-size: 16px;
  }
  .recent-memos .all-memos a:after {
    width: 7px;
  }
}

@media all and (max-width: 640px) {
  /* Headings are 35px uppercase everywhere. Uppercase Lithuanian compounds run
     long, so on a narrow phone a single word could be wider than the block it
     sits in and spill over the edge. Scale with the viewport instead of a flat
     size — full 35px is back from ~389px wide, and the ratio (45/35) is kept
     so the vertical rhythm is unchanged. break-word is the last-resort guard
     for a word that still will not fit. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 28px;
    line-height: 1.285em;
    overflow-wrap: break-word;
  }
  /* Body copy is justified on desktop, where the column is wide enough to
     absorb it. On a phone the same text sits in a ~265px column and justifying
     it opens rivers of white space between the words — every block of running
     text goes back to ragged-right below 640px. */
  .typography p,
  .typography ul li,
  .typography ol li,
  .typography-route p,
  .typography-route ul li,
  .typography-route ol li,
  .news-page .container-info p,
  .news-page .container-info ul li,
  .news-page .container-info ol li,
  .new-memo .memo-header p,
  .new-memo .memo-header ul li,
  .new-memo .memo-header ol li,
  .main-content.change-ulContainer p,
  .main-content.change-ulContainer ul li,
  .main-content.change-ulContainer ol li,
  .archive-subtitle p,
  .archive-subtitle ul li,
  .archive-subtitle ol li,
  .typography blockquote.centered p,
  .info_window_popup p,
  .featured-text aside:last-of-type,
  .featured-text-article .text p {
    text-align: left;
  }
  .typography blockquote * {
    font-size: 18px;
    line-height: 26px;
  }
  /* Fluid rather than a flat 35px: at 320px a fixed 35px pushed the longest
     uppercase word past the text column (and the page 3px sideways). Scales
     back up to the old size from ~450px wide. */
  .typography h1 {
    font-size: clamp(25px, 7.8vw, 35px);
    line-height: 1em;
    margin-bottom: 45px;
  }
  .typography h3 {
    font-size: 18px;
    line-height: 0.9em;
    margin: 1.3em 0;
  }
  /* Other styles */
  .main section.card-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .home .headline {
    font-size: 24px;
    height: 72px;
    line-height: 72px;
  }
  .infographics {
    font-size: 20px;
    line-height: 50px;
  }
  .infographics b {
    font-size: 58px;
    line-height: 26px;
  }
  .infographics sup b {
    font-size: 121px;
    line-height: 92px;
  }
  .infographics .fade {
    padding: 40px 0;
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }
  .featured-text aside:first-of-type,
  .featured-text aside:last-of-type {
    width: 91.67%;
    height: auto;
    padding: 8.33% 4.17%;
  }
  .infographics sub {
    width: auto !important;
  }
  .map {
    height: 710px;
  }
  .map .totats {
    right: 60px;
    left: 60px;
    width: stretch !important;
    bottom: 4.17%;
    top: auto;
    height: 410px;
  }
  .map .totats h3 {
    line-height: 65px;
    text-align: center;
  }
  .map .totats hr.appeared {
    margin: 0 auto 5%;
  }
  .map .totats b {
    margin-top: 0;
  }
  .bottom-quote blockquote {
    top: 20%;
    font-size: 22px;
    line-height: 30px;
  }
  .main section.card-list .card {
    width: 100%;
    margin-right: 0;
  }
  .map-filters {
    flex-direction: column;
  }
  .map-container .pb-gc-filter {
    flex-direction: column;
  }
  /* Stacked again at this width — the button goes back under the dropdowns
     instead of being centred beside them. */
  .map-container .pb-gc-clear-all {
    align-self: flex-start;
  }
  .map-container div#Form_MemosSearchForm_q_Holder {
    width: 100%;
  }
  .main.lside .map-cardholder .card {
    flex: 0 0 208px !important;
    width: 200px !important;
    scroll-snap-align: start;
  }
  .typography blockquote {
    width: 93%;
    /* The quote badge hangs 15px past the block's right edge. Full width on a
       phone, the -5% pull inherited from the desktop pull-quote put that badge
       ~2px outside the viewport and gave the page a horizontal scroll. */
    margin-right: 0;
  }
  .range-slider i {
    width: 8px;
    height: 8px;
    top: -2px;
    margin-right: -4px;
    background-position: -1938px center;
  }
  .range-slider i.ui-state-default {
    width: 12px;
    height: 12px;
    top: -4px;
    margin-left: -6px;
    background-position: -1996px center;
  }
  .map .totats {
    min-width: 0;
  }
  .recent-memos .list .card {
    margin: 0 5px;
  }
  .route-point .image-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  p.all-rights {
    margin-top: 0;
  }
}
@media all and (max-width: 540px) {
  footer ul.partners {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
  .partners-container {
    flex-direction: column;
    gap: 5px;
    margin-bottom: 0px;
  }
  .home-page,
  .map-container,
  .builder,
  .post-page {
    padding-bottom: 265px;
  }
  .main .pb-posts-grid {
    padding: 4.17% 4.17% 290px;
  }
  .error-page .typography {
    padding: 8.35% 10%;
  }
  footer ul li a {
    height: 42px;
  }
  .timeline-page .lk-heading h1 {
    font-size: 40px;
  }
}
@media all and (max-width: 480px) {
  .main section.card-list {
    grid-template-columns: repeat(1, 1fr);
  }
  .timeline .list .card .front h4 {
    font-size: 18px;
  }
  .timeline .list .slick-prev:before,
  .timeline .list .slick-next:after {
    display: none;
  }
  .map .totats b {
    font-size: 90px;
  }
  .map .totats {
    height: 340px;
    right: 40px;
    left: 40px;
    width: auto;
  }
  .route-point .image-gallery {
    grid-template-columns: repeat(1, 1fr);
  }
  .gallery-content {
    width: 97%;
  }
  .recent-memos .list .slick-prev,
  .recent-memos .list .slick-next {
    height: 78%;
  }
  p.all-rights {
    font-size: 12px;
  }
}
@media all and (max-width: 360px) {
  .gallery-content {
    width: 100%;
  }
  header nav {
    top: 68px;
  }
  .infographics .fade {
    justify-content: space-around;
  }
  .mobile-menu .first-logo img,
  .mobile-menu .second-logo img {
    height: 24px;
  }
  .mobile-menu .first-logo,
  .mobile-menu .second-logo {
    height: 68px;
    line-height: 68px;
  }
  .slick-dots-window {
    margin: 16px auto 0;
    overflow: hidden;
  }
  .gallery-holder #gallery ul.slick-dots {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
    margin: 0;
    padding: 0;
    transition: transform 0.35s ease;
  }
  .gallery-holder #gallery ul.slick-dots li {
    flex: 0 0 22px;
    width: 22px;
    height: 18px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===========================================================================
   PAGE-BUILDER RESTYLE — #page-builder (Informacija / Apie projektą)
   Appearance only (CSS), scoped so other .with-sidebar pages are untouched.
   =========================================================================== */

/* Main section heading: big uppercase teal */
#page-builder .typography h2 {
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 36px;
}

/* Sidebar heading ("INFORMACIJA") */
#page-builder .side-bar aside h2 {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(24px, 1.75vw, 42px);
  text-align: center;
}

/* Sidebar links -> outlined boxes with a chevron */
#page-builder .side-bar aside nav {
  margin-top: 8%;
}
#page-builder .side-bar aside a {
  display: block;
  position: relative;
  margin: 0 0 14px;
  padding: 15px 46px 15px 20px;
  border: 2px solid var(--color-teal-muted);
  border-radius: 2px;
  color: var(--color-primary);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}
#page-builder .side-bar aside a:first-of-type {
  border-top: 2px solid var(--color-teal-muted);
}
#page-builder .side-bar aside a:hover,
#page-builder .side-bar aside a.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
/* chevron ">" (overrides the old mask-image arrow) */
#page-builder .side-bar aside a:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border: solid var(--color-primary);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  -webkit-mask-image: none;
  mask-image: none;
  background: none;
}

/* Below 1024px both sidebars — the page builder's tab list and the post
   builder's filter panel — stop being a column beside the article and become a
   menu stacked above it: centred title, inset boxes, and the fold toggle under
   the list rather than tucked beside the title. Every selector carries the
   template id because the desktop #page-builder rules further up would
   otherwise outrank the shared ones. */
@media all and (max-width: 1023px) {
  #page-builder .side-bar aside,
  #postbuilder-page .side-bar aside {
    /* relative so the toggle below can anchor to it — which means the desktop
       fixed-position offsets have to be unset by hand, or the whole block
       slides 165px down over the article. */
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    padding: 0 13%;
  }
  /* Room for the toggle — only where there is one to make room for. */
  #page-builder .side-bar aside:has(.nav-hider),
  #postbuilder-page .side-bar aside:has(.nav-hider) {
    padding-bottom: 56px;
  }
  .side-bar.main.with-sidebar,
  #page-builder .side-bar aside:has(.nav-hider),
  #postbuilder-page .side-bar aside:has(.nav-hider) {
    padding-top: 20px;
  }
  /* Static, so the toggle at the bottom anchors to the aside and not to the
     title it happens to sit inside (an h2 here, an i there). */
  #page-builder .side-bar aside > .relative,
  #postbuilder-page .side-bar aside > .relative {
    position: static;
    font-size: clamp(26px, 4.9vw, 38px);
    margin-bottom: 26px;
  }
  #page-builder .side-bar aside nav,
  #postbuilder-page .side-bar aside nav {
    margin-top: 0;
  }
  #page-builder .side-bar aside nav a,
  #postbuilder-page .side-bar aside nav a {
    margin-bottom: 14px;
    padding: 16px 56px 16px 20px;
    border: 2px solid var(--color-primary);
    font-size: clamp(15px, 2.6vw, 20px);
    text-align: left;
  }
  #page-builder .side-bar aside nav a:after,
  #postbuilder-page .side-bar aside nav a:after {
    right: 22px;
    width: 12px;
    height: 12px;
    margin-top: -7px;
    border-width: 3px 3px 0 0;
  }
  /* The tab you are already reading needs no "go there" chevron. */
  #page-builder .side-bar aside nav a.active:after,
  #postbuilder-page .side-bar aside nav a.active:after {
    display: none;
  }
  /* Fold toggle: one chevron centred under the list, nothing beside the title.
     Default points down ("open me") — which is the post builder's starting
     state, since its panel loads folded. */
  #page-builder .side-bar .nav-hider,
  #postbuilder-page .side-bar .nav-hider {
    right: auto;
    left: 50%;
    bottom: 14px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border: solid var(--color-primary);
    border-width: 3px 3px 0 0;
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    transform: rotate(135deg);
  }
  #postbuilder-page .side-bar .nav-hider.active {
    transform: rotate(-45deg);
  }
  /* The page builder's list loads open, so its arrow starts the other way up. */
  #page-builder .side-bar .nav-hider {
    transform: rotate(-45deg);
  }
  #page-builder .side-bar .nav-hider.active {
    transform: rotate(135deg);
  }
}

/* =============================================
   MOBILE TYPE SIZES — from "atminties vietos mobile darbinis.ai" (390px)

   Sizes only. The .ai artboards are 390px wide and its pt values map 1:1 to
   px. Everything below is a size the mobile design states outright but the
   phone layout was not yet hitting; sizes already correct are not repeated.
   This block sits last so it settles ties with the earlier mobile blocks.
   ============================================= */
@media all and (max-width: 640px) {
  /* Slide-out menu: items 16, language 18 */
  header nav > a.link {
    font-size: 16px;
  }
  header .menu-nav > .lang a,
  header nav .lang a {
    font-size: 18px;
  }
  /* Every button on the phone is 14 — "skaityti daugiau", "atrask daugiau",
     "palik savo įrašą", "prisegti failus", "siųsti". */
  .btn {
    font-size: 14px;
  }
  /* Cards: title 18, excerpt 14 */
  .card h4,
  .card .front h4,
  .card .back h4 {
    font-size: 18px;
  }
  .card .back p {
    font-size: 14px;
  }
  /* Home counters — the middle label ("atminties vietos") is 24 against the
     20 of the two beside it. */
  .infographics sup p {
    font-size: 24px;
  }
  /* Map block */
  .map .totats h3 {
    font-size: 36px;
  }
  .map .totats i {
    font-size: 18px;
  }
  /* Quotes are 22 with a 60px opening mark */
  .featured-memo blockquote {
    font-size: 22px;
  }
  .typography blockquote * {
    font-size: 22px;
  }
  .bottom-quote blockquote::first-letter {
    font-size: 60px;
  }
  /* Attribution under a quote is body copy, not quote size */
  .typography blockquote i,
  .typography blockquote em {
    font-size: 16px;
  }
  /* Listing sidebar counter */
  .main.with-sidebar aside b {
    font-size: 94px;
  }
  .main.with-sidebar aside i {
    font-size: 18px;
  }
  /* Page titles */
  .typography h1 {
    font-size: 36px;
  }
  #page-builder .typography h2 {
    font-size: 36px;
  }
  /* Timeline year labels — 14, active and inactive alike */
  .range-slider label,
  .range-slider label.active,
  .map-container .map-toolbar .range-slider label,
  .map-container .range-slider label.active {
    font-size: 14px;
  }
  /* Sidebar. The counter caption and the section title share .relative but
     are not the same size on the phone: caption 18, title ("informacija") 24. */
  #page-builder .side-bar aside > i.relative,
  #postbuilder-page .side-bar aside > i.relative {
    font-size: 18px;
  }
  #page-builder .side-bar aside > h2.relative,
  #postbuilder-page .side-bar aside > h2.relative {
    font-size: 24px;
  }
  #page-builder .side-bar aside nav a,
  #postbuilder-page .side-bar aside nav a {
    font-size: 14px;
  }
}


/* ── Turinio laužymas siaurame stulpelyje ─────────────────────────────────
   Redaktoriai šaltinių sąrašus ir „aprašymus parengė …“ eilutę suveda TinyMCE
   „Preformatted“ formatu, todėl jos iš DB ateina kaip <pre>. <pre> turi
   `white-space: pre` — eilutė niekada nekeliama, tad telefone ji bėga pro
   dešinį stulpelio kraštą. pre-wrap išsaugo redaktoriaus įvestus eilučių
   lūžius ir leidžia kelti eilutę, kai ji nebetelpa. */
.typography pre,
.typography-route pre,
.news-page .container-info pre,
.new-memo .memo-header pre,
.main-content.change-ulContainer pre,
.archive-subtitle pre {
  white-space: pre-wrap;
  hyphens: auto;          /* per platus žodis skaidomas su brūkšneliu (lang="lt-LT") */
  overflow-wrap: break-word;
}

/* Apsauga nuo per plataus žodžio paprastoje
   įklijuotas URL). Suveikia tik tada, kai žodis tikrai netelpa. */
.typography p,
.typography ul li,
.typography ol li,
.typography-route p,
.typography-route ul li,
.typography-route ol li,
.news-page .container-info p,
.news-page .container-info ul li,
.news-page .container-info ol li,
.new-memo .memo-header p,
.new-memo .memo-header ul li,
.new-memo .memo-header ol li,
.main-content.change-ulContainer p,
.main-content.change-ulContainer ul li,
.main-content.change-ulContainer ol li,
.archive-subtitle p,
.archive-subtitle ul li,
.archive-subtitle ol li {
  overflow-wrap: break-word;
}

/* Įklijuotas URL yra vienas ištisinis „žodis“ be kėlimo taškų — jis gali lūžti
   tik bet kurioje vietoje, ir be brūkšnelio, nes brūkšnelis adrese atrodytų
   kaip jo dalis. Paprastam tekstui kėlimas su brūkšneliu lieka (viršuje). */
.typography a,
.typography-route a:not(.glightbox),
.news-page .container-info a,
.new-memo .memo-header a,
.main-content.change-ulContainer a,
.archive-subtitle a {
  hyphens: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}