/* pp-rooms — the sections added to the eight room detail pages.
   Loaded after prie-parko.css, and linked site-wide, so every rule here is
   scoped to a class that only the room pages carry. Nothing restyles the
   template's own components.

   The template gets its structure from type scale and whitespace, so these
   blocks add neither panels nor rules: the content grid is the same
   .pp-head / .pp-grid / .pp-list vocabulary already used by the homepage
   family section, and the gallery reuses .image-wrap-gallery and
   .gallery-slide-text-wrap straight from the template's gallery pages. */

/* ------------------------------------------------------------ rhythm --
   Three sections now sit between the room body and the map. They must not
   read as one continuous column of text, so each gets a full section step
   above it.

   This block predates the site-wide --pp-section-gap rhythm in prie-parko.css,
   whose 0-3-0 rule now paces all of these sections: the .ppr-section paddings
   below lose to it, and the old 96 + 120 scheme is gone. This bottom padding
   was the one fragment still winning (same 0-3-0, later file), which left the
   room-body seam the only off-rhythm one on the page — measured 72px against
   100.8px everywhere else at 1440. It now states the shared token instead. */
.section.body-room-section.ppr-room-body {
  padding-bottom: var(--pp-section-gap);
}

/* ------------------------------------------------------ the body gutter --
   „i find the gap between the two cols a bit too huge, no?"

   The gutter is `grid-column-gap: 136px` (styles.css:2978), and that was two
   thirds of the hole. `.room-halves` is `2fr 1fr`, so at 1440 the prose track
   comes out 816.66px wide while `.room-body` caps the prose itself at 760px:
   56.66px of that track is dead, and what the reader actually sees between the
   last word and the booking card is 136 + 56.66 = 192.66px.

   Which is why cutting the gap on its own does not fix it — measured, at 64px
   the split re-flows to 864.66 / 432.34 and the visible gap is still 168.66px.
   The dead track has to go too. So the prose track is capped at the measure the
   prose already uses and the card takes the remainder: the gutter is then
   exactly `column-gap` at every width, with nowhere left for it to hide.

   72px, because that is the column gap the room pages' own two-column grid
   (.ppr-grid-2, below) already runs. The prose is not widened to close the gap
   from the other side: at 760px a line here is already ~105 characters, which
   is past a comfortable measure, not short of one.

   The card grows 408 -> 529px at 1440. That is the trade, not a side effect —
   1361 minus the prose minus the gutter is the width, and it has to go
   somewhere. min(100%, 640px) stops it running away inside the 1800px
   container, where `justify-self: end` keeps it pinned to the right edge every
   other section aligns to.

   Wrapped in min-width: 992px because styles.css:5258 collapses this grid to a
   single column below that, and this sheet is linked later — unwrapped, these
   would win there too and put the booking card back beside the text on a
   phone. */
@media (min-width: 992px) {
  .room-halves {
    column-gap: 72px;
    grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  }

  .room-halves > .property-sticky-info {
    justify-self: end;
    width: min(100%, 640px);
  }
}

/* ---------------------------------------------------- the room headline --
   „id give this a bit more breathing room"

   The back-link, a 70.56px h1 and the spec row all sat 24px apart, so the
   headline had the same rhythm as the two small lines fencing it in and never
   got to be the headline: at that size the descender of „kambarys" runs most of
   the way down to the icons underneath it. 40px between the three, and the 64
   step under the block instead of 40 — the margin every other section title on
   the site already carries.

   Only the row gap is restated. The column gap is inert here (the block is a
   one-column flex), so leaving it at 24 keeps the diff to the thing that moved.

   min-width: 992px for the same reason as the block above: styles.css tightens
   this to 20px at 991 and to a 32px bottom margin at 479, and both are earlier
   in the cascade than this sheet. */
@media (min-width: 992px) {
  .headline-room {
    row-gap: 40px;
    margin-bottom: var(--spacing-title-margin-64);
  }
}

.section.ppr-section {
  padding-top: var(--spacing-section-120);
  padding-bottom: var(--spacing-section-0);
}

