/* Prie Parko — page furniture for /verslui/, /pobuviai-ir-konferencijos/
   and /apie/. Loaded after prie-parko.css.

   These three pages carry more structured information than any template
   section was shaped to hold: a hall and four bedrooms' worth of specs, a
   run of distances, a ten-question FAQ. Dropped into the template's offer
   layout that information collapsed into one 676px column of prose — a
   document, not a page.

   The rule this file follows is the template's own: structure comes from the
   type scale and from whitespace. No tinted panels, no dashed rules, no
   bordered cards. A section is told apart from its neighbour by its ground
   (dark #081c2b or light #fdfcfb), by 120px of air, and by the size of the
   first thing in it. Every measurement below is a template token. */

/* ------------------------------------------------------------- sections --
   .section already sets z-index/position and 80px of padding; these widen it
   to the 120px the primary pages use and set the ground. */
.section.pp-sec {
  padding-top: var(--spacing-section-120);
  padding-bottom: var(--spacing-section-120);
}

.section.pp-sec.pp-dark {
  background-color: var(--colors-color-dark);
  color: var(--colors-color-light);
}

.section.pp-sec.pp-light {
  background-color: var(--colors-color-bg-1);
}

.section.pp-sec.pp-warm {
  background-color: var(--colors-color-bg-2);
}

/* The template rounds a light section's top corners and pulls it 24px over
   the dark one above. Keeps a long page from reading as stacked slabs. */
.section.pp-sec.pp-round {
  border-top-left-radius: var(--spacing-radius-24);
  border-top-right-radius: var(--spacing-radius-24);
  margin-top: -24px;
  padding-top: calc(var(--spacing-section-120) + 24px);
}

.section.pp-sec.pp-flush-top { padding-top: var(--spacing-section-80); }
.section.pp-sec.pp-flush-bottom { padding-bottom: var(--spacing-section-80); }

/* ------------------------------------------------------------- headings --
   Label, display line, lede. The lede is capped in characters rather than
   pixels so it stays a readable measure at any container width. */
.pp-hd {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 860px;
}

.pp-hd-title {
  font-family: var(--font--secondary);
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -2px;
  margin: 0;
}

.pp-hd-title em { font-style: italic; }

.pp-hd-lede {
  max-width: 62ch;
  font-size: var(--text-text-large-font-size);
  line-height: 150%;
  letter-spacing: var(--text-text-large-letter-spacing);
  margin: 0;
}

.pp-hd-lede + .pp-hd-lede { margin-top: -8px; }

/* A single quiet line that sends the reader to the other page. Sits under a
   heading block, not inside a panel. */
.pp-signpost {
  margin-top: 28px;
  font-size: .95rem;
  line-height: 1.6;
  opacity: .68;
}

.pp-signpost a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- spaces --
   One room per block, at the size a room deserves: a real photograph of it,
   its name in the display face, what it is for in plain sentences, and the
   two or three facts an organiser is actually looking for. Blocks alternate
   sides so the page has a rhythm without needing rules to separate them. */
.pp-spaces {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-section-96);
  margin-top: var(--spacing-title-margin-80);
}

.pp-space {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 72px;
  align-items: center;
}

.pp-space:nth-child(2n) .pp-space-media { order: 2; }

.pp-space-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--spacing-radius-24);
  aspect-ratio: 4 / 3;
  background-color: var(--colors-color-dark-16);
}

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

.pp-space-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 56ch;
}

.pp-space-idx {
  font-family: var(--font--main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .5;
}

.pp-space-name {
  font-family: var(--font--secondary);
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.02;
  letter-spacing: -1px;
  margin: 0;
}

.pp-space-body p {
  margin: 0;
  line-height: 1.62;
  opacity: .82;
}

/* --------------------------------------------------------------- metric --
   Label over value, laid out in a row. The shape of a spec without the box
   around it. Used under a space, and on its own for the practical facts. */
.pp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 44px;
  margin-top: 4px;
}

.pp-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.pp-meta-k {
  font-family: var(--font--main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .55;
}

.pp-meta-v {
  font-size: 1rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.pp-meta-v a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- facts --
   The same label/value pair set as a wide grid, for the runs of practical
   information that used to be a bulleted paragraph. */
.pp-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 56px;
  margin-top: var(--spacing-title-margin-80);
}

.pp-fact-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 42ch;
}

.pp-fact-cell-k {
  font-family: var(--font--main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .55;
}

.pp-fact-cell-v { line-height: 1.55; }

/* -------------------------------------------------------------- numbers --
   Distances and scores. The display face at number sizes is the one place
   this template really sings, so the figure carries the section and the
   caption stays out of its way. */
.pp-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 48px 40px;
  margin-top: var(--spacing-title-margin-80);
}

