/* /renginiams/ — sections built for the events page and used nowhere else.
   A separate sheet so this page's rebuild never has to touch pp-sections.css,
   which every other page also reads. Loaded from Base.astro after
   pp-sections.css, so at equal specificity these rules win. Measure, don't
   assume: specificity on this project has been wrong more than once.

   Everything here is built out of the template's own tokens — the type ladder
   (.text-h2/.text-h4/.text-h6/.text-body/.label), the four colour families and
   the 12/24px radii. No new font, no new size that is not a clamp between two
   existing steps, no colour that is not a var().

   ---------------------------------------------------------------------------
   REBUILD, 2026-08-26. The client went through the page section by section and
   rejected seven of them with one phrase: „not from byq". He was right about
   all seven, including the one that HAD been ported from byq — because that
   port kept the information structure and threw away every device that made
   the section recognisable. Adapting a byq section to this template's colour,
   type and spacing tokens is the job; flattening it into generic markup is the
   failure. Each block below names the byq id it came from, the device it kept,
   and what was deliberately changed.

   The two that are left, and the texture each one is:

     Renginio paketai  cultureexchange-structured-data-2  rows + fixed card
     Renginio užklausa hollow-contact-1       video ground + glass card

   Cut by the client on 2026-08-27, with their blocks and their scripts:
   „Salė" and „Praktiška" first, then „Šventinis meniu", „Renginio diena"
   and „Įmonėms". setupHall(), setupLedgers() and setupReveals() went with
   them — every hook they owned had left the page, so all three were
   unreachable code.

   ---------------------------------------------------------------- the bands
   The page alternates ground so no two neighbouring sections read as one:

     Erdvės          dark      (body-offer-section, template)
     Renginių tipai  warm      bg-2          <- set here
     Virtuvė         light     bg-1 (body)
     Renginio paketai warm     bg-2          <- set here
     DUK             light     bg-1 (body)
     Užklausa        dark      (body-offer-section, template)

   „Renginio paketai" turned warm on 2026-08-27. It had been light, and with
   the three sections between it and „Virtuvė" gone it left three light bands
   running together — Virtuvė, paketai, DUK — which is the one thing this
   table exists to prevent. Measured after the cut, not guessed at.        */

.section.rg-types,
.section.rg-packs { background-color: var(--colors-color-bg-2); }

.section.rg-menu {
  background-color: var(--colors-color-dark);
  color: var(--colors-color-light);
}

/* ------------------------------------------------------------------ ledes --
   .why-lede (prie-parko.css) is written for a light ground and hard-codes a
   68% dark ink, which on the navy bands is unreadable. Same measure and step,
   ground-aware. */
.rg-lede {
  max-width: 60ch;
  margin: 0;
  font-size: var(--text-text-large-font-size);
  line-height: 1.45;
  color: color-mix(in srgb, var(--colors-color-dark) 68%, transparent);
}
.rg-menu .rg-lede,
.rg-lede-light { color: var(--colors-color-light-64); }


/* ############################################################################
   „Renginių tipai" — a dense two-column list

   Was byq `all-abt-value-features-3`: eight full-bleed rows, each name at the
   h2 step, and a bordered circle floating over the list whose icon swapped to
   the hovered row via `.rg-kind:nth-of-type(n):hover ~ .rg-kinds-orb` — no
   JavaScript, and it worked from the keyboard too, which the React original
   does not.

   It is gone anyway. Client, 2026-08-26: *"I dont like this, feel like we need
   smth where its minimalistic, but more text fits - this is a very seo
   section"*. Eight names at 64px with six words each spends the most space a
   section can spend to say the least it can say; the circle was ornament
   arguing that the thin content was a design. No amount of CSS fixes a layout
   whose problem is that it has no room for sentences.

   Two columns, h6 names, a hairline per row, two real sentences each. About
   three times the words in under half the height, and nothing decorative left
   to maintain.
   ######################################################################### */

.rg-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  margin-top: var(--spacing-title-margin-48);
}

.rg-kind {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 0;
  border-top: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
}

/* The last row of each column closes the list. With two columns and eight
   items that is items 7 and 8; `:nth-last-child(-n+2)` says it without
   counting, so adding a ninth type does not need this rule edited. */
