/* Room detail pages — the in-room sections (what is in the room, whether the
   room suits you, and what happens beyond its door). A separate sheet so the
   room rebuild never has to touch pp-sections.css or pp-rooms.css, which the
   listing page and other pages also read. Loaded from Base.astro after
   pp-sections.css, so at equal specificity these rules win.

   Three sections live here, each a byq layout rebuilt in the template's own
   tokens — no imported CSS, no utility classes, no second colour system:

     1. .ppr-spots — byq `kelvin-value-features-11`, "Interactive Product
        Hotspot Explorer". Pins over the room photograph; one panel open at a
        time beside it. Replaces a four-column amenity list whose every caption
        repeated its own label.
     2. .ppr-fit — byq `babka-value-features-7`, "Value Comparison Two-Column
        Feature List". „Tinka" against „Rinkitės kitą numerį". New section.
     3. .ppr-day — byq `babka-process-4`, "Scrolling Timeline With Polaroid
        Stack". The day at the hotel, hour by hour, beside a sticky stack of
        photographs. Replaces a three-tab block that mixed three subjects.

   Nothing here is scoped to one room: every measurement is a ratio or a token,
   and the only per-room values (hotspot coordinates) live in the HTML. See
   research/notes/room-sections-spec.md. */

/* ==================================================================== 1 ====
   .ppr-spots — hotspot explorer
   ------------------------------------------------------------------------ */

.ppr-spots .ppr-spots-wrap {
  display: grid;
  /* The photograph is the subject and has to stay readable at a glance; the
     panel is one short paragraph. 1.35:1 gives the stage a 3:2 frame around
     740px at 1440 — large enough that a 44px pin reads as a pin on a bed
     rather than a sticker on a thumbnail. */
  grid-template-columns: 1.45fr 1fr;
  gap: 48px;
  margin-top: var(--spacing-title-margin-64);
  align-items: stretch;
}

/* The stage does NOT clip: the pins are its children and a focus ring sits
   3px outside a pin, so `overflow: hidden` here would shave the ring off every
   pin near an edge. The rounding and the clipping belong to the frame inside. */
.ppr-spots-stage {
  position: relative;
  align-self: start;
  /* 16:10, not the photograph's native 3:2. The panel beside it stretches to
     this box, and at 3:2 the box was 509px tall against ~330px of text — half
     of the tile was empty, which is what „card is a bit not filled out" was
     looking at. A shorter stage and a narrower panel column close most of that
     gap from both ends; the crop cost is 6% off the top and bottom of a
     photograph that is `object-fit: cover` anyway. */
  aspect-ratio: 16 / 10;
}

.ppr-spots-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--spacing-radius-main);
  /* The ground shows through until the photograph decodes; bg-4 is the sand
     tint, so that moment is warm rather than a grey hole. */
  background-color: var(--colors-color-bg-4);
}

.ppr-spots-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------- the pins ---
   Position comes from the markup, one pin at a time:

     <button class="ppr-spot" style="--spot-x: 54%; --spot-y: 63%" …>

   Percentages of the stage, measured from its top-left, centred on the pin.
   Custom properties rather than data-attributes read by JavaScript: the pins
   are then in place at first paint instead of after the widget boots, and the
   stylesheet stays the only thing that knows about geometry. */