.pp-num {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-num-v {
  font-family: var(--font--secondary);
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: .92;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.pp-num-k {
  font-family: var(--font--main);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: .6;
  line-height: 1.45;
}

.pp-nums-note {
  margin-top: 40px;
  max-width: 62ch;
  font-size: .92rem;
  line-height: 1.6;
  opacity: .6;
}

/* --------------------------------------------------------------- topics --
   Four or six short pieces that each stand alone — the formats a group can
   book, the occasions a family celebrates. Serif subhead, then sentences.
   No card, no border: the gap does the separating. */
.pp-topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 80px;
  margin-top: var(--spacing-title-margin-80);
}

.pp-topics.pp-topics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pp-topic {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 48ch;
}

.pp-topic-h {
  font-family: var(--font--secondary);
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.05;
  letter-spacing: -.5px;
  margin: 0;
}

.pp-topic p {
  margin: 0;
  line-height: 1.62;
  opacity: .8;
}

/* ------------------------------------------------------------ checklist --
   What is on the premises. Three columns of plain lines; the marker is a
   short rule the width of a hyphen, not a bullet and not a tick. */
.pp-checks {
  list-style: none;
  margin: var(--spacing-title-margin-80) 0 0;
  padding: 0;
  columns: 3;
  column-gap: 64px;
}

.pp-checks li {
  break-inside: avoid;
  margin: 0 0 20px;
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
  opacity: .86;
}

.pp-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 10px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

/* ---------------------------------------------------------------- steps --
   How an enquiry actually goes. Numbered in the display face so the sequence
   reads at a glance. */
.pp-steps {
  counter-reset: pp-step;
  list-style: none;
  margin: var(--spacing-title-margin-80) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 44px 48px;
}

.pp-step {
  counter-increment: pp-step;
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.55;
}

.pp-step::before {
  content: counter(pp-step, decimal-leading-zero);
  font-family: var(--font--secondary);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -1px;
  opacity: .42;
}

/* ------------------------------------------------------------------ Q&A --
   Two columns of question and answer. The question is the heaviest thing in
   its column, which is all the separation a FAQ needs. */
.pp-qa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 80px;
  margin-top: var(--spacing-title-margin-80);
}

.pp-q {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 52ch;
}

.pp-q-h {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.5px;
  margin: 0;
}

.pp-q p {
  margin: 0;
  line-height: 1.62;
  opacity: .74;
}

.pp-q a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- contact --
   Reception's number at a size that says "call this". */
.pp-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 80px;
  align-items: start;
  margin-top: var(--spacing-title-margin-80);
}

.pp-contact-lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pp-tel {
  font-family: var(--font--secondary);
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1;
  letter-spacing: -2px;
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.pp-tel:hover,
.pp-tel:focus-visible {
  text-decoration: underline;
  text-underline-offset: 8px;
}

.pp-contact-note {
  max-width: 46ch;
  line-height: 1.62;
  opacity: .78;
}

.pp-contact-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pp-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

/* ----------------------------------------------------------------- band --
   A single wide photograph used to change the page's pace. */
.pp-band:first-child { margin-top: 0; }

.pp-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--spacing-radius-24);
  aspect-ratio: 21 / 9;
  margin-top: var(--spacing-title-margin-80);
  background-color: var(--colors-color-dark-16);
}

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

.pp-band-cap {
  margin-top: 16px;
  font-size: .85rem;
  line-height: 1.5;
  opacity: .55;
}

/* --------------------------------------------------------------- places --
   Three portraits with a caption apiece: what is outside the door. */
.pp-places {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  margin-top: var(--spacing-title-margin-80);
}

.pp-place {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pp-place-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--spacing-radius-24);
  aspect-ratio: 4 / 5;
  background-color: var(--colors-color-dark-16);
}

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

.pp-place-dist {
  font-family: var(--font--main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}

.pp-place-name {
  font-family: var(--font--secondary);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -.5px;
  margin: 0;
}

.pp-place p {
  margin: 0;
  line-height: 1.6;
  opacity: .78;
}

/* ------------------------------------------------------------ two halves --
   A photograph beside a body of text, for the sections that are one idea
   rather than a list: the story of the house, the wedding day. */
.pp-halves {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 80px;
  align-items: center;
  margin-top: var(--spacing-title-margin-80);
}

.pp-halves.pp-halves-flip .pp-halves-media { order: 2; }

/* A portrait photograph beside a short body would tower over it, so the
   picture column gives width back to the text. */
.pp-halves:has(.pp-portrait) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }

.pp-halves-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--spacing-radius-24);
  aspect-ratio: 3 / 2;
  background-color: var(--colors-color-dark-16);
}

.pp-halves-media.pp-portrait { aspect-ratio: 4 / 5; }

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

.pp-halves-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 56ch;
}

.pp-halves-body p {
  margin: 0;
  line-height: 1.62;
  opacity: .82;
}

.pp-halves-body p.pp-lead-first {
  font-size: var(--text-text-large-font-size);
  line-height: 145%;
  opacity: 1;
}

/* ---------------------------------------------------------------- pairs --
   The four hotels of the group: name, town, one line. Reads as a list of
   real places rather than a set of tiles. */
.pp-pairs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px 48px;
  margin-top: 40px;
}

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

.pp-pair-n {
  font-family: var(--font--secondary);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -.5px;
}

.pp-pair-t {
  font-family: var(--font--main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .55;
}

.pp-pair-d {
  font-size: .95rem;
  line-height: 1.55;
  opacity: .78;
}

/* ----------------------------------------------------------- link strip --
   Where to go next. Three photographs at postcard size with the page name
   under them — no card, no tag pills. */
.pp-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: var(--spacing-title-margin-80);
}

.pp-next-item {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: inherit;
  text-decoration: none;
}

.pp-next-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--spacing-radius-24);
  aspect-ratio: 3 / 2;
  background-color: var(--colors-color-dark-16);
}

.pp-next-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.pp-next-item:hover .pp-next-media img,
.pp-next-item:focus-visible .pp-next-media img { transform: scale(1.04); }