.section.ppr-section.ppr-section-last {
  padding-bottom: var(--spacing-section-120);
}

/* .pp-head carries its own 64px top margin for use as a page's first block.
   Here the section padding already does that job. */
.ppr-section .pp-head {
  margin-top: 0;
  max-width: 760px;
}

/* Two-column variant of the shared content grid. */
.ppr-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 72px;
}

/* Distances read as "86 m"; prices as "50 €/val." or "30–46 m²", which are
   wider. The shared 4.5rem column clips those, so the room pages widen it. */
.ppr-section .pp-item:has(.pp-dist) {
  grid-template-columns: 6rem 1fr;
}

/* Two buttons, centred like every other .pp-foot on the site. */
.pp-foot.ppr-foot {
  justify-content: center;
  gap: 12px 16px;
}

/* A column that carries one price should not leave its other items hanging
   in the price gutter: give every item in that column the same two tracks,
   and push the priceless ones into the second. */
.ppr-section .pp-col:has(.pp-dist) .pp-item { grid-template-columns: 6rem 1fr; }
.ppr-section .pp-col:has(.pp-dist) .pp-item:not(:has(.pp-dist)) .pp-body { grid-column: 2; }

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

@media (max-width: 767px) {
  .ppr-section .pp-item:has(.pp-dist),
  .ppr-section .pp-col:has(.pp-dist) .pp-item { grid-template-columns: 5rem 1fr; }
}

/* ----------------------------------------------------------- gallery --
   Six photographs in the template's own rounded image wells: one wide, one
   tall beside it, a row of three, then a full-width band. Heights are fixed
   per breakpoint exactly as .image-wrap-gallery does in styles.css, so the
   row edges line up instead of drifting with each photo's aspect ratio. */
.ppr-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  margin-top: var(--spacing-title-margin-80);
}

.ppr-gal {
  position: relative;      /* .image-wrap-gallery has no position of its own,
                              and the caption scrim is absolutely placed */
  height: auto;
}

.ppr-gal-a { grid-column: span 4; height: 520px; }
.ppr-gal-b { grid-column: span 2; height: 520px; }
.ppr-gal-c { grid-column: span 2; height: 340px; }
.ppr-gal-d { grid-column: span 6; height: 420px; }

/* The template's caption scrim, scaled down for a grid tile and set flush
   left so it reads as a caption rather than a title card. */
.ppr-gal .gallery-slide-text-wrap {
  height: 116px;
  padding: 24px;
  text-align: left;
  justify-content: flex-start;
}

.ppr-gal .gallery-slide-text-wrap .label {
  color: var(--colors-color-light);
}

@media (max-width: 991px) {
  .ppr-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ppr-gal-a { grid-column: span 2; height: 380px; }
  .ppr-gal-b { grid-column: span 1; height: 320px; }
  .ppr-gal-c { grid-column: span 1; height: 320px; }
  .ppr-gal-d { grid-column: span 2; height: 320px; }
  .ppr-gal .gallery-slide-text-wrap { height: 100px; padding: 20px; }
}

@media (max-width: 767px) {
  .ppr-gallery { grid-template-columns: 1fr; }
  .ppr-gal-a,
  .ppr-gal-b,
  .ppr-gal-c,
  .ppr-gal-d { grid-column: span 1; height: 260px; }
}

/* -------------------------------------------------------------- map --
   The homepage's satellite section is reused verbatim on the room pages and
   deliberately gets no overrides here. Its pins are absolutely positioned in
   percentages of the section box while the map itself is object-fit: cover,
   so changing the section's height re-crops the image and the pins stop
   pointing at the right places. It keeps its own 900px min-height, and the
   FAQ section below keeps its -24px overlap, so the rounded corners reveal
   against the map exactly as they do on the homepage. */