.ppr-spot {
  position: absolute;
  left: var(--spot-x, 50%);
  top: var(--spot-y, 50%);
  transform: translate(-50%, -50%);
  z-index: 2;

  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  color: var(--colors-color-light);
  background-color: color-mix(in srgb, var(--colors-color-dark) 34%, transparent);
  border: 1px solid color-mix(in srgb, var(--colors-color-light) 56%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  transition:
    background-color .4s cubic-bezier(.22, 1, .36, 1),
    border-color .4s cubic-bezier(.22, 1, .36, 1),
    color .4s cubic-bezier(.22, 1, .36, 1),
    transform .4s cubic-bezier(.22, 1, .36, 1);
}

.ppr-spot-icon {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}

.ppr-spot:hover,
.ppr-spot:focus-visible,
.ppr-spot.is-current {
  color: var(--colors-color-dark);
  background-color: var(--colors-color-light);
  border-color: var(--colors-color-light);
  transform: translate(-50%, -50%) scale(1.12);
}

.ppr-spot:focus-visible {
  outline: 2px solid var(--colors-color-light);
  outline-offset: 3px;
}

/* A pin on a photograph is not obviously a control, so the ones nobody has
   opened yet breathe once every few seconds. The pulse is a ring drawn outside
   the pin, not a change of the pin itself, so it never moves the icon and
   never competes with the hover state — which is why `.is-current` drops it. */
.ppr-spot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--colors-color-light) 72%, transparent);
  animation: ppr-spot-pulse 3s cubic-bezier(.22, 1, .36, 1) infinite;
  pointer-events: none;
}

.ppr-spot.is-current::after,
.ppr-spot:hover::after {
  animation: none;
  opacity: 0;
}

@keyframes ppr-spot-pulse {
  0%        { transform: scale(1);    opacity: .85; }
  60%, 100% { transform: scale(1.85); opacity: 0; }
}

/* ------------------------------------------------------------ the panel ---
   One column, one panel visible. It stretches to the stage so the block never
   changes height as the reader moves from pin to pin — the photograph would
   otherwise walk up and down the screen under the pointer. */
.ppr-spots-panels {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* Top, not centre. Centring made a short panel float in the middle of a tall
     box with air above and below it; from the top the eyebrow lines up with
     the top of the photograph and the meta table falls where it falls. */
  justify-content: flex-start;
  padding: 40px;
  border-radius: var(--spacing-radius-main);
  background-color: var(--colors-color-bg-2);
}

/* `flex: 1` so the open panel fills the tile, and the meta table below takes
   `margin-top: auto` to sit on the tile's bottom edge. Measured at 1440 the
   five panels run 235–286px of content in a 411px box; left to stack from the
   top that is 125–176px of dead space under the last row. Pinned, the same
   space becomes the gap between the paragraph and the facts — a composition
   rather than a hole, and one that holds steady as the reader moves from pin
   to pin instead of shrinking and growing. */
.ppr-spot-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* `[hidden]` is a UA `display: none`, which the rule above would otherwise
   out-specify and leave every panel on screen at once. */
.ppr-spot-panel[hidden] { display: none; }

.ppr-spot-panel.is-open {
  animation: ppr-spot-panel-in .45s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes ppr-spot-panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.ppr-spot-title { max-width: 24ch; }

/* byq gives every panel a big number in a mono face. Two things were wrong
   with carrying that across. It was a fifth type style in a card that already
   had four — the only element on the page set in the display serif while its
   neighbours were sans — and only two of five pins had an honest number to put
   in it, so the three without one looked like cards someone had forgotten to
   finish. The number now lives as one row of the meta table below, where a
   panel that has no number simply has one row fewer instead of a hole.

   What is left is three type styles: the eyebrow (.label), the title (.text-h5)
   and the copy (.text-body). The meta table borrows the eyebrow for its names
   and the body step for its values, so it adds no sixth thing. */
.ppr-spot-meta {
  margin: 4px 0 0;
  margin-top: auto;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ppr-spot-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--colors-color-dark-16);
}

.ppr-spot-meta-name {
  margin: 0;
  font-family: var(--text-label-font-family);
  font-size: var(--text-label-font-size);
  font-weight: var(--text-label-font-weight);
  letter-spacing: var(--text-label-letter-spacing);
  text-transform: uppercase;
  color: var(--colors-color-dark-48);
}

.ppr-spot-meta-value {
  margin: 0;
  text-align: right;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--colors-color-dark);
}

.ppr-spot-copy {
  margin: 0;
  max-width: 46ch;
  line-height: 1.55;
  color: var(--colors-color-dark-64);
}

/* ---------------------------------------------------------- the leftovers -
   Not everything in a room is in the frame. These are the fittings the
   photograph cannot show, as a plain strip under the stage — a name and a line
   that says something the name does not. Nothing here repeats its own label. */