.pp-next-name {
  font-family: var(--font--secondary);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.5px;
}

.pp-next-text {
  font-size: .95rem;
  line-height: 1.55;
  opacity: .72;
}

.pp-next-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
  border-radius: var(--spacing-radius-24);
}

/* ---------------------------------------------------------------- quote --
   One guest, quoted whole. Set in the display face at headline size on the
   section's own ground; no photograph behind it, so the words are legible
   and the attribution is not competing with a sky. */
.pp-quote {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1000px;
}

/* base.css gives every blockquote a 5px grey left border and 20px of padding —
   a bordered panel, which is exactly what this page does not use. Reset it and
   let the quotation marks and the type size do the work. */
.pp-quote-text {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font--secondary);
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.06;
  letter-spacing: -1.5px;
  margin: 0;
  max-width: 24ch;
}

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

/* -------------------------------------------------------- responsiveness */
@media (max-width: 1199px) {
  .pp-checks { columns: 2; }
  .pp-topics.pp-topics-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .section.pp-sec {
    padding-top: var(--spacing-section-96);
    padding-bottom: var(--spacing-section-96);
  }

  .section.pp-sec.pp-round { padding-top: calc(var(--spacing-section-96) + 24px); }

  .pp-space,
  .pp-halves,
  .pp-contact { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .pp-space:nth-child(2n) .pp-space-media,
  .pp-halves.pp-halves-flip .pp-halves-media { order: 0; }

  .pp-spaces { gap: var(--spacing-section-80); }

  .pp-topics,
  .pp-qa { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .pp-topics.pp-topics-3 { grid-template-columns: minmax(0, 1fr); }

  .pp-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pp-next { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .pp-quote-text { max-width: none; }
  .pp-quote { max-width: none; }
  .pp-halves:has(.pp-portrait) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .section.pp-sec {
    padding-top: var(--spacing-section-80);
    padding-bottom: var(--spacing-section-80);
  }

  .section.pp-sec.pp-round { padding-top: calc(var(--spacing-section-80) + 24px); }

  .pp-checks { columns: 1; }

  .pp-places { grid-template-columns: minmax(0, 1fr); }

  .pp-space-media,
  .pp-halves-media { aspect-ratio: 3 / 2; }

  .pp-band { aspect-ratio: 3 / 2; }

  .pp-meta { gap: 18px 32px; }

  .pp-nums { gap: 36px 28px; }

  .pp-steps { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-next-media img { transition: none; }
}


/* ###########################################################################
   ############  /galerija/ — rebuilt 2026-08-25. Nothing above  #############
   ############  this line was touched.                          #############
   ###########################################################################

   HISTORY, written down so this is not undone a third time.

   An earlier pass today threw the template's gallery hero away and put a plain
   cream band in its place — an eyebrow, a serif line, a tint — on the argument
   that the template's 804px of stock video showed no photographs. The client
   asked for the template's own treatment back, in these words: "the gallery
   page was not like this initially... it was like the template 'see 01' page
   and then under you had photos by category".

   Which of the three template galleries is "see 01" is not a guess: the
   template's own sales menu (the-lavender-shore (1)/gallery/gallery-a.html,
   .master-sales-pages) labels gallery-a.html "See (Gallery) #1", gallery-b
   "#2" and gallery-c "#3", and the template's nav item "See" points at
   gallery-a. So gallery-a it is, and gallery-a is what the top of the page now
   is: .video-gallery-a (the Wavy-Background loop the page banner already
   carries) wrapping a sticky .headline-gallery-a and eleven
   .image-wrap-gallery _1.._12 offsets, holding the hotel's own frames rather
   than the template's stock ones. The four categorised groups continue below
   it, all 148 photographs, unchanged.

   The wraps keep the template's data-w-id values and that is load-bearing, not
   cosmetic: ix2-data.json events e-253..e-263 are scoped by ELEMENT id to
   "684e794779ad24f44fa4c7e7|<data-w-id>", and 684e794779ad24f44fa4c7e7 is this
   page's pageRef, so they resolve here and only here. They are what drives the
   "Images Parallax" action list a-55, which moves each wrap's .image-cover
   child from -15% to 0%. Change a data-w-id and the parallax stops silently.
   The h1 keeps a9440458-2ca9-9506-c805-22d143bf8c6a (e-265, the blur reveal).

   The layout itself is entirely styles.css, untouched — .section.hero-gallery-a,
   .video-gallery-a, .headline-gallery-a, .master-images-gallery-a and the
   eleven numbered .image-wrap-gallery sizes, at all four breakpoints. The
   cream-hero rules that used to live here are gone rather than overridden;
   the earlier nav-ink patches went with them, because a dark hero is what the
   template's white navbar was drawn for and galerija.astro never set
   navInk="dark".

   Four things still need saying.
   ------------------------------------------------------------------------ */

/* (1) THE MOSAIC IS GONE. Client, 2026-08-26: „here maybe we dont need at all
   the first section w sticky title centered and photos gpong through it… just
   leave the title, no need for long scroll and get to the point".

   He is describing the cost, and the cost was measured: at 1440x900 the hero
   stood 4,092px tall on a 20,460px page — a fifth of the page was a pinned
   title with six photographs drifting past it before the reader reached the
   actual gallery. `.master-images-gallery-a` is out of the markup, and with it
   the eleven numbered `.image-wrap-gallery _1.._12` offsets, the 50vh opening
   gap and the six parallax wraps (their data-w-id values left with them, which
   is what happens when the elements ix2 was scoped to no longer exist; the h1's
   own a9440458-… blur reveal is untouched and still fires).

   THE SIX PHOTOGRAPHS DID NOT GO WITH IT. Every one of them was unique to the
   hero — none appeared in the 38 below — so deleting the section outright would
   have quietly cut the gallery from 44 frames to 38. They moved into the group
   each belongs to: e002/e017/e034 to „Aplinka ir kiemas" (exteriors and the
   courtyard terrace), g012/g014 to „Kambariai" (guest-room interiors), g065 to
   „Kotedžas ir apartamentai" — its shoot neighbours g063 (kitchenette), g066
   (cutlery drawer) and g069/g070 (living room with the stairs to the second
   floor) are the same unit, and it is a sitting room, which is what the
   apartments have and a plain room does not. The three count labels moved with
   them: 12→15, 14→16, 6→7. Total on the page: 44, before and after.

   What is left is a title block, on the site's ordinary hero measure rather
   than a value invented for this page: `--spacing-section-top-padding` above
   (216 / 180 / 140px, the same token /kambariai/, /apie/ and /gidas/ open on)
   and the base `.section` step below. The old `--spacing-section-120` bottom
   and its max-767 override existed to hold the mosaic off the grid and have
   nothing left to hold apart.

   (2) The dark band is gone. Client, 2026-08-26: „i dont like the blue header
   in gallery page, just remove it."

   It was the template's Wavy-Background loop over `--colors-color-dark`
   (#081c2b — a dark blue), with white type on top. Removing it is four
   changes, not one, because the video was carrying the section's structure as
   well as its colour: the `<div class="video-gallery-a …">` wrapper is out of
   the markup, the dark ground goes with it, the ink flips back to dark or the
   headline is white on cream, and the bottom padding the wrapper was holding
   moves onto the section. `galerija.astro` also gains `navInk="dark"`, or the
   navbar stays white over a light page. */
.section.hero-gallery-a {
  background-color: var(--colors-color-bg-1);
  color: var(--colors-color-dark);
  border-top: 0;
  padding-top: var(--spacing-section-top-padding);
  padding-bottom: var(--spacing-section-80);
}

/* The headline stays centred — that is the convention for this family of
   openers, .headline-offers-listing on /gidas/ is drawn the same way — but it
   stops being sticky. styles.css pins it at `top: 45%` so it could hold still
   while the mosaic scrolled past; with nothing left to scroll past, a sticky
   box whose containing block is its own height is inert at best and a stray
   45% offset waiting for a future wrapper at worst. */
.hero-gallery-a .headline-gallery-a { position: static; top: auto; }

/* (3) The categorized grid is now the template's own gallery-b device
   (gallery/gallery-b.html): one .gallery-b-halves per category, category name
   in the sticky left rail, photographs in the right rail's full/halves rhythm.
   .gal-grid no longer appears inside .gal-all — the homepage teaser (.see-b)
   keeps its own .gal-grid rules in prie-parko.css, untouched here.

   Two adjustments to the stock device:
   - prie-parko.css already re-pins .gallery-b-halves > .left-gallery-b to
     top: 18vh (min-992), but the template's base .left-gallery-b still carries
     transform: translate(0, -100%) from its stick-to-bottom original; with
     top: 18vh that transform lifts the rail clear off screen. Neutralize it.
   - The template shows one device per page; we stack four, so the stack needs
     its own step between categories. */
@media screen and (min-width: 992px) {
  .gal-all .gallery-b-halves > .left-gallery-b { transform: none; padding-bottom: 0; }
}

.gal-all .gallery-b-halves + .gallery-b-halves { margin-top: 120px; }

@media screen and (max-width: 991px) {
  .gal-all .gallery-b-halves + .gallery-b-halves { margin-top: 72px; }
}

/* (3b) The rail's type. The client asked twice for larger category names:
   they are section titles in everything but name, so they sit on the site's
   section-title step — text-h2, set as the class in the HTML, nothing here.
   What IS here: the template drew the 320px rail cap for a text-h4 line, and
   at h2 size it folds "apartamentai" against the cap instead of the column.
   Let the rail use its grid column. The description under each title stays on
   the body step and takes a ~50ch measure so it reads as a caption under the
   title, not a column running the height of the rail. */
.gal-all .gallery-b-halves > .left-gallery-b { max-width: none; }
.gal-all .left-gallery-b .text-body { max-width: 50ch; }

/* (4) THE CLOSING BLOCK — do not put a fixed height back on this section.
   The template floats the CTA video card out of it: the section is a fixed
   350px (250px below 992px) and .video-wrap-gallery is pulled up 400px (310px)
   over whatever is above. On the template's own gallery-a the thing above is
   one large image with slack at the bottom, so the bleed reads as an overlap.
   Here it is a masonry grid, and the card sliced the last row of photographs
   in half — measured at 1440px, three of the four columns cut mid-image.

   It failed at the other end too. The card's height follows its copy, and the
   lede wraps to three lines below 992px: the block measured 784px tall at
   768px inside a 250px section, so 123px of it painted over the footer, hiding
   "Pagrindinis", "Facebook" and the phone number. At 390px the same overlap
   swallowed "Pagrindinis".

   Both are the same mistake — a hand-tuned height standing in for content that
   is not a fixed height. The card goes back into normal flow and the section
   grows with it. .video-cta already carries 208/140/100px of its own padding,
   which is the air; the section adds none, exactly as prie-parko.css does for
   every other section whose only child is a .video-cta.

   The `:has(.video-cta)` on the selector is not decoration: prie-parko.css
   zeroes section padding for exactly this shape with
   `.section:not([class*="hero"]):has(> .video-cta)`, which misses here only
   because .video-cta is a grandchild rather than a child. Matching its
   specificity (0,3,0) is what stops the site-wide
   `.section:not([class*="hero"]):not(.cta-section)` rhythm from stacking
   another 101px on top of the card's own 208px. */
.section.cta-section-gallery-a:has(.video-cta) {
  height: auto;
  padding-top: var(--spacing-section-0);
  padding-bottom: var(--spacing-section-0);
}

.cta-section-gallery-a .video-wrap-gallery { top: auto; }

/* The `.hero-gallery-a .master-images-gallery-a { margin-top: 16vh }` that used
   to sit here — a trim of the template's 50vh opening gap — went out with the
   mosaic itself; see (1) above. Nothing on this page carries that class now. */

/* ==========================================================================
   /apie/ — perpieštos sekcijos
   „Ką svečiai įvertino" (.ppa-score),
   „Viešbutis, kuriame…" (.ppa-next), „Paveikslai ant sienų" (.ppa-art)
   ir „Keturi viešbučiai, viena šeima" (.ppa-family).

   „Mūsų istorija" (.ppa-story) ir šablono DUK juosta iš šio puslapio
   pašalintos 2026-08-27 kliento sprendimu.

   Kas iš kur paimta (byq):
   - .ppa-score   — kelvin-stats-1: pavadinimas kairėje, didelis skaičius
                    dešinėje, 1px linija tarp eilučių.
   - .ppa-art     — babka-cms-grid-2, sutrauktas iki vienos eilutės iš
                    trijų lygių kadrų be parašų (kliento prašymu).
   - .ppa-family  — kelvin-team-grid-4: sąrašas eilutėmis, didelis vardas
                    kairėje, maža žyma dešinėje. Žymeklį sekančių nuotraukų
                    iš to originalo čia nėra — trijų Klaipėdos viešbučių
                    kadrų neturime.

   Nė vienas byq originalas nebuvo perkeltas kartu su savo GSAP karkasu:
   naujo IX2 įvykio be src/data/ix2-data.json redagavimo neatsiranda, o
   elementas su style="opacity:0" ir be įvykio liktų nematomas amžiams.
   Vienintelės čia esančios opacity:0 gyvena ant elementų, kurių data-w-id
   ix2-data.json jau žino (keturios .ppa-fam-row ir .ppa-score-lede).

   Trys dalykai, kuriuos verta žinoti prieš liečiant:
   - Sekcijų vidinių tarpų čia NĖRA. Juos duoda prie-parko.css taisyklė
     .section:not([class*="hero"]):not(.cta-section) — jos savitumas 0-3-0,
     ir bet kokia vienos klasės taisyklė jai pralaimėtų, kad ir kaip vėlai
     būtų įkelta. Todėl jos ir nekartojame: ritmas ateina pats.
   - Naujų šrifto dydžių nė vieno, ir tai patikrinta matuojant, o ne
     samprotaujant. /apie/ turi tokius žingsnius (1440 px): 70,56 — 51,264 —
     28,8 — 17 — 16 — 12 — 10. Dideli balai ir viešbučių vardai stovi ant
     70,56 (text-h1), metai ir sekcijų antraštės — ant 51,264 (h2/text-h2),
     eilučių pavadinimai ir dalių balai — ant 28,8 (text-h4), sakiniai — ant
     17 (text-large), tekstas — ant 16 (text-body), žymos — ant 12 (label),
     žetonai ir parašai po nuotraukomis — ant 10 (label-small). text-h3
     (38,4) ir text-h5..h7 čia nenaudojami: tokių žingsnių puslapyje nėra.
   - Kortelių geometrija patvirtinta: neužpildyta, 1px hairline 12 % rašalo
     (šviesiose sekcijose) arba 16 % (tamsiose), 8 px tarpai tarp kadrų,
     16 px radiusas.
   ========================================================================== */

/* ------------------------------------------------ bendra sekcijų antraštė -- */
.ppa-score-head,
.ppa-next-head,
.ppa-art-head,
.ppa-fam-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: min(760px, 100%);
  margin-bottom: var(--spacing-title-margin-64);
}

.ppa-score-head > *,
.ppa-next-head > *,
.ppa-art-head > *,
.ppa-fam-head > * { margin: 0; }

/* Bendras žetonas: plaukelio rėmelis, apvalus galas, 10 px didžiosios.
   Jokio užpildo — užpildyta piliulė šioje svetainėje reikštų mygtuką. */
.ppa-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px 6px;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 20%, transparent);
  border-radius: var(--spacing-radius-full);
  color: var(--colors-color-dark-64);
  white-space: nowrap;
}

.ppa-chip-light {
  border-color: color-mix(in srgb, var(--colors-color-light) 32%, transparent);
  color: var(--colors-color-light);
}

/* ------------------------------------------------------------ /apie/ hero --
   2026-08-28: antraštė vėl yra du paprasti sakiniai, o ne po žodį span'uose.
   Centravimą anksčiau darė .wrap-h1 flex'as (justify-content: center) —
   žodžiai išėjo kartu su juo, tad centrą grąžina paprastas text-align.
   Dydžio nenurodome: .section.hero-about h1 taisyklė prie-parko.css jau
   laiko šią antraštę ant h1 žingsnio. */
.section.hero-about .headline-about h1 { text-align: center; }

/* ==================================================== „Ką svečiai įvertino" --
   Klientas apie ankstesnį variantą parašė „why is this doubled". Dubliavimo
   nebuvo: buvo du skirtingi skaičiai (8,5 ir 9,0), nupiešti tuo pačiu
   `label` + `text-h3` piešiniu vienoje toje pačioje eilučių poroje. Vaistas
   ne tekste, o formoje — vienas balas dabar yra didelė antraštė rėmelyje,
   kiti septyni yra plonų linijų sąrašas. Du skirtingi dalykai atrodo kaip
   du skirtingi dalykai. */
.section.ppa-score {
  background-color: var(--colors-color-dark);
  color: var(--colors-color-light);
}

.ppa-score-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.ppa-score-overall {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  border: 1px solid color-mix(in srgb, var(--colors-color-light) 16%, transparent);
  border-radius: var(--spacing-radius-main);
}

.ppa-score-overall > * { margin: 0; }

/* Balas yra didžiausias skaičius puslapyje ir turi tokiu atrodyti. Jokio
   naujo dydžio: tai text-h1, tas pats žingsnis, kuriuo surašyti viešbučių
   vardai sekcijos apačioje. */
.ppa-score-big { line-height: 1; }

.ppa-score-note {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--colors-color-light) 16%, transparent);
  color: var(--colors-color-light-64);
}