/* ============================================================================
   2026-08-25 — room pages: one row pattern, tabbed use cases, styled table
   ----------------------------------------------------------------------------
   The client's note was "why are these not separated and still all different
   format? one is table, one has icons, other doesnt". Three blocks sat under
   the room copy in three different layouts:

     Patogumai            icon chips in a two-column grid, no rules
     Kaimynystėje         name / distance / walking-time rows with rules
     Praktinė informacija label-over-value tiles with rules

   Kaimynystėje is gone — distances belong to the map section, which sits a
   screen below and already carries all of them (standing rule on this project;
   the location facts had spread across six sections). That removes one of the
   three formats outright.

   The two that remain are both label+value lists, so they now share one row:
   detail_offers.html's .info-list-offer / .info-list-offer-item — a dashed
   hairline split row, label left, value right. Same rule, same padding, same
   min-height, same label type, in both blocks. Each block gets a full-width
   dashed divider, an eyebrow and a real <h2> so the two read as two things.

   Everything below is scoped to a class the room pages carry. The template's
   own .info-list-offer is untouched (it lives on a dark section and draws its
   rules in light-48, which is invisible here — hence the colour overrides).
   ========================================================================== */

/* ----------------------------------------------------- the two fact blocks --
   .room-body already puts 64px between its children; the extra 32px plus the
   divider above each heading is what makes the split unmistakable. */
.room-body > .ppr-facts {
  margin-top: var(--spacing-title-margin-32);
}

.ppr-facts-head {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  margin-bottom: var(--spacing-title-margin-32);
}

/* .label sets align-items: flex-end for its own icon-beside-text use; in a
   heading stack that pushes the eyebrow off its own baseline. */
.ppr-facts-head .label {
  align-items: flex-start;
}

/* prie-parko.css levels every `.section [class*="headline"] > h2` to the h2
   step so section titles stop drifting — and .headline-room-small is caught by
   that attribute match. These two are not section titles: they are block
   headings inside a 760px body column set in 20px copy, so 51px would out-rank
   the room's own h1. Held at the h5 step, one class deeper so it wins. */
.section .ppr-facts .ppr-facts-head > h2 {
  font-size: var(--text-h5-font-size);
  line-height: var(--text-h5-line-height);
  letter-spacing: var(--text-h5-letter-spacing);
}

/* ------------------------------------------------------------- the chips --
   2026-08-25d — "can we just make chips or smth,,,?????". Fourth shape for
   the room block, and this one is the template's own: every amenity is a
   .tag-offer pill — the same chip the offer pages already wear — with the
   glyph the client asked back once before ("why you removed the icons? they
   were cool") inside it. Nothing is demoted into a trailing sentence any
   more, so the wrap holds a different count on every page: seven pills on
   the single, nine on the cottage. .ppr-chip only extends the template
   class on these eight pages; .tag-offer itself is untouched. */
.ppr-chip-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.ppr-chip {
  grid-column-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  display: flex;
}

.ppr-chip-icon {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: .8;
}

/* Carries the one figure the deleted "Užsakoma atskirai" band held that the
   list above did not: which of these are extras, and where to order them. */

/* The pill treatment that used to live here styled .ppr-suits .about-a-right,
   .tabs-menu-features as a wrap row and .tab-link-features as a pill. None of
   that markup exists any more (the block is now the template accordion, see the
   2026-08-25b section at the foot of this file), so the rules were deleted
   rather than left to fight their replacements. */

/* ------------------------------------------- /kambariai/ comparison table --
   "style thios better". It was a bare <table> with the site's default rules.
   Same values, same em-dashes, same "Dalyje numerių" — only the treatment
   changes: hairline rules, 20px rows, a quiet label-type header, the room name
   doing the work in h7, tabular figures so the m² columns line up, and a
   visible affordance for the sideways scroll it already had.

   These override prie-parko.css's earlier rules for the same selectors; this
   sheet is linked after it, and the specificity is equal on purpose. */
