/* Prie Parko overrides on top of the Lavender Shore template stylesheet.
   Everything project-specific lives here so styles.css stays a clean copy of
   the template and can be re-pulled if byq ship an update. Loaded last. */

/* ---------------------------------------------------------------- palette --
   The template's warm background sits at hue 26° — a peach/orange that reads
   as Mediterranean. Palanga is a pine-and-dune coast, so the same tones are
   rotated to hue ~32-39°, which lands on sand. Lightness and saturation are
   kept where the template had them so contrast ratios don't move. */
body,
:root {
  --colors-color-bg-3: #d2c5ac;      /* was #d3bba8 — the big section gradients */
  --colors-color-accent-3: #9e8261;  /* was #9c7261 — eyebrow labels, small caps */
  --colors-color-accent-4: #5a4630;  /* was #5c3a2e — dark warm text accent */

  /* The rest of Lavender Shore's palette was never rotated, so every eyebrow
     label and pill button still rendered lilac on a sand site. These two are
     used almost entirely as label text on light grounds, so they stay in the
     same warm family as accent-3/4 rather than introducing a second hue. */
  --colors-color-accent-1: #a07f57;  /* was #7d5b83 — purple */
  --colors-color-accent-2: #4f3b28;  /* was #492c57 — dark purple */
  --colors-color-bg-4: #f0ebe0;      /* was #e8e0f0 — lavender tint */
  /* The last unrotated colour in the template: every .button-bg:hover in the
     site turned lavender, which is a hue that appears nowhere else any more. */
  --colors-color-button-hover: #e6ddcb;  /* was #d7d3f8 — lavender */

  /* Semantic, not decorative: the one warm signal colour used for scarcity and
     for the client's own words quoted back in the options page. Kept in the
     palette so it is never re-typed as a literal. */
  --pp-warn: #8a4b2a;
}

/* ------------------------------------------------------------ review cards --
   The source badge: the real Booking.com and Google marks with the name set
   in the site's own typography, so the card says where the review came from
   without pretending to be a lockup we don't have the rights to redraw. */
.review-source {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-source-mark {
  flex: none;
  width: 24px;
  height: 24px;
}

.review-source-name {
  font-size: var(--text-text-body-font-size);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--colors-color-dark);
}

/* The UCPD provenance line under the marquees — present and readable, but not
   competing with the scores in the headline. .label-small is all-caps and
   wide-tracked, which is unreadable at sentence length, so it reverts here.
   The bottom margin keeps it clear of the floating nav pill. */
.review-provenance {
  max-width: 660px;
  margin-top: 48px;
  margin-bottom: 24px;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.55;
}

/* Stars are rendered to match each review's actual score, so a 9/10 shows
   four and a half rather than a flattering five. */
.icon-star-empty,
.icon-star-half {
  opacity: .85;
}

/* ---------------------------------------------------------- sticky hero --
   The homepage pins its hero (.sticky-home-a, z-index 0) and scrolls the
   sections up over it, the way the template's home-a does. That only works if
   every following section is opaque. This one came from the guide-listing
   page, where the body background stood in for it. */
.section.offers-listing-section,
.section.home-c-explore-section {
  background-color: var(--colors-color-bg-1);
}
/* The map section is dark by design — the satellite image used to fill it edge
   to edge, so it never needed a ground of its own. Once every section got the
   same generous padding, that padding sat transparent and the pinned hero
   showed through it. */
.section.home-a-map-section,
.footer { background-color: var(--colors-color-dark); }

/* --------------------------------------------------------------- buttons --
   .cta-main is display:flex, so it stretches inside any align-items:stretch
   flex column (.master-offers, for one). This keeps it its own width. */
.button-wrap-inline {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------------------------------------------------------------- booking --
   No affordance on this site sends a guest to an OTA. Every "book" control
   opens the hotel's own enquiry flow, and the room pages carry a mount the
   real booking engine can render into once its embed script is installed. */
.booking-widget-mount:not([hidden]) {
  display: block;
  min-height: 260px;
}

.link-inline {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-book-open] {
  cursor: pointer;
}

/* ------------------------------------------------- room comparison table --
   The eight room types side by side on /kambariai/, so a family choosing a
   room never has to open eight pages. A real <table>: the columns are what a
   screen reader announces and what a search engine indexes. It scrolls
   sideways inside its own wrapper rather than squashing on a phone. */
.room-compare-scroll {
  width: 100%;
  margin-top: var(--spacing-title-margin-64);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.room-compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 880px;
  text-align: left;
}

.room-compare-caption {
  color: var(--colors-color-accent-2);
  text-align: left;
  padding-bottom: 16px;
}

.room-compare th,
.room-compare td {
  border-bottom: 1px solid var(--colors-color-dark-32);
  padding: 16px 24px 16px 0;
  vertical-align: top;
}

.room-compare thead th {
  border-bottom: 1px dashed var(--colors-color-dark);
  white-space: nowrap;
}

.room-compare tbody th {
  font-weight: 500;
  min-width: 240px;
}

.room-compare tbody tr:last-child th,
.room-compare tbody tr:last-child td {
  border-bottom: 0;
}

.room-compare-note {
  max-width: 720px;
  margin-top: 24px;
}

/* The room pages' practical-information block carries twelve rows now, so
   its tiles stack rather than sitting label-beside-value. */
.amenity-tile.spec {
  flex-flow: column;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

/* ------------------------------------------------------------- map pins --
   The location section used to carry three full-width rows of numbers. The
   map says it better: the same facts sit where the places actually are.
   Positions are percentages computed from the map's own Web Mercator
   projection, so they stay correct at every srcset size.

   Each pin is a real <button>: reachable by keyboard, announced as
   interactive, and its card opens on focus as well as hover. */
.map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  z-index: 1;
}

.map-pin-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: var(--spacing-radius-full);
  background: var(--colors-color-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--colors-color-dark) 45%, transparent),
              0 2px 8px color-mix(in srgb, var(--colors-color-dark) 55%, transparent);
  transition: transform .25s ease, background-color .25s ease;
}

.map-pin.is-hotel .map-pin-dot {
  width: 18px;
  height: 18px;
  background: var(--colors-color-bg-3);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--colors-color-dark) 55%, transparent),
              0 0 0 10px color-mix(in srgb, var(--colors-color-bg-3) 28%, transparent);
}

.map-pin:hover .map-pin-dot,
.map-pin:focus-visible .map-pin-dot {
  transform: scale(1.35);
  background: var(--colors-color-bg-3);
}

.map-pin:focus-visible {
  outline: 2px solid var(--colors-color-light);
  outline-offset: 8px;
  border-radius: var(--spacing-radius-full);
}

/* The card sits above the dot and is only as wide as its longest line. */
.map-pin-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translate(-50%, 4px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: 220px;
  padding: 10px 14px;
  border-radius: var(--spacing-radius-small);
  background: var(--colors-color-light);
  color: var(--colors-color-dark);
  text-align: left;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--colors-color-dark) 30%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.map-pin:hover .map-pin-card,
.map-pin:focus-visible .map-pin-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.map-pin:hover,
.map-pin:focus-visible {
  z-index: 3;
}

.map-pin-name {
  font-size: var(--text-text-body-font-size);
  font-weight: 600;
  line-height: 1.25;
}

.map-pin-meta {
  font-size: var(--text-text-small-font-size);
  line-height: 1.3;
  color: var(--colors-color-dark-64);
  font-variant-numeric: tabular-nums;
}

/* The hotel's own pin needs no distance, so its card is a single line. */
.map-pin.is-hotel .map-pin-name {
  white-space: nowrap;
}

/* Pins near the top of the frame would push their card off the image. */
.map-pin[style*="top:1"] .map-pin-card,
.map-pin[style*="top:2"] .map-pin-card {
  bottom: auto;
  top: calc(100% + 12px);
}

@media (max-width: 991px) {
  .map-pin-card { max-width: 116px; padding: 8px 10px; }
  .map-pin-name { font-size: var(--text-text-small-font-size); }
  .map-pin-meta { font-size: var(--text-text-small-font-size); }
  /* The map is 90px wide on a phone but its labels are not — the hotel's own
     nowrap card ran straight through the sea's. It wraps down there. */
  .map-pin.is-hotel .map-pin-name { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .map-pin-dot, .map-pin-card { transition: none; }
}

/* The section's headline block is z-index 4 and anchored to the bottom over a
   345px scrim, so pins must sit above it to stay clickable — and the content
   lifts clear of the pin band rather than sitting on top of it. */
.map-pins { z-index: 5; }

.home-a-map-section .master-map-home-a { padding-bottom: 96px; }

@media (max-width: 767px) {
  .home-a-map-section .master-map-home-a { padding-bottom: 64px; }
}

/* Bottom-centre pins would drop their card onto the headline and CTA, so
   those swing out to whichever side has room instead of opening upward. */
.map-pin.is-side-left .map-pin-card,
.map-pin.is-side-right .map-pin-card {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

.map-pin.is-side-left .map-pin-card {
  left: auto;
  right: calc(100% + 14px);
}

.map-pin.is-side-right .map-pin-card {
  left: calc(100% + 14px);
  right: auto;
}

.map-pin.is-side-left:hover .map-pin-card,
.map-pin.is-side-left:focus-visible .map-pin-card,
.map-pin.is-side-right:hover .map-pin-card,
.map-pin.is-side-right:focus-visible .map-pin-card {
  transform: translateY(-50%);
}

/* ---------------------------------------------------------- content grid --
   Used by the homepage family section and the primary pages. Deliberately
   plain: the template gets its structure from type scale and whitespace, not
   from rules and tinted panels, so this adds neither. Column headings use
   the template's own .label; spacing uses its tokens. */
.pp-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
  margin-top: var(--spacing-title-margin-64);
}

.pp-lede { max-width: 56ch; }

.pp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
  margin-top: var(--spacing-title-margin-80);
}

.pp-col { display: flex; flex-direction: column; gap: 28px; }

.pp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pp-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 14px;
  align-items: baseline;
}

/* Only items that carry a distance get a column for it. */
.pp-item:has(.pp-dist) { grid-template-columns: 4.5rem 1fr; }

.pp-dist {
  font-size: var(--text-text-body-font-size);
  font-variant-numeric: tabular-nums;
  opacity: .55;
  white-space: nowrap;
}

.pp-body { display: flex; flex-direction: column; gap: 6px; }

.pp-name { font-weight: 600; line-height: 1.3; }

.pp-text {
  color: inherit;
  opacity: .68;
  font-size: var(--text-text-body-font-size);
  line-height: 1.55;
}

.pp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: var(--spacing-title-margin-80);
}

@media (max-width: 991px) {
  .pp-grid { grid-template-columns: 1fr 1fr; gap: 48px 32px; }
}

@media (max-width: 767px) {
  .pp-grid { grid-template-columns: 1fr; }
  .pp-item:has(.pp-dist) { grid-template-columns: 4rem 1fr; }
  .pp-foot { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------- editorial page blocks --
   The template's `offer` pages set body copy in one narrow column on a dark
   ground, which reads as a document rather than a page and leaves half the
   width empty. These are the two shapes the primary pages actually need:
   a split intro, and a run of label/value facts. Used on /restoranas/,
   /verslui/ and /apie/ alongside the .pp-cols grid above. */
.pp-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 40px 72px;
  align-items: start;
  margin-top: var(--spacing-title-margin-64);
}

.pp-split-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 120px;
}

.pp-split-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pp-split-body p { margin: 0; }

/* Label on the left, answer on the right, hairline between — the shape that
   makes a spec list scannable instead of a paragraph in disguise. */
.pp-facts {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.pp-fact {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr);
  gap: 8px 24px;
  padding: 18px 0;
  border-bottom: 1px dashed currentColor;
  align-items: baseline;
}

.pp-fact:first-child { border-top: 1px dashed currentColor; }

.pp-fact-key {
  font-size: var(--text-text-small-font-size);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .68;
}

.pp-fact-value { font-size: var(--text-text-body-font-size); line-height: 1.5; }

.pp-fact-value strong { font-weight: 600; }

/* A short highlight strip — three or four things worth knowing at a glance. */
.pp-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 28px 40px;
  margin-top: var(--spacing-title-margin-64);
  padding-top: 32px;
  border-top: 1px dashed currentColor;
}

.pp-strip-item { display: flex; flex-direction: column; gap: 6px; }