.ppa-score-list {
  border-bottom: 1px solid color-mix(in srgb, var(--colors-color-light) 16%, transparent);
}

.ppa-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid color-mix(in srgb, var(--colors-color-light) 16%, transparent);
}

.ppa-score-name { color: var(--colors-color-light-64); }

.ppa-score-num {
  justify-self: end;
  min-width: 72px;
  text-align: right;
  line-height: 1;
}

/* Juostelės plotis ateina iš paties balo (--ppa-score = balas × 10 %), o ne
   iš akies. Skalė 0–10 sąmoningai nepradedama nuo 8: nupjautas nulis
   padarytų 8,2 ir 9,5 skirtumą dešimt kartų didesnį, nei jis yra. */
.ppa-score-bar {
  position: relative;
  height: 4px;
  border-radius: var(--spacing-radius-full);
  background-color: color-mix(in srgb, var(--colors-color-light) 16%, transparent);
  overflow: hidden;
}

.ppa-score-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ppa-score, 0%);
  border-radius: inherit;
  background-color: var(--colors-color-bg-3);
}

.ppa-score-foot {
  max-width: min(760px, 100%);
  margin: 48px 0 0;
  color: var(--colors-color-light-64);
}

@media screen and (max-width: 991px) {
  .ppa-score-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* Juostelė yra papildoma, o ne pagrindinė informacija: siaurame lange ji
   suspaustų pavadinimą „Kainos ir kokybės santykis" į tris eilutes, todėl
   iškrenta pirma. Skaičius lieka visada. */
@media screen and (max-width: 767px) {
  .ppa-score-row { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .ppa-score-bar { display: none; }
  .ppa-score-overall { padding: 24px; }
}

/* „Kuo skiriamės" (.ppa-diff) — 2026-08-29 sekcija išimta savininko prašymu:
   ją perėmė .ks2-section aukščiau. Kartu išimtos ir jos taisyklės; likusios
   buvo .ppa-diff-split / -media / -frame / -caption / -list / -row / -index /
   -body / -chips. .ppa-chip lieka — juo naudojasi .ppa-fam-*. */

/* -------------------------------------------------- „Viešbutis, kuriame…" --
   Keturios kortelės, keturios nuorodos. Visa kortelė yra nuoroda, todėl
   spalva ir pabraukimas paveldimi, o ne mėlyni.

   2026-08-29: kortelėse atsirado nuotraukos. Kadras yra kortelės viduje, ne
   po ja — 8 px rėmelis aplink jį yra tas pats plaukelis, kuris apibrėžia
   kortelę, tad kadras skaitomas kaip kortelės dalis, o ne kaip atskiras
   paveikslėlis. Užvedus kadras pasistumia iki 1,04, ir tai vienintelis
   judesys, likęs kortelėje.

   Tą pačią dieną, vėliau: sekcija sukeista vietomis su „Kuo skiriamės" ir
   kartu pasiėmė jos tamsų foną. Plaukeliai ir užvedimo užpildas todėl
   skaičiuojami nuo šviesos, ne nuo rašalo, o kadro vieta iki nuotraukos
   dekodavimo laikoma tamsiu atspalviu — šviesus kvadratas ant tamsaus fono
   blykstelėtų. Numerių žetonai (01–04) ir eilutė po skirtuku išimti
   savininko prašymu. */
/* 2026-08-29, savininkas: „i think paddings above and below are too small".
   Sekcija ėmė bendrą .section ritmą (~100px); dabar ji yra pirmoji tamsi
   juosta po hero ir jai reikia daugiau oro — tas pats 160 žingsnis, kurį tą
   pačią dieną gavo „Kuo skiriamės". */
/* Klasė rašoma tris kartus (0-4-0): puslapio ritmo taisyklė prie-parko.css
   `.section:not([class*="hero"]):not(.cta-section)` yra 0-3-0 ir dviejų klasių
   versiją nurungia — išmatuota, sekcija liko prie 100,8px vietoj 160. */
.section.ppa-next.ppa-next.ppa-next {
  padding-top: var(--pp-section-gap-lg);
  padding-bottom: var(--pp-section-gap-lg);
}

.section.ppa-next {
  background-color: var(--colors-color-dark);
  color: var(--colors-color-light);
}

/* The large gap's clamp floor (112px) is generous on a phone, where the four
   cards stack and the section is already long. */
@media screen and (max-width: 767px) {
  .section.ppa-next.ppa-next.ppa-next {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.ppa-next-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ppa-next-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
  padding: 8px 8px 20px;
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--colors-color-light) 16%, transparent);
  border-radius: var(--spacing-radius-main);
  transition: border-color .3s ease, background-color .3s ease;
}

.ppa-next-card:hover {
  border-color: color-mix(in srgb, var(--colors-color-light) 36%, transparent);
  background-color: color-mix(in srgb, var(--colors-color-light) 6%, transparent);
}

.ppa-next-card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.ppa-next-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  /* a dark tint holds the space until the photograph decodes */
  background-color: color-mix(in srgb, var(--colors-color-light) 10%, transparent);
}