.rg-kind:nth-last-child(-n+2) {
  border-bottom: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
}

.rg-kind-name { letter-spacing: -.4px; }

.rg-kind-note {
  margin: 0;
  max-width: 46ch;
  line-height: 1.55;
  color: var(--colors-color-dark-64);
}

@media screen and (max-width: 860px) {
  .rg-kinds { grid-template-columns: 1fr; gap: 0; }
  /* One column: only the true last row closes it. */
  .rg-kind:nth-last-child(-n+2) { border-bottom: 0; }
  .rg-kind:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  }
  .rg-kind-note { max-width: none; }
}


/* ############################################################################
   „Virtuvė" — typography levelled onto the template ladder, 2026-08-27.
   Client: the section is fine, but „font sizes and colors are all over the
   place". Every string now sits on one template role — .label eyebrow, the
   h2 step (via the `.section [class*="headline"] > h2` leveler in
   prie-parko.css), .text-h7 fact titles, .text-body copy — and on three
   inks: full dark, dark-64, accent-1. Deleted from this block: the accent-3
   colour on the fact titles (the dt is .text-h7 in the markup now and
   inherits full ink) and the bespoke 1.55 line-height + literal 64%
   color-mix on the fact copy (the dd carries .text-body .text-dark-64, both
   template classes). Measured on /renginiams/ at 1440×900: 6 visible type
   styles + 4 inks before, 5 + 3 after.
   ######################################################################### */

/* The eyebrow's ink. The markup carried .text-accent-2 — a brown outside the
   section's three-ink budget. The template ships no text utility for
   accent-1 (its accent-1 colour rules are all icon-scoped), so the one
   colour a class cannot express is set here, on the token. */
.rg-story .label { color: var(--colors-color-accent-1); }

.rg-kitchen-facts { margin: 0; width: 100%; display: flex; flex-flow: column; }
.rg-kitchen-fact {
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
}
.rg-kitchen-fact:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
}
/* Spacing only. Type and ink come from .text-h7 / .text-body .text-dark-64
   in the markup. dd keeps margin: 0 because no sheet in this build resets
   the browser's 40px dd indent. */
.rg-kitchen-fact dt { margin-bottom: 6px; }
.rg-kitchen-fact dd { margin: 0; }

/* „Virtuvė" — the photograph matches the column beside it.
   Client: *"I find it weird the photo is not same size as text"*. The
   template's `.story-image-wrap` carries a hard `height: 560px` while the
   right-hand column is two paragraphs plus a four-row fact list and comes out
   taller. The grid already stretches its children; the fixed height was
   overriding that. A floor stays (one-paragraph copy should not collapse the
   picture) and a ceiling (a long fact list should not stretch it into a
   tower). Scoped to .rg-story: other pages use `.story-halves` too. */
.rg-story .story-halves { align-items: stretch; }
.rg-story .story-image-wrap {
  height: auto;
  min-height: 420px;
  max-height: 720px;
  align-self: stretch;
}
@media screen and (max-width: 991px) {
  .rg-story .story-image-wrap { height: 420px; min-height: 0; align-self: auto; }
}


/* ===========================================================================
   FILE 2 of 2: public/css/pp-sections.css
   This section's rules there ("3. the catering section") get ONE deletion and
   NO edits. The kept rules are listed first so the integrator can confirm
   nothing else in that file belongs to rg-story.

   KEEP UNCHANGED (lines 284-288 — layout, no type declarations):

     .rg-story .story-right { justify-content: space-between; }

     @media (max-width: 991px) {
       .rg-story .story-right { justify-content: flex-start; }
     }

   DELETE OUTRIGHT (lines 290-307, exact text below) — the dead remnant of
   this same section's earlier iteration, when the fact list was menu prices
   on `.rg-menu-fact`. Zero uses anywhere in src/ (the live list is
   .rg-kitchen-fact in pp-renginiams.css), and its dt carried a 48% ink that
   is outside the section's three-ink budget. Invisible, so it moves no
   measured number — it is deleted so the section's CSS says only true things:

     /​* Centring alone was not enough: two short paragraphs are ~170px of type
        against a 560px photograph, and the client read the column as lost. The
        menu prices were the one hard fact buried mid-paragraph; pulled out into
        hairline rows (the site's spec-list shape: 1px at 12% ink, label over
        value) they roughly double the column's mass and give the copy an anchor. *​/
     .rg-menu-facts { margin: 0; width: 100%; }
     .rg-menu-fact {
       padding: 16px 0;
       border-top: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
     }
     .rg-menu-fact:last-child {
       border-bottom: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
     }
     .rg-menu-fact dt {
       color: color-mix(in srgb, var(--colors-color-dark) 48%, transparent);
       margin-bottom: 6px;
     }
     .rg-menu-fact dd { margin: 0; }

   (The two `*​/` above carry a zero-width joiner so this file stays valid CSS;
   the real text in pp-sections.css is a plain comment close.)
   =========================================================================== */