.ppr-spots-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: var(--spacing-title-margin-64);
}

.ppr-spots-extra-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--colors-color-dark-16);
}

.ppr-spots-extra-name { font-weight: 600; line-height: 1.3; }

.ppr-spots-extra-line {
  font-size: var(--text-text-body-font-size);
  line-height: 1.55;
  color: var(--colors-color-dark-64);
}

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

  /* Stacked, the panel no longer has a photograph to match, so it sizes to its
     own content and gains a floor: the shortest panel and the longest differ
     by about a line and a half, and without this the page jumps under the
     thumb every time a pin is tapped. */
  .ppr-spots-panels {
    align-self: auto;
    min-height: 320px;
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .ppr-spot { width: 38px; height: 38px; }
  .ppr-spot-icon { width: 16px; height: 16px; }
  .ppr-spots-panels { padding: 24px; min-height: 300px; }
  .ppr-spots-extra { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ppr-spot { transition: none; }
  .ppr-spot::after { animation: none; opacity: 0; }
  .ppr-spot-panel.is-open { animation: none; }
}

/* ==================================================================== 2 ====
   .ppr-fit — „Tinka" against „Rinkitės kitą numerį"
   ------------------------------------------------------------------------ */

/* The band is tinted so three new sections in a row do not read as one long
   scroll of cream. It is also why the affirmative card is the white one: on
   the tint, white reads as the foreground and the dashed outline as the aside,
   which is the same weighting byq gets from its two greys. */
.section.ppr-fit { background-color: var(--colors-color-bg-2); }

/* `stretch`, not `start`: the two cards hold four and five rows of different
   lengths, and left to themselves one ended 60px shorter than the other, which
   reads as one of them having been cut off. Both cards are column flex
   containers, so stretching costs nothing but a taller box on the shorter
   side. */
.ppr-fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: var(--spacing-title-margin-64);
  align-items: stretch;
}

.ppr-fit-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 40px;
  border-radius: var(--spacing-radius-main);
}

.ppr-fit-card-yes {
  background-color: var(--colors-color-bg-1);
  border: 1px solid var(--colors-color-dark-8);
}

/* Dashed, not a second fill: the template already says „this is the quieter
   one" with a dashed border — .section-divider and the room tabs both do. */
.ppr-fit-card-no {
  background-color: transparent;
  border: 1px dashed var(--colors-color-dark-32);
}

.ppr-fit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ppr-fit-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}

.ppr-fit-mark {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* The mark sits on the first line of the text next to it, not on the top of
     the box: the text is 20px at 1.45, so its cap centre is ~14px down. */
  margin-top: 3px;
}

.ppr-fit-mark svg { width: 12px; height: 12px; display: block; }

.ppr-fit-mark-yes {
  background-color: var(--colors-color-accent-2);
  color: var(--colors-color-light);
}

.ppr-fit-mark-no {
  background-color: transparent;
  border: 1px solid var(--colors-color-dark-32);
  color: var(--colors-color-dark-48);
}

.ppr-fit-text {
  margin: 0;
  line-height: 1.45;
}

.ppr-fit-card-no .ppr-fit-text { color: var(--colors-color-dark-64); }

/* --------------------------------------------------------- the next step --
   Two buttons on a line under the cards read as a form's footer, and they sat
   close enough to the second card to look like part of it. The client asked
   for separation and for „lil cards with photos"; byq's `reforma-contact-2`
   does exactly that shape — a tall photograph with an eyebrow and a name set
   over a gradient, and the detail underneath — so this is that, resized from
   a full section down to a footer strip.

   The separation is padding, not a rule. The client's standing instruction on
   this project is „remove the dividers, just have big paddings". */
.ppr-fit-foot {
  margin-top: clamp(64px, 5.5vw, 104px);
}

.ppr-fit-foot-line {
  color: var(--colors-color-dark-64);
  max-width: 62ch;
  margin-bottom: var(--spacing-title-margin-32);
}