.ppa-next-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.ppa-next-card:hover .ppa-next-frame img { transform: scale(1.04); }


.ppa-next-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 12px 0;
  min-width: 0;
}

.ppa-next-body > * { margin: 0; }




/* the text block now ends the card, so it carries the bottom padding */
.ppa-next-body { padding: 4px 12px 4px; }

@media (prefers-reduced-motion: reduce) {
  .ppa-next-frame img { transition: none; }
  .ppa-next-card:hover .ppa-next-frame img { transform: none; }
}

@media screen and (max-width: 1199px) {
  .ppa-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
  .ppa-next-grid { grid-template-columns: minmax(0, 1fr); }
  .ppa-next-frame { aspect-ratio: 16 / 10; }
}

/* ======================================================== „Mūsų istorija" --
   Buvo keturios siauros skiltys viena šalia kitos; klientas paprašė kitokio
   formato. Dabar tai lipni antraštė kairėje ir ištisos eilutės dešinėje —
   metai užaugo nuo 28,8 iki 51,3 px, o įvykiui atiteko visa pastraipos
   plotis, o ne trys žodžiai eilutėje. */
/* ================================================== „Paveikslai ant sienų" --
   Menas turi savo sekciją. Anksčiau jis dalijosi bloku su keturiais šeimos
   viešbučiais — dvi temos viename bloke, ir būtent tas blokas klientui
   nepatiko. Šviesus fonas čia yra darbo įrankis, o ne skonis: virš jos ir
   po ja stovi dvi tamsios sekcijos, ir be jos jos susilietų į vieną. */