.pp-strip-key {
  font-size: var(--text-h7-font-size);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.pp-strip-text { font-size: var(--text-text-body-font-size); line-height: 1.5; opacity: .72; }

@media (max-width: 991px) {
  .pp-split { grid-template-columns: 1fr; gap: 28px; }
  .pp-split-head { position: static; }
}

@media (max-width: 767px) {
  .pp-fact { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}

/* The offer template caps its article column at 676px, which is right for a
   run of prose and wrong for the structured blocks above. */
.pp-wide { max-width: none !important; width: 100%; }

/* The family section sits between two bg-1 sections and should read as part
   of the same run, not as a tinted band inserted into it. */
.section.family-section {
  padding-top: var(--spacing-section-120);
  padding-bottom: var(--spacing-section-120);
  background-color: var(--colors-color-bg-1);
}

/* With the map frame shifted west, the sea fills the left third — so the
   headline moves there, off the pins and onto dark water where white type
   actually reads. */
.home-a-map-section .master-map-home-a {
  align-items: flex-start;
  text-align: left;
  padding-bottom: 120px;
  max-width: 34rem;
}

.home-a-map-section .master-map-home-a .text-wrap-map-home { text-align: left; }

@media (max-width: 991px) {
  .home-a-map-section .master-map-home-a {
    align-items: center;
    text-align: center;
    max-width: none;
    padding-bottom: 64px;
  }
}

/* The family section's single CTA shouldn't sit hard left under a three
   column grid — the template centres these. */
.pp-foot { justify-content: center; }

/* „Svečių įspūdžiai" is two words and was breaking across two lines because
   the headline column is capped at 400px for the paragraph beneath it. */
.headline-stories { max-width: 620px; }
.headline-stories h1 { text-wrap: balance; }

/* ------------------------------------------------ neighbourhood distances --
   The template's five-column grid (1fr auto 1fr auto 1fr) centres each value
   in its own track, so the distances and walking times never line up down
   the list. Three columns, left-aligned, with the figures on a tabular
   lining so they stack cleanly. */
.neighbourhood-tile {
  grid-template-columns: minmax(0, 1fr) 6rem 10rem;
  place-items: center start;
  column-gap: 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--colors-color-dark-8);
}

.neighbourhood-tile:last-child { border-bottom: 0; }

.neighbourhood-tile .neighbourhood-arrow { display: none; }

.neighbourhood-tile .text-large {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .neighbourhood-tile { grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; }
  /* Nowrap on a fixed track is what forced 798px into a 768px viewport. */
  .neighbourhood-tile .text-large { white-space: normal; }
  .neighbourhood-tile .text-large:last-child { grid-column: 1 / -1; opacity: .65; font-size: var(--text-text-body-font-size); }
}

/* ------------------------------------------------------ practical facts --
   Twelve rows of label/value on the room pages, set with no vertical rhythm
   at all — it read as one block of text. */
.amenity-tile.spec {
  padding: 16px 0;
  border-bottom: 1px solid var(--colors-color-dark-8);
  gap: 6px;
}

.amenity-tile.spec:last-child { border-bottom: 0; }

/* ---------------------------------------------------- booking side card --
   The template's card carries a double drop shadow, which reads as a widget
   dropped onto the page rather than part of it. A hairline does the same job
   of separating it from the column beside it. */
.room-side-card {
  box-shadow: none;
  border: 1px solid var(--colors-color-dark-8);
  gap: 20px;
}

/* The paired date and guest fields sat a full 32px apart, which pushed the
   two columns to the edges of a narrow card. */
.room-side-card .form-inner { gap: 16px; }

/* One line for the people who would rather just phone.

   2026-08-29, savininkas apie visą šitą kortelę: „this card is overloaded, too
   much not needed info, also too manu different fornts". Buvo devyni skirtingi
   šrifto deriniai 544x626 px kortelėje — suskaičiuota, ne nujausta. Trys iš
   jų gyveno čia: „Turite klausimų?" 16/600, sakinys po juo 16/400 ir telefonas
   17/400 atskirame skydelyje. Dabar tai vienas sakinys viena eilute, tuo pačiu
   dydžiu kaip laukų reikšmės, o telefonas jame — pabraukta nuoroda.

   Kartu iš kortelės išimta: „Pasirinkite datas ir pamatysite, kas laisva"
   (tai pasako patys du datos laukai) ir eilutė „Kambarys — <vardas> — Keisti"
   (svečias yra to kambario puslapyje, o vardas stovi <h1> viršuje; formai
   kambarys keliauja paslėptu ?room= lauku, kaip ir keliavo). */
.side-help {
  margin: 20px 0 0;
  font-size: var(--text-text-body-font-size);
  line-height: 1.5;
  color: color-mix(in srgb, var(--colors-color-dark) 64%, transparent);
}

.side-help-tel {
  font-variant-numeric: tabular-nums;
  color: var(--colors-color-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* The template's own dividers sit hard against the copy beneath them. */
.section-divider { margin-bottom: 40px; }
.section-divider.bottom-80 { margin-bottom: 80px; }

/* ------------------------------------------------------------ Kodėl mes --
   Six cards, an icon each. The ordinary pattern for this content, which is
   what it wanted all along — the previous attempts dressed six abstractions
   up as an accordion, a slideshow and a map, and none of them earned it. */
/* It now follows the restaurant band and shares its ground, so the two read as
   one dark stretch rather than navy / cream / navy in three screens. Everything
   inside had been written for cream and has to claim light ink back — see the
   "Kodėl mes on the dark band" block further down. */
.section.why-section {
  padding-top: var(--spacing-section-120);
  padding-bottom: var(--spacing-section-120);
  background-color: var(--colors-color-dark);
  /* No scrim here. The restaurant band's water video now fades to nothing over
     its last 240px (see the mask on .know-home-a-section below), so by the seam
     both sections are the same flat #081c2b and any gradient painted on top of
     it reads as a shadow band — which is exactly what the hotel flagged. The
     background-color stays opaque: the hero is pinned behind every section on
     this page and shows through anything transparent. */
  color: var(--colors-color-light);
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Matched to the room slider directly above: same 8px between cards. */
  gap: 8px;
  margin-top: var(--spacing-title-margin-80);
}

.why-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px;
  /* Outlined, not filled: a filled tile competes with the photography either
     side of this section, and six of them read as a pricing table. */
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  /* Same 16px the room slider photographs carry along their bottom edge. */
  border-radius: var(--spacing-radius-main);
}

.why-ico { width: 34px; height: 34px; color: var(--colors-color-accent-1); }
.why-ico img { width: 100%; height: 100%; display: block; }

.why-card-t {
  font-family: var(--text-h6-font-family, inherit);
  font-size: var(--text-h6-font-size, 1.25rem);
  line-height: 1.25;
}

.why-card-s { font-size: var(--text-text-body-font-size); line-height: 1.6; color: var(--colors-color-dark-64); }

/* -------------------------------------------------------- Tobula šeimai --
   Title, subtitle, then a rail of benefit cards that scrolls sideways — the
   same shape as the room slider above it, so the page keeps one rhythm. */
.section.family-section {
  padding-top: var(--spacing-section-120);
  padding-bottom: var(--spacing-section-120);
  background-color: var(--colors-color-bg-1);
  overflow: hidden;
}

.fam-rail {
  display: flex;
  gap: 24px;
  margin: var(--spacing-title-margin-80) 0 var(--spacing-title-margin-64);
  /* Start flush with the container's text, then run off the right edge —
     the template's own sliders do the same, and it signals scrollability. */
  padding-left: max(32px, calc((100vw - 1800px) / 2 + 32px));
  padding-right: 32px;
  /* Snap aligns to the scrollport start, which ignores padding — without
     this the browser scrolls straight past it and the first card sits
     flush against the window edge. */
  scroll-padding-left: max(32px, calc((100vw - 1800px) / 2 + 32px));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.fam-rail::-webkit-scrollbar { display: none; }

.fam-slide {
  flex: 0 0 clamp(17rem, 24vw, 22rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fam-img {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--spacing-radius-main);
  overflow: hidden;
}

.fam-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fam-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: var(--spacing-radius-full);
  background: var(--colors-color-light-88);
  backdrop-filter: blur(10px);
  font-size: var(--text-text-small-font-size);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--colors-color-dark);
}

.fam-t {
  font-family: var(--text-h6-font-family, inherit);
  font-size: var(--text-h6-font-size, 1.25rem);
  line-height: 1.25;
}

.fam-s { font-size: var(--text-text-body-font-size); line-height: 1.6; color: var(--colors-color-dark-64); }

/* ------------------------------------------------------ restaurant intro --
   The photograph does the persuading, and a real guest review about the
   breakfast sits on it — the one claim we should never make in our own voice. */
.rest-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
  margin-top: var(--spacing-title-margin-64);
}

/* "this should have smaller maxwidth, spanning too much now" (2026-08-26).
   Measured at 1440: the copy column ran 628px and the text-large paragraph
   rendered 87 characters to the line — far past a readable 60-75. Capping
   the copy at 480px brings it to ~66; the freed track space reads as a wider
   gutter before the photograph, which keeps its approved size. The heading's
   widest line measures 404px and the chip row 451px, so neither wraps any
   differently. At 1024 the column is 430px (59 chars) and the cap is inert. */
.rest-copy { display: flex; flex-direction: column; gap: 20px; max-width: 480px; }
.rest-copy p { margin: 0; }

.rest-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.rest-photo {
  position: relative;
  border-radius: var(--spacing-radius-main);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.rest-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rest-quote {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  margin: 0;
  padding: 20px 22px;
  border-radius: var(--spacing-radius-small);
  background: var(--colors-color-light-88);
  backdrop-filter: blur(14px);
  color: var(--colors-color-dark);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rest-stars { color: var(--colors-color-accent-1); letter-spacing: .18em; font-size: var(--text-text-small-font-size); }

.rest-quote blockquote {
  margin: 0;
  font-family: var(--text-h6-font-family, inherit);
  font-size: var(--text-text-large-font-size);
  line-height: 1.4;
}

.rest-quote figcaption { font-size: var(--text-text-small-font-size); opacity: .62; }

@media (max-width: 991px) {
  .why-cards { grid-template-columns: 1fr 1fr; gap: 20px; }
  .rest-split { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .why-cards { grid-template-columns: 1fr; }
  .fam-slide { flex-basis: 78vw; }
  .rest-quote { left: 14px; right: 14px; bottom: 14px; padding: 16px; }
}

/* ---------------------------------------------------------------------------
   Hero breathing room
   The template's 64px bottom padding was set for a hero with nothing below the
   CTA row. Ours has the booking bar overlapping the fold, which left the two
   buttons sitting ~6px off the viewport edge at 1000px tall.
--------------------------------------------------------------------------- */
.hero-home-b .video-home-b { padding-bottom: 120px; }
@media (max-width: 991px) { .hero-home-b .video-home-b { padding-bottom: 88px; } }
@media (max-width: 767px) { .hero-home-b .video-home-b { padding-bottom: 72px; } }

/* ------------------------------------------------------ fluid type scale --
   The template steps type down only at 767px and below, so a 1440px MacBook
   was served the exact sizes drawn for the 1800px container: 88px headlines,
   48px sub-heads. On a 900px-tall screen that pushed eight homepage sections
   past the viewport. Scale with the viewport between 1200 and 1800 so the
   large-monitor composition is untouched (>=1800 hits the template's own
   numbers exactly) while a laptop gets ~80% of it. Below 992px the template's
   own breakpoints take over, so this deliberately stops there. */
@media screen and (min-width: 992px) {
  body, :root {
    --text-h1-font-size: clamp(56px, 4.9vw, 88px);
    --text-h2-font-size: clamp(42px, 3.56vw, 64px);
    --text-h3-font-size: clamp(34px, 2.67vw, 48px);
    --text-h4-font-size: clamp(27px, 2vw, 36px);
    --text-h5-font-size: clamp(22px, 1.56vw, 28px);
    --text-h6-font-size: clamp(20px, 1.33vw, 24px);
    --text-h7-font-size: clamp(18px, 1.11vw, 20px);
    --text-text-large-font-size: clamp(17px, 1.11vw, 20px);
  }
}
/* Short laptop screens: claw back vertical padding as well, or a section that
   now fits on type alone still overflows on its own margins. */
@media screen and (min-width: 992px) and (max-height: 1000px) {
  body, :root {
    --spacing-section-160: 112px;
    --spacing-section-120: 88px;
    --spacing-section-96: 72px;
    --spacing-section-80: 60px;
  }
}

/* ------------------------------------------------- infinite slider clones --
   The looping slider repeats its slides so the row can cover the viewport and
   still have material to move into.

   The premise this block used to rest on — "clones only ever sit in the peeking
   columns, never at the mask" — was false. The row is re-seated by a whole
   period whenever it drifts, and after a re-seat the element at the mask is a
   clone. Measured on the room slider: one advance in three. So the rule that
   hid clone captions was hiding the caption of the slide the visitor was
   looking at, and the hotel reported exactly that — "I scroll down and there is
   no text".

   Clones are now driven by the same SLIDER_ACTIVE/SLIDER_INACTIVE triggers as
   the originals (see copiesOf() in widgets/slider.js), so whichever copy is at
   the mask carries the words. Inertness is what clones actually needed, and
   that is aria-hidden + tabindex="-1" (set when they are built) and this: */
.w-slide-clone { pointer-events: none; }

/* Tag icons are <img>, so a parent's `color: light` never reaches them: they
   stayed dark on the photograph while their own labels were white. Every place
   these sit over a picture — the room slider and the room cards on /kambariai/
   — gets them inverted to white. Icons on a light ground keep their ink. */
.overlay-room-slide .icon-room-card-tag,
.link-room .icon-room-card-tag,
.room-thumbnail-absolute ~ * .icon-room-card-tag { filter: brightness(0) invert(1); }

/* Lede under the „Kodėl mes" headline. The section deliberately says the
   location score once, here, and then talks about six other things — the
   homepage was stating the same distances in six separate sections. */
.why-lede {
  max-width: 54ch;
  margin: 20px 0 0;
  font-size: var(--text-text-large-font-size);
  line-height: 1.45;
  color: color-mix(in srgb, var(--colors-color-dark) 68%, transparent);
}

/* The template gives every .image-cover a slow scroll-zoom. On the map that is
   actively wrong: the pins are absolutely positioned from Web Mercator maths
   against a fixed image, so any scale drifts them off their real coordinates.
   Hold the map still. */
.home-a-map-section .home-a-map-image img,
.home-a-map-section .image-cover { transform: none !important; }

/* ------------------------------------------------------------ Tobula šeimai --
   Was five photo cards in a scroll rail, which read as crammed and spent four
   of its five slots restating distances. One photograph, one statement and the
   four numbers a parent actually needs to know before booking. */
.fam-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.fam-copy { display: flex; flex-direction: column; align-items: flex-start; }
.fam-lede {
  max-width: 52ch;
  margin: 24px 0 0;
  font-size: var(--text-text-large-font-size);
  line-height: 1.45;
  color: color-mix(in srgb, var(--colors-color-dark) 68%, transparent);
}
.fam-facts { margin: 36px 0 40px; width: 100%; max-width: 520px; }
.fam-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
}
.fam-fact:last-child { border-bottom: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent); }
.fam-fact dt { font-size: var(--text-h7-font-size); }
.fam-fact dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent);
}
.fam-photo { margin: 0; }
.fam-photo img {
  display: block;
  width: 100%;
  height: clamp(420px, 46vw, 660px);
  object-fit: cover;
  border-radius: var(--spacing-radius-main);
}
@media screen and (max-width: 991px) {
  .fam-split { grid-template-columns: 1fr; gap: 40px; }
  .fam-photo img { height: clamp(300px, 60vw, 460px); }
}

/* ------------------------------------------------ room slider proportions --
   .mask-epxand is a hard 676px and .image-wrap-slider a hard 640px tall, both
   drawn against the 1800px container. On a 1440px laptop that is 47% of the
   screen width and most of its height, which is what reads as "zoomed in".
   Scale both with the viewport, landing on the template's own numbers at
   1800px and about 80% of them on a laptop. */
@media screen and (min-width: 992px) {
  .mask-epxand { width: clamp(500px, 37.6vw, 676px); }
  .image-wrap-slider { height: clamp(470px, 35.6vw, 640px); }
}


/* ================= /apie/ rebuilt sections ================= */
/* apie · intro */
.section.about-number-section.ppa-mid { padding-bottom: var(--spacing-section-120); }
/* apie · tubinas */
.section.ppa-family-section { padding-top: var(--spacing-section-120); padding-bottom: var(--spacing-section-120); background-color: var(--colors-color-dark); color: var(--colors-color-light); }
.ppa-family-head { margin-bottom: var(--spacing-title-margin-80); }
.ppa-family-foot { margin-top: 32px; }
/* apie · praktiska */
.ppa-faq-contact { display: flex; flex-flow: column; gap: 8px; }
.ppa-tel-link { color: inherit; text-decoration: none; }
/* apie · toliau */
.room-more-grid.ppa-more-three { grid-template-columns: 1fr 1fr 1fr; }
.link-room.ppa-door { height: 480px; justify-content: flex-end; }
.ppa-door-card { height: auto; justify-content: flex-end; align-items: flex-start; gap: 8px; }
@media screen and (max-width: 991px) { .room-more-grid.ppa-more-three { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ line breaking --
   Headlines carry inline <span>/<em> for the wave underline and the italic, and
   the browser was breaking them into ragged three-line stacks („Tylios /
   akimirkos tarp / pušų"). Balance every heading and let body copy avoid
   orphans. Applies to the template's type classes as well as real headings. */
h1, h2, h3, h4, h5, h6,
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6, .text-h7, .no-margins {
  text-wrap: balance;
}
p, .text-large, .why-card-s, .fam-lede, .why-lede { text-wrap: pretty; }

/* The homepage gallery slider printed a caption over every photograph. The
   photographs speak for themselves and the section already carries a line of
   copy beneath the image, so the overlay text goes. */
.home-b-see-section .gallery-slide-text-wrap { display: none; }


/* ============ /apie/ rebuild (fable) ============ */
/* ------------------------------------------------------- Apie / Tubinas --
   The closing dark section reuses the template's about-number-section
   (native 500px bottom pad — the gallery CTA video pulls up 400px over it,
   exactly as on the template's own about page). Only the furniture below
   is new: a head margin, the photo pair, and the founder microline.
   The pair carries the approved card geometry: 8px gaps, 16px radius. */
.ab-family-head { margin-bottom: var(--spacing-title-margin-80); }

.ab-art-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: var(--spacing-title-margin-80);
}

.ab-art-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--spacing-radius-main);
  overflow: hidden;
}

.ab-art-frame .image-cover { display: block; }

.ab-family-foot { margin-top: 32px; }

@media screen and (max-width: 767px) {
  .ab-art-pair { grid-template-columns: 1fr; }
  .ab-art-frame { aspect-ratio: 4 / 3; }
}



/* ============ room page sections (fable) ============ */
/* ppr-suits — the home-b about split (template homepage/home-b.html,
   .home-c-about-section > .home-b-about-grid), kept on the light ground.
   Two staggered parallax photos with the template's icon-chip overlays;
   one label + one text-h3 sentence. All layout comes from styles.css. */
.section.ppr-suits {
  padding-top: var(--spacing-section-120);
  padding-bottom: var(--spacing-section-0);
}

/* The template grid carries a 160px top margin because home-b stacks it
   under a hero; here the section padding already provides the step. */
.ppr-suits .home-b-about-grid { margin-top: 0; }

/* home-b's section is dark, so the overlay chip inherits light text there.
   This section is light: the chip sits on the photo's dark gradient, so it
   must keep light text explicitly. */
.ppr-suits .overlay-icon-and-text { color: var(--colors-color-light); }

/* ppr-gallery-section — gallery-a's editorial photo flow (template
   gallery/gallery-a.html, .master-images-gallery-a with the numbered
   .image-wrap-gallery _1…_4 offsets), each wrap driven by the template's
   unscoped "Images Parallax" interaction. No captions, no text on images.
   The wraps' sizes, offsets and responsive behaviour all come from
   styles.css untouched. */
.section.ppr-gallery-section {
  padding-top: var(--spacing-section-120);
  padding-bottom: var(--spacing-section-0);
}

/* On the gallery page this headline is sticky and floats over the photos;
   the client asked for no text over the room photos, so here it heads the
   flow statically instead. */
.ppr-gallery-section .headline-gallery-a {
  position: static;
  margin-bottom: var(--spacing-title-margin-80);
}

/* 50vh run-in only makes sense under the sticky headline; remove it. */
.ppr-gallery-section .master-images-gallery-a { margin-top: 0; }


/* ============ booking ui (fable) ============ */
/* ==================================================================
   bk-search — Prie Parko paieškos widgetas.
   Įtaisai iš šablono: .input-wrap-contact/.label/.text-field (index.html
   .book-modal forma), .text-field.light-48 (offer-single-no-cms.html),
   .cta-small/.button-bg mygtukas. Geometrija — patvirtinta kortelių
   gramatika: 1px hairline 12 % rašalo, 8 px tarpai, 16 px radiusas
   (žr. .why-cards faile prie-parko.css).
   ================================================================== */

.bk-search { width: 100%; }

.bk-search-fields {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(96px, .55fr) minmax(96px, .55fr) auto;
  gap: 8px;
  align-items: end;
}

/* Mygtukas yra tikras <button>, todėl šablono .cta-small įtaisui
   grąžinama bloko elgsena, kurią jis turi būdamas <div>/<a>. */
.bk-search button.cta-small { border: 0; background: transparent; font: inherit; }
.bk-search .button-text-small { display: block; }
.bk-search-submit { align-self: stretch; padding: 12px 24px; }

/* ------------------------------------------------ hero variantas --
   Guli ant fotografijos/video: stiklo pagrindas, kad laukai skaitytųsi
   ant bet kokio kadro, hairline — šviesos 16 %. */
.bk-search--hero { max-width: 960px; color: var(--colors-color-light); }
.bk-search--hero .bk-search-fields {
  padding: 8px;
  border: 1px solid var(--colors-color-light-16);
  border-radius: var(--spacing-radius-main);
  background-color: color-mix(in srgb, var(--colors-color-dark) 52%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.bk-search--hero .bk-field { min-width: 0; }
.bk-search--hero .label { color: var(--colors-color-light-64); }
.bk-search--hero .input-wrap-relative { width: 100%; }

/* Naršyklės data picker indikatorius tamsiame fone. */
.bk-search--hero input[type="date"] { color-scheme: dark; }
.bk-search--hero input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .72; }

/* Šablono .text-field.select rodyklė (Dropdown-Arrow.svg) tamsi —
   šviesiame variante keičiama į baltą inline chevroną. */
.bk-search--hero .text-field.select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='white' stroke-opacity='.72' stroke-width='1.5'/%3E%3C/svg%3E");
}

.bk-search-note { margin: 12px 4px 0; color: var(--colors-color-light-64); }
.bk-search--bar + .bk-search-note,
.bk-search--bar .bk-search-note { color: var(--colors-color-dark-64); }

@media screen and (max-width: 767px) {
  .bk-search-fields { grid-template-columns: 1fr 1fr; }
  .bk-search-submit { grid-column: 1 / -1; padding: 16px 24px; }
}

/* ==================================================================
   bk-search--bar — ta pati bk-search forma, sutankinta į vieną juostą.
   Priklauso nuo bk-search bazinių stilių (searchHero css bloko).
   Šviesus pagrindas: bg-1 + hairline 12 % rašalo, 16 px radiusas.
   ================================================================== */

.bk-search--bar { max-width: 960px; margin-left: auto; margin-right: auto; }
.bk-search--bar .bk-search-fields {
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  border-radius: var(--spacing-radius-main);
  background-color: var(--colors-color-bg-1);
  align-items: end;
}
.bk-search--bar .bk-label { color: var(--colors-color-dark-64); margin-bottom: 4px; display: block; }
.bk-search--bar .text-field { padding: 10px 12px; }
.bk-search--bar .text-field.select { background-position: calc(100% - 10px) 50%; padding-right: 32px; }
.bk-search--bar .bk-search-submit { padding: 10px 20px; }

/* Prisegta apačioje scrollinant (rodo/slepia esamas scroll stebėtojas —
   klasę uždeda jis; čia tik pozicija ir šešėlis, kad juosta atsiskirtų
   nuo turinio po ja). */
.bk-search--dock {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 98;
  width: min(960px, calc(100% - 32px));
  margin: 0;
}
.bk-search--dock .bk-search-fields {
  box-shadow: 0 12px 40px color-mix(in srgb, var(--colors-color-dark) 18%, transparent);
}

@media screen and (max-width: 767px) {
  .bk-search--dock { bottom: 8px; width: calc(100% - 16px); }
}

/* ==================================================================
   /rezervacija/ — bk-results puslapio korpusas ir bk-result kortelė.
   Kortelės anatomija: nuotrauka + pavadinimas + žymos iš room-listing.html
   (.link-room/.card-room/.room-card-tag), būsenos ženkliukas —
   .room-label-tag įtaisas iš ten pat, kainos blokas — .room-side-card
   („from $240") iš room-single-no-cms.html. Geometrija — patvirtinta:
   neužpildyta, hairline 12 %, 8 px tarpai, 16 px radiusas.
   Priklauso nuo: bk-search bazės (searchHero), bk-search--bar
   (searchCompact) ir dl-offer--row (dealCard).
   ================================================================== */

.section.bk-results-section {
  padding-top: var(--spacing-section-top-padding);
  padding-bottom: var(--spacing-section-120);
  background-color: var(--colors-color-bg-1);
}

.bk-results-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}
.bk-results-query { color: var(--colors-color-dark-64); margin: 0; }

.bk-results-search { margin-bottom: 8px; }
.bk-results-search .bk-search--bar { margin-left: 0; }