/* „now too big and important, this was supposed to be a secondary suggestion."
   It was: two 16:10 photo cards the full width of the section, which is the
   weight of an offer rather than of a footnote. Same card, laid on its side —
   a small square thumbnail, the name and one line beside it, so it reads as an
   aside to the comparison above rather than a second pitch.

   760px was too far the other way. At 1440 the row is 1361px, so the pair took
   56% of it and each card got a 194px body — the name set in TWO lines of
   fourteen characters and the sentence under it in three of twenty-eight. That
   is not a small card, it is a squeezed one. 1120px keeps the aside shape and
   gives the text a measure it can actually use: the name lands on one line,
   the sentence on two. */
.ppr-next-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: min(1120px, 100%);
}

.ppr-next-card {
  display: grid;
  /* 176px, up from 132, in step with the wider strip: the photograph keeps its
     share of the card instead of turning into a stamp beside it. The body
     column comes out at ~332px, which is what buys the name its single line. */
  grid-template-columns: 176px minmax(0, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--spacing-radius-main);
  background-color: var(--colors-color-bg-1);
  border: 1px solid var(--colors-color-dark-8);
  color: inherit;
  text-decoration: none;
  transition: border-color .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}

.ppr-next-card:hover { border-color: var(--colors-color-dark-32); }

.ppr-next-card:focus-visible {
  outline: 2px solid var(--colors-color-accent-2);
  outline-offset: 3px;
}

/* „better but image is not cutting the cards, no?"

   `aspect-ratio: 1 / 1` on a stretched grid item is a trap. The row is as tall
   as the text beside it — 133.55px at 1440 — the frame stretches to that, and
   the ratio then sized the WIDTH off that height: a 133.55px frame inside a
   104px column. Because the frame is `position: relative` and the text block
   beside it is not, the 29.55px of overflow painted OVER the text: measured,
   „Dvivietis kambarys" rendered as „vivietis kambarys", „11–15 m²" as „–15 m²",
   and every line under them lost its first characters to the photograph.

   So the frame is simply its cell now: the column's width by the row's height,
   no ratio in it. The photograph fills that cell edge to edge, which leaves 1px
   of inset on the top, left and bottom — the card's own hairline border at 8%
   dark — and the corners are cut by the card's 16px radius, which is what
   `overflow: hidden` on the card was there for all along.

   The 1px is deliberately not chased. A child cannot bleed under it: overflow
   clipping happens at the padding box, so a negative margin would be clipped
   straight back off. Removing the border to gain a pixel would cost the card
   its edge. */
.ppr-next-frame {
  position: relative;
  overflow: hidden;
  background-color: var(--colors-color-bg-4);
}

.ppr-next-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.ppr-next-card:hover .ppr-next-photo { transform: scale(1.04); }

/* At thumbnail size there is no room to set the name over the photograph, so
   the whole text block moves out beside it. The gradient overlay went with it. */
.ppr-next-over {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

/* The area was set as a full `.label`: 12px at 3px of tracking, which is the
   spacing of a section eyebrow. Beside an 18px name beginning at -0.5px it read
   as the louder of the two. It is a tag on the name, so it is sized and tracked
   like one. */
.ppr-next-meta {
  color: var(--colors-color-dark-48);
  font-size: 11px;
  letter-spacing: 1.4px;
}

.ppr-next-title {
  color: var(--colors-color-dark);
  line-height: 1.25;
  letter-spacing: -.3px;
  text-wrap: balance;
}

.ppr-next-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 24px;
  min-width: 0;
}

/* 14px, not the 12px small token. At 12px against an 18px name the sentence sat
   two steps down — the size of a caption, not of the line that has to sell the
   room — and it is the only running text in the card, so it carries the measure.
   1.5 -> 1.55 because the line is longer now. */
.ppr-next-line {
  color: var(--colors-color-dark-64);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -.1px;
}

.ppr-next-arrow {
  flex: none;
  align-self: center;
  margin-right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--colors-color-dark-16);
  color: var(--colors-color-dark);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.ppr-next-arrow svg { width: 16px; height: 16px; display: block; }