.section.ppa-art { background-color: var(--colors-color-bg-1); }

/* Klientas: „make the collage smaller, less high, no labels for photo — just
   one row". Buvo dvi eilutės — per visą plotį gulantis 21:9 kadras, po juo
   du 3:2 — ir trys parašai po jais. Dabar viena eilutė iš trijų lygių kadrų,
   be parašų: sekcijos tekstas jau pasako, kad tai restorano sienos, o trys
   antraštės po nuotraukomis kartojo tą patį trimis būdais.

   Kadras 4:3, ne 3:2: trečdalio pločio stulpelyje 3:2 nukristų iki maždaug
   190 px aukščio ir paveikslo ant sienos jame nesimatytų. */
/* 50 / 25 / 25, kliento prašymu. Kadrai nebeturi savo proporcijos: jei
   kiekvienas laikytųsi 4:3, dvigubai platesnis pirmasis būtų ir dvigubai
   aukštesnis, o eilutė nustotų būti eilute. Aukštį dabar nustato pati juosta,
   o kadrai ją užpildo — plotis skiriasi, apatinis kraštas lygus. */
.ppa-art-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  /* Be eksplicitinės eilutės kadrai perpildydavo juostą: .ppa-art-frame
     height:100% neturėjo į ką atsiremti (eilutė auto), tad portretiniai
     kadrai (547×820) krisdavo į savo proporciją — 334 px pločio stulpelyje
     tai 501 px aukščio prieš 374 px juostą, ir apačia lįsdavo 26 px į tamsią
     .ppa-family sekciją (išmatuota 1440 px). 100% eilutė duoda apibrėžtą
     aukštį, ir cover pjauna kadrą, o ne stumia juostą. */
  grid-template-rows: 100%;
  gap: 12px;
  height: clamp(300px, 26vw, 420px);
}