.room-compare-scroll {
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--colors-color-dark-16) var(--colors-color-dark-4);
  /* Komarov scrolling shadows. The first two layers are flat bg-1 panels
     pinned to the content (`local`), so they ride away with the table and
     uncover the shadow only on the side that still has table left. They are
     flat rather than faded on purpose: --colors-color-*-0 resolves to
     transparent BLACK, so a gradient into it smudges grey on this near-white
     ground. The shadows themselves start dark, so fading those is safe. */
  background-image:
    linear-gradient(var(--colors-color-bg-1), var(--colors-color-bg-1)),
    linear-gradient(var(--colors-color-bg-1), var(--colors-color-bg-1)),
    linear-gradient(to right, var(--colors-color-dark-16), var(--colors-color-dark-0)),
    linear-gradient(to left, var(--colors-color-dark-16), var(--colors-color-dark-0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 18px 100%, 18px 100%, 18px 100%, 18px 100%;
  background-attachment: local, local, scroll, scroll;
}

.room-compare-scroll::-webkit-scrollbar {
  height: 6px;
}

.room-compare-scroll::-webkit-scrollbar-track {
  border-radius: var(--spacing-radius-full);
  background: var(--colors-color-dark-4);
}

.room-compare-scroll::-webkit-scrollbar-thumb {
  border-radius: var(--spacing-radius-full);
  background: var(--colors-color-dark-16);
}

.room-compare-caption {
  padding-bottom: var(--spacing-title-margin-32);
}

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

.room-compare thead th {
  font-family: var(--text-label-small-font-family);
  font-size: var(--text-label-small-font-size);
  line-height: var(--text-label-small-line-height);
  font-weight: var(--text-label-small-font-weight);
  letter-spacing: var(--text-label-small-letter-spacing);
  text-transform: uppercase;
  color: var(--colors-color-dark-48);
  border-bottom: 1px solid var(--colors-color-dark-32);
  padding-top: 0;
  padding-bottom: 14px;
  vertical-align: bottom;
  white-space: nowrap;
}

/* First column carries the row: it is the only cell you read to find your way
   back to a room, so it gets the size, the link — and it stays put while the
   rest scrolls, otherwise a phone shows six columns of numbers with nothing to
   attach them to. Sticky cells need `separate` borders: with `collapse` the
   table owns the rules and Chrome leaves them behind when the cell sticks.
   Only bottom borders are set, so nothing doubles up. */
.room-compare {
  border-collapse: separate;
  border-spacing: 0;
}

.room-compare th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid var(--colors-color-dark-8);
  background-color: var(--colors-color-bg-1);
}

/* The row tint has to be mixed into an opaque colour: the sticky cell cannot
   be transparent or the scrolled columns show through it. */
.room-compare tbody tr:hover th:first-child {
  background-color: color-mix(in srgb, var(--colors-color-dark) 4%, var(--colors-color-bg-1));
}

.room-compare tbody th {
  font-family: var(--text-h7-font-family);
  font-size: var(--text-h7-font-size);
  line-height: var(--text-h7-line-height);
  font-weight: var(--text-h7-font-weight);
  letter-spacing: var(--text-h7-letter-spacing);
  min-width: 268px;
  padding-right: var(--spacing-title-margin-48);
}

.room-compare tbody td {
  font-variant-numeric: tabular-nums;
  color: var(--colors-color-dark-64);
  /* A comparison cell that wraps ("11–15 / m²") stops being comparable. The
     wrapper scrolls, so let the columns take the width they need. */
  white-space: nowrap;
}

.room-compare tbody tr {
  transition: background-color .2s ease;
}

.room-compare tbody tr:hover {
  background-color: var(--colors-color-dark-4);
}

@media (max-width: 767px) {
  .room-compare th,
  .room-compare td {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 24px;
  }

  .room-compare tbody th {
    min-width: 200px;
    padding-right: var(--spacing-title-margin-32);
  }
}


/* ============================================================================
   2026-08-25b — the client's seven notes on the room pages
   ----------------------------------------------------------------------------
   Everything below is scoped to a class only the eight room pages and
   /kambariai/ carry. Nothing restyles a template component for the rest of
   the site.
   ========================================================================== */

/* The 24px .ppr-row-icon that answered "why you removed the icons? they
   were cool" moved into the chips: the glyphs now sit at 18px inside
   .ppr-chip (see the 2026-08-25d chip section above), one per pill, every
   glyph still from the existing 25-icon set and never repeated on a page. */