.ppr-next-card:hover .ppr-next-arrow {
  background-color: var(--colors-color-accent-2);
  border-color: var(--colors-color-accent-2);
  color: var(--colors-color-light);
}

@media (max-width: 991px) {
  .ppr-fit-grid { grid-template-columns: 1fr; gap: 24px; }
  .ppr-fit-card { padding: 32px; }
  /* The comparison above is one column here, so the cap has nothing left to
     hold the strip narrower THAN — it just wastes the row. */
  .ppr-next-cards { max-width: none; }
}

@media (max-width: 767px) {
  .ppr-next-cards { grid-template-columns: 1fr; max-width: none; gap: 12px; }
  .ppr-next-card { grid-template-columns: 108px minmax(0, 1fr) auto; }
  .ppr-next-body { padding: 16px 16px 16px 18px; }
  .ppr-next-arrow { margin-right: 14px; width: 28px; height: 28px; }
  /* The body column is 191px at 390, so the desktop sizes cost the longest name
     a third line and the sentence a fourth. One step down on each holds them to
     two and three. */
  .ppr-next-title { font-size: 16px; }
  .ppr-next-line { font-size: 13px; }
}

@media (max-width: 767px) {
  .ppr-fit-card { padding: 24px; gap: 24px; }
  .ppr-fit-list { gap: 16px; }
}

/* ==================================================================== 3 ====
   .ppr-day — the day at the hotel
   ------------------------------------------------------------------------ */

.ppr-day-grid {
  display: grid;
  /* .62, down from .78: the photograph column has to stay SHORTER than the
     timeline or the sticky does nothing and the column runs on past the last
     step. Narrowing it shortens the prints and lengthens the text beside them,
     which moves both numbers the right way at once. */
  grid-template-columns: 1fr .62fr;
  gap: 64px;
  margin-top: var(--spacing-title-margin-64);
  align-items: start;
}

.ppr-day-track {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One rule down the left, drawn by the steps rather than by the list, so it
   starts at the first dot and stops at the last one instead of running past
   both ends of the column. */
.ppr-day-step {
  position: relative;
  padding-left: 40px;
  /* 68px, up from 44: at 44 the next step's time label sat close enough to the
     previous step's last line to read as part of the same block. */
  padding-bottom: 68px;
}

.ppr-day-step:last-child { padding-bottom: 0; }

.ppr-day-step::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 0;
  width: 1px;
  background-color: var(--colors-color-dark-16);
}

.ppr-day-step:last-child::before { display: none; }

.ppr-day-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 1px solid var(--colors-color-accent-1);
  background-color: var(--colors-color-bg-1);
  box-shadow: inset 0 0 0 3px var(--colors-color-bg-1), inset 0 0 0 9px var(--colors-color-accent-1);
}