.ppa-art-tile { margin: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.ppa-art-frame {
  position: relative;
  height: 100%;
  border-radius: var(--spacing-radius-main);
  overflow: hidden;
}

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

@media screen and (max-width: 991px) {
  .ppa-art-grid { gap: 8px; }
}

@media screen and (max-width: 767px) {
  /* Trys kadrai po 4:3 telefone būtų trys ekranai. Viena eilutė lieka, bet
     slenkama pirštu. */
  .ppa-art-grid {
    display: flex;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ppa-art-frame { height: auto; aspect-ratio: 4 / 3; }
  .ppa-art-grid::-webkit-scrollbar { display: none; }
  .ppa-art-tile { flex: 0 0 78%; scroll-snap-align: center; }
}

/* ======================================= „Keturi viešbučiai, viena šeima" --
   Keturios didelės plytelės viena po kitos pakeistos sąrašu: numeris,
   vardas ir miestas vienoje eilutėje, 1px linija tarp jų. Vardas lieka ant
   to paties 70,56 px žingsnio, kuriuo jis buvo — sumažėjo ne raidė, o
   tarpai aplink ją.

   Sekcija tebeturi klasę about-number-section: iš jos ateina 500 px
   apatinis tarpas, ant kurio užsilipa cta-section-gallery vaizdo įrašas.
   Ją nuėmus CTA persidengimas subyrėtų. */
.ppa-fam-list {
  border-bottom: 1px solid color-mix(in srgb, var(--colors-color-light) 16%, transparent);
}

.ppa-fam-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid color-mix(in srgb, var(--colors-color-light) 16%, transparent);
}

.ppa-fam-name { line-height: 1; }

/* Vienintelė eilutė, kurioje svečias jau yra, pasižymima spalva, o ne
   dydžiu: keturi vardai lieka tos pačios reikšmės. */
.ppa-fam-row.is-here .ppa-fam-name { color: var(--colors-color-bg-3); }

.ppa-fam-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  justify-self: end;
}