/* ---------------------------------------------- 5 · air above the title --
   "more padding above the title in room page."

   Every hero on the site opens on --spacing-section-top-padding (216 / 180 /
   140px). On the room pages the h1 is preceded only by a small "Visi
   kambariai" back-link rather than a full eyebrow-and-label stack, so the
   same 216px reads tighter here than it does on /kambariai/ or /gidas/.
   One step of the template's own title scale is added on top: +48 above 992,
   +32 below it, which lands at 264 / 212 / 172px. */
.section.hero-room {
  padding-top: calc(var(--spacing-section-top-padding) + var(--spacing-title-margin-48));
}

@media (max-width: 991px) {
  .section.hero-room {
    padding-top: calc(var(--spacing-section-top-padding) + var(--spacing-title-margin-32));
  }
}

/* ------------------------------------------------- 2 · "Kam tinka" tabs --
   "obviously this is a shitty tabs section, take another one from byq or
   smth."

   Picked: the template's own tab accordion from homepage/home-b.html
   (.explore-home-b — .tab-accordion-top-tile / .tab-accordion-bottom-tile
   inside .tabs-features). Three reasons over the other candidates:

     · it is the same .w-tabs component, so src/scripts/widgets/tabs.js keeps
       driving it — click, arrow keys, Home/End, roving tabindex, role=tab,
       aria-selected and aria-controls all still come from the widget, and no
       new JavaScript is added;
     · the open/close animation is already in the exported interaction data
       (a-83 "Tab Accordion / Open" and a-84, fired by TAB_ACTIVE /
       TAB_INACTIVE on .tab-link-features, targeted by CLASS and not scoped to
       a page), so it works here untouched;
     · it has presence. Each use case becomes a full-width card with its title
       on the h5 step, and the paragraph is visible inside the open card
       instead of in a pane below a row of pills — while a large photograph
       swaps beside it. A row of pills gave the section one line of type.

   The template's own layout is kept: image left, accordion bottom-right.
   Beyond the headline (below), three things change — the pane height
   (872px was sized for a five-item menu; three items need 620), and the
   active state, which the template paints in light-48 on a dark ground and
   would be invisible on this near-white one. */




/* 872px was sized for home-b's five-item menu. Measured here across all
   eight rooms and all three tabs, the tallest open accordion is 402px at
   1440 (448 at 1024); 560 leaves it air, and the menu is bottom-anchored so
   its last card always sits level with the foot of the photograph. The
   headline no longer shares this box — it sits in flow above it. */





/* The 01/02/03 markers are gone from the markup (2026-08-25): the three
   cases are parallel, not a sequence, so the numbers encoded nothing — and
   numbering reads as ranking. The .ppr-suits-num rules went with them. */


/* The section stopped being „Kam tinka" (three personas) and became „Numeriai
   skiriasi": the tabs now name individual rooms — Nr. 14, Nr. 49 — because
   that is what the copy underneath the personas was always about. Naming a
   room raises the obvious question, so one line of framing sits under the
   heading and answers it: ask for the number in the enquiry, we check.
   Held to 62ch — the headline band runs the full row and body copy at that
   measure is unreadable. */

@media (max-width: 991px) {
  /* Stacked, same in-flow band as desktop now — only capped at the width
     the serif needs for two lines. */



}

@media (max-width: 767px) {
}

/* --------------------------------------------------- 3 · room galleries --
   "why is this so bare and empty?"

   It was. Four photographs sat in a three-column grid whose first tile spans
   two columns, so a two-photo group left a third of its row empty, a
   three-photo group left two thirds of a second row empty, and a one-photo
   group left two thirds of its only row empty. The two group names were the
   only text, each alone above a hole.

   Three changes, no text over the photographs (standing rule on this
   project):

     · each group name is a bare label; the client asked for the dashed
       dividers to go (2026-08-26: "remove the dividers, just have big
       paddings"), so the groups are separated by the site's own
       --pp-section-gap rhythm instead of by a rule;
     · the tiles are laid on the template's six-column measure with the
       composition chosen by how many photographs the group actually has, so
       every row is full at every breakpoint;
     · the section ends on a link into the full gallery instead of stopping
       dead after the last frame.

   Heights are fixed per breakpoint exactly as .image-wrap-gallery does in
   styles.css, so row edges line up instead of drifting with each photo's
   aspect ratio. */