.ppr-day-time {
  display: block;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.ppr-day-title { margin: 0 0 10px; }

.ppr-day-copy {
  margin: 0;
  max-width: 56ch;
  line-height: 1.55;
  color: var(--colors-color-dark-64);
}

/* ---------------------------------------------------------- the photographs
   byq stacks polaroids in a sticky aside and flies them in on scroll. The
   stack is kept — three frames, staggered and turned a degree or two, so the
   column reads as a handful of prints rather than a strip of thumbnails. The
   sticky is not:

     „I wouldnt make the cards sticky. but maybe they could move a bit when I
      come to the section initially? Like scamble slightly?"

   Removed rather than tuned. The round before this one spent its effort giving
   the pin somewhere to go — cropping the photographs to 16:9 so the column
   would come out shorter than the timeline, buying about 170px of travel — and
   none of that is worth keeping if the behaviour itself is not wanted. The crop
   stays, on its own merits (see .ppr-day-shot); the pin goes.

   What replaces it is a one-off entrance: the three prints settle out of a
   slight scatter the first time the section is on screen, and then never move
   again. See the entrance block below the caption. */
.ppr-day-media {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Tilted and staggered again, with the caption inside the frame.

   The first build carried byq's polaroid stack across whole — tilt, stagger,
   AND the caption on a cream mount underneath. The client's note was „the
   cards with images are a bit fucked layout, maybe put text on the image with
   some gradient to make it visible", so the caption moved onto the photograph.
   I also flattened the stack, and that was over-correcting a note that had not
   asked for it: „why are the cards no longer tilted and kinda dynamic?".

   So the tilt is back, and the two changes are separable — which is the point.
   What made the stack read badly was the caption sitting on a mount below each
   frame, at 12px, while the frames were three different widths: the mounts
   were the thing that did not line up. Captions inside, the tilt is just a
   tilt.

   The frames are all one width now (the stagger is `align-self`, not a width
   change), so nothing has a ragged edge, and the rotations are under two
   degrees.

   No shadow: „shadows dont match the template style, dont use them."

   The one that was here was `0 20px 44px -30px` at 62% dark — a tight, dark
   lift under each print. The template writes one shadow and one only,
   `0 4px 16px dark-8, 0 8px 24px dark-8`, in two places: styles.css:2086
   (.navbar-fixed-inner) and styles.css:3008 (.room-side-card). So this was
   never the template's shadow at the wrong size, it was a different idea about
   depth.

   And the site had already ruled on it. prie-parko.css:603 sets
   `.room-side-card { box-shadow: none }` — „reads as a widget dropped onto the
   page rather than part of it" — replacing it with the same hairline border the
   next-step cards use. Measured on this page, the only box-shadow the template
   still gets to draw is the floating navbar's. These frames were the outlier.

   Taken out rather than restated in softer numbers, because the note said not
   to use them. The tilt is what gives the stack its dimension now, and it
   always was. */
.ppr-day-frame {
  position: relative;
  margin: 0;
  width: 88%;
  overflow: hidden;
  border-radius: var(--spacing-radius-main);
  background-color: var(--colors-color-bg-4);
}

.ppr-day-frame:nth-child(1) { transform: rotate(-1.6deg); align-self: flex-start; }
.ppr-day-frame:nth-child(2) { transform: rotate(1.4deg);  align-self: flex-end; }
.ppr-day-frame:nth-child(3) { transform: rotate(-1deg);   align-self: flex-start; margin-left: 6%; }

.ppr-day-shot {
  display: block;
  width: 100%;
  /* 16:9, not 3:2. This arrived as a means to an end — the aside had to be
     shorter than the timeline for the sticky to have any travel — and the
     sticky is gone. It is kept on what it does to the section: at 3:2 the three
     prints ran 1 044px against the timeline's 1 057px and the two columns ended
     level, which reads as a second column of content. At 16:9 the stack closes
     about 250px early and the timeline is plainly the thing being read. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ppr-day-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 48px 20px 16px;
  text-align: left;
  color: var(--colors-color-light);
  /* .text-small is 12px, which is a footnote. On a photograph it needs to be
     read at a glance, so the caption takes the body step and a little weight. */
  font-size: var(--text-text-body-font-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--colors-color-dark) 88%, transparent) 0%,
    color-mix(in srgb, var(--colors-color-dark) 55%, transparent) 45%,
    color-mix(in srgb, var(--colors-color-dark) 0%, transparent) 100%
  );
}

/* ------------------------------------------------------------- the entrance
   „maybe they could move a bit when I come to the section initially? Like
    scamble slightly?"

   Once, on entry. Two things it is careful not to become:

     · Scroll-linked. `animation-timeline: view()` would have saved the script
       below, and it ties the movement to the scroll position and runs it
       backwards on the way up — which is the behaviour that was just taken out
       of this column. An animation is the right primitive here; a timeline is
       not.
     · A photograph that needs JavaScript to be seen. The final position IS the
       CSS default. `.is-settling` is added by the observer at the foot of the
       section and only ever animates a frame back to where it already sits, so
       a script that never loads costs the section one animation and nothing
       else. Nothing is parked at opacity 0 by a stylesheet.

   The offsets ride on `translate` and `rotate` rather than `transform`, because
   `transform` already carries each frame's static tilt and there is only one of
   it. The independent properties compose ahead of it, so the scatter is
   authored per frame without restating three tilts inside keyframes — and the
   ≤991px rule above, which flattens `transform` to none, keeps working
   untouched.

   The whole block sits inside prefers-reduced-motion: no-preference, so under
   `reduce` the class lands on an element with nothing bound to it. (The script
   checks as well, and so declines to build an observer at all.)

   widgets/reveal.js was the first choice and does not fit. Its selector is
   `.see-b .gal-tile`, hardcoded, and the CSS behind it (prie-parko.css:2654) is
   a gallery tile's: `.gal-tile img { height: auto }` is a step more specific
   than `.ppr-day-shot`, so borrowing the two classes to get `is-in` would take
   the 16:9 crop off all three photographs in exchange for a fade. */