.ppa-fam-city { white-space: nowrap; }

/* 2026-08-28, klientas: trys Klaipėdos viešbučiai turi būti tikros nuorodos
   su aiškiu ženklu, kad paspaudus išeisi kitur. Eilutė tampa <a>, o
   mechanika pasiskolinta iš šio paties puslapio, ne išrasta: žetonas su
   adresu ir „→" — tas pats piešinys kaip „Esate čia" žetonas, o
   užvedimo/fokuso elgesys — tas pats fono ir rėmelio perėjimas bei
   :focus-visible kontūras kaip ant .ppa-next-card. (Analogiška .ppa-next-go
   rodyklė 2026-08-29 iš kortelių išimta; šita lieka.)
   „Prie Parko" eilutė lieka <div> be žetono su adresu: ji jau pažymėta
   „Esate čia" ir smėlio spalvos vardu — dabartinis puslapis neatrodo
   spaudžiamas. */
a.ppa-fam-row {
  color: inherit;
  text-decoration: none;
  transition: background-color .3s ease;
}

a.ppa-fam-row:hover { background-color: color-mix(in srgb, var(--colors-color-light) 6%, transparent); }

.ppa-fam-go { transition: border-color .3s ease; }

a.ppa-fam-row:hover .ppa-fam-go,
a.ppa-fam-row:focus-visible .ppa-fam-go {
  border-color: color-mix(in srgb, var(--colors-color-light) 64%, transparent);
}

a.ppa-fam-row:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.ppa-fam-foot { margin-top: 32px; }

/* Apatinis tarpas — atgal į šablono skaičius. Išmatuota, o ne nuspėta:
   .video-wrap-gallery pasitraukia 400 px į viršų (≤767 px — 310 px), o
   prie-parko.css ritmo taisyklė .section:not([class*="hero"]):not(.cta-section)
   (0-3-0) nurungia styles.css .section.about-number-section (0-2-0) ir palieka
   čia tik 100,8 px. Skirtumas — 300 px — ir buvo tai, kas uždengė dvi
   paskutines eilutes bei parašą po jomis (išmatuota: vaizdo įrašo viršus
   8630 px, paskutinė eilutė 8664–8783 px).

   Ši taisyklė yra 0-3-0 ir stovi vėlesniame faile, todėl laimi. Nurodomas
   tik padding-bottom: viršutinį tarpą ir toliau duoda bendras ritmas.
   Skaičiai — patys šablono (styles.css: 500 / 450 / 350 / 300); ties 479 px
   šablonas duoda 300 px prieš 310 px pasitraukimą, t. y. 10 px per mažai,
   todėl ten 330. Taisyklė sąmoningai pririšta prie .ppa-family, o ne prie
   .about-number-section: kitų puslapių šiuo pataisymu neliečiame. */
.section.about-number-section.ppa-family { padding-bottom: 500px; }

@media screen and (max-width: 991px) {
  .section.about-number-section.ppa-family { padding-bottom: 450px; }
}

@media screen and (max-width: 767px) {
  .section.about-number-section.ppa-family { padding-bottom: 350px; }
}

@media screen and (max-width: 479px) {
  .section.about-number-section.ppa-family { padding-bottom: 330px; }
}

@media screen and (max-width: 767px) {
  .ppa-fam-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px 16px;
    padding: 20px 0;
  }
  .ppa-fam-meta { grid-column: 2 / -1; justify-self: start; justify-content: flex-start; }
}

/* ---------------------------------------------------------- mažiau judesio --
   Šiose sekcijose animacijų nėra — tik pereinamosios spalvos ant .ppa-next
   kortelių. Jos irgi nutyla, kai sistema to prašo. Lipnumas paliekamas:
   position: sticky nėra judesys, jį valdo pats slinkimas. */
@media (prefers-reduced-motion: reduce) {
  .ppa-next-card { transition: none; }
  a.ppa-fam-row { transition: none; }
  .ppa-fam-go { transition: none; }
}