.bk-results-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 24px 0 16px;
}
.bk-results-count { margin: 0; }
.bk-sort { display: flex; align-items: center; gap: 12px; }
.bk-sort-select { width: auto; padding: 10px 36px 10px 12px; background-position: calc(100% - 10px) 50%; }

/* ------------------------------------------------------ kortelė -- */
.bk-results { display: grid; gap: 14px; }

/* 2026-08-29, savininkas: „id make the cards a bitt alller, give them more
   breathing room". Nuotrauka 240 → 300px, tarpas tarp stulpelių 24 → 32,
   kortelės vidinis rėmelis 8 → 12, o tarpas tarp kortelių 8 → 14. */
.bk-result {
  display: grid;
  grid-template-columns: minmax(260px, 42%) minmax(0, 1fr) minmax(240px, 26%);
  gap: 32px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  border-radius: var(--spacing-radius-main);
  background-color: transparent;
}

.bk-result-media {
  position: relative;
  border-radius: var(--spacing-radius-small);
  overflow: hidden;
  min-height: 300px;
}
.bk-result-media .image-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

.bk-result-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
}
.bk-result-title { display: flex; flex-direction: column; gap: 8px; }
.bk-result-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bk-result-facts .bk-fact { white-space: nowrap; }
.bk-result-more { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.bk-result-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 16px 8px 0;
}
.bk-result-price { display: flex; flex-direction: column; gap: 4px; }
.bk-price-now { font-variant-numeric: tabular-nums; }
.bk-price-per { margin-left: 4px; }
.bk-price-was s { text-decoration-thickness: 1px; }
.bk-result-note { max-width: 30ch; }

/* CTA yra tikras <button> — šablono .cta-small įtaisui grąžinama
   bloko elgsena (žr. bk-search pastabą). */
.bk-result button.cta-small { border: 0; background: transparent; font: inherit; }
.bk-result .button-text-small { display: block; }

/* ------------------------------------------------ būsenos ženkliukas --
   .room-label-tag piliulė iš room-listing.html; spalva niekada neneša
   reikšmės viena — tekstas ženkliuke ją įvardija visada. */
.bk-state {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bk-state-ico { display: flex; flex: none; }
.bk-state--off { background-color: var(--colors-color-dark); color: var(--colors-color-light); }

/* Išparduota: pritemsta tik nuotrauka; tekstas lieka pilno kontrasto,
   nes kortelė turi likti skaitoma — svečias nori žinoti, kad kambarys
   apskritai egzistuoja. */
.bk-result[data-state="sold-out"] .bk-result-media .image-cover { opacity: .56; }

/* Ekrano skaitytuvui skirtas kainų kontekstas. */
.bk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


@media screen and (max-width: 991px) {
  .bk-result { grid-template-columns: 1fr; gap: 0; }
  .bk-result-media { min-height: 0; aspect-ratio: 3 / 2; }
  .bk-result-body { padding: 16px 8px 0; }
  .bk-result-side { padding: 16px 8px 8px; }
  .bk-results-toolbar { flex-direction: column; align-items: flex-start; }
}

/* ==================================================================
   dl-offer — pasiūlymo kortelė. Bazė yra šablono .card-offer
   (offer-listing.html); čia tik trys vietos-modifikatoriai ir smulkmenos.
   ================================================================== */

.dl-offer { position: relative; }
.dl-offer-summary { color: var(--colors-color-dark-64); }
.dl-offer-summary s { color: var(--colors-color-dark-48); }

/* Rodyklė (šablono .neighbourhood-arrow piešinys) — tik eilutės ir
   inline variantuose. */
.dl-offer-go { display: none; color: var(--colors-color-dark-48); flex: none; }

/* ------------------------------------------------ rezultatų eilutė --
   Patvirtinta kortelių geometrija: hairline 12 %, 8 px vidiniai tarpai,
   16 px radiusas — ta pati kaip bk-result, kad sąrašas liktų viena šeima. */
.card-offer.dl-offer--row {
  flex-flow: row;
  align-items: center;
  gap: 16px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  border-radius: var(--spacing-radius-main);
}
.dl-offer--row .dl-offer-media { width: 140px; height: 96px; flex: none; border-radius: var(--spacing-radius-small); }
.dl-offer--row .overlay-offer { display: none; }
.dl-offer--row .dl-offer-text { flex: 1; gap: 8px; }
.dl-offer--row .card-offer-top-tile { gap: 4px; }
.dl-offer--row .dl-offer-go { display: flex; margin-right: 8px; }
.bk-results-deal { margin-bottom: 8px; }

/* ------------------------------------------------ kambario puslapis --
   Be nuotraukos: kambario puslapis jau pilnas jos paties kadrų. */
.card-offer.dl-offer--inline {
  flex-flow: row;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  border-radius: var(--spacing-radius-main);
}
.dl-offer--inline .dl-offer-media { display: none; }
.dl-offer--inline .dl-offer-text { flex: 1; gap: 8px; }
.dl-offer--inline .dl-offer-go { display: flex; }
.dl-offer-slot { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }

@media screen and (max-width: 767px) {
  .card-offer.dl-offer--row { flex-flow: column; align-items: stretch; }
  .dl-offer--row .dl-offer-media { width: 100%; height: 160px; }
  .dl-offer--row .dl-offer-go { display: none; }
}

/* ==================================================================
   /pasiulymai/<slug>/ — dl-hero + dl-book. Visa kita — šablono
   offer-single-no-cms.html klasės be pakeitimų.
   ================================================================== */

/* Šablonas hero foną deda per CSS background-image; čia jį keičia
   tikras <img> su srcset'ais, todėl fonas išjungiamas, o turinio
   konteineris pakeliamas virš absoliučių sluoksnių. */
.section.hero-offer.dl-hero { position: relative; background-image: none; }
/* The media was absolutely positioned across the whole container, written for
   an earlier full-bleed hero. The markup puts it inside .dl-hero-grid instead —
   and that grid had no CSS at all, so on all five offer pages the photograph
   covered the h1, the lede and the dates. It is a grid item now: copy left,
   photograph right, stacked below 991px. */
.dl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  margin-top: var(--spacing-title-margin-64);
}
.dl-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.dl-hero-copy > * { margin: 0; }
.dl-hero-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--spacing-radius-main);
  aspect-ratio: 4 / 3;
}
.dl-hero-media .image-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-hero .main-container { position: relative; z-index: 2; }
@media screen and (max-width: 991px) {
  .dl-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .dl-hero-media { aspect-ratio: 16 / 10; }
}

/* Rezervacijos blokas puslapio apačioje — tamsiame body-offer-section,
   todėl naudojamas bk-search--hero stiklo variantas (jis kurtas tamsiam
   pagrindui). Priklauso nuo bk-search bazės (searchHero css bloko). */
.dl-book {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 960px;
  margin-top: var(--spacing-title-margin-64);
}
.dl-book .bk-search--hero { max-width: none; }


/* ---------------------------------------------- availability state pill --
   Sits on the room photograph. The label always carries the meaning in words,
   so the tone colour is reinforcement, never the only signal — a guest who
   cannot distinguish the hues still reads „Nėra laisvų". */
.bk-result-media { position: relative; }

/* A room we cannot sell stays readable but stops competing with the ones we can. */
.bk-result[data-state='sold-out'] .bk-result-media img { filter: grayscale(1); opacity: .55; }
.bk-result[data-state='sold-out'] { opacity: .92; }
.bk-cta[disabled] { opacity: .45; cursor: not-allowed; }
.bk-price-off { color: color-mix(in srgb, var(--colors-color-dark) 38%, transparent); }

/* ------------------------------------------------- search widget sizing --
   The field grid was auto-sizing to the inputs, which collapsed the two date
   columns to ~67px: the native date control clipped to "d" plus its calendar
   icon, and the labels — wider than their column — ran over each other. Give
   the dates a real minimum and let the form take the width it needs. */
.bk-search--hero { width: min(800px, 100%); }
.bk-search--hero .bk-search-fields {
  /* „Suaugusieji" is a long word: its column has to fit the label, not just
     the number. The submit needs its own track or its text rides over the
     last select. */
  grid-template-columns: minmax(148px, 1fr) minmax(148px, 1fr) 116px 84px minmax(184px, auto);
  align-items: end;
}
.bk-search .bk-field { min-width: 0; }
.bk-search .bk-field > label { white-space: nowrap; }
.bk-search .text-field { width: 100%; min-width: 0; }

.bk-search--bar .bk-search-fields {
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) 116px 84px minmax(172px, auto);
  align-items: end;
}
@media screen and (max-width: 767px) {
  .bk-search--hero .bk-search-fields,
  .bk-search--bar .bk-search-fields { grid-template-columns: 1fr 1fr; }
  .bk-search .bk-search-submit { grid-column: 1 / -1; }
}

/* The submit is a real <button>; the template's mask markup needs it to lay
   its two text layers out rather than collapse them onto the field beside it. */
.bk-search .bk-search-submit { width: 100%; justify-content: center; }
.bk-search .bk-search-submit .button-text-mask { display: block; }

/* The gallery headline box is 420px in the template, sized for its English
   "Quiet moments" — the Lithuanian runs longer and broke into three lines at
   88px. Balance cannot help when the box is narrower than the words; give it
   room instead. */
.headline-gallery-c { max-width: min(660px, 100%); }

/* ------------------------------------------------------- hero booking card --
   The template already ships a booking form (.form-book, .input-wrap-contact,
   .text-field, .icon-date) inside .book-modal — this is that same anatomy,
   sitting inline in the hero where the small map card used to be. Two fields
   per row, submit across the bottom. Nothing new is invented here beyond the
   card shell and the grid. */
.hero-book-card {
  width: min(420px, 100%);
  padding: 28px;
  border-radius: var(--spacing-radius-main);
  /* Frosted rather than solid: the card sits on the hero video and should let
     it through, not punch a white hole in it. */
  background: color-mix(in srgb, var(--colors-color-bg-1) 22%, transparent);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border: 1px solid color-mix(in srgb, var(--colors-color-light) 34%, transparent);
  box-shadow: 0 16px 50px rgb(8 28 43 / 26%);
}
/* The hero sets `color: light` on everything inside it; the card is a light
   surface, so its own text has to claim the ink back or it renders white on
   near-white. */
/* On frosted glass over a photograph the ink has to be light, and the fields
   need their own faint pane to stay legible. */
.hero-book-card,
.hero-book-card .text-h6,
.hero-book-card .label { color: var(--colors-color-light); }
.hero-book-card .label.text-accent-2 { color: var(--colors-color-bg-3); }
.hero-book-card .input-wrap-contact > .label { color: color-mix(in srgb, var(--colors-color-light) 78%, transparent); }
.hero-book-card .text-field {
  color: var(--colors-color-light);
  background-color: color-mix(in srgb, var(--colors-color-light) 12%, transparent);
  border-color: color-mix(in srgb, var(--colors-color-light) 34%, transparent);
}
.hero-book-card .text-field::placeholder { color: color-mix(in srgb, var(--colors-color-light) 60%, transparent); }
.hero-book-card input[type="date"]::-webkit-datetime-edit { color: var(--colors-color-light); }
.hero-book-card option { color: var(--colors-color-dark); }
.form-book .text-field { width: 100%; min-width: 0; }
.form-book input[type="date"] { min-width: 0; }
.hero-book-card { padding: 24px; }
@media screen and (max-width: 767px) {
  .hero-book-card { width: 100%; padding: 20px; }
}

/* The hero copy column is 560px in the template — enough for its English
   "Where the jungle meets the sea", not for the Lithuanian line, which fell to
   three. The booking card no longer lives in this column, so it can widen. */
.hero-home-b .content-home-c { max-width: min(780px, 100%); }


/* The template stacks the two room-slider buttons in a centred column. With
   „Rezervuoti" and „Plačiau" side by side the card reads as one action row
   instead of a list, and the slide gets its height back. */
.button-wrap-room-slide {
  flex-flow: row wrap;
  justify-content: center;
  column-gap: 12px;
}

/* ------------------------------------------------ homepage gallery, static --
   Was a 3-slide autoplaying slider. Its clones duplicated every caption into
   the page text, and three photographs do not need paging — they fit. */
.see-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: var(--spacing-title-margin-64, 48px);
}
.see-cell { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.see-cell-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--spacing-radius-main);
  aspect-ratio: 4 / 5;
}
.see-cell-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.see-cell-text { color: var(--colors-color-light); margin: 0; }
@media screen and (max-width: 991px) {
  .see-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .see-cell:last-child { grid-column: 1 / -1; }
}
@media screen and (max-width: 620px) {
  .see-grid { grid-template-columns: 1fr; }
  .see-cell:last-child { grid-column: auto; }
}

/* ======================================================= section titles ====
   The template mixes h1 (88px) and h2 (64px) for what are all, structurally,
   section titles — and boxes them at eleven different max-widths from 400px to
   780px, sized for English copy. Lithuanian is longer, so narrow boxes forced
   three-line headings.

   One rule for all of them: the h2 step, and one measure. The hero keeps h1 so
   it still out-ranks everything below it. */
.section [class*="headline"] > h1,
.section [class*="headline"] > h2,
.section [class*="headline"] > .text-h1,
.section [class*="headline"] > .text-h2,
.section .pp-head > .text-h1,
.section .pp-head > h2,
.section .text-wrap-home-more > .text-h1,
.section .master-map-home-a > h1 {
  font-size: var(--text-h2-font-size);
  line-height: var(--text-h2-line-height);
  letter-spacing: var(--text-h2-letter-spacing);
}
/* The hero is the one place a bigger step is earned. Written one class deeper
   than the leveler above: measured at 1440, `.hero-about h1` (0-1-1) was
   losing to the 0-2-1 headline leveler, so the apie, room, room-listing and
   gallery heroes silently sat on the h2 step while home, the restaurant and
   contacts opened on h1. Same list, now 0-2-1 and later in the file, plus the
   two heroes the list missed: the gallery page ships hero-gallery-a, and
   gidas opens on hero-offers. All three properties travel together so a
   restored hero gets h1's 90% line and -3px tracking, not h2's metrics under
   an h1 size. The two utility openers stay down a step on purpose: dl-hero
   and bk-results mark their h1 as .text-h2 in the markup itself. */
.section.hero-home-b h1,
.section.hero-about h1,
.section.hero-room h1,
.section.hero-room-listing h1,
.section.hero-gallery-a h1,
.section.hero-gallery-c h1,
.section.hero-offers h1 {
  font-size: var(--text-h1-font-size);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-letter-spacing);
}

/* 2026-08-25, client: a bigger gap under the /kambariai/ hero title before
   the room grid. .headline-rooms's own margin is the 64 token. The 96 token
   was tried first and measured back at 72px — the short-laptop clamp at
   max-height 1000 remaps it, which is exactly the screen the request came
   from. The 120 token is the one that is bigger than 64 at every breakpoint
   (120 / 88 on short laptops / 80 / 64 / 56). The selector carries
   .section.hero-room-listing so it wins on specificity rather than existing
   and losing. Measured computed: 88px at 1440x1000. */
.section.hero-room-listing .headline-rooms {
  margin-bottom: var(--spacing-section-120);
}

/* One measure. `min()` keeps them from ever exceeding the column on a laptop. */
.headline-faq,
.headline-gallery-a,
.headline-gallery-c,
.headline-home-c-rooms,
.headline-offers-listing,
.headline-rooms,
.headline-stories,
.headline-offers-home,
.pp-head,
.text-wrap-home-more,
.master-map-home-a > h1 { max-width: min(900px, 100%); }

/* ------------------------------------------------- homepage gallery (b) --
   The template's own gallery-b layout: a sticky title column beside a column
   of photographs. White ground so the page does not change colour twice in a
   row, and the section title stays on the same step as every other one.

   RECOVERED 2026-08-25. A slice-based edit replaced 781 lines of this file
   with 29 — meant to move a height cap onto a wrapper, it took the nav layout,
   the section rhythm, the review cards and the date fields with it. Restored
   from f104420~1.

   Then two more self-inflicted wounds in the same spot, both worth knowing:
   the banner announcing that restore was pasted INSIDE this comment and
   borrowed its terminator, which killed the rule below and let the pinned hero
   show through the section. Fixing that, the explanation itself quoted a
   comment terminator in prose — which closed the comment again, in the same
   place, for the same reason.

   Do not cut this file between two string offsets, and do not write a comment
   terminator inside a comment. */
.see-b { background-color: var(--colors-color-bg-1); background-image: none; }
.see-b .headline-gallery-c { text-align: left; margin-bottom: 40px; }
.see-b .gal-grid { column-count: 4; }
.see-b .button-wrap-home-a { margin-top: 36px; }

/* The stories section arrived with a gradient down to bg-4, which made the page
   change ground twice in a row. Flat. */
.section.stories-home-a { background-image: none; background-color: var(--colors-color-bg-1); }

/* ==================================================== section rhythm =======
   Section padding was 0 / 60 / 64 / 88 / 112px depending on which template page
   a section came from, so the page breathed unevenly. One token, one rhythm,
   generous. Heroes keep their own full-bleed measure. */
body, :root { --pp-section-gap: clamp(88px, 7vw, 132px); }
/* A second step for the few sections that carry a whole subject on their own
   and need visibly more air than the page rhythm. NOT --spacing-section-160:
   that token drops to 112px on any viewport under 1000px tall (see the short-
   laptop block above), which is where most people are, so at 1440 it was
   measuring 112px against the rhythm's 100.8px — a difference nobody can see.
   This one does not collapse. */
body, :root { --pp-section-gap-lg: clamp(112px, 9.7vw, 168px); }

.section:not([class*="hero"]):not(.cta-section) {
  padding-top: var(--pp-section-gap);
  padding-bottom: var(--pp-section-gap);
}
/* Sections that butt against the one below by design keep the seam closed. */
.section.stories-home-a { padding-top: var(--pp-section-gap); }
.section.slider-section-home-a { padding-top: var(--pp-section-gap); }

/* ------------------------------------------------------------ review cards --
   Filled white tiles on a near-white ground read as boxes stacked on boxes.
   Outlined, like the „Kodėl mes" cards the client approved. */
.card-story {
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
}

/* --------------------------------------------- booking card field labels --
   `.label` is the template's eyebrow: 12px, bold, uppercase, 3px tracking. It
   earns that shouting once at the top of a section — over four form fields in
   a small card it reads as four competing headings. Quiet them down; the
   „Rezervacija" eyebrow above keeps the loud treatment. */
.form-book .input-wrap-contact > .label {
  font-weight: var(--font-weight--normal, 400);
  letter-spacing: normal;
  text-transform: none;
  font-size: var(--text-text-small-font-size);
  color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent);
  margin-bottom: 6px;
}

/* ------------------------------------------------------------- nav layout --
   .nav-container centres its flex children as a group, and .nav-brand is
   absolutely centred over them. With four links the menu was narrow enough to
   clear the wordmark; the fifth pushed it straight underneath. Lay the row out
   left-to-right instead, so the menu's width no longer decides whether it
   collides with the logo. */
.navbar .nav-container { justify-content: flex-start; }
.navbar .nav-left { margin-right: 0; }
.navbar .nav-menu-inner { margin-right: auto; }
/* The wordmark is absolutely positioned with no `left`, so it sat at whatever
   static slot the flex row gave it. Centre it on purpose. */