/* A group with more photographs than one composition holds stacks them as
   consecutive .rk-shots rows, spaced like the grid gap. */

.ppr-gallery-section .rk-foot {
  margin-top: var(--spacing-title-margin-64);
}

@media (max-width: 991px) {


  .ppr-gallery-section .rk-shot,
  .ppr-gallery-section .rk-shots-2 > .rk-shot:nth-child(1),
  .ppr-gallery-section .rk-shots-2 > .rk-shot:nth-child(2),
  .ppr-gallery-section .rk-shots-3 > .rk-shot:nth-child(1),
  .ppr-gallery-section .rk-shots-3 > .rk-shot:nth-child(2),
  .ppr-gallery-section .rk-shots-4 > .rk-shot:nth-child(1),
  .ppr-gallery-section .rk-shots-4 > .rk-shot:nth-child(2),
  .ppr-gallery-section .rk-shots-4 > .rk-shot:nth-child(3),

  /* An odd tile out takes the full width rather than half a row. */
  .ppr-gallery-section .rk-shots-1 > .rk-shot:nth-child(1),
}

@media (max-width: 767px) {

  .ppr-gallery-section .rk-shot,
  .ppr-gallery-section .rk-shots-1 > .rk-shot:nth-child(1),
  .ppr-gallery-section .rk-shots-2 > .rk-shot:nth-child(1),
  .ppr-gallery-section .rk-shots-2 > .rk-shot:nth-child(2),
  .ppr-gallery-section .rk-shots-3 > .rk-shot:nth-child(1),
  .ppr-gallery-section .rk-shots-3 > .rk-shot:nth-child(2),
  .ppr-gallery-section .rk-shots-3 > .rk-shot:nth-child(3),
  .ppr-gallery-section .rk-shots-4 > .rk-shot:nth-child(1),
  .ppr-gallery-section .rk-shots-4 > .rk-shot:nth-child(2),
  .ppr-gallery-section .rk-shots-4 > .rk-shot:nth-child(3),
}

/* ----------------------------------- 7 · one voice in the comparison table --
   "still too many different fonts, not template like enough."

   Audited at 1440: caption 12/700/3px uppercase accent-2, column heads
   10/700/2px uppercase dark-48, row heads 18-20/500 dark, cells 16/400
   dark-64, footnote 12/400 dark-64 — five combinations, four of them inside
   the table, plus eight underlined links in the first column.

   Reduced to three steps inside the table, all of them the template's own:
   --text-label-small for the caption and the column heads (the caption was
   the odd one out, on --text-label in the accent, a third uppercase micro
   label within 200px of the section's own "Palyginimas"), --text-h7 for the
   room name, --text-text-body for every value. The footnote below the table
   keeps --text-text-small, the template's footnote step.

   The underline goes with it: a column of eight underlined links reads as a
   fifth voice. The row name stays a link and still underlines on hover and
   on focus. Not one value in the table changes. */
.room-compare tbody th .link-inline {
  color: inherit;
  text-decoration: none;
}

.room-compare tbody th .link-inline:hover,
.room-compare tbody th .link-inline:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* prie-parko.css paints .room-compare-caption in accent-2 at the same
   specificity as the .text-dark-48 utility and from a sheet that loads after
   it, so the class on the element cannot win. Set here, where it can: the
   caption and the column heads are now one step down to the ink. */
.room-compare-caption {
  color: var(--colors-color-dark-48);
}