@media (prefers-reduced-motion: no-preference) {
  .ppr-day-media.is-settling .ppr-day-frame {
    animation: ppr-day-settle .72s cubic-bezier(.22, .61, .36, 1) both;
  }

  /* Scattered, not thrown. The largest offset is 30px under a 443px print, and
     the extra turn is smaller than the tilt each frame already has, so what
     lands is the composition that was always there. */
  .ppr-day-media.is-settling .ppr-day-frame:nth-child(1) {
    --ppr-settle-x: -18px;
    --ppr-settle-y: 22px;
    --ppr-settle-turn: 1.4deg;
  }

  .ppr-day-media.is-settling .ppr-day-frame:nth-child(2) {
    --ppr-settle-x: 20px;
    --ppr-settle-y: 26px;
    --ppr-settle-turn: -1.6deg;
    animation-delay: .1s;
  }

  .ppr-day-media.is-settling .ppr-day-frame:nth-child(3) {
    --ppr-settle-x: -14px;
    --ppr-settle-y: 30px;
    --ppr-settle-turn: 1.1deg;
    animation-delay: .2s;
  }
}

/* Outside the query on purpose: a @keyframes nobody references costs nothing,
   and keeping the rule that binds it in one place is worth more than keeping
   the two together. */
@keyframes ppr-day-settle {
  from {
    opacity: 0;
    translate: var(--ppr-settle-x, 0) var(--ppr-settle-y, 0);
    rotate: var(--ppr-settle-turn, 0deg);
  }

  to {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
}

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

  /* Above the timeline, not beside it, and flat: three turned frames in a row
     the width of the page start colliding with each other's corners. */
  .ppr-day-media {
    order: -1;
    flex-direction: row;
    gap: 12px;
  }

  /* Three turned frames in a row the width of the page collide at the
     corners, so the strip goes flat and equal below 992px. */
  .ppr-day-frame,
  .ppr-day-frame:nth-child(1),
  .ppr-day-frame:nth-child(2),
  .ppr-day-frame:nth-child(3) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin-left: 0;
    transform: none;
    align-self: auto;
  }

  .ppr-day-shot { aspect-ratio: 1 / 1; }
  .ppr-day-caption { padding: 32px 12px 12px; font-size: var(--text-text-small-font-size); }
}