.navbar .nav-brand { left: 50%; transform: translateX(-50%); }

/* ------------------------------------------------------------ date fields --
   Native date inputs ship the browser's own control. Give them the template's
   field skin and put the calendar glyph where the template's .icon-date sits,
   instead of two indicators fighting for the same corner. */
.pp-search .input-wrap-relative { position: relative; }
.form-book input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  font-family: var(--font--main);
  font-size: var(--text-text-body-font-size);
  color: var(--colors-color-dark);
}
/* The native indicator is the only thing that opens the picker, so it is
   stretched over the whole field rather than parked in the corner: the visible
   glyph is .icon-date, and every pixel of the field is the trigger under it.
   The input has to be positioned for `inset` to resolve against the field. */
.form-book input[type="date"] { position: relative; }
.form-book input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  transform: none;
  opacity: 0;
  cursor: pointer;
}
/* The template leaves .icon-date on `top:0;bottom:0` with auto margins, which
   centres it. Adding `top:50%` without clearing `bottom` over-constrains the
   box: the auto margins then resolve to (0.25 × field height − 9), which put
   the glyph 6px below centre on a 60px field and 3px below on a 48px one.
   Clear the bottom edge and the margins and let one rule do the centring. */
.form-book .icon-date {
  position: absolute;
  right: 12px;
  top: 50%;
  bottom: auto;
  margin: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.pp-search .text-field:focus-visible {
  outline: 2px solid var(--colors-color-accent-2);
  outline-offset: 1px;
}


/* ===================================================== labels on the map ===
   Every name used to hide behind its own hover, so reading the neighbourhood
   meant nine separate interactions. The labels are written on the map instead:
   name and distance on one line, set beside the dot on whichever side keeps
   them inside the frame. The hover card is gone — there is nothing left for it
   to reveal. */
.map-pin-card {
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute;
  bottom: auto;
  top: 50%;
  left: auto;
  width: max-content;
  max-width: 190px;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  color: var(--colors-color-light);
  text-shadow: 0 1px 3px rgb(8 28 43 / 85%), 0 0 12px rgb(8 28 43 / 45%);
  transform: translateY(-50%) !important;
  transition: none;
  pointer-events: none;
}
/* Default to the seaward side so a pin without the attribute still clears its
   own dot — without this the label sat straight on top of the marker. */
.map-pin .map-pin-card { right: calc(100% + 12px); flex-direction: row-reverse; }
.map-pin[data-side='right'] .map-pin-card { left: calc(100% + 12px); right: auto; flex-direction: row; }
.map-pin[data-side='left']  .map-pin-card { right: calc(100% + 12px); left: auto; flex-direction: row-reverse; }
.map-pin-name {
  font-size: var(--text-text-small-font-size);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.map-pin-meta {
  font-size: var(--text-text-small-font-size);
  color: color-mix(in srgb, var(--colors-color-light) 78%, transparent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The hotel's own pin is the anchor: bigger dot, its name a touch stronger. */
.map-pin.is-hotel .map-pin-name { font-size: var(--text-text-body-font-size); }
.map-pin.is-hotel .map-pin-dot { width: 16px; height: 16px; background: var(--colors-color-bg-3); }

/* On a phone the map is 390px wide and six labels were colliding — the
   hotel's own nowrap name ran through three of them. Down there the label is
   the name only: the distance list higher up the page already carries the
   metres, and a name is what a map needs. */
@media screen and (max-width: 991px) {
  .map-pin-meta { display: none; }
  .map-pin-name { font-size: 11px; }
  .map-pin.is-hotel .map-pin-name { font-size: 12px; }
  .map-pin-card { max-width: 108px; }
  /* The hotel sits at 66% across, so its label ran leftward straight over the
     sea's. Down here it goes out to the right instead, where nothing is. */
  .map-pin.is-hotel .map-pin-card {
    left: calc(100% + 10px);
    right: auto;
    flex-direction: row;
  }
}

/* ------------------------------------------------ photographs in the reviews --
   A wall of quote cards reads as text no matter how good the quotes are. Every
   third card is a photograph instead, so the marquee alternates between what
   guests say and what they were looking at. */
.story-photo {
  width: 300px;
  flex: 0 0 300px;
  border-radius: var(--spacing-radius-main);
  overflow: hidden;
  align-self: stretch;
  min-height: 220px;
}
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The gallery photographs open in the template's own lightbox. The anchor must
   not change the layout the gallery-b grid already sets. */
.gal-lightbox { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gal-lightbox img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------- result cards --
   The card's height was set by its photograph, leaving the text column half
   empty. Cap the media and let the row size to its content. */
.bk-result { align-items: stretch; }
.bk-result-media { max-height: 230px; }
.bk-result-media img { height: 100%; object-fit: cover; }
.bk-result-body { padding-block: 4px; }
.bk-result-side { justify-content: space-between; }

/* ------------------------------------------- nav on pages with no dark hero --
   The navbar is white text designed to sit over a hero photograph, and it goes
   invisible on a page that opens on a light ground. This used to be inferred
   from hero class names, one selector per hero — which quietly stopped matching
   when the markup moved, leaving /rezervacija/, /pasiulymai/ and
   /privatumo-politika/ with a nav nobody could see and no error anywhere.

   The page states it now: <Base navInk="dark"> puts .nav-ink-dark on <body>.
   Set from the luminance measured behind the navbar at 1440px — above ~150 it
   needs the ink. Measured: home 138, apie 13, galerija 13, restoranas 75,
   renginiams 75, 404 47 (all fine on white) against kambariai 213, room pages
   235, kontaktai 252, gidas 199, rezervacija 252, pasiulymai 252,
   privatumo-politika 251. */
.nav-ink-dark .navbar .button-text-small,
.nav-ink-dark .navbar .nav-link,
.nav-ink-dark .navbar .icon-nav-button { color: var(--colors-color-dark); }
/* `content: url()` takes a single file and bypasses the srcset on the element,
   so this was shipping the 32 KB original for a 140px wordmark. image-set picks
   by pixel density the way srcset would. */
/* THE WORDMARK KEEPS ITS RATIO AT EVERY WIDTH.

   Both marks carry a `height` attribute so the row does not jump while the
   image loads. The template's rules set `width: 100%` and never state a height,
   so at any width OTHER than the attribute's the presentational height wins on
   its own axis and the image is stretched: measured at 390px, the navbar's
   90px-wide wordmark was rendering 90x157 instead of 90x101.

   The footer has had the same fault the whole time (`height="116"` against a
   `sizes` list that goes down to 90px) — it is fixed here too, not just for the
   new artwork. */
.nav-logo,
.logo-footer { height: auto; }

/* SMALLER IN THE BAR. „the logo is used too big in main menu and the gaps
   between items are too big."

   140px was the width of the OLD wordmark, which was 116px tall. The lockup at
   that width stands 157px — a third taller — so it hung well past the row of
   links and read as the page's title rather than as the bar's mark. 104px puts
   it back at roughly the height the bar was designed around (117px), and the
   icon still lands at 41px, which is where the mark holds together.

   The footer keeps 140: there it IS the closing mark and has the room. */
.navbar .nav-brand { width: 104px; }
/* The row: 4px between pills, 8px of padding inside each, so the visible gap
   between two labels was 8+4+8 = 20px on a bar whose own type is 12px. Tighter
   pills, same gap. */
.navbar .nav-menu-inner { gap: 2px; }
.navbar .nav-link { padding-left: 7px; padding-right: 7px; }
.navbar-fixed .fixed-nav-menu { gap: 2px; }

.nav-ink-dark .navbar .nav-brand img {
  content: image-set(
    url("/images/prie-parko-lockup-dark-140.png") 1x,
    url("/images/prie-parko-lockup-dark-280.png") 2x,
    url("/images/prie-parko-lockup-dark-420.png") 3x
  );
}
/* The translucent white pill behind each link is invisible on a light ground;
   give it the ink's own tint so the row still reads as a set of buttons. */
.nav-ink-dark .navbar .nav-link {
  background-color: color-mix(in srgb, var(--colors-color-dark) 6%, transparent);
  /* The tint has to take the wrapper's pill shape. Painted square inside a
     1440px-radius parent it read as a grey panel behind a rounded button. */
  border-radius: var(--spacing-radius-full, 999px);
}
/* The page starts with the nav, so it needs the room the hero normally gives
   it. The class is stated three times because the rhythm rule
   (`.section:not([class*="hero"]):not(.cta-section)`) is 0-3-0 and was
   measured beating the single-class version of this: the results page opened
   at plain section padding, 100.8px instead of 156.8px at 1440, with the
   searchbar under the fixed navbar. dl-hero below is untouched — its class
   contains "hero", so the rhythm rule never matches it. */
.section.bk-results-section.bk-results-section { padding-top: calc(var(--pp-section-gap) + 56px); }
.dl-hero { padding-top: calc(var(--pp-section-gap) + 56px); }


/* ------------------------------------------------------- compact searchbar --
   The bar and the hero card are one widget now: .pp-search, with --bar and
   --card orientation modifiers. Its layout and spacing are stated once, in
   the "one search widget" block at the foot of this file, so the rhythm
   settles the cascade instead of fighting the template's flex gaps. */


/* Every booking CTA on the site gets the hero card's button: filled, centred,
   one label. The template's two-layer hover mask needs a fixed line box that a
   full-width submit never gives it, so the second layer is dropped. */
.form-book button[type="submit"],
.form-book .cta-main,
.pp-searchbar-submit {
  background-color: var(--colors-color-accent-2);
  color: var(--colors-color-light);
  border-radius: var(--spacing-radius-full, 999px);
  padding: 8px 24px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.form-book button[type="submit"] .button-text._2,
.pp-searchbar-submit .button-text._2 { display: none; }
.form-book button[type="submit"] .button-bg,
.pp-searchbar-submit .button-bg { display: none; }

/* Why the label sat high: .button-text-mask is a 22px window with 1px above
   and 3px below it, sized to hold two stacked labels and slide the second one
   up on hover. Drop the second layer and the first still sits at the top of
   that window, with 4.5px of empty mask under it — so the label rode 4.4px
   above the button's centre in the hero card and 1.4px above it in the bar.
   The window has no job here: let it shrink to its one line, drop the odd
   margins and the template's -.03em nudge, and let the button centre it. */
/* Corrected: the second layer is not decoration, it is the other half of the
   hover. IX2 slides ._1 up 94% with a skew and fades it out; ._2 sits directly
   beneath in the same clipped one-line window and takes its place. Hiding ._2
   left the label sliding away into nothing, which is the "weird hover".
   The window must be exactly one line and must clip, or both show at once. */
.form-book button[type="submit"] .button-text-mask,
.pp-searchbar-submit .button-text-mask,
.hero-book-submit .button-text-mask {
  display: block;
  height: 1.3em;
  line-height: 1.3em;
  margin: 0;
  overflow: hidden;
  text-align: center;
}
.form-book button[type="submit"] .button-text-mask .button-text,
.pp-searchbar-submit .button-text-mask .button-text,
.hero-book-submit .button-text-mask .button-text {
  display: block;
  height: 1.3em;
  line-height: 1.3em;
}
.form-book button[type="submit"] .button-text,
.pp-searchbar-submit .button-text,
.hero-book-submit .button-text {
  margin-top: 0;
  white-space: nowrap;
  /* The label is set in caps, so its ink is the cap band — which sits above
     the middle of the font's own box, because the box keeps room for
     descenders no capital uses. Centring the box therefore leaves the ink
     about 1.1px high. This is the template's own -.03em nudge, measured and
     turned the right way round: a paint-only offset, no effect on layout. */
  top: .08em;
}

/* --------------------------------------------------- nav fit at six items --
   The wordmark is centred absolutely; the menu grows from the left. Five items
   cleared it, six did not below 1600px. The menu is five items now — "Pagrindinis"
   went, because the wordmark it sat next to already goes home — so the row fits
   on a laptop and the wordmark stays. Below 1200px the menu collapses to the
   burger anyway, and the sticky pill nav carries the brand from there. */
.navbar .nav-menu-inner { gap: 4px; }
.navbar .nav-link { padding-left: 9px; padding-right: 9px; }
.navbar .nav-link .button-text-small { letter-spacing: 1.6px; }
@media screen and (max-width: 1200px) {
  .navbar .nav-brand { opacity: 0; pointer-events: none; }
}

/* Six rules below were declared twice after the 781-line restore: the recovered
   block carried the original, and a newer copy already existed further down.
   The later one wins, so the earlier was dead weight that would mislead the
   next person to edit this file. Removed. Two others (.gal-grid and
   .story-photo) genuinely differ between the two copies and are left alone.
   The third, .bk-results-foot, went with its markup on 2026-08-29. */
/* ------------------------------------------------------------ full gallery --
   Ninety-five frames from the hotel's own shoots. A plain even grid would read
   as a contact sheet, so every fifth tile takes two columns and the rows are
   masonry-ish; each one opens in the template's lightbox. */
.gal-grid {
  /* CSS columns rather than grid: mixed spans in a grid leave holes that
     `dense` cannot always fill, which is what made this read as scattered.
     Columns flow top-to-bottom and never gap. */
  column-count: 4;
  column-gap: 12px;
}

@media screen and (max-width: 991px) { .gal-grid { column-count: 2; } }
@media screen and (max-width: 560px) { .gal-grid { column-count: 1; } }
/* The gallery hero is a headline, not a section — it does not need the full
   section rhythm above and below it. */
.hero-gallery-a { padding-bottom: var(--spacing-section-48, 48px); }

/* ------------------------------------------------------- room page gallery --
   A plain, even three-up grid — the offset composition read as fussy at this
   size. Each frame opens in the template's lightbox. */
.rk-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--spacing-title-margin-64, 48px);
}
.rk-shot {
  display: block;
  border-radius: var(--spacing-radius-main);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
.rk-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.rk-shot:hover img { transform: scale(1.04); }
.rk-shot:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
@media screen and (max-width: 767px) {
  .rk-shots { grid-template-columns: 1fr 1fr; }
  .rk-shot:first-child { grid-column: span 2; }
}

/* The gallery-b title column is 320px wide by design, but its heading was
   still on the hero step — 70px in a 320px box. Section-title step, like the
   rest of them. */


/* The closing CTA line was breaking to three lines in a 636px box. It is the
   last thing on every page — give it the room to land in two. */
.content-cta-block { max-width: min(920px, 100%); }


/* ============ /renginiams/ (fable) ============ */
/* ==================================================== /renginiams/ ========
   Hero: the template bakes a stock photograph into .hero-offer as a
   background-image; the hotel's own shot rides as a child instead.

   A type pass ran over this block on 2026-08-27 and was rolled back with the
   rest of that evening's /renginiams/ work; the page is back on its Aug 26
   markup. Its one claim is corrected for the record rather than left standing:
   it said .rg-cards-light and .rg-tiles were deleted as unused. They were not
   deleted, and they are not unused — the Aug 26 markup this page is on again
   carries .rg-cards-light. Both rules are below and both are live. */
.hero-offer.rg-hero { background-image: none; }

.rg-hero-media { position: absolute; inset: 0; overflow: hidden; }
.rg-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* With the photograph as a positioned child, the copy has to be lifted back
   above it and the two template gradients. */
.rg-hero .main-container { position: relative; z-index: 2; }

/* Section headline box. The name contains "headline" on purpose: the shared
   [class*="headline"] rules in this file put the title on the h2 step, so
   this class only draws the box. */
.rg-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: min(760px, 100%);
  margin-bottom: var(--spacing-title-margin-64);
}




/* The template pins .card-offer dark-on-light; on this dark ground the cards
   inherit the section's light ink instead. */
.rg-cards-light .card-offer { color: inherit; }

/* Air between the statement and the number tiles, on the template's token. */
.rg-tiles { margin-top: var(--spacing-title-margin-80); }


/* A few sections are a full-bleed media block that already pads itself —
   .video-home carries 112px of its own. The uniform section rhythm was adding
   100px on top of that, which is the doubled spacing around „Rytas prasideda
   pusryčiais". Let the inner block own it. */
.section:not([class*="hero"]):has(> .video-home),
.section:not([class*="hero"]):has(> .video-cta),
.section:not([class*="hero"]):has(> .video-home-b-see),
.section:not([class*="hero"]):has(> .video-banner) {
  padding-top: 0;
  padding-bottom: 0;
}

/* „Rytas prasideda pusryčiais" sits on the wavy-water video; the dark
   .why-section follows it directly. The template never runs this video into a
   second dark section — it ends it under a light panel that laps over the edge
   (.explore-home-a, radius + negative margin), which our dark neighbour cannot
   do. So the water fades out instead: a mask takes the video to full
   transparency exactly at its bottom edge, the section's own flat #081c2b
   surfaces beneath it, and the seam with .why-section becomes flat-on-flat of
   the same colour. Mask only the video — the copy and the collage share the
   wrapper and must not fade. */
.know-home-a-section .w-background-video > video {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 240px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 240px), transparent 100%);
}

/* Room slide: the chip sits ABOVE the title, as the template has it —
   label-master first, then h2 with its line grouped inside .headline-room-slide.
   An earlier edit had reordered this to title-chip-line and the hotel flagged it
   ("chip is in the middle, not on top"). The order lives in the markup
   (index.body.html); the template's own 32px/8px gaps need no margin help. */

/* The generic .form-book label colour is defined later in this file and was
   overriding the frosted card's own. State it last and scoped tighter. */
.hero-book-card .form-book .input-wrap-contact > .label {
  color: color-mix(in srgb, var(--colors-color-light) 80%, transparent);
}
.hero-book-card .pp-search-head .label.text-accent-2 { color: var(--colors-color-bg-3); }
.hero-book-card .pp-search-head .text-h6 { color: var(--colors-color-light); }

/* --------------------------------------------------------- contacts card --
   The blurbs were packed tight and the social row was a blurb of its own with
   a label and a URL. More air between them; social is one icon, centred at the
   foot of the card. */
.contact-b-info-halves { row-gap: 40px; column-gap: 36px; }
.info-block-contact-b { padding-block: 2px; }
.pp-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
}
.pp-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--spacing-radius-full, 999px);
  color: var(--colors-color-accent-2);
  background: color-mix(in srgb, var(--colors-color-dark) 6%, transparent);
  transition: background .25s ease, color .25s ease;
}
.pp-social-link:hover { background: var(--colors-color-accent-2); color: var(--colors-color-light); }

/* ------------------------------------------------------------ /apie/ art --
   The most distinctive thing the hotel owns and the least used: Lithuanian
   painting on the walls, with two photographs that prove it. */
.ab-art { background-color: var(--colors-color-bg-2); }
.ab-art-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 56px;
}
.ab-art-pair figure { margin: 0; border-radius: var(--spacing-radius-main); overflow: hidden; aspect-ratio: 4 / 3; }
.ab-art-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-art-note { margin: 18px 0 0; color: color-mix(in srgb, var(--colors-color-dark) 55%, transparent); }