/* ============================================================================
   2026-08-25d — "here also literally bad way to present it, table would be
   much better."
   ----------------------------------------------------------------------------
   The hotel block is nine house facts that each carry a value — a time, a
   price, a yes/no. The two-column strip of prose lines made the reader dig
   the value out of every sentence; a real <table> puts the fact in one
   column and its value in the other, in the same voice the /kambariai/
   comparison table already speaks: hairline bottom rules, body-type cells,
   tabular figures so 10 € / 20 € / 50 € stack. The scroll wrapper is
   insurance only — both columns wrap, so it never actually engages. */
.ppr-hotel-scroll {
  overflow-x: auto;
}

.ppr-hotel-table {
  width: 100%;
  border-collapse: collapse;
}

.ppr-hotel-table th,
.ppr-hotel-table td {
  font-family: var(--text-text-body-font-family);
  font-size: var(--text-text-body-font-size);
  line-height: var(--text-text-body-line-height);
  font-weight: var(--text-text-body-font-weight);
  letter-spacing: var(--text-text-body-letter-spacing);
  border-bottom: 1px solid var(--colors-color-dark-16);
  padding: 14px 0;
  text-align: left;
  vertical-align: baseline;
}

/* The fact column holds a steady left edge for the values: wide enough for
   "Stovėjimo aikštelė viešbučio kieme" on one line at 1440, and it simply
   wraps below 768. */
.ppr-hotel-table th {
  width: 45%;
  padding-right: 32px;
}

.ppr-hotel-table td {
  color: var(--colors-color-dark-64);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .ppr-hotel-table th {
    padding-right: 20px;
  }
}

/* .ppr-facts-head > h2 is levelled to the h5 step above; the hotel strip's
   heading steps down to the label voice instead, one class deeper so it
   wins. Colour comes from .text-accent-2 on the element. */
.section .ppr-facts.ppr-hotel .ppr-facts-head > h2 {
  font-family: var(--text-label-font-family);
  font-size: var(--text-label-font-size);
  line-height: var(--text-label-line-height);
  font-weight: var(--text-label-font-weight);
  letter-spacing: var(--text-label-letter-spacing);
  text-transform: uppercase;
}

.ppr-hotel .ppr-facts-head {
  margin-bottom: 20px;
}

/* ------------------------------------------------- room chips, readable --
   The chips inherited `.label-small`: 10px, uppercase, 2px tracking. That is
   the template's metadata voice — right for a „4 svečiai" tag on a card,
   wrong for the room's actual selling points, which is what these are. Body
   step, sentence case, normal tracking. */
.ppr-facts .tag-offer .label-small,
.ppr-chips .tag-offer .label-small {
  font-size: var(--text-text-body-font-size, 16px);
  line-height: 1.3;
  letter-spacing: -.1px;
  text-transform: none;
  font-weight: 500;
}
.ppr-facts .tag-offer,
.ppr-chips .tag-offer { padding: 10px 16px; }
.ppr-facts .tag-offer img,
.ppr-chips .tag-offer img { width: 20px; height: 20px; }

/* The footnote under the hotel table carries real money — what is not in the
   room price — so it should not be the smallest thing on the page. */
.ppr-facts-note,
.ppr-table-note {
  font-size: var(--text-text-body-font-size, 16px);
  line-height: 1.5;
  max-width: 68ch;
}

/* ============================================================================
   2026-08-26 (round 2) — BLOCK A/B/C, written on kambarys_didysis-seimyninis
   and kambarys_dvivietis-kambarys.

   Everything here is keyed on a class all eight room pages already carry, so
   it lands on all eight at once and the three agents working the other six
   pages need only the markup — no CSS of their own for these three sections.
   ========================================================================== */