/* ############################################################################
   „Renginio paketai" — byq `cultureexchange-structured-data-2` („CMS grid")

   Rebuilt AGAIN. The first port kept the row, the hairline and the photograph
   and the client still said „not from byq", because what shipped was a
   <details> accordion whose only affordance was the words „Kas įskaičiuota /
   Suskleisti" and whose detail opened as one more block of page. byq's row
   does not announce itself in words: it sits there as three quiet dots that
   slide up into a label when the pointer crosses, and what opens is not more
   page but a CARD, fixed at the bottom right over a dimmed page, photograph
   across its top. That card is the section.

   KEPT, item by item:
     · the row as a 12-column grid — kicker left, large title across the
       middle, affordance right;
     · the hairline under the row and a second line over it that fills from 0
       to 100% as the pointer crosses;
     · the dots that slide up to reveal the label: one overflow window, two
       stacked children, translateY;
     · the card — photograph across the top, close X on the photograph, kicker
       and title, the copy, the itemised list;
     · the card fixed bottom-right over a 40% scrim, and the scrim closes it.

   CHANGED, three things.
     · byq hides the card entirely below 767px, so a phone gets five titles and
       no content. Here the card is fixed from 992px up — byq's own breakpoint
       for going static — and below that it opens in place. Every width gets
       the content.
     · The fill also runs on :focus-visible, which byq's pointer-only version
       does not do.
     · It is a native <details>/<summary>: Enter, Space, the expanded state a
       screen reader announces and the working no-JavaScript page all come from
       the browser. byq's row is a <div> with an onClick and no keyboard.
   ######################################################################### */

.rgp-rows { display: flex; flex-direction: column; margin-top: var(--spacing-title-margin-64); }

.rgp-row { position: relative; }

.rgp-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(90px, 2fr) minmax(0, 7fr) minmax(0, 3fr);
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid color-mix(in srgb, var(--colors-color-dark) 14%, transparent);
}
.rgp-head::-webkit-details-marker { display: none; }
.rgp-head:focus-visible {
  outline: 2px solid var(--colors-color-accent-1);
  outline-offset: 4px;
  border-radius: var(--spacing-radius-4);
}

.rgp-kicker { color: var(--colors-color-accent-1); }
.rgp-t { line-height: 1.1; letter-spacing: -1px; }

/* The dots-to-label swap: one 40px window, two 40px children, translateY. */
.rgp-more {
  justify-self: end;
  height: 40px;
  overflow: hidden;
  color: color-mix(in srgb, var(--colors-color-dark) 56%, transparent);
}
.rgp-more-in {
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.rgp-dots,
.rgp-label {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.rgp-label {
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--colors-color-dark);
}
.rgp-head:hover .rgp-more-in,
.rgp-head:focus-visible .rgp-more-in,
.rgp-row[open] > .rgp-head .rgp-more-in { transform: translateY(-40px); }

/* The line that fills. It sits ON the hairline, one pixel lower, so the row
   does not shift when it runs. */
.rgp-fill {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: color-mix(in srgb, var(--colors-color-dark) 52%, transparent);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.rgp-head:hover .rgp-fill,
.rgp-head:focus-visible .rgp-fill,
.rgp-row[open] > .rgp-head .rgp-fill { width: 100%; }

.rgp-scrim { display: none; }

.rgp-card {
  display: flex;
  flex-direction: column;
  background-color: var(--colors-color-light);
}
.rgp-figure { margin: 0; position: relative; }
.rgp-img {
  display: block;
  width: 100%;
  height: clamp(180px, 22vw, 260px);
  object-fit: cover;
  border-radius: var(--spacing-radius-12) var(--spacing-radius-12) 0 0;
}
.rgp-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 0 36px;
}
.rgp-card-top { display: flex; flex-direction: column; gap: 8px; }
.rgp-card-kicker { color: var(--colors-color-accent-1); }
.rgp-card-t { line-height: 1.1; letter-spacing: -1px; }
.rgp-s { margin: 0; max-width: 56ch; color: var(--colors-color-dark-64); }
.rgp-list { list-style: none; margin: 0; padding: 0; }
.rgp-li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-top: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  color: var(--colors-color-dark-64);
}
.rgp-li:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
}
.rgp-li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 9px;
  height: 1px;
  background-color: var(--colors-color-accent-1);
}