/* The score band: the honest breakdown, not one flattering number. */
.ab-scores-head { margin-bottom: 64px; }
.ab-family { background-color: var(--colors-color-bg-1); }
.ab-family-inner { max-width: min(760px, 100%); }
.ab-family .label { margin-bottom: 14px; }
@media screen and (max-width: 767px) {
  .ab-art-pair { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- sticky side headlines --
   In the two-column faq-halves layout the left column is a short headline and
   the right is a long list. Pin the headline so it stays with the rows the
   reader is actually on, instead of scrolling away at the first item. */
@media screen and (min-width: 992px) {
  .faq-halves > .headline-faq,
  .gallery-b-halves > .left-gallery-b {
    position: sticky;
    top: 18vh;
    align-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-halves > .headline-faq { position: static; }
}

/* Categories on the full gallery: the hotel, then the rooms, then where you eat. */
.gal-group + .gal-group { margin-top: 72px; }
.gal-group > .label { margin-bottom: 20px; }
.rk-group + .rk-group { margin-top: 48px; }
.rk-group > .label { margin-bottom: 16px; }
.rk-group .rk-shots { margin-top: 0; }

/* ==================================================== small screens =======
   Nothing had been checked below 1280px. What follows is measured, not
   assumed: viewport by viewport, in headless Chrome. */

/* The homepage gallery kept four columns all the way down to a phone, where a
   photograph is 81px wide — a contact sheet, not a gallery. `.see-b .gal-grid`
   outranks the responsive `.gal-grid` rules above no matter the media query,
   so it needs its own. */
@media screen and (max-width: 991px) { .see-b .gal-grid { column-count: 3; } }
@media screen and (max-width: 767px) { .see-b .gal-grid { column-count: 2; } }
@media screen and (max-width: 480px) { .see-b .gal-grid { column-count: 2; column-gap: 8px; } }
@media screen and (max-width: 480px) { .see-b .gal-tile { margin-bottom: 8px; } }

/* The template's type scale steps DOWN on small screens: label-small goes
   10px -> 8px and label / text-small go 12px -> 10px below 767px. That is
   backwards — a phone is held further from nothing and read in worse light.
   Raised at the token, so every consumer follows rather than being patched
   one selector at a time. */
@media screen and (max-width: 991px) {
  body, :root {
    --text-label-small-font-size: 11px;
    --text-label-font-size: 12px;
    --text-text-small-font-size: 13px;
  }
}
/* Button labels carry their own size rather than a token, so they need saying. */
@media screen and (max-width: 991px) {
  .button-text-small { font-size: 12px; }
}

/* --------------------------------------------------- „Dovanoti", the second CTA --
   The owner asked for two: „Rezervuoti and dovanoti maybe could be two ctas in
   that part of the menu". Both bars carry the pair from 992 up and neither
   does below, because both run out of room at exactly the same place.

   THE STICKY BAR is `position: fixed`, so it never reaches
   documentElement.scrollWidth and an overflow there is invisible to the usual
   check — it has to be measured on .navbar-fixed-inner itself. With
   „Dovanoti" present:

     1990/1440/1200/1100/992 ... 884px  (desktop form, five links + two CTAs)
     768 ....................... 453px  (mobile form: burger, Pagrindinis, CTAs)
     390 ....................... 415px  in a 390px viewport — clipped both ends

   THE NAVBAR is worse below 992, and not only for width. Its container is
   358px at 390 and already holds a 44px burger, a 90px wordmark and the 133px
   „Rezervuoti"; „Dovanoti" is 118 more. And the template flips the pills' ink
   dark down there — they are meant to sit on the light dropdown panel — so a
   pill carrying only an 8%-dark fill renders as dark text on the hero
   photograph. Neither is worth shipping for a link the menu already has.

   992 is also where .menu-sticky stops showing, so each bar keeps the two
   forms it already had rather than gaining a third. On phones the pair lives
   in the full-screen menu, which lists „Rezervuoti" and „Dovanoti" together
   under the pages. */
@media screen and (max-width: 991px) {
  .navbar-fixed .link-fixed-nav.desktop-only,
  .navbar .navigation-link-hover-wrap.desktop-only { display: none; }
}

/* A hairline so „Dovanoti" reads as the second button rather than a seventh
   link. Its fill is already the lighter of the pair — 16% white against
   „Rezervuoti"'s 88% in the navbar, nothing at all against the filled pill in
   the sticky bar — but in the bar that also makes it identical to the six page
   links sitting beside it, and the pair only reads as a pair if the second one
   is drawn. `inset box-shadow` rather than `border` because a border would add
   2px to a row measured to the pixel, and it goes on the wrapper because the
   pill's radius lives there: painted square inside a full-radius parent, a
   tint reads as a grey panel behind a rounded button. No new type style, no
   new fill — one line. */
/* NO HAIRLINE. „why it has border when every other element in menu doesnt?"
   It was drawn so „Dovanoti" would read as the pair to „Rezervuoti". Nothing
   else in the bar carries one, so instead of pairing it just looked like an
   element with a stray border. „Rezervuoti" is a filled cream pill and leads on
   its own. */
.navbar-fixed .link-fixed-nav.desktop-only {
  box-shadow: inset 0 0 0 1px var(--colors-color-dark-16);
}

/* Touch targets. Apple and Google both put the floor at 44px; the mobile menu
   links were 36, the footer links 29, and the footer's legal link 10px tall. */
@media screen and (max-width: 991px) {
  .link-mobile-menu { min-height: 44px; display: flex; align-items: center; }
  .link-footer-large, .link-footer, .footer-contact a, a.text-dark {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .navbar .menu-button, .navbar-fixed .menu-button {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cta-small, .form-book button[type="submit"], .pp-searchbar-submit,
  .submit-button-invisible, .cta-main, .pp-social-link,
  .link-fixed-nav { min-height: 44px; }
  .cta-main, .pp-social-link, .link-fixed-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Map pins are 12-16px dots by design — the label beside them is the thing you
     read. Give each an invisible 44px hit area so a finger can still land on one
     without growing the dot. */
  .map-pin { position: relative; }
  .map-pin::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}
/* An iPad in landscape is 1024 wide: past the burger breakpoint, so it uses the
   desktop nav — with a finger. */
@media screen and (max-width: 1024px) and (pointer: coarse) {
  .navbar .nav-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* The mobile menu is absolutely positioned inside the top navbar, so opening it
   from the sticky bar — which is what a visitor reaches after scrolling — put
   it thousands of pixels above the viewport. While it is open the navbar pins
   itself, which brings the menu and its close button with it and leaves the
   open/close animation untouched. */
@media screen and (max-width: 991px) {
  .navbar:has(.menu-button.w--open) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
  }
}

/* A figure the hotel has not given us yet, sitting in a display-size stat tile
   beside three real ones. It has to stay visible — that is what a placeholder
   is for — but at h1 size it read as a broken page rather than a pending
   answer. Set at the body step, in the warning ink, underlined as provisional. */
.pp-tbc {
  font-family: var(--text-text-body-font-family, inherit);
  font-size: var(--text-text-body-font-size);
  line-height: 1.4;
  font-style: italic;
  color: var(--pp-warn);
  text-decoration: underline dashed currentColor 1px;
  text-underline-offset: 4px;
}

/* The banner sits on a -24px margin so the nav tucks up under it. On a phone
   its line wraps in two and the nav landed on the second line. Let it keep its
   own height there. */
@media screen and (max-width: 479px) {
  .banner { margin-bottom: 0; }
  .banner .label-small { line-height: 1.35; }
}

/* ==================================================== the booking widget ===
   The hero card, the compact bar and the template's own .form-book modal are
   one control in three dresses. What follows is what they have to share: one
   field height, one icon inset, one icon colour per ground. Stated last so it
   settles the cascade rather than fighting it. */
.pp-search { --pp-field-h: 56px; }
@media screen and (max-width: 479px) {
  .pp-search { --pp-field-h: 48px; }
}

/* A date input's shadow content is 2px taller than a select's line box, so the
   dates and the guest counts sat 2px apart and dragged their labels with them.
   One height for all four — vertical padding gone, so each field centres its
   own content — puts the labels, the values and both icons on one grid. */
.pp-search .text-field {
  height: var(--pp-field-h);
  padding-top: 0;
  padding-bottom: 0;
}
.pp-search .text-field.select { padding-right: 40px; }
/* A date input carries an intrinsic width — its own dd/mm/yyyy plus the picker
   — and a grid track will not shrink under a track item's min-content. The
   fields are already width:100%, but the two flex wrappers between them and
   the track were passing that intrinsic width up, so the second column ran
   22px past the card at 390 and 6px past it at 768. */
.pp-search-grid > .input-wrap-contact,
.pp-search .input-wrap-relative { min-width: 0; }
/* That intrinsic width was also the card's floor in the hero's flex row, which
   is why the card held 420px at 768 rather than being shrunk by the copy
   column beside it. With the floor gone the card has to state it itself. */
.hero-book-card { min-width: min(420px, 100%); }
/* The bar is a single row, so the submit is the fifth field rather than a
   smaller thing hung off their baseline — it was 42px against their 60px and
   read as dropped. The hero card's button keeps the template's 42px: it sits
   on its own row there, with nothing to line up with. */
.pp-search--bar button[type="submit"] { min-height: var(--pp-field-h); }

/* The select's chevron ships as a background image with its colour baked into
   the file, so it could not follow the field it sits in — brown on the frosted
   card where every other mark is white — and `background-position: 95%` is a
   percentage, so its inset drifted with the column: 3.6px in „Vaikai", 5.2px
   in „Suaugusieji", 8.3px in the hero, against the calendar glyph's 12px.
   Painted through a mask instead, it takes currentColor and the same box. */
.form-book .text-field.select { background-image: none; }
.form-book .input-wrap-relative:has(> select)::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url('../images/Dropdown-Arrow.svg') center / 14px 8px no-repeat;
  mask: url('../images/Dropdown-Arrow.svg') center / 14px 8px no-repeat;
  pointer-events: none;
}

/* Ink. The icons were on --colors-color-accent-3, which is the palette's
   eyebrow-label colour, not one of its accents: #9e8261 manages 3.2:1 on the
   cream bar — a hairline stroke at the WCAG floor — and on the frosted hero
   card it rendered as the only brown mark among white labels, white values and
   white borders. The template's own .icon-date is accent-2, the submit pill is
   already accent-2, so the widget reads as one family at 9.3:1. On the card
   the icons take the labels' own light, so glyph and label match exactly. */
.form-book .icon-date,
.form-book .input-wrap-relative:has(> select)::after {
  color: var(--colors-color-accent-2);
}
.hero-book-card .form-book .icon-date,
.hero-book-card .form-book .input-wrap-relative:has(> select)::after {
  color: color-mix(in srgb, var(--colors-color-light) 80%, transparent);
}

/* ------------------------------------------------------------ full gallery --
   The hotel's own frames. CSS columns rather than grid: mixed spans in a grid
   leave holes that `dense` cannot always fill, which is what made this read as
   scattered. Columns flow top-to-bottom and never gap. */
.gal-all { background-color: var(--colors-color-bg-1); }
.gal-grid { column-count: 4; column-gap: 12px; }
.gal-tile {
  display: block;
  border-radius: var(--spacing-radius-main);
  overflow: hidden;
  cursor: zoom-in;
  margin-bottom: 12px;
  break-inside: avoid;
}
.gal-tile img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.gal-tile:hover img { transform: scale(1.04); }

/* ---------------------------------------------------- homepage gallery teaser
   Four columns of the same masonry, cut off and faded into the ground.

   Two things that cost an hour each, written down so nobody repeats them.
   (1) The height cap must live on a WRAPPER. A multi-column box given a fixed
   height does not grow and clip — it fragments sideways into as many column
   boxes as the content needs (measured: 18, of which four were visible), so
   each visible column held one photograph and the rest was gap.
   (2) Tiles below the cut load lazily, so they must carry width/height on the
   img or they collapse to nothing and the grid balances into three
   photographs. */
.see-b .gal-grid { column-count: 4; }
@media screen and (max-width: 991px) { .see-b .gal-grid { column-count: 3; } }
.see-b .gal-clip {
  /* Taller: the teaser was showing barely two rows before the fade started
     eating it, so the grid read as a strip rather than a gallery. */
  height: clamp(700px, 78vh, 1000px);
  overflow: hidden;
  /* (3) The fade must land on NOTHING, not on a faint photograph. The old ramp
     still carried 30% of the picture at 86% of the box and only reached zero on
     the very last row — measured against the ground (#fdfcfb) that left up to
     55/255 of contrast at 90% and 17/255 at 97%, which is exactly the
     "half-there" edge. Zero now arrives at 92% and the last 8% is clear ground,
     so the button lands on the section's own colour. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.16) 83%, rgba(0,0,0,0) 92%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 46%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.16) 83%, rgba(0,0,0,0) 92%, rgba(0,0,0,0) 100%);
}
.see-b .button-wrap-home-a {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  /* Sits inside the clear tail of the mask, not on top of live photographs. */
  margin-top: clamp(-96px, -5vw, -56px);
}
/* The fade needs enough grid below the fold to eat; on a phone the columns are
   short, so it bites into the photographs instead of the gaps between them. */
@media screen and (max-width: 767px) {
  .see-b .gal-grid { column-count: 2; column-gap: 8px; }
  .see-b .gal-clip {
    height: clamp(560px, 74vh, 720px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 52%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.14) 85%, rgba(0,0,0,0) 93%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 52%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.14) 85%, rgba(0,0,0,0) 93%, rgba(0,0,0,0) 100%);
  }
  .see-b .button-wrap-home-a { margin-top: -44px; }
}

/* (1) More air above the heading. The gallery followed a full-bleed section on
   the same cream ground, so with only the standard section padding the eyebrow
   read as a caption on the block above it rather than the start of a new one.
   Three class names because the project rhythm rule
   `.section:not([class*="hero"]):not(.cta-section)` is already 0-3-0 and would
   otherwise win; built on top of the same --pp-section-gap so this stays a
   step in the system rather than a number of its own. */
.section.home-b-see-section.see-b {
  padding-top: calc(var(--pp-section-gap) + var(--spacing-section-80));
}
@media screen and (max-width: 767px) {
  .section.home-b-see-section.see-b {
    padding-top: calc(var(--pp-section-gap) + var(--spacing-section-48));
  }
}

/* The restaurant collage ran to 1199px of section for 95px of copy, so it was
   given a ceiling. `max-height` was the wrong lever and did not do that job:
   - on the desktop flex layout the columns are `align-items: flex-start`, so
     the cap never shortened anything — it only shrank the BOX. Measured at
     1440 the box claimed 620px while the frames ran 743px, and 207px over at
     1600, which put the last frame 95px past the end of the section, where the
     next (opaque) section painted over it.
   - below 992px the collage is a multi-column box, and this is the same trap
     recorded above .see-b .gal-clip: a capped multicol box fragments sideways
     instead of clipping. Measured at 700px it laid out FOUR column boxes for a
     `column-count: 2` collage and ran 664px past its own right edge.
   The proportion is a function of width, so cap the width and let the aspect
   ratios set the height. Nothing overflows and nothing fragments.

   Scoped to the homepage frame. /restoranas/ carries the same collage in
   .offer-middle-image, where it is a full-width band deliberately capped at
   1120px; a width ceiling meant for a half-width column would crush it. Only
   dropping max-height is shared, and that page wanted that too. */
.image-wrap-more.pp-collage-wrap .pp-collage {
  max-width: clamp(440px, 39vw, 620px);
  margin-inline: auto;
}
@media screen and (max-width: 991px) {
  .image-wrap-more.pp-collage-wrap .pp-collage { max-width: none; }
}

/* ------------------------------------- photographs between the review cards --
   These were never styled: raw divs taking their image's intrinsic size, so
   they came out 300x301 and 300x200 with square corners beside 558x440 cards
   with a 16px radius. Different height, different corner, every one a
   different shape — which is what made them read as broken rather than as
   part of the row. They match the cards now. */
.story-photo {
  flex: 0 0 auto;
  width: clamp(220px, 21vw, 300px);
  height: 440px;
  border-radius: var(--spacing-radius-main);
  overflow: hidden;
}
.story-photo .image-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
@media screen and (max-width: 991px) { .story-photo { height: 360px; } }
@media screen and (max-width: 767px) { .story-photo { height: 300px; width: clamp(180px, 52vw, 240px); } }

/* The closing band went straight from headline to button. A line between them
   answers the question the headline asks, and gives the eye somewhere to land
   before the form. */
.content-cta-block .cta-lede {
  max-width: 52ch;
  margin: 14px 0 4px;
  color: color-mix(in srgb, var(--colors-color-light) 78%, transparent);
}

/* Direct booking is the action now that the engine is live; the room browse
   keeps the second seat beside it — same box, lighter weight. */
.content-cta-block .cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
}

/* The two of them were the same button at two sizes: identical cream fill
   (240,235,224), identical brown ink, identical 32px pill, identical 8/16
   padding — and then 42px tall against 34px, 14px type against 12px. Nothing
   said "secondary", so the height gap read as a mistake rather than as rank.

   Rank is carried by fill now, not by size. Both boxes are the large button;
   the browse loses the fill and keeps an outline, which is also the treatment
   that survives being laid over the video. */
.content-cta-block .cta-actions .cta-small {
  font-family: var(--buttons-button-large-font-family);
  font-size: var(--buttons-button-large-font-size);
  line-height: var(--buttons-button-large-line-height);
  font-weight: var(--buttons-button-large-font-weight);
  color: var(--colors-color-light);
}

/* The mask is a 22px window for the large face; at .small it is 14px and would
   clip the taller line. Margins go with it — 1px above, 3px below — so both
   labels sit on the same optical centre. */
.content-cta-block .cta-actions .button-text-mask.small {
  height: 22px;
  margin-top: 1px;
  margin-bottom: 3px;
}

.content-cta-block .cta-actions .button-text-small {
  font-family: var(--buttons-button-large-font-family);
  font-size: var(--buttons-button-large-font-size);
  line-height: var(--buttons-button-large-line-height);
  font-weight: var(--buttons-button-large-font-weight);
  letter-spacing: var(--buttons-button-large-letter-spacing);
}

/* Outline instead of fill. The border is drawn on .button-bg, which is
   inset:0 under border-box, so it costs the button no height. */
.content-cta-block .cta-actions .cta-small .button-bg {
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--colors-color-light) 46%, transparent);
  transition: background-color .3s, border-color .3s;
}

.content-cta-block .cta-actions .cta-small:hover {
  color: var(--colors-color-light);
}

.content-cta-block .cta-actions .cta-small:hover .button-bg {
  background-color: color-mix(in srgb, var(--colors-color-light) 16%, transparent);
  border-color: var(--colors-color-light);
}

/* --------------------------------------------------- offers from the engine --
   The hotel's advertisable list: an offer is here only while it is actually
   running. Rendered from its structured rules, not from marketing copy, so it
   cannot claim anything the engine is not honouring. */
.dl-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.dl-live {
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 14%, transparent);
  border-radius: var(--spacing-radius-main);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--colors-color-bg-1);
}
.dl-live-value {
  font-family: var(--text-h2-font-family);
  font-size: var(--text-h4-font-size);
  line-height: 1;
  color: var(--colors-color-accent-1);
  font-variant-numeric: tabular-nums;
}
.dl-live-conds { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; }
.dl-live-conds li { color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent); }
.dl-live-conds li::before { content: "· "; color: var(--colors-color-accent-1); }
.dl-live-code { color: var(--pp-warn); margin: 4px 0 0; }