@media (max-width: 560px) {
  .ppr-day-media { gap: 8px; }
  .ppr-day-step { padding-left: 32px; padding-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The tilt on the day frames is not motion: it is a static transform, and
     flattening it would take away the composition rather than the movement, so
     it stays. The frames' entrance is already gated the other way — it is
     written inside `no-preference` and simply does not exist here, which is why
     there is nothing to switch off. What goes is the photo zoom on the
     next-step cards. */
  .ppr-next-photo,
  .ppr-next-card,
  .ppr-next-arrow { transition: none; }
  .ppr-next-card:hover .ppr-next-photo { transform: none; }
}

/* ==================================================================== 4 ====
   .ppr-gallery-section — the photo tour
   ------------------------------------------------------------------------ */

/* The tour opened on an apology („Atskiros vienviečio numerio fotosesijos
   viešbutis dar neturi…"), which was the first thing a reader met after the
   room itself. The client's decision, 2026-08-26: the excuse goes, the
   photographs stay, and the groups carry honest names.

   Then, on seeing it: „gallery maybe do more like in the gallery page? With
   the sticky titles and photos on the side?". So the six-column .rk-shots
   grid is gone from this page and each group is now the template's own
   gallery-b device — the same one /galerija/ uses — a sticky title rail on the
   left, photographs in the right rail's full-width / pair rhythm. The device
   itself is in styles.css and its sticky rule is in prie-parko.css; both are
   shared and untouched. Everything below is the two adjustments the device
   needs when it is stacked five times inside one section.

   (The .rk-* rules in pp-rooms.css stay where they are: the other fourteen
   room pages still carry that markup until the rollout reaches them.) */

/* The template's base .left-gallery-b still carries `transform: translate(0,
   -100%)` from its stick-to-the-bottom original. prie-parko.css re-pins the
   rail to top: 18vh but leaves the transform, which then lifts the rail clear
   off the screen. pp-pages.css neutralises it for .gal-all; this is the same
   neutralisation for the room pages. */
@media screen and (min-width: 992px) {
  .ppr-gallery-section .gallery-b-halves > .left-gallery-b {
    transform: none;
    padding-bottom: 0;
  }
}

/* The template shows one of these per page; five in a row need their own step
   between them, and the client's standing instruction is that the step is
   padding rather than a rule. */
.ppr-gallery-section .gallery-b-halves { margin-top: var(--spacing-title-margin-64); }
.ppr-gallery-section .gallery-b-halves + .gallery-b-halves { margin-top: var(--pp-section-gap); }

/* The rail is capped at 320px in the template, which was drawn for a text-h4
   line; at the section-title step the group names fold against the cap instead
   of against the column. Let the rail use its grid column, and hold the
   description to a caption measure under the title. */
.ppr-gallery-section .gallery-b-halves > .left-gallery-b { max-width: none; }
.ppr-gallery-section .left-gallery-b .text-body {
  max-width: 46ch;
  color: var(--colors-color-dark-64);
}

@media screen and (max-width: 991px) {
  .ppr-gallery-section .gallery-b-halves + .gallery-b-halves { margin-top: var(--spacing-section-64); }
}

/* ==================================================================== 5 ====
   .ppr-room-body — three fixes to the facts column, from the same review
   ------------------------------------------------------------------------ */

/* „id remove dividers between these sections". The dashed rules above the
   headings in the facts column are the last of the dividers the client asked
   to be replaced by padding. Done here rather than only in the markup so the
   other fourteen room pages lose them at the same moment, without fourteen
   edits to files this rollout does not own. */
.ppr-room-body .ppr-facts-head > .section-divider { display: none; }

/* „i dont think its good to have the random title here, i think these should
   not be cards but amenities chips, and a bunch of them."

   The four stat tiles were a captioned card each („Viengulė / LOVOS"), under a
   heading of their own — three levels of furniture around four facts. They are
   now one wrapped row of chips carrying ten, sitting directly under the
   description they belong to, with no heading at all. A chip is a name and an
   icon: no caption to restate it, nothing to align, and adding an eleventh
   costs one line of markup instead of a decision about the grid.

   The stat rules in pp-rooms.css are left alone — the other room pages still
   carry `.ppr-stats` until the rollout reaches them. */
.ppr-chips {
  list-style: none;
  margin: var(--spacing-title-margin-32) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ppr-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--colors-color-dark-16);
  background-color: var(--colors-color-transparent, transparent);
}

.ppr-chip-icon {
  flex: none;
  width: 18px;
  height: 18px;
  /* The icon is the quiet half of the chip; the word is what is read. */
  opacity: .62;
}

.ppr-chip-text {
  font-size: var(--text-text-body-font-size);
  line-height: 1.25;
  white-space: nowrap;
}

/* Below 560px a chip like „Nemokamas belaidis internetas" is wider than the
   column, so the nowrap has to go or it pushes the page sideways. */
@media (max-width: 560px) {
  .ppr-chips { gap: 8px; }
  .ppr-chip { padding: 8px 14px 8px 11px; gap: 8px; }
  .ppr-chip-text { white-space: normal; }
}