/* The close control is created by widgets/layouts.js, so a page without
   JavaScript is never shown a button that does nothing. */
.rgp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--spacing-radius-full);
  cursor: pointer;
  color: var(--colors-color-dark);
  background-color: color-mix(in srgb, var(--colors-color-light) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rgp-close:focus-visible {
  outline: 2px solid var(--colors-color-accent-1);
  outline-offset: 2px;
}
.rgp-close svg { display: block; }

@media screen and (min-width: 992px) {
  /* Only once the script has claimed the block: without it the card opens in
     flow, which is readable, rather than as a fixed panel nothing can close. */
  [data-packs-ready] .rgp-row[open] > .rgp-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background-color: color-mix(in srgb, var(--colors-color-black) 40%, transparent);
  }
  [data-packs-ready] .rgp-row[open] > .rgp-card {
    position: fixed;
    z-index: 100;
    right: 32px;
    /* 92px, not byq's 32: this template carries a floating navigation pill at
       the bottom of every page (.navbar-fixed, z-index 997), which would sit
       over the last two lines of the card. Measured, not guessed — the pill is
       50px tall on a 24px offset. */
    bottom: 92px;
    width: min(42.5rem, calc(100vw - 64px));
    max-height: min(42.5rem, calc(100vh - 124px));
    overflow: auto;
    border-radius: var(--spacing-radius-12);
    box-shadow: 0 24px 64px color-mix(in srgb, var(--colors-color-dark) 32%, transparent);
    animation: rgp-card-in .28s cubic-bezier(.22, 1, .36, 1) both;
  }
  [data-packs-ready] .rgp-row[open] > .rgp-card .rgp-img { height: 17rem; }
  [data-packs-ready] .rgp-row[open] > .rgp-card .rgp-detail { padding: 28px 32px 32px; }
}