/* ------------------------------------------------------------ rate plans --
   The chooser sits open on the card — breakfast or not, at two visible
   prices, is a decision, not something behind a „Kainodaros variantai"
   link. Radio rows in the approved card geometry; labels derived from
   board data in widgets/results.js, the PMS codes never render. */
.bk-plans { display: grid; gap: 8px; margin: 2px 0; }
.bk-plan {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline;
  padding: 12px 14px; border-radius: var(--spacing-radius-main);
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  cursor: pointer;
}
.bk-plan input { align-self: center; margin: 0; accent-color: var(--colors-color-accent-2); }
.bk-plan:hover { border-color: color-mix(in srgb, var(--colors-color-dark) 28%, transparent); }
.bk-plan:has(input:checked) {
  border-color: var(--colors-color-accent-1);
  box-shadow: inset 0 0 0 1px var(--colors-color-accent-1);
}
.bk-plan:has(input:focus-visible) { outline: 2px solid var(--colors-color-accent-2); outline-offset: 2px; }
.bk-plan-name { font-weight: 500; }
.bk-plan-note { grid-column: 2 / -1; color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent); }
.bk-plan-price { font-variant-numeric: tabular-nums; white-space: nowrap; }

.bk-extras-note { color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent); margin: 6px 0 14px; }

/* A refusal the engine explained — shown on the card the guest clicked. */
.bk-cta-error { color: var(--pp-warn); margin-top: 8px; }

.pp-horizon-note { grid-column: 1 / -1; margin: 6px 0 0;
  color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent); }
.hero-book-card .pp-horizon-note { color: color-mix(in srgb, var(--colors-color-light) 70%, transparent); }

/* ============================================ Kodėl mes, on the dark band ===
   The six-reason section moved from between the room slider and the restaurant
   to directly after the restaurant, on the same #081c2b ground. Every colour in
   it was picked for cream, so each one is restated here for navy. Checked
   line by line: eyebrow, headline, lede, six card titles, six card bodies, six
   icons and the card outline. */
/* Less air on top than a standalone section gets. The restaurant band above
   already ends on its own bottom padding, and two full helpings of the project
   rhythm read as a gap between two sections rather than as one band. Written
   against the same 0-3-0 shape as the rhythm rule
   (`.section:not([class*="hero"]):not(.cta-section)`), which sets --pp-section-gap
   on every section and would otherwise win. */
.section.why-section:not([class*="hero"]) {
  padding-top: var(--spacing-section-96);
}

.why-section .pp-head {
  /* Centred, per the brief. `.pp-head` is already max-width capped, so the auto
     margins are what actually move it — text-align alone would leave the block
     sitting on the left. */
  text-align: center;
  margin-inline: auto;
}
/* The lede carries its own measure and was left-flushed under the headline. */
.why-section .why-lede {
  margin-inline: auto;
  color: color-mix(in srgb, var(--colors-color-light) 76%, transparent);
}
/* Eyebrow: --colors-color-accent-2 is #4f3b28, which is 1.4:1 on this ground —
   invisible. The sand tint is what every other label on a dark ground here
   uses (see .hero-book-card .label.text-accent-2). */
.why-section .label.text-accent-2 { color: var(--colors-color-bg-3); }
.why-section .text-h1 { color: var(--colors-color-light); }
/* Outline was dark at 12%, i.e. darker than the ground it sat on. */
.why-section .why-card {
  border-color: color-mix(in srgb, var(--colors-color-light) 18%, transparent);
}
.why-section .why-card-t { color: var(--colors-color-light); }
.why-section .why-card-s { color: var(--colors-color-light-64); }
/* The icons are external <img> SVGs, so `color` on .why-ico never reaches them:
   they render at their own embedded #9e8261 and stayed a muddy brown on navy.
   Same treatment the room-slider tag icons already get over a photograph —
   flattened to white — held just off full strength so six of them do not
   out-shout the titles they sit above. */
.why-section .why-ico img { filter: brightness(0) invert(1); opacity: .82; }

/* ------------------------------------------ homepage gallery, title behind --
   The section title pins while the photographs scroll up over it: the tiles
   sit a layer above, so the headline is read first, then travels behind the
   pictures instead of scrolling away. Nothing here is text on a photo — the
   title is the section's own, and the pictures simply pass in front of it. */
.see-b .w-layout-blockcontainer { position: relative; }
/* Not sticky: pinning it made the headline sit among the photographs for the
   length of the section, and the section is a teaser — the title's job is to
   introduce the pictures once and hand over. */
.see-b .headline-gallery-c {
  position: static;
  margin-bottom: 48px;
}
.see-b .gal-clip { position: relative; z-index: 1; }

/* Tiles rise into place as they enter. Varied by column so the four columns do
   not arrive as one block.

   Every rule that hides a tile is gated on .js-reveal, which reveal.js sets on
   the root element and removes again if it cannot finish. Ungated, a script
   that never loads or throws early would leave the whole gallery blank with
   nothing to say so. The default state of a photograph is visible. */
.js-reveal .see-b .gal-tile {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js-reveal .see-b .gal-tile.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .see-b .gal-tile { opacity: 1; transform: none; transition: none; }
  .see-b .headline-gallery-c { position: static; }
}

/* The map section's title box was the last one still on its own measure. */
.master-map-home-a > h1,
.master-map-home-a > h2 { max-width: min(900px, 100%); }

/* One step for every section title. The about statement was a step smaller
   than the rest, which is what read as "all over the place". The same
   label-plus-.text-h3 statement also opens about-description-section (apie
   and renginiams both ship it) and about-number-section (the Tubinas Hotels
   band): measured 38.4px against every neighbouring title's 51.3px at 1440 —
   same component, same step. Line and tracking come along so the statement
   sits on h2's metrics rather than h3's -1px tracking at h2 size. */
.home-a-about-section .text-h3,
.about-description-section .text-h3,
.about-number-section .text-h3 {
  font-size: var(--text-h2-font-size);
  line-height: var(--text-h2-line-height);
  letter-spacing: var(--text-h2-letter-spacing);
}

/* ================================================= date range picker =======
   The native date popup is drawn by the OS and no selector reaches it, so on a
   site where every other control is the template's, it was the one that looked
   borrowed. This is the panel we draw instead. The field itself keeps the
   template's .text-field skin so the row is unchanged until you open it. */
.dp-field {
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  background: transparent;
  font: inherit;
  color: inherit;
  width: 100%;
}
.dp-field.is-empty { color: color-mix(in srgb, currentColor 52%, transparent); }
.dp-field:focus-visible { outline: 2px solid var(--colors-color-accent-2); outline-offset: 2px; }

.dp-panel {
  position: absolute;
  z-index: 1000;
  padding: 18px;
  border-radius: var(--spacing-radius-main);
  background: var(--colors-color-bg-1);
  color: var(--colors-color-dark);
  box-shadow: 0 18px 48px rgb(8 28 43 / 22%);
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 10%, transparent);
}
.dp-head {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 32px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.dp-title { text-align: center; }
.dp-nav {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 14%, transparent);
  border-radius: 999px;
  background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: inherit;
}
.dp-nav:hover { background: var(--colors-color-bg-2); }
.dp-months { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 34px); }
.dp-dow {
  gap: 2px; margin-bottom: 6px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--colors-color-dark) 46%, transparent);
}
.dp-dow span { text-align: center; }
.dp-grid { gap: 2px; }
.dp-cell, .dp-day { height: 34px; }
.dp-day {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-variant-numeric: tabular-nums;
  color: inherit; border-radius: 999px;
}
.dp-day:hover:not([disabled]) { background: var(--colors-color-bg-2); }
.dp-day[disabled] { color: color-mix(in srgb, var(--colors-color-dark) 26%, transparent); cursor: default; }
/* The range reads as one block: ends are solid, the nights between are tinted
   and square so they join up. */
.dp-day.is-in { background: var(--colors-color-bg-4); border-radius: 0; }
.dp-day.is-from, .dp-day.is-to {
  background: var(--colors-color-accent-2);
  color: var(--colors-color-light);
}
.dp-day.is-from { border-radius: 999px 0 0 999px; }
.dp-day.is-to { border-radius: 0 999px 999px 0; }
.dp-day.is-from.is-to { border-radius: 999px; }
.dp-day:focus-visible { outline: 2px solid var(--colors-color-accent-2); outline-offset: 1px; }
.dp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--colors-color-dark) 10%, transparent);
}
.dp-hint { color: color-mix(in srgb, var(--colors-color-dark) 60%, transparent); }
.dp-clear { background: none; border: 0; cursor: pointer; color: inherit; text-decoration: underline; }
@media screen and (max-width: 620px) {
  .dp-months { grid-template-columns: 1fr; }
  .dp-head { grid-template-columns: 32px 1fr 32px; }
  .dp-title-2 { display: none; }
}

/* ===================================================== one search widget ===
   One form (_search_compact.html), two orientations. .pp-search--card stacks
   it — the hero and kontaktai cards, two fields per row — and .pp-search--bar
   lays the same markup out as one slim row under a page hero and on the
   results page. Only the modifier changes; markup and classes do not.

   The client flagged the gaps, and the cause measured out to the template's
   own flex gaps stacking on top of every stated margin: .form-book carries
   gap:32, .headline-modal gap:16, .input-wrap-contact gap:8, .form-inner
   gap:24. The eyebrow-to-title gap computed to 24px while the CSS said 6, and
   head-to-grid to 52px while it said 20. So the rhythm is stated once here
   and the template's contributions are zeroed:
     eyebrow-title 6 · head-grid 18 · label-field 6 · row-row 14 · grid-submit
   18. The label-to-own-field gap (6) stays visibly smaller than any gap to a
   neighbouring field (12 across, 14 down), or the pairs stop reading. */
.pp-search {
  position: relative;
  /* Dropped into heroes that carry absolutely positioned media; static
     content loses to that, so the widget claims a layer of its own. */
  z-index: 3;
  display: flex;
  flex-flow: column;
  gap: 18px;
}
.pp-search-head { gap: 0; }
.pp-search-head .label { margin: 0 0 6px; }
.pp-search-head .text-h6 { margin: 0; }
/* text-align stated, not inherited: the kontaktai overlay centres everything
   inside it, and the widget's labels went with it while the homepage's stayed
   left — the same widget, reading differently. The head keeps .headline-modal's
   own centring; the fields are the form's business. */
.pp-search .form-inner { margin: 0; display: grid; text-align: left; }
.pp-search .input-wrap-contact { margin: 0; gap: 0; }
.pp-search .input-wrap-contact > .label { margin: 0 0 6px; }
.pp-search .input-wrap-relative { margin: 0; }
.pp-search .pp-search-submit:hover { background-color: var(--colors-color-accent-4); }

/* The card. Its panel — frost, ink, padding — is the wrapper's job
   (.hero-book-card); the form only arranges its fields. */
.pp-search--card .pp-search-grid {
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 14px;
}
.pp-search--card .pp-search-submit {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: center;
  margin-top: 4px; /* 14 of row gap + 4 = the same 18 the head sits on */
}

/* ------------------------------------------------ the bar: a divided rail --
   Option B of the three search bars the hotel was shown, and the one it chose:
   the template's own lavender-shore-hero-1 booking form, adapted to this
   palette. Its devices, all of which have to survive:

     · the boxes are gone. Four cells butted into ONE rail, hairline rules
       where the borders used to be, radius only on the rail's outer corners;
     · a small caps label (10px, bold, tracked, in accent-2 — the byq
       micro-label) sitting over a quiet value in each cell;
     · the calendar glyph and the chevron on the right edge of their own cell,
       in the same accent-2 as the labels, so the rail reads as one family;
     · the submit is a solid block flush with the rail's end, filling its full
       height, not a pill floating inside a panel;
     · it folds twice — five columns, then two rows, then three.

   Borderless fields read as text rather than controls. So hover and focus do
   the work the borders used to: a cell tints and draws a faint 2px rule under
   itself on hover, and on :focus-within the tint deepens and that rule fills
   in solid, in the submit's own ink. The rule is the focus indicator, which is
   why the controls inside give up their outlines — one mark per cell, not a
   ring drawn inside a box this design just removed. */
.pp-search--bar {
  /* No panel any more: the grid below IS the object. */
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 28px;
}
.pp-search--bar .pp-search-head { display: none; }

.pp-search--bar .pp-search-grid {
  /* One value, used by the frame and by every rule between the cells. */
  --pp-rail-seam: color-mix(in srgb, var(--colors-color-accent-2) 24%, transparent);
  grid-template-columns:
    minmax(146px, 1fr) minmax(146px, 1fr)
    minmax(122px, .68fr) minmax(90px, .5fr) minmax(190px, auto);
  gap: 0;
  /* The submit fills the rail's height rather than sitting on the fields'
     baseline; every cell centres its own pair inside the tallest row. */
  align-items: stretch;
  background-color: var(--colors-color-light);
  border: 1px solid var(--pp-rail-seam);
  border-radius: var(--spacing-radius-main);
  /* The submit is flush with the rail's end, so the rail has to clip it to its
     own corners. Nothing inside needs to escape: the date panel is rendered on
     <body> and the focus ring is drawn inside the cell. */
  overflow: hidden;
  /* No shadow. The client's rule: „we never use shadows". The rail sits on
     the page, it does not float above it — its hairline seams and the
     focus tint carry the structure instead. */
}

/* The rules between the cells. Painted as inset shadows on the cell rather
   than as a grid gap, because which seams exist changes at every fold and a
   gap cannot tell a row break from a column one. */
.pp-search--bar .pp-search-grid > * + * { box-shadow: inset 1px 0 0 var(--pp-rail-seam); }

.pp-search--bar .pp-cell {
  position: relative;
  gap: 0;
  justify-content: center;
  padding: 14px 16px 14px 18px;
  /* The cell is a <label>: the whole of it is the control's hit area. */
  cursor: pointer;
  transition: background-color .2s ease;
}
.pp-search--bar .pp-cell:hover {
  background-color: color-mix(in srgb, var(--colors-color-accent-2) 7%, transparent);
}
.pp-search--bar .pp-cell:focus-within {
  background-color: color-mix(in srgb, var(--colors-color-accent-2) 12%, transparent);
}
/* The underline, and the whole of what tells a borderless cell apart from a
   run of text. It is one 2px rule doing two jobs: hover draws it faint, focus
   fills it in. Scaled from the left rather than faded, so it arrives as a
   movement across the cell it belongs to — a tint alone was too quiet to be
   read as "this is a control". */
.pp-search--bar .pp-cell::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background-color: var(--colors-color-accent-2);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .22s cubic-bezier(.625, .05, 0, 1), background-color .2s ease;
}
.pp-search--bar .pp-cell:hover::after {
  transform: scaleX(1);
  background-color: color-mix(in srgb, var(--colors-color-accent-2) 34%, transparent);
}
.pp-search--bar .pp-cell:focus-within::after {
  transform: scaleX(1);
  background-color: var(--colors-color-accent-2);
}

/* The micro-label. .form-book quiets .label down to sentence case for the
   frosted card, where four tracked capitals over four small fields read as
   four competing headings; the rail is the opposite case — its cells have no
   borders, so the caps line is the only thing marking where one field starts.
   Small enough (10px against a 16px value) that the size does the hierarchy. */
.pp-search--bar .pp-search-grid .pp-cell > .pp-cell-label {
  display: block;
  margin: 0 0 9px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: var(--font-weight--bold, 700);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--colors-color-accent-2);
  white-space: nowrap;
}

/* The value: the template's field, stripped to a line of type. Height comes
   from the line box, not from --pp-field-h — the cell owns the rhythm now. */
.pp-search--bar .pp-search-grid .text-field,
.pp-search--bar .pp-search-grid input[type="date"].text-field {
  height: auto;
  min-height: 24px;
  padding: 0 24px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: var(--text-text-body-font-size);
  line-height: 24px;
  font-weight: 500;
  color: var(--colors-color-dark);
  cursor: pointer;
}
.pp-search--bar .pp-search-grid .text-field.select { padding-right: 24px; }
/* The cell carries the focus mark for all four fields; a ring inside it would
   redraw the very box this design removed. */
.pp-search--bar .pp-search-grid .text-field:focus,
.pp-search--bar .pp-search-grid .text-field:focus-visible { outline: none; }

/* Both glyphs sit on the cell's own right padding edge, centred on the value's
   line box rather than on the whole cell. */
.pp-search--bar .pp-search-grid .icon-date,
.pp-search--bar .pp-search-grid .input-wrap-relative:has(> select)::after {
  right: 0;
  width: 18px;
  height: 18px;
}

/* The submit. Specificity, measured not assumed: `.form-book
   button[type="submit"]` is (0,2,1) and beats a two-class selector, so every
   rule that has to undo the pill states three classes. */
.pp-search--bar .pp-search-grid .pp-search-submit {
  border-radius: 0;
  min-height: 0;
  height: auto;
  align-self: stretch;
  justify-content: center;
  padding: 12px 22px;
  background-color: var(--colors-color-accent-2);
  color: var(--colors-color-light);
  transition: background-color .25s ease;
}
.pp-search--bar .pp-search-grid .pp-search-submit .button-text {
  font-size: 13px;
  letter-spacing: 1.6px;
}
.pp-search--bar .pp-search-grid .pp-search-submit:hover {
  background-color: var(--colors-color-accent-4);
}
/* Drawn inside, because the rail clips anything outside its own corners. */
.pp-search--bar .pp-search-grid .pp-search-submit:focus-visible {
  outline: 2px solid var(--colors-color-light);
  outline-offset: -5px;
}

/* First fold — two rows. Six tracks so a row of three (counts, counts, submit)
   can sit under a row of two (the dates) and both still line up: the rail
   stays a rail rather than becoming a stack of fields. Seams are reassigned by
   hand, since row 2 needs a rule over it and no rule to the left of its first
   cell. */
@media screen and (max-width: 860px) {
  .pp-search--bar .pp-search-grid { grid-template-columns: repeat(6, 1fr); }
  .pp-search--bar .pp-search-grid > :nth-child(1) { grid-column: 1 / 4; }
  .pp-search--bar .pp-search-grid > :nth-child(2) { grid-column: 4 / 7; }
  .pp-search--bar .pp-search-grid > :nth-child(3) { grid-column: 1 / 3; }
  .pp-search--bar .pp-search-grid > :nth-child(4) { grid-column: 3 / 5; }
  .pp-search--bar .pp-search-grid > :nth-child(5) { grid-column: 5 / 7; }
  .pp-search--bar .pp-search-grid > :nth-child(1) { box-shadow: none; }
  .pp-search--bar .pp-search-grid > :nth-child(3) { box-shadow: inset 0 1px 0 var(--pp-rail-seam); }
  .pp-search--bar .pp-search-grid > :nth-child(4),
  .pp-search--bar .pp-search-grid > :nth-child(5) {
    box-shadow: inset 1px 0 0 var(--pp-rail-seam), inset 0 1px 0 var(--pp-rail-seam);
  }
  .pp-search--bar .pp-search-grid .pp-search-submit { padding-inline: 14px; }
}