/* ---------------------------------------- A · „Numeriai skiriasi", rebuilt --
   The client: "the use cases need to be remade with a different section from
   byq, cooler, more fitting the vibe."

   Taken: byq `truebase-tabs-1`, "Audience Tabs with Hover Image Reveal" — a
   photograph on the left, a vertical list of items on the right, hovering an
   item brings its photograph up, hairline rules between items, a pill eyebrow
   over a serif-italic heading, warm cream ground.

   Rebuilt on the machinery that was already here rather than beside it. The
   block stays a .w-tabs component, so widgets/tabs.js keeps giving it click,
   arrow keys, Home/End, roving tabindex, role=tab/tabpanel, aria-selected and
   the 400ms cross-fade; widgets/suits.js adds ONE thing — entering a row
   activates the tab a click would activate — behind (hover: hover) and
   (pointer: fine) so a tap is still just a tap, and putting focus back where
   it was so a passing pointer does not steal it. prefers-reduced-motion is
   handled in that widget too: the fade duration is read off the element at
   init and cannot be changed from here.

   Three visual changes to the accordion this replaces:
     · the cards lose their dashed borders — the client asked the dashed rules
       off the page — and become rows split by a structural hairline;
     · every item's paragraph is visible at once instead of one at a time. The
       three differences between rooms of a type are the content the section
       exists for, and a body that opens on hover would have animated its
       height 500ms on every pointer crossing. The wrapper is renamed
       .ppr-suits-tab-copy in the markup so ix2's a-83/a-84 („Tab Accordion /
       Open|Close", which target `.tab-accordion-bottom-tile` by class) find
       nothing to collapse. No interaction data is edited, and home-b's own
       accordion keeps its class and its animation;
     · the active row is marked by an accent rail that grows down its left
       edge, not by a filled panel — the ground is cream now, and a tinted
       card on a tinted band reads as a box inside a box. */


/* The pill eyebrow. `.label` sets align-items: flex-end for its own
   icon-beside-text use, which drops the text off the pill's centre line. */

/* Top-aligned columns: the menu used to be bottom-anchored so its last card
   sat level with the foot of a fixed-height photograph. With the copy open the
   list sets its own height, and the photograph follows it. */





/* .w--current is painted by an earlier rule in this file as a filled bg-2
   panel; on a bg-2 band that is a box you cannot see. The rail replaces it. */





/* Every paragraph is readable at once, so none of them may be dimmed past the
   step the rest of the site uses for secondary copy. */

@media (hover: hover) and (pointer: fine) {
}

@media (prefers-reduced-motion: reduce) {
  .ppr-suits .ppr-suits-menu > .ppr-suits-tab::before,
}

@media (max-width: 991px) {
  /* Stacked, photograph first: with the copy open the list is taller than a
     screen, so a photograph under it would be off-screen at the moment it
     changed. */
}

@media (max-width: 767px) {
}

/* ------------------------------------------------- B · the room stat grid --
   The client asked for "a clean icon grid: 32 m² / King bed / 2 guests / …".
   This is the chip row upgraded in place, not a fifth block about the same
   subject: same .ppr-facts tile, same heading, six tiles instead of nine
   pills. Card geometry as approved — unfilled, 1px hairline at 12% ink, 8px
   gaps, 16px radius. Value on the body step, caption on label-small: no new
   type sizes. */

.ppr-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  border-radius: 16px;
}

.ppr-stat-icon {
  flex: none;
  width: 26px;
  height: 26px;
}

.ppr-stat-value {
  font-weight: 500;
  line-height: 1.35;
}

.ppr-stat-label {
  color: var(--colors-color-dark-48);
}

@media (max-width: 767px) {
  .ppr-stat { padding: 16px; }
}

/* ------------------------------------------------ C · „Kas numeryje" grid --
   The client: "break the room down into little details" under grouped
   headings, "much more useful than a giant paragraph." Four groups — Miegas,
   Prausimasis, Darbas, Poilsis — on the site's own content-grid vocabulary
   (.pp-grid / .pp-col / .pp-list / .pp-item), the same one /restoranas/ uses
   for the breakfast tables, so the section needs no shapes of its own. Only
   the column count and a hairline over each group are new.

   The media queries below repeat the column count on purpose: prie-parko.css
   sets `.pp-grid` at (0,1,0) inside its own queries, and `.ppr-inside .pp-grid`
   is (0,2,0) — without these, four columns would survive down to 320px. */




@media (max-width: 1199px) {
}

@media (max-width: 767px) {
}