@keyframes rgp-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media screen and (max-width: 991px) {
  .rgp-head { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .rgp-kicker { grid-column: 1 / -1; }
  .rgp-more { grid-column: 2; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .rgp-more-in,
  .rgp-fill { transition: none; }
  [data-packs-ready] .rgp-row[open] > .rgp-card { animation: none; }
}


/* ############################################################################
   „Renginio užklausa" — byq `hollow-contact-1` („Contact Hero Video Background")

   Client: *"ehh its ok ish but i wanna see byq options. maybe bg video +
   blurred glass on the whole card could help"*. hollow-contact-1 is exactly
   that section: a contact block whose ground is a looping video under a scrim,
   with the content standing ON it rather than beside it.

   KEPT. The video ground cropped to the section's own rounded frame; the scrim
   that makes type legible without hiding the footage; the copy centred on that
   ground; and the small proof tiles floating on the video under it. The card
   is glass — backdrop-filter, a hairline of light for an edge, nothing solid —
   which is the client's own note and the only way a card on a moving ground
   reads as being on it.

   THE MACHINERY IS THE TEMPLATE'S. Same `.w-background-video` block /apie/
   ends on, same data attributes, same two sources, same poster; widgets/
   bgvideo.js already plays it only while it is on screen. base.css gives that
   class `height: 500px` and puts the <video> at `z-index: -100`, which is why
   the poster can be the wrapper's own background: a negative-z child paints
   over the element's background and under its content, so the poster is what
   shows before the first frame and if the video never arrives.

   CHANGED, two things.
     · byq's four tiles are address, email, Instagram and phone; the footer and
       /kontaktai/ already carry those and a third copy helps nobody. The tiles
       carry the „Booking.com" scores instead — one line, three figures, and a
       link to /apie/, which since its own rebuild shows the same data as a
       proper sub-score ledger with bars. Three identical boxes each holding
       one number was the old treatment of a table that now exists two clicks
       away; repeating a worse version of it is not proof.
     · byq centres everything and has no form. The form is the point here, so
       the card splits: copy and proof left, the seven fields right.
   ######################################################################### */

.rgq-video {
  height: auto;
  border-radius: var(--spacing-radius-24);
  padding: clamp(32px, 4.5vw, 88px) clamp(16px, 3vw, 56px);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/videos/pp-cta-poster-00001.jpg");
  background-size: cover;
  background-position: 50% 50%;
}

/* .overlay-dark-32 alone is not enough over moving footage — the frames run
   from a bright terrace to a dark corridor and the type has to hold across
   both. Measured against the brightest frame. */
.rgq-scrim {
  z-index: 1;
  background-color: color-mix(in srgb, var(--colors-color-black) 44%, transparent);
}

.rgq-glass {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1120px;
  padding: clamp(24px, 3vw, 56px);
  border-radius: var(--spacing-radius-24);
  border: 1px solid var(--colors-color-light-16);
  background-color: color-mix(in srgb, var(--colors-color-dark) 54%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--colors-color-black) 30%, transparent);
}
/* Where the browser cannot blur, the glass has to become a pane: a
   near-opaque navy, because a 46% wash over unblurred video is unreadable. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .rgq-glass { background-color: color-mix(in srgb, var(--colors-color-dark) 88%, transparent); }
}

.rgq-cols {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
}
.rgq-title { color: var(--colors-color-light); }
.rgq-lede { margin: 16px 0 0; max-width: 46ch; color: var(--colors-color-light-88); }
.rgq-direct { margin: 14px 0 0; color: var(--colors-color-light-64); }
.rgq-link {
  color: var(--colors-color-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rgq-link:hover { color: var(--colors-color-accent-1); }

.rgq-proof {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--colors-color-light-16);
}
.rgq-proof-head { color: var(--colors-color-light-64); }
.rgq-proof-line {
  margin: 10px 0 0;
  color: var(--colors-color-light-88);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
/* Each figure stays with the word it belongs to: „apie" alone at the end of a
   line and „3150 atsiliepimų" on the next reads as two facts, not one. The
   separator hangs off the END of the group before it, so a wrap leaves it at
   the end of a line rather than opening the next one with a stray dot. */
.rgq-proof-item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rgq-proof-item:not(:last-child)::after {
  content: "·";
  margin-left: 10px;
  color: var(--colors-color-light-48);
}
.rgq-fig {
  font-size: 1.4em;
  font-weight: 500;
  letter-spacing: -.4px;
  color: var(--colors-color-light);
  font-variant-numeric: tabular-nums;
}
.rgq-proof-link { display: inline-block; margin-top: 12px; }

.rgq-arrow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: inherit;
  transition: transform .3s ease;
}
.rgq-arrow svg { display: block; }
.cta-small:hover .rgq-arrow { transform: translateX(3px); }

/* Two fields a row, not the template's three. The labels here are Lithuanian
   noun phrases („Svečių skaičius", „Renginio pobūdis") and at a third of this
   card they wrap to two lines, which drops every field in the row out of
   alignment with its neighbours. */
@media screen and (min-width: 768px) {
  .rgq-right .rg-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 991px) {
  .rgq-cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media screen and (max-width: 767px) {
  /* Stacked, the three figures are already three lines; a separator hanging
     off the end of each one is a dot floating in the margin. */
  .rgq-proof-line { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rgq-proof-item:not(:last-child)::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* The still is the poster on the wrapper, so hiding the video leaves a
     photograph rather than a hole. widgets/layouts.js pauses it as well —
     display:none does not stop a video that bgvideo.js has told to play. */
  .rgq-video > video { display: none; }
  .rgq-arrow { transition: none; }
  .cta-small:hover .rgq-arrow { transform: none; }
}