/* Second fold — three rows. "Tikrinti laisvus" and „Suaugusieji" cannot share
   a 195px row, so the submit takes a row of its own and the rail becomes a
   two-column block. */
@media screen and (max-width: 560px) {
  .pp-search--bar .pp-search-grid { grid-template-columns: 1fr 1fr; }
  .pp-search--bar .pp-search-grid > :nth-child(1) { grid-column: 1 / 2; }
  .pp-search--bar .pp-search-grid > :nth-child(2) { grid-column: 2 / 3; }
  .pp-search--bar .pp-search-grid > :nth-child(3) { grid-column: 1 / 2; }
  .pp-search--bar .pp-search-grid > :nth-child(4) { grid-column: 2 / 3; }
  .pp-search--bar .pp-search-grid > :nth-child(5) { grid-column: 1 / 3; }
  .pp-search--bar .pp-search-grid > :nth-child(2) { box-shadow: inset 1px 0 0 var(--pp-rail-seam); }
  .pp-search--bar .pp-search-grid > :nth-child(3) { box-shadow: inset 0 1px 0 var(--pp-rail-seam); }
  .pp-search--bar .pp-search-grid > :nth-child(4) {
    box-shadow: inset 1px 0 0 var(--pp-rail-seam), inset 0 1px 0 var(--pp-rail-seam);
  }
  .pp-search--bar .pp-search-grid > :nth-child(5) { box-shadow: inset 0 1px 0 var(--pp-rail-seam); }
  .pp-search--bar .pp-search-grid .pp-search-submit { padding: 16px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-search--bar .pp-cell,
  .pp-search--bar .pp-cell::after,
  .pp-search--bar .pp-search-grid .pp-search-submit { transition: none; }
  .pp-search--bar .pp-cell:hover::after,
  .pp-search--bar .pp-cell:focus-within::after { transform: none; }
}

/* The duplicate submit label. IX2 slides ._1 out and ._2 in on hover, so both
   layers have to exist — but only one of them may be a word. ._2's text is
   generated, so the accessibility tree, find-on-page and the clipboard each
   see „Tikrinti laisvus" exactly once, while the element IX2 animates is
   untouched. Not scoped to --bar: the card's submit is the same button. */
.pp-search-submit .button-text._2::after { content: attr(data-button-text); }

/* The band that places the bar under a page hero: a quiet strip on the page
   ground, opaque on purpose. Symmetric padding — where the next section is
   dark (renginiams) the bar was sitting flush against its edge. */
.pp-search-band {
  background-color: var(--colors-color-bg-1);
  padding: 28px 0;
}
.pp-search-band .pp-search--bar { margin-bottom: 0; }

/* --------------------------------------------------- contacts, the card --
   The booking card sat top-left over the photograph with a location line
   above it. The line is gone (the page already gives the address in full a
   column away) and the card is centred in its frame. */
/* place-items centres the card inside its track; the template's own overlay
   sets justify-content, which was pushing the whole track to the right edge —
   so the card measured vertically centred and horizontally not. place-content
   positions the track itself. */
.kt-here {
  display: grid;
  place-items: center;
  place-content: center;
  padding: 24px;
}
.kt-book-card {
  margin: 0;
  /* It had collapsed to 283px — a booking form at that width wraps every
     field onto its own line. */
  width: min(380px, 100%);
}
/* The photograph behind it carried the template's scroll-zoom. Under a form
   that is a moving ground behind static fields, which reads as drift. */
.left-contact-b .map-image,
.left-contact-b img.image-cover { transform: none !important; }

/* ==================================================================
   /rezervacija/ — the page redesigned as a designed page, not plumbing.
   Everything here reuses the template's own idioms: the kambariai
   listing hero (headline-rooms + wrap-h1 + moon), room-side-card's
   price panel, card-offer's tile anatomy, and the approved card
   geometry (unfilled, 1px hairline at 12 percent ink, 8 px gaps,
   16 px radius). Later in the file than the first bk block on purpose:
   equal specificity, these win.
   ================================================================== */

/* ------------------------------------------------------------ head --
   A working header, not a hero: eyebrow, title, one line of why
   direct, and the search bar as the page's instrument right under it.
   The ceremonial moon hero pushed prices below the fold and was
   rejected. */
.bk-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 28px; max-width: min(720px, 100%); }
.bk-head > * { margin: 0; }
.bk-lede { color: color-mix(in srgb, var(--colors-color-dark) 64%, transparent); }

/* The line under the search bar is the results' own caption: the dates
   searched, the party, the count found. */

/* ------------------------------------------------------------ list -- */
.bk-results-list { display: grid; gap: 8px; }

/* ------------------------------------------------------------ card --
   Same three columns, but the right rail is now a price panel — the
   room-single sticky card's job, done inline: quiet cream ground so
   the number a guest is scanning for has its own place to be. */
.bk-result {
  /* 2026-08-29: the plans box and the cancellation link moved into the price
     panel, which left the middle column holding a name, a capacity and one
     link across 500px. The photograph takes that width instead. */
  grid-template-columns: minmax(260px, 42%) minmax(0, 1fr) minmax(240px, 26%);
  gap: 32px;
}
.bk-result-body { padding: 20px 0; gap: 14px; }
.bk-result-title { gap: 6px; }
.bk-result-facts { color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent); }
.bk-note { margin: 0; color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent); max-width: 46ch; }

.bk-result-side {
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
  padding: 24px;
  border-radius: var(--spacing-radius-small);
  background-color: var(--colors-color-bg-2);
}
.bk-result-price { gap: 2px; }
.bk-result-price > .label-small { color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent); margin-bottom: 8px; }
/* The total reads like a price: the serif the headings wear, at h4
   scale — the same voice dl-live-value already uses for money. */
.bk-price-now {
  font-family: var(--text-h2-font-family);
  font-size: var(--text-h4-font-size);
  line-height: 1.05;
  font-weight: 400;
}
.bk-price-was { color: color-mix(in srgb, var(--colors-color-dark) 48%, transparent); }
.bk-price-unit { color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent); }
.bk-result-side .cta-small { width: 100%; justify-content: center; }

/* A room the interim map has no photograph for: the brand moon on the
   sand ground instead of a white void. */
.bk-result-noimage {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background-color: var(--colors-color-bg-4);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='64' viewBox='0 0 53 64' fill='%23d2c5ac'%3E%3Cpath d='M32.332 64C14.6867 64 0.332031 49.6453 0.332031 32C0.332031 14.3547 14.6867 0 32.332 0C37.6947 0 43.0334 1.38933 47.772 4.02133L49.8414 5.17333L47.7854 6.34667C38.396 11.7067 32.332 21.2533 32.332 30.6667C32.332 42.664 41.276 52.0667 50.1427 56.064L52.3054 57.04L50.3507 58.3787C44.9854 62.056 38.756 63.9973 32.3347 63.9973L32.332 64ZM32.332 2.66667C16.1587 2.66667 2.9987 15.8267 2.9987 32C2.9987 48.1733 16.1587 61.3333 32.332 61.3333C37.4467 61.3333 42.4307 59.9867 46.8787 57.4187C37.9934 52.5867 29.6654 42.864 29.6654 30.6667C29.6654 21.0293 35.3774 11.3013 44.396 5.304C40.6014 3.57333 36.4734 2.66667 32.332 2.66667Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 44px auto;
}

/* The pill gets a hairline so it holds its edge on a white wall or the
   sand ground, not only on a dark photograph. */

/* Rate plans open on request; the author display rule was defeating the
   hidden attribute, so every card shipped with its pricing list open. */
.bk-plans[hidden] { display: none; }

/* ----------------------------------------------------- empty state --
   A destination, not a blank column: what happened, the way forward,
   and the 24h phone as a real button. */
.bk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 64px 24px;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  border-radius: var(--spacing-radius-main);
}
.bk-empty-msg { margin: 0; max-width: 52ch; color: color-mix(in srgb, var(--colors-color-dark) 64%, transparent); }
.bk-empty-call { margin-top: 12px; }
/* The mask's two text layers are spans here; without block they sit
   side by side and the button reads its label twice. */
.bk-empty-call .button-text-small { display: block; }

/* ------------------------------------------------- page rhythm --
   One breath between each block below the list: the phone note stays
   with the list it footnotes; extras and the two deals blocks each
   get the same 80px of air and the same label-headline-content spacing. */
.bk-extras { margin-top: 72px; }
.bk-extras > .label { margin-bottom: 8px; }
.bk-extras-note { margin: 12px 0 0; max-width: 64ch; }

/* Extras: the approved unfilled cards, at the weight of the room pages —
   the same line-art glyph the room chips wear, the name, and the price in
   the serif voice the room totals use. The client called the old rows
   miniscule; these hold a row of four at desktop and stack cleanly. */
.bk-extras-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin: 24px 0 0;
}
.bk-extra {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 22px;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  border-radius: var(--spacing-radius-main);
}
.bk-extra dt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-weight: 500;
}
.bk-extra-ico { width: 28px; height: 28px; display: block; }
.bk-extra dd { margin: 0; }
.bk-extra-price { display: flex; align-items: baseline; gap: 6px; }
.bk-extra-figure {
  font-family: var(--text-h2-font-family);
  font-size: var(--text-h5-font-size);
  line-height: 1.1;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.bk-extra-per { color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent); }
.bk-extra dd.bk-extra-note { margin-top: auto; color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent); }

/* Deals: both blocks share the same internal spacing. */
.bk-deals .dl-live-grid, .bk-deals .dl-grid { margin-top: 24px; }

/* The static offers were raw links — full-bleed images and browser
   blue. They join the card family: unfilled hairline tile, photograph
   held to a frame, ink inherited. */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.dl-offer {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: inherit;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  border-radius: var(--spacing-radius-main);
  padding: 8px;
}
.dl-offer-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--spacing-radius-small);
  aspect-ratio: 4 / 3;
}
.dl-offer-media .image-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-offer-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 12px 12px;
}
.dl-offer-body .text-small { margin: 0; color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent); }

/* The deal's worth leads the card, in the serif voice the room totals use.
   Every card fills the slot — a percentage, a euro figure or the group
   price — because one mute card beside four shouting ones reads as a deal
   with no value. */
.dl-offer-value { display: flex; flex-direction: column; gap: 2px; }
.dl-offer-figure {
  font-family: var(--text-h2-font-family);
  font-size: var(--text-h4-font-size);
  line-height: 1.05;
  font-weight: 400;
  color: var(--colors-color-accent-2);
  font-variant-numeric: tabular-nums;
}
.dl-offer-worth { color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent); }
.dl-offer-more {
  color: var(--colors-color-accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
}

/* ------------------------------------------------------ responsive -- */
@media screen and (max-width: 991px) {
  .bk-head { margin-bottom: 24px; }
  /* Restated: the unqualified column rule above is later in the file than
     the template-era 991px collapse, so the collapse must be said again. */
  .bk-result { grid-template-columns: 1fr; gap: 0; }
  .bk-result-body { padding: 16px 8px; }
  .bk-result-side { margin-top: 8px; padding: 20px; }
  .dl-grid { grid-template-columns: 1fr 1fr; }
  .dl-grid > .dl-offer:last-child { grid-column: 1 / -1; }
  .bk-extras { margin-top: 56px; }
}
@media screen and (max-width: 767px) {
  .dl-grid { grid-template-columns: 1fr; }
  .dl-grid > .dl-offer:last-child { grid-column: auto; }
}

/* The picker no longer dismisses itself when the range completes, so it needs
   a visible way out beside the reset. */
.dp-foot-actions { display: inline-flex; gap: 14px; align-items: center; }
.dp-done {
  background: var(--colors-color-accent-2);
  color: var(--colors-color-light);
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  font: inherit;
}
.dp-done:hover { background: var(--colors-color-accent-4); }
.dp-done:focus-visible { outline: 2px solid var(--colors-color-accent-2); outline-offset: 2px; }
.dp-done[disabled] { opacity: .4; cursor: not-allowed; }
.dp-done[disabled]:hover { background: var(--colors-color-accent-2); }

/* ==================================================================
   /rezervacija/ 2026-08-25 — compact rows, group heads, one offers
   section with dialogs. The dialog wears the template's .book-modal
   language: white right-side panel, main radius, blurred dark
   backdrop, close top-right (styles.css .book-modal, .bg-book and
   .close-button-modal are the reference anatomy).
   ================================================================== */

/* ---------------------------------------------------- compact row --
   A room the site cannot yet honestly describe, or one with nothing
   to sell for these dates: the facts in one line of card — no
   placeholder imagery pretending to be content. */
.bk-result.bk-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px 32px;
  align-items: center;
  padding: 18px 22px;
}
.bk-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; }
.bk-row-facts { color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent); }
.bk-row-price { display: flex; flex-direction: column; gap: 2px; text-align: right; }
/* The compact row is a three-column grid; price and the two lines under it
   have to arrive as ONE grid item or they claim a column of their own and the
   button wraps. .bk-row-price stays a clean host — draw() rewrites it. */
.bk-row-priceblock { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bk-row-priceblock .bk-side-terms { align-items: flex-end; margin-top: 0; text-align: right; }
.bk-row-price .bk-price-now { font-size: var(--text-h5-font-size); }
.bk-row-off { color: color-mix(in srgb, var(--colors-color-dark) 48%, transparent); white-space: nowrap; }
.bk-result.bk-row[data-state='sold-out'] { opacity: .8; }
.bk-price-for { color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent); margin-bottom: 6px; }

/* Group heads inside the list: a small title and, for the unmapped
   rooms, the reception phone standing in for the missing room pages. */
.bk-group-head { margin: 40px 0 8px; display: flex; flex-direction: column; gap: 4px; }
.bk-group-head > * { margin: 0; }
.bk-group-head .text-small { color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent); }
.bk-group-head a { color: var(--colors-color-accent-2); }

@media screen and (max-width: 767px) {
  .bk-result.bk-row { grid-template-columns: 1fr; gap: 12px; align-items: start; padding: 16px 18px; }
  .bk-row-price { text-align: left; }
  .bk-row-cta .cta-small { width: 100%; justify-content: center; }
}

/* ---------------------------------------------- offers, one section --
   Five editorial deals, each a button that opens its dialog. The card
   is the approved family — unfilled, hairline, main radius — and the
   button reset keeps the template's ink and type. */
.bk-deals-section { background-color: var(--colors-color-bg-1); }
.bk-deals-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 36px; max-width: min(720px, 100%); }
.bk-deals-head > * { margin: 0; }
.bk-deals-lede { color: color-mix(in srgb, var(--colors-color-dark) 64%, transparent); }

button.dl-offer {
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.dl-offer:hover .dl-offer-more,
.dl-offer:focus-visible .dl-offer-more { color: var(--colors-color-accent-4); }
.dl-offer:focus-visible { outline: 2px solid var(--colors-color-accent-2); outline-offset: 2px; }

/* -------------------------------------------------------- deal dialog --
   Native dialog, styled to the .book-modal anatomy. The dialog box IS
   the white panel; its backdrop is .bg-book's dark frost. */
.dl-modal {
  position: fixed;
  inset: 0;
  margin: 16px 16px 16px auto;
  width: min(485px, calc(100% - 32px));
  height: calc(100dvh - 32px);
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: var(--spacing-radius-main);
  background-color: var(--colors-color-light);
  color: var(--colors-color-dark);
  padding: 0;
  overflow: hidden;
  display: none;
}
.dl-modal[open] { display: flex; flex-direction: column; }
.dl-modal::backdrop {
  background-color: rgb(8 28 43 / 16%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.dl-modal-body {
  overflow-y: auto;
  height: 100%;
  padding: 48px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.dl-modal-body > * { margin: 0; }
.dl-modal-summary { color: color-mix(in srgb, var(--colors-color-dark) 64%, transparent); }
/* The validity line used to be `.label-small` — 10px/700/uppercase with 2px
   tracking — sitting three rows above `.label` at 12px/700/uppercase with 3px.
   Two caps styles that differ by 2px and one notch of tracking do not read as
   a hierarchy; they read as a mistake, and the client called it: „why is this
   a font mish mash?". Measured, that dialog carried SEVEN distinct type
   styles. There is one caps style in here now, and this is it. */
.dl-modal-dates {
  color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent);
  font-size: var(--text-label-font-size, 12px);
  letter-spacing: 3px;
}
.dl-modal-sub { margin-top: 10px; }
.dl-modal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dl-modal-list li { position: relative; padding-left: 18px; }
.dl-modal-list li::before { content: "·"; position: absolute; left: 2px; color: var(--colors-color-accent-1); }
/* Conditions are secondary by COLOUR, not by a fourth font size. They used to
   be `.text-small` at 12px against the inclusions' 16px — a second body size
   earning nothing that 62% ink was not already doing. */
.dl-modal-list-quiet li { color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent); }
.dl-modal-cta { margin-top: 16px; }
.dl-modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  border-radius: 999px;
  color: var(--colors-color-dark);
  cursor: pointer;
}
.dl-modal-close:hover { background: var(--colors-color-bg-2); }
.dl-modal-close:focus-visible { outline: 2px solid var(--colors-color-accent-2); outline-offset: 2px; }

/* The page behind a modal holds still. */
html.pp-modal-open, html.pp-modal-open body { overflow: hidden; }

@media screen and (max-width: 767px) {
  .dl-modal { margin: 8px; width: calc(100% - 16px); height: calc(100dvh - 16px); }
  .dl-modal-body { padding: 40px 20px 24px; }
}

/* ------------------------------------------------ /apie/ headline icons --
   They were one green and one clay, inherited from the template's two accent
   swatches. Both are the sand accent now, and the stroke is heavier: these are
   line icons sitting inside 70px serif type, and at 13/512 they read as wire. */
.hero-about .icon-heading-about,
.icon-heading-about { color: var(--colors-color-accent-3); }
.icon-heading-about svg [stroke],
.icon-heading-about svg { stroke-width: 20; }

/* ------------------------------------------------- rate plans as a choice --
   Two checkboxes: one states a fact, one asks a question.

   Breakfast is free and included in every rate at every hotel in the group —
   the engine deleted the field that used to describe it, precisely because two
   fields contradicted each other about a property-wide constant. So it is a
   ticked, disabled box: a statement in the language of the control next to it.
   `.is-fixed` is what makes it read as told-not-asked — no pointer, no hover,
   and the box itself dimmed while its words stay at full strength, because the
   words are the part that is true.

   Refundability is the one real choice. Unticked by default: the headline
   price is the cheapest plan, which here is always the non-refundable one, and
   ticking buys the upgrade at the price shown on the right. */
.bk-plans { display: grid; gap: 8px; margin: 2px 0; justify-items: start; }

.bk-sw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 14%, transparent);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s ease, background-color .2s ease;
}

.bk-sw:hover { border-color: color-mix(in srgb, var(--colors-color-dark) 30%, transparent); }

.bk-sw:has(input:checked:not(:disabled)) {
  border-color: var(--colors-color-accent-2);
  background-color: color-mix(in srgb, var(--colors-color-accent-2) 5%, transparent);
}

.bk-sw input {
  accent-color: var(--colors-color-accent-2);
  width: 16px;
  height: 16px;
  flex: none;
  cursor: pointer;
}

.bk-sw-name { font-size: var(--text-text-small-font-size, 14px); }

.bk-sw-delta {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--colors-color-dark) 58%, transparent);
  font-size: var(--text-text-small-font-size, 14px);
}

/* Stated, not offered. The tick is dimmed and inert; the words are not. */
.bk-sw.is-fixed {
  cursor: default;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
}
.bk-sw.is-fixed input { cursor: default; opacity: .55; }
.bk-sw.is-fixed:hover { border-color: color-mix(in srgb, var(--colors-color-dark) 12%, transparent); }

/* The cancellation sentence, rendered verbatim under whichever plan is
   selected. Held to a readable measure and set quiet — it is the fine print a
   guest needs, not a selling line. */

/* ------------------------------------------------------ what is not in it --
   City tax is the ONE money fact the engine's totals do not carry: prices are
   gross of VAT, and this is collected at the hotel. It sits with the price it
   is not part of, and again under the list in full words. */
.bk-price-tax {
  margin-top: 4px;
  color: color-mix(in srgb, var(--colors-color-dark) 62%, transparent);
  font-variant-numeric: tabular-nums;
}


/* ============================================================== sekcijų siūlės
   Šablone kiekviena šviesi sekcija, atsiremianti į tamsią, apvalina į ją
   atsuktus kampus 24 px ir užlipa ant jos 24 px — tada kampų iškirtimuose
   matosi tamsi kaimynė ir sekcija skaitoma kaip kortelė ant grindų. Taip
   padaryta `.section.slider-section-home-a` (apačia), `.section.home-a-faq-
   section` (viršus), `.section.offer-more-section` ir `.section.explore-
   home-b`. Tamsios sekcijos kampų neapvalina niekada: jos yra grindys.

   2026-08-29, savininkas: „in most of the website when section color changes
   one of them has rounded borders, to have this card effect. maybe we should
   make sure this happens in all pages w similar philosophy". Ligi tol taip
   elgėsi tik dalis perėjimų; likusieji baigdavosi tiesia linija.

   Trys klasės, o ne dar dvidešimt taisyklių pavadinimais, nes taisyklė yra
   viena ir ji priklauso nuo kaimynės, ne nuo sekcijos vardo:
     .pp-seam-top     — virš šios sekcijos yra tamsi;
     .pp-seam-bottom  — po šia sekcija yra tamsi;
     .pp-seam-head    — puslapio pirmoji sekcija, po ja nieko nėra, tik
                        <body> spalva viršuje (32 px juostelė).

   Klasė rašoma du kartus (0-2-0), kad nepralaimėtų `.section.hero-offer` ir
   kitoms dviejų klasių šablono taisyklėms, nustatančioms tą patį radiusą.
   `overflow` čia NEUŽDEDAMAS: jis sulaužytų viduje esančius position:sticky
   elementus, o fono spalvą radiusas nukerpa ir be jo. Ten, kur sekcijoje yra
   per visą plotį ištemptas paveikslėlis, overflow pridedamas atskirai. */
/* Siūlė gali būti tik ant nepermatomos sekcijos: skaidri sekcija nieko
   nepiešia, tad ir apvalinti nėra ko — kampai lieka tiesūs, nors radiusas
   ir nustatytas. Dalis šablono sekcijų fono neturi ir tiesiog rodo <body>
   spalvą, todėl ji čia užrašoma. Taisyklė gyvena prie-parko.css, kuris
   įkeliamas anksčiau už pp-pages.css, tad savo spalvą turinčios sekcijos
   (pvz. kreminė .section.ppa-next) lieka su savąja. */
.pp-seam-top.pp-seam-top,
.pp-seam-bottom.pp-seam-bottom {
  background-color: var(--colors-color-bg-1);
}

.pp-seam-top.pp-seam-top {
  position: relative;
  z-index: 2;
  border-top-left-radius: var(--spacing-radius-24);
  border-top-right-radius: var(--spacing-radius-24);
  margin-top: calc(var(--spacing-radius-24) * -1);
}

/* z-index 3, ne 2: apatinė siūlė užlipa ant TOLESNĖS sekcijos, o ta DOM'e
   yra vėliau ir prie vienodo z-index nupieštų ant viršaus — tada 24 px
   persidengimas būtų, bet jo nesimatytų. Šablonas tą patį daro
   `.section.slider-section-home-a` ir `.section.stories-home-a`. `overflow:
   clip` — irgi iš ten: jis nukerpa vaikus prie apvalinto kampo ir, skirtingai
   nei `hidden`, nesukuria slinkties konteinerio, tad position:sticky viduje
   lieka gyvas. */
.pp-seam-bottom.pp-seam-bottom {
  position: relative;
  z-index: 3;
  border-bottom-left-radius: var(--spacing-radius-24);
  border-bottom-right-radius: var(--spacing-radius-24);
  margin-bottom: calc(var(--spacing-radius-24) * -1);
  overflow: clip;
}

.pp-seam-head.pp-seam-head {
  border-top-left-radius: var(--spacing-radius-24);
  border-top-right-radius: var(--spacing-radius-24);
}

/* ================================ the white bar on the room cards ========
   Client, 2026-08-29: „the page is glitchy i hover on smth sometimes a white
   barr appears blocking haf the screen very bad experience" — /kambariai/,
   reproduced on hovering the first card, on a ~1990px-wide window.

   It is not a layout bug. Measured through the whole hover transition, every
   box on the card keeps its geometry to the pixel: the grid stays 4648px, the
   card stays 496px, nothing clips and nothing moves. It is a COMPOSITING bug,
   which is why it never appeared in the headless checks — those rasterise in
   software, and this needs a real GPU.

   The recipe, measured:
     · .button-wrap-room-card is `display: none` at rest and becomes `flex` on
       hover while its own opacity animates 0 → 1.
     · Inside it, the „Plačiau" button's .button-bg carries
       `backdrop-filter: blur(5px)` (styles.css, variant 589a1127…) over a
       16%-white fill.
     · So a backdrop-filtered element goes from NOT LAID OUT to 107×42 in one
       frame, inside an ancestor that is mid-opacity — which forces Chrome to
       pick that ancestor as the backdrop root and size a render surface
       against a rect that is not ready. It paints the unrasterised backdrop:
       a large, flat, light rectangle. Fifteen cards, fifteen chances.

   The blur is removed rather than worked around. It sits behind a translucent
   pill on a photograph the card has ALREADY darkened for the hover state —
   the 5px is close to invisible there, and it was never worth a render
   surface that appears halfway through an animation. The fill stays, so the
   button looks the same; the always-present .room-card-top-tile keeps its
   blur, because it is laid out from first paint and is not implicated.

   Scoped to the room cards. The same variant elsewhere is not created inside
   a display-toggled, opacity-animated subtree and is left alone.

   LATER, and read the next block before trusting this one. The bar is not a
   GPU-only fault and it has nothing to do with the hover: it reproduces in
   headless Chrome on a cold load of /kambariai/, before the mouse has moved,
   in six loads out of six. What it does have in common with the reading above
   is backdrop-filter — just a different one, for a different reason. The
   diagnosis below supersedes this one. This rule stays because it is harmless
   and the blur it removes was worth nothing where it sat, but it was not the
   cure and the page should not be read as if it were. */
.button-wrap-room-card .button-bg {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ============ the white bar, and the whole page juddering on a card hover =
   Client, same day, after the blur above was removed: „here entire page still
   tweaking when i hover on a card, can you remake the animation o some other
   engine or smth".

   The animation engine is not what is wrong, and swapping it does not fix
   this on its own — that was measured before anything was written. But the
   engine did have to go, for other reasons, so both halves are below.

   HOW IT WAS MEASURED. Headless Chrome at 1990x950 (the client's window),
   /kambariai/ scrolled to the grid, hovering across six cards in 1.4s while
   an in-page rAF loop records frame intervals. Three repeats per condition.
   Frames longer than 33ms (a dropped frame at 30fps) are the score.

     as shipped ...................................... 15, 15, 15   max 56ms
     nav pill backdrop-filter off ......................  0,  0,  0   max 22ms
     room-card top-tile backdrop-filter off ........... 17, 16, 17   max 68ms
     both off .........................................  0,  0,  0   max 13ms
     ix2 hover replaced by a CSS transition, blurs kept  10, 10       max 162ms

   So it was never the room cards, and never the engine. It is the SEVEN
   frosted pills in the nav.

   WHY. Performance.getMetrics says a hover costs 2 layouts and 0.6ms of
   layout — nothing. LayerTree tells the real story. `.navbar` is
   `position: absolute; z-index: 999` INSIDE its page's hero section, and on
   /kambariai/ that section is `.hero-room-listing`, which wraps the entire
   fifteen-card grid: it is 5210px tall. A backdrop-filter samples everything
   painted below it inside its backdrop root, and for a z-index 999 child that
   root is the whole section. So each of the seven `.navigation-link-hover-wrap`
   pills makes Chrome keep a 1994 x 5214 render surface — 42MB — and every
   repaint anywhere in that section invalidates all seven at once. The pills
   are scrolled far off screen by then; it makes no difference.

   The size of the hole, from LayerTree, at 1990 wide:

     /kambariai/ ......... 56 layers, 1061MB of surface, 22 of them 1994x5214
     /kambariai/kotedzas/  44 layers,  312MB   (hero section 1231px tall)
     /pasiulymai/ ........ 31 layers,   77MB   (hero section  331px tall)

   /kambariai/ is 3.4x the next worst page in the site, for one reason: it is
   the only page whose hero section contains a full listing grid. That is why
   the client only ever reported this page.

   AND IT IS ALSO THE WHITE BAR. A gigabyte of render surface is more than the
   rasteriser will hand out, so some of it comes back unpainted and Chrome
   fills it flat. Loading /kambariai/ cold, six times, and measuring how much
   of the top 1990x240 strip paints as flat off-white instead of the page's
   own colour:

     before ... 46.6%, 7.8%, 7.8%, 36.8%, 36.8%, 27.0%
     after  ...  0.2%,  0.2%, 0.2%,  0.2%,  0.2%,  0.2%

   Six loads out of six, before any mouse has moved, at a size that varies
   from a seventh of the strip to nearly half of it — „sometimes a white barr
   appears blocking haf the screen". The 0.2% left is the „Rezervuoti" pill,
   which is genuinely white. The note above this one blamed the hover and the
   card's own button; it was wrong, and it says so now.

   THE FIX: one backdrop root instead of seven. The six link pills sit in one
   flex row, `.nav-menu-inner`, and all six sample the identical backdrop, so
   the blur is moved onto the row and the pills keep only their 16%-white
   fill. Rounding the row to the pill radius keeps the band's ends flush with
   the outer pills.

   What that costs, in pixels, measured as a crop of the nav strip diffed
   against the current build at 1990 wide, on ten pages:

     eight of ten pages ... 0 pixels differ by more than 8/255 (max delta 8)
     / (sky hero) ......... 22 of 41118 pixels (removing the blur: 273)
     /renginiams/ ......... 974 of 41118 pixels (removing the blur: 6702)

   The only visible difference is that the 8px gaps between pills are now
   blurred too, so the row reads as one frosted band rather than six. Removing
   the blur outright was the obvious cheaper move and was rejected: on
   /renginiams/ the hero is busy enough that the 16%-white pills go
   see-through without it, which is 7x the pixel change.

   `.book` loses its blur with no replacement. It is `--colors-color-light-88`
   — 88% opaque — so there was never more than a tenth of a blur to see.

   The row rule is scoped to the desktop row. Below 992px `.nav-menu-inner` is
   a different object — a solid `--colors-color-light` dropdown panel with its
   own radius — so blurring it would be both pointless and wrong. The pills'
   `none` needs no such scoping: down there they are `--colors-color-dark-8`
   sitting on that solid panel, and a blur of a flat fill is a flat fill. */
@media screen and (min-width: 992px) {
  .nav-menu-inner {
    border-radius: var(--spacing-radius-full);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

.navigation-link-hover-wrap {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* …EXCEPT THE TWO ON THE RIGHT, which are not in that row.
   „Dovanoti button doesnt seem to have blur?" — correct, and it was a
   regression from the row consolidation above rather than a decision. Two
   elements, not fifteen, and the same `will-change: filter` trick bounds each
   one's backdrop root to itself instead of the whole hero section — which is
   the fault that cost 1061 MB on /kambariai/. */
.navbar .navigation-link-hover-wrap.desktop-only {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  will-change: filter;
}

/* ------------------------- and the card's own frost, given a smaller root --
   The nav row was one of two things sharing that 5210px backdrop root. The
   other fifteen are the cards' own `.room-card-top-tile` pills, one per card,
   each holding the same 1994 x 5214 surface for a 5px blur.

   They were nearly left alone: with ix2 still driving the hover, turning them
   off changed the score from 15 dropped frames to 17, i.e. nothing. That
   reading did not survive the CSS rewrite below. With the nav fixed and the
   hover on a CSS transition, the two now hold each other up — either one alone
   is survivable, together they are not:

     nav row blur + 15 card blurs .......... 8, 7, 8 dropped   max 59ms
     nav row blur only ..................... 0, 0, 0           max 28ms
     15 card blurs only .................... 0, 0, 0           max 31ms

   Removing them was measured and rejected. Diffing four pills against the
   current build, 11136 of 144648 pixels move by more than 8/255, peaking at
   99: on the wallpapered rooms the pattern reads straight through the
   48%-white pill without the blur. Raising the fill to compensate makes it
   worse at every value tried between 56% and 72% — it flattens the pill
   without softening what is behind it.

   So the blur stays and the ROOT shrinks instead. `will-change: filter` makes
   each card a backdrop root, which is what the Filter Effects spec says it
   should: the pill then samples its own card rather than five and a half
   viewports of page, and a repaint in one card cannot invalidate the other
   fourteen. Measured on /kambariai/ at 1990 wide:

     compositor surface .................. 811MB -> 258MB
     surfaces over 2Mpx ...................   19 -> 5
     dropped frames, sweep of six cards ... 8,7,8 -> 0,0,0   max 59ms -> 32ms
     dropped frames, full-page scroll ....  12 -> 0          max 190ms -> 33ms
     one whole card, diffed ............... 2 pixels of 479360 move by >8

   Two pixels. The `will-change` is doing nothing to how the card looks; it is
   only telling Chrome where the backdrop ends.

   `isolation: isolate` and `contain: paint` are the properties you would
   reach for first, and both are in the spec's list of backdrop roots. Both
   were tried on `.link-room` and changed the layer tree by exactly nothing —
   1061MB before and after. `filter: opacity(1)` does shrink it, to the same
   258MB, but a real filter puts every card through the filter pipeline on
   every paint and scored 10, 11, 10 rather than 0, 0, 0. The hint is both
   cheaper and more honest than the no-op filter.

   Leaving `will-change` on permanently is normally a mistake, because it
   costs a composited layer per element. Here it costs fifteen card-sized
   layers, about 29MB, and saves 553MB. */
.link-room {
  will-change: filter;
}

/* ------------------------------ the room card hover, off the ix2 engine --
   „can you remake the animation o some other engine or smth" — yes, and it
   was worth doing on its own account even though the judder above was
   something else.

   What it was. ix2 action lists a-65 „Room Card / Hover" and a-66 „Room Card
   / Out". On every mouseenter and every mouseleave GSAP flipped
   `.button-wrap-room-card` between `display: none` and `display: flex`,
   tweened its opacity, and tweened a translate on `.room-card-bottom-tile` —
   all as inline styles, on fifteen cards, through thirty listeners. It is
   un-bound in src/scripts/main.js, which also records why it had to be done
   there and not by editing the markup.

   Four things wrong with that, none of them fatal, all of them gone now:

     · a hover is not an animation timeline. It is a state, and CSS has had a
       word for it since 1996;
     · `display` is not animatable, so the engine had to flip it in a
       zero-duration step at each end of the timeline. Chrome rebuilds the
       layer tree when it does — measured at 8 `LayerTree.layerTreeDidChange`
       events per hover, against 0 for a mouse move over dead margin;
     · the buttons were `display: none` at rest, so the „Plačiau" link — the
       ONLY focusable thing in a room card — was not in the tab order. Every
       room card on the site was unreachable by keyboard;
     · GSAP writes `transform: translate(0px, -56px)`, a 2D translate, once a
       tween settles. Nothing about the sequence was compositor-friendly.

   The replacement is the same animation to the millisecond: 300ms, and
   `cubic-bezier(0, .55, .45, 1)` is easeOutCirc, which is what a-65's
   „outCirc" resolves to in the engine's easing table. The opacity keeps a-65's
   empty easing, which the engine maps to GSAP `none` — linear.

   `opacity: 0` plus `pointer-events: none` at rest, NOT `visibility: hidden`.
   Visibility would drop the link out of the tab order again, and then
   `:focus-within` could never fire, because that link is the only thing
   inside the card that can hold focus — the state would be unreachable by
   the very users it is there for. At opacity 0 the link is still a tab stop,
   tabbing to it opens the card, and `pointer-events: none` keeps the
   invisible buttons from swallowing a click meant for the card body (see
   widgets/cards.js, which forwards it).

   Nothing here moves in the layout. `.button-wrap-room-card` is
   `position: absolute` at `bottom: -64px` inside `.room-card-bottom-tile`, so
   it never occupied flow space and leaving it laid out permanently, at
   opacity 0, costs nothing.

   Performance.getMetrics still reports 2 layouts per hover, exactly as ix2
   did — the transform on `.room-card-bottom-tile` has to reposition the
   absolutely positioned button wrap inside it, once when the transition
   starts and once when it settles. Total layout time, 0.2ms. Layout was never
   what was wrong here and this does not pretend to have fixed it; it is
   recorded because a jump in LayoutCount is the first thing to check on a
   report like this one, and it is worth knowing that it was checked and came
   back clean.

   Keyed on `.link-room` and not on anything narrower, because that is the
   selector ix2 itself used: e-249/e-250 target the CLASS, so the reveal ran
   on all 17 pages that carry a room card — /kambariai/, /spa/, and the
   fifteen room detail pages — and it has to keep running on all of them.

   Above 992px only, for the same reason ix2 was: those events list
   mediaQueries ["main"], and below that `.button-wrap-room-card` is
   `position: static` (styles.css) — in flow, where hiding it WOULD move the
   card's contents. */
@media screen and (min-width: 992px) {
  .link-room .button-wrap-room-card {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s linear;
  }

  .link-room:hover .button-wrap-room-card,
  .link-room:focus-within .button-wrap-room-card {
    opacity: 1;
    pointer-events: auto;
  }

  .link-room .room-card-bottom-tile {
    transition: transform .3s cubic-bezier(0, .55, .45, 1);
  }

  .link-room:hover .room-card-bottom-tile,
  .link-room:focus-within .room-card-bottom-tile {
    transform: translateY(-56px);
  }
}

/* The end state, arrived at instantly. Someone who has asked their system for
   less motion still needs to see the buttons. */
@media (prefers-reduced-motion: reduce) {
  .link-room .button-wrap-room-card,
  .link-room .room-card-bottom-tile {
    transition: none;
  }
}