/* pp-sections — feature styles, loaded after prie-parko.css */

/* ==================================================== breakfast collage ====
   Both restaurant sections — "Rytas prasideda pusryčiais" on the homepage and
   the matching band on /restoranas/ — carried a single photograph of the
   dining room, which told the reader nothing the copy promises. Six frames now
   do that work: the buffet, what actually lands on a plate, the salad bar, the
   coffee, and two of the hotel's own laid tables.

   Three of the six are licensed stock. The hotel's 556-photo set has café
   interiors, cups and fruit but not one frame of food — see
   research/notes/stock-licences.md for the photographers and the licence.

   Sized by aspect-ratio rather than the template's fixed frame heights, so a
   tile keeps its proportion at every width instead of cropping harder as the
   column narrows. */

.pp-collage {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Columns, not a grid: a grid row is only as short as its tallest cell, which
   is what turns six photographs into a table of contents. Independent columns
   let a tall frame sit beside two short ones. */
.pp-collage-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The offsets. Small — enough that the eye reads a composition, not so much
   that the collage looks like it slipped. */
.pp-collage-col-b { margin-top: 48px; }
.pp-collage-col-c { margin-top: 88px; }

.pp-collage-tile {
  margin: 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);
  /* The homepage section is dark; a hairline in the sand accent stops the
     lighter frames bleeding into each other. On the cream restaurant page the
     same line reads as a quiet edge. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--colors-color-accent-1) 34%, transparent);
}

.pp-collage-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.pp-collage-tile:hover .pp-collage-img { transform: scale(1.04); }

/* Six frames all parallaxing at once is noise, so these carry their own class
   rather than the template's .image-cover — which is also what the interaction
   on the wrapper looks for. Same hover as .gal-tile instead. */
@media (prefers-reduced-motion: reduce) {
  .pp-collage-img { transition: none; }
  .pp-collage-tile:hover .pp-collage-img { transform: none; }
}

.pp-t-tall   { aspect-ratio: 3 / 4; }
.pp-t-wide   { aspect-ratio: 3 / 2; }
.pp-t-land   { aspect-ratio: 4 / 3; }
.pp-t-square { aspect-ratio: 1 / 1; }

/* The template's two frames are fixed-height boxes built for one photograph
   each — .image-wrap-more is 792px and .offer-middle-image 570px, both with
   overflow clipped. The collage sets its own height. */
.image-wrap-more.pp-collage-wrap,
.offer-middle-image.pp-collage-wrap {
  height: auto;
  display: block;
  overflow: visible;
  border-radius: 0;
}

/* .offer-middle-image is also capped at 905px, which was right for one
   letterbox photograph and leaves six frames looking under-scaled beside the
   full-width block above it. */
.offer-middle-image.pp-collage-wrap { max-width: min(1120px, 100%); }

/* ------------------------------------------------------- small screens ----
   Below 992px the homepage grid drops to one column, so the collage suddenly
   has the full container to itself and two hand-placed columns would stretch
   to a 1000px stack. From here it becomes the project's own masonry — the
   same CSS columns .gal-grid uses — and the column wrappers step out of the
   box tree so the six tiles flow as siblings. */
@media screen and (max-width: 991px) {
  .pp-collage { display: block; column-count: 3; column-gap: 12px; }
  .pp-collage-col { display: contents; }
  .pp-collage-tile { break-inside: avoid; margin-bottom: 12px; }
}
@media screen and (max-width: 767px) {
  .pp-collage { column-count: 2; }
}
@media screen and (max-width: 560px) {
  .pp-collage { column-gap: 8px; }
  .pp-collage-tile { margin-bottom: 8px; }
}

/* ======================================================= /renginiams/ ======
   Three additions, all confined to the events page. Nothing above this line
   is touched — the collage rules belong to the restaurant sections.
   ------------------------------------------------------------------------ */

/* --------------------------------------------- 1. the three space cards ---
   .rg-cards-light was already in the markup as a hook with no rule behind it,
   so the cards inherited .card-offer's `color: var(--colors-color-dark)` and
   sat on the navy band with their titles and tag labels invisible — dark ink
   on dark ground. Nothing rendered but three photographs and six empty pills.
   The band is dark, so the cards are light. */
.rg-cards-light .card-offer { color: var(--colors-color-light); }
.rg-cards-light .card-offer .tag-offer { border-color: var(--colors-color-light-16); }

/* The description the client asked for. Held back from the title so the card
   still reads title-first at a glance. */
.rg-cards-light .rg-card-text { color: var(--colors-color-light-88); }
.rg-cards-light .rg-card-link { color: var(--colors-color-light-64); transition: color .3s; }
.rg-cards-light .rg-card-link:hover { color: var(--colors-color-light); }

/* ------------------------------------------------ the lightbox affordance --
   The client asked to "indicate that somehow". A photo-count badge in the
   corner is the honest version of that: a camera glyph says the click opens
   photographs, and the number says how many, so the card promises exactly what
   it delivers. A centred hover-only button (the template's .overlay-offer
   treatment) would have hidden the affordance from touch entirely and told the
   reader nothing about what is behind it.

   The trigger is an absolutely-positioned anchor over the frame rather than a
   wrapper around the <img>: scripts/widgets/parallax.js binds on
   `.image-wrap-offer > .image-cover`, and wrapping the image in a link would
   have silently stopped the parallax on all three cards. For the same reason
   the hover state is a scrim and a badge inversion, never a transform on the
   image — parallax owns that image's transform. */
.rg-shots-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
  text-decoration: none;
  cursor: pointer;
}

/* Bottom-up scrim: keeps the badge legible over a pale photograph (the cottage
   stairs are nearly white at the bottom edge) without dimming the whole frame. */
.rg-shots-open:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, var(--colors-color-dark-48), var(--colors-color-dark-0) 45%);
  opacity: .8;
  transition: opacity .3s ease;
}
.rg-shots-open:hover:before { opacity: 1; }

.rg-shots-open:focus-visible {
  outline: 2px solid var(--colors-color-light);
  outline-offset: -6px;
}

.rg-shots-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--spacing-radius-full);
  background-color: var(--colors-color-dark-64);
  color: var(--colors-color-light);
  transition: background-color .3s ease, color .3s ease;
}
.rg-shots-open:hover .rg-shots-badge,
.rg-shots-open:focus-visible .rg-shots-badge {
  background-color: var(--colors-color-light);
  color: var(--colors-color-dark);
}

.rg-shots-icon {
  flex: none;
  width: 14px;
  height: 14px;
  display: block;
}

/* The rest of each gallery. One <a class="w-lightbox"> declares one item and
   matching `group` values aggregate — the convention in galerija.body.html —
   so the remaining photographs ride along as anchors that are never shown.
   Display, not [hidden]: a stylesheet that sets `display` on a descendant
   selector would otherwise win over the attribute. */
.rg-shots-more { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rg-shots-open:before,
  .rg-shots-badge { transition: none; }
}

/* --------------------------------------------- 2. the enquiry form inline --
   The closing block used to be a headline and a "Susisiekti" button pointing
   at /kontaktai/. The form now lives in the block itself, built from the same
   .form-block-offers / .form-offers / .text-field.light-48 parts as the
   restaurant page's enquiry card, which is already designed for a dark ground. */

/* .content-cta-block is 636px wide and centre-aligned — right for a headline
   and one button, too narrow for seven fields. */
.rg-cta-block { max-width: 880px; }
.rg-cta-block .form-offers { width: 100%; text-align: left; }

/* .form-offers paints itself in --colors-color-light-8 because on the
   restaurant page it sits on a solid dark band. Here it sits on a background
   video whose brightest frames are an aerial of the sea, and white type on 8%
   white over that is unreadable. The card carries its own ground instead. */
.rg-cta-block .form-offers {
  background-color: var(--colors-color-dark-64);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* .video-cta pads 208px top and bottom for a two-line block. With a form in
   there that is a screen and a half of empty video. */
.rg-cta-video { padding-top: var(--spacing-section-96); padding-bottom: var(--spacing-section-96); }

/* Two columns for the short fields, full width for the message. .form-inner is
   a flex column; this overrides it only inside this form. */
@media screen and (min-width: 768px) {
  .rg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .rg-field-wide { grid-column: 1 / -1; }
}

/* type="date" and type="number" render their own controls; the template's
   dashed field is drawn for a bare text input. */
.rg-cta-block .text-field[type="date"],
.rg-cta-block .text-field[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 54px;
}
.rg-cta-block .text-field[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .64;
  cursor: pointer;
}
/* The template's own calendar glyph would then be a second icon in the same
   corner, so the field keeps only the native one. */
.rg-cta-block .text-field[type="date"] + .icon-date { display: none; }

.rg-form-note { color: var(--colors-color-light-64); }
.rg-form-note a { color: var(--colors-color-light); }

/* ------------------------------------------------ 3. the catering section --
   The photograph here was the hotel's own dining room — the same frame the
   first space card already carries, and empty of food, in a section whose
   whole subject is what comes out of the kitchen. It is now a dressed
   celebration table (Unsplash, see research/notes/stock-licences.md).

   .story-right is top-aligned, which left the text hanging at the top of a
   560px frame with a third of the column empty beneath it. Centring fixed
   that but produced the opposite complaint: 133px of slack above the text
   AND below the prices, so the column floated with nothing anchoring it to
   the photograph beside it.

   2026-08-26, client: "id align the text at the top, and the lil table
   content to the bottom". space-between does exactly that — the prose starts
   level with the top of the photograph, the price list sits on its baseline,
   and the slack goes to the one place it reads as intentional: between them.
   Below 991px the column stops sitting beside the photograph and the
   distribution has nothing to align to, so it reverts to natural flow. */
.rg-story .story-right { justify-content: space-between; }

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

/* 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; }


/* ############################################################################
   2026-08-25 — three fixes from the client's review round
   1. /renginiams/  the enquiry form leaves the video card for its own band
   2. /renginiams/  the page tail joins the --pp-section-gap rhythm
   3. /kontaktai/   the social row moves onto the contact card
   Everything above this line is untouched.
   ######################################################################### */

/* ================================================= /renginiams/ · the tail ==
   The client: "i wouldnt put the form inside video card". It is out. The video
   block is the closing statement again — headline plus one button — and the
   seven fields have their own ground below it.

   Two of the rules written for the in-video version now describe a card that
   no longer exists (`.rg-cta-block .form-offers`, `.rg-form-grid` inside the
   video). They are inert rather than wrong: there is no `.form-offers` inside
   `.rg-cta-block` any more. The measurements they set on the block itself do
   still apply, so they are restated here for the block's new contents. */

/* .rg-cta-block was widened to 880px to hold seven fields. A headline and one
   button read better nearer the template's own 636px measure. */
.rg-cta-block { max-width: 720px; }

/* Same story for the band's inner padding: 72px was a compromise around a
   form. With two elements in it, the block takes the page's own rhythm token
   instead of a number picked for the old contents. */
.rg-cta-video {
  padding-top: var(--pp-section-gap);
  padding-bottom: var(--pp-section-gap);
}

/* ---------------------------------------------------- the rhythm at the tail
   `.section:not([class*="hero"]):not(.cta-section)` in prie-parko.css puts
   every section on --pp-section-gap; .cta-section is excluded because the
   template gives it 64px top and 0 bottom so the video can butt the footer.
   That was right when the video WAS the last thing on the page. It no longer
   is, so this one section rejoins the rhythm: 165px of whitespace above it
   becomes 202px at 1440, and it gets a real bottom edge before the form band.
   Scoped to the class this page adds — no other .cta-section moves, and the
   selector carries .section so it outranks `.section.cta-section` in
   styles.css rather than losing to it on specificity. */
.section.rg-cta-section {
  padding-top: var(--pp-section-gap);
  padding-bottom: var(--pp-section-gap);
}

/* ------------------------------------------------------ the enquiry band ---
   .body-offer-section is the solid dark band the restaurant page's enquiry
   card already sits on, which is the ground `.form-offers` and
   `.text-field.light-48` were drawn for — so every field moved across
   unchanged, with no colour of its own to fight the video underneath.

   The card is held to a reading width and centred under the left-aligned
   headline, so the two-column field grid does not stretch to 1376px. */
.rg-enquiry .form-block-offers {
  /* The reading-width cap that used to live here moved up onto
     .rg-enquiry-halves: the whole composition is sized, not the form inside
     an oversized track. The form fills whatever track the grid gives it. */
  max-width: 100%;
  width: 100%;
}
.rg-enquiry .form-offers { text-align: left; }

/* The fixed navbar is 56px tall and slides over the top of the page, so an
   anchor jump would otherwise land the heading underneath it. */
.rg-enquiry { scroll-margin-top: 88px; }

/* type=date / type=number and the calendar glyph: the same two rules the
   in-video card carried, restated for the field's new home. */
.rg-enquiry .text-field[type="date"],
.rg-enquiry .text-field[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 54px;
}
.rg-enquiry .text-field[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .64;
  cursor: pointer;
}
.rg-enquiry .text-field[type="date"] + .icon-date { display: none; }

/* ==================================================== /kontaktai/ · social ==
   The client: "i imagined social media at the bottom of this card ... not
   under the entire section". The row is now the last child of .right-contact-b
   instead of a sibling of the whole two-column grid.

   .right-contact-b is a centred flex column with a 40px gap and 80px of
   padding; the row therefore needs no top margin of its own — the column gap
   is the card's rhythm. It does need a width, because `align-items: center`
   would otherwise shrink it to the icons and the hairline would be 44px wide
   instead of a rule across the card. 550px matches .contact-b-info-halves
   above it, so the line and the info grid share one edge. */
.right-contact-b > .pp-social {
  width: 100%;
  max-width: 550px;
  margin-top: 0;
  padding-top: 26px;
}

/* Icon only, no labels — asked for explicitly in an earlier round. 44px is
   the minimum comfortable touch target; the row was 42px. */
.pp-social-link { width: 44px; height: 44px; }

/* justify-content: space-between on the card would push the three children to
   the extremes once a third one exists, stretching the gaps past the card's
   own 40px. Centred, they keep it. */
.right-contact-b { justify-content: center; }

/* ------------------------------------------------------- the hero crop -----
   The hero photograph is the courtyard terrace laid with tables — the client's
   own frame, replacing a dim café interior that read as a random room. It is
   3:2; a phone crops it to roughly 2:5, and a centred crop lands on a pine
   trunk and the roofline with the furniture squeezed off the bottom. Nudged
   left, the same crop holds a laid table, four chairs and an umbrella, which
   is the whole reason this photograph was chosen. Desktop keeps the centre. */
@media screen and (max-width: 767px) {
  .rg-hero-media img { object-position: 32% 50%; }
}


/* ############################################################################
   2026-08-25 — second review round
   1. /kontaktai/  the search widget joins the „Esame čia" block
   2. /kontaktai/  that block trades the satellite tile for the hotel itself
   3. /renginiams/ every unresolved figure reads as pending, not as breakage
   4. /renginiams/ the enquiry form gets the contact card it was missing
   Everything above this line is untouched.
   ######################################################################### */

/* =============================== /kontaktai/ · the „Esame čia" book card ====
   The client: "add a booking widget on here 'Esame čia — tarp Birutės parko ir
   Baltijos jūros'. same as from hero".

   Two dresses were available. The compact bar (.pp-search--bar) is a five-column
   row that needs about 800px; this column is 690px at 1440 and 350px on a
   phone, so it would spend its whole life in the two-column fallback with a
   cream panel punched into a photograph. The hero's frosted card is drawn for
   exactly this — a narrow column, on a photograph, letting it through. So the
   card it is, and the widget inside it is the same _search_compact.html
   partial /rezervacija/ already renders rather than a second copy.

   The overlay was a fixed 160px caption band. It now sizes to its contents and
   stacks: the caption, then the card. The gradient starts higher so the card
   sits on ink rather than on tree bark. */
.contact-b-image-overlay.kt-here {
  inset: 0;
  height: auto;
  flex-flow: column;
  /* Was flex-end, which parked the card at the foot of the frame so it sat on
     the darkest part of the scrim. Centred, as asked — the scrim below is
     evened out to match so the card still has ink under it. */
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 32px 24px;
  /* A 160px caption band could sit on whatever the photograph happened to do
     down there. A frosted card cannot: it is 22% opaque, so it inherits the
     ground's contrast. The scrim therefore covers the whole frame — the same
     recipe the homepage hero uses, where .overlay-dark-32 dims the video under
     the identical card — and deepens towards the bottom where the card lands. */
  background-image: linear-gradient(180deg,
    var(--colors-color-dark-32),
    color-mix(in srgb, var(--colors-color-dark) 72%, transparent) 38%,
    color-mix(in srgb, var(--colors-color-dark) 72%, transparent) 68%,
    color-mix(in srgb, var(--colors-color-dark) 82%, transparent));
}

/* The frame is a 2:3 portrait in a 120% box, so the crop has somewhere to go.
   Centred it lands on the canopy and the roofline; dropped, it holds the
   façade and the green balconies the alt text names. */
.hero-contact-b .image-cover.map-image { object-position: 50% 66%; }

/* The caption is an eyebrow above the card now, not a line at the foot of a
   photograph, so it keeps the two-line break its own markup asks for. */
.kt-here .label-small { max-width: 42ch; }

/* The widget here is the card orientation of the one search partial
   (<SEARCH:CARD> in the page body): no panel of its own, two fields per row,
   submit across the bottom. .hero-book-card carries the frosting and the ink;
   nothing needs restating for this page. */

/* The template gives the left half a fixed height once the two columns stack —
   400px, then 300px, then 250px — all of which were drawn for a caption band.
   A caption plus a four-field card needs the column to size to its contents. */
@media screen and (max-width: 991px) {
  .hero-contact-b .left-contact-b { height: auto; min-height: 620px; }
  .contact-b-image-overlay.kt-here { padding-top: 96px; }
}
@media screen and (max-width: 479px) {
  .hero-contact-b .left-contact-b { min-height: 560px; }
  .contact-b-image-overlay.kt-here { gap: 18px; padding: 72px 16px 20px; }
}

/* The two date fields reserve 40px on the right for the calendar glyph. In a
   420px card that is fine; in a 136px track at 390 it clips „dd/mm/yyyy" to
   „dd/mm/yyy". Tighten the reserve and bring the glyph in with it. */
@media screen and (max-width: 479px) {
  .kt-book-card .form-book .text-field { padding-left: 10px; padding-right: 30px; }
  .kt-book-card .form-book .icon-date,
  .kt-book-card .form-book .input-wrap-relative:has(> select)::after { right: 8px; }
}

/* =========================== /renginiams/ · figures the hotel still owes us ==
   The client, on the hall-capacity tile: "{salės talpa} add some placeholder
   here jesus".

   The figure is genuinely unknown and inventing one would put a number in
   front of someone booking a wedding. So the token stays — that is how this
   project marks an unresolved fact, and it is what tells the hotel where to
   look. What changes is that it stops reading as breakage.

   .pp-tbc in prie-parko.css already sets the step and the italic. Two things
   were missing. It was a bare run of text with a dashed underline, which at
   the foot of a display-size stat tile looks like a rendering failure rather
   than a marked gap; and its ink is --pp-warn, a warm brown drawn for a cream
   ground, which on this page sits on the navy band and all but disappears.

   So: a chip with its own edge and its own tint, and an ink that follows the
   ground it is on. This class is used on /renginiams/ and nowhere else. */
.pp-tbc {
  display: inline-block;
  color: var(--pp-tbc-ink, var(--pp-warn));
  text-decoration: none;
  /* The tile's own .text-h1 tracks at -3px, which the chip inherited along
     with everything else and which crushed 16px glyphs into each other. The
     chip is a body-step run, so it states the body step's own metrics. */
  font-family: var(--text-text-body-font-family);
  font-weight: var(--font-weight--normal, 400);
  letter-spacing: var(--text-text-body-letter-spacing);
  line-height: 1.45;
  padding: .1em .55em;
  border: 1px dashed color-mix(in srgb, var(--pp-tbc-ink, var(--pp-warn)) 52%, transparent);
  border-radius: var(--spacing-radius-small);
  background-color: color-mix(in srgb, var(--pp-tbc-ink, var(--pp-warn)) 10%, transparent);
}

/* The navy band. --colors-color-bg-3 is the sand the site already uses for
   eyebrow labels on dark ground, so the chip stays in the same warm family as
   the cream version instead of becoming a second signal colour. */
.rg-tiles { --pp-tbc-ink: var(--colors-color-bg-3); }

/* A body-step chip alone in a row whose other three cells are display-size
   numerals reads as a dropped line. The large step is still visibly not a
   figure — it is italic, boxed and dashed — but it holds its own cell. */
.rg-tiles .pp-tbc {
  font-size: var(--text-text-large-font-size);
  letter-spacing: var(--text-text-large-letter-spacing);
}

/* ================================== /renginiams/ · the enquiry gets company ==
   The client: "this section is kinda empty why not add contact cards or smth".
   It was one form on a 1376px dark band with nothing beside it. The form keeps
   the reading width it had; the space to its right now answers the questions a
   form cannot — who picks up, how fast, and where the place actually is.
   Every line here is already elsewhere on the site: the 24-hour reception and
   its three languages, the number, the address, "Atsakysime per 24 valandas".

   The band is dark, so the cards are the ground's own lighter tint rather than
   a second colour. */
.rg-enquiry-halves {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
  /* 2026-08-25, client: "very weird section". Measured at 1440: the form
     track was 1016px but the form inside it was still capped at 680px, so a
     376px hole sat between the form's right edge and the cards — two things
     pushed to opposite edges of the band, not one block. The composition is
     now sized as a whole — 720px of form, the 40px gap, 320px of cards — and
     centred, so the only gutter left is the real one. */
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* The headline takes the same measure, so its left edge is the form's. */
.rg-enquiry .rg-headline {
  max-width: min(1080px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.rg-contact-col {
  display: flex;
  flex-flow: column;
  gap: 14px;
  /* .form-offers pads 64px before its first label. Without the same offset
     „Arba tiesiogiai" started at the band's top while „Vardas" started 64px
     lower — two rhythms side by side. The two first labels now share a line. */
  padding-top: 64px;
}
.rg-contact-col > .label { margin-bottom: 2px; }

.rg-contact-card {
  padding: 20px 22px;
  border-radius: var(--spacing-radius-main);
  background-color: var(--colors-color-light-8);
  border: 1px solid var(--colors-color-light-16);
}

.rg-contact-label {
  font-family: var(--text-label-font-family);
  font-size: var(--text-text-small-font-size);
  letter-spacing: var(--text-label-letter-spacing);
  text-transform: uppercase;
  color: var(--colors-color-light-48);
  margin-bottom: 8px;
}

/* The number and the address are the reason the card exists, so they take the
   card's largest step; the line under them is the caveat, not the answer. */
.rg-contact-value {
  display: block;
  font-size: var(--text-text-large-font-size);
  line-height: 1.35;
  color: var(--colors-color-light);
  text-decoration: none;
  border-bottom: 1px solid var(--colors-color-light-32);
  padding-bottom: 2px;
  transition: border-color .25s ease;
}
.rg-contact-value:hover { border-bottom-color: var(--colors-color-light); }
/* The address is not a link, so it carries no underline to promise one. */
.rg-contact-value-plain { border-bottom: 0; padding-bottom: 0; }

.rg-contact-note {
  margin: 10px 0 0;
  font-size: var(--text-text-body-font-size);
  line-height: 1.5;
  color: var(--colors-color-light-64);
}
.rg-contact-note a { color: var(--colors-color-light); }

/* One column below the breakpoint where the field grid also collapses: two
   320px columns of cards beside a single-column form would be wider than the
   form itself. */
@media screen and (max-width: 991px) {
  .rg-enquiry-halves { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Stacked under the form, the cards no longer have a form edge to align
     with, so the desktop's 64px alignment offset comes off. */
  .rg-contact-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 0; }
  .rg-contact-col > .label { grid-column: 1 / -1; }
}
@media screen and (max-width: 767px) {
  .rg-contact-col { grid-template-columns: 1fr; }
}

/* The same figure appears a second time on this page, as a tag on the
   restaurant-hall card — „{salės talpa} svečių" sitting in a pill beside two
   real ones, where it reads as a fact rather than a gap. A chip inside a pill
   would be a box in a box, so the pill itself takes the pending state: the
   sand ink the tiles use, a dashed edge and the italic. */
.tag-offer.rg-tag-tbc {
  color: var(--colors-color-bg-3);
  font-style: italic;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--colors-color-bg-3) 52%, transparent);
  background-color: color-mix(in srgb, var(--colors-color-bg-3) 10%, transparent);
}


/* The card had collapsed to 283px inside the overlay — every field wrapped. */
/* `min(380px, 100%)` resolved 100% against a content-sized grid track, so it
   kept the collapsed width. State it outright and cap on the frame instead. */
.contact-b-image-overlay.kt-here .kt-book-card {
  width: 380px;
  max-width: calc(100% - 16px);
}

/* -------------------------------------- the enquiry band, standing alone ---
   2026-08-26, client: "when it is alone it takes up too much space". The
   section above it — a full-height band whose only content was a heading and
   a button pointing at THIS section, immediately below — was deleted, so the
   enquiry now ends the page by itself and its own generosity became the
   problem. Measured at 1440 before: 1123px, of which 201px was the section's
   own padding and another 64px was the form card's, with 48px between every
   field group.

   Nothing is cramped — the field height (54px) and the label rhythm are
   untouched. Only the air around them comes down. */
/* Three classes deep, because the site-wide gap rule is
   `.section:not([class*="hero"]):not(.cta-section)` — specificity (0,3,0),
   which a bare `.rg-enquiry` (0,1,0) loses to no matter how late it loads.
   Matching (0,3,0) and arriving later in the cascade is what actually wins. */
.section.body-offer-section.rg-enquiry {
  padding-top: 72px;
  padding-bottom: 72px;
}

.rg-enquiry .form-offers {
  padding: 44px;
  gap: 30px;
}

/* The right column's offset exists so „Arba tiesiogiai" and „Vardas" start on
   the same line; it has to track the form's padding, not a frozen 64. */
.rg-contact-col {
  padding-top: 44px;
}

/* Six short fields two-across made three rows. At this measure they fit three
   across in two rows — 195px still holds „Svečių skaičius" and the date field
   without the label wrapping. `.rg-field-wide` is `1 / -1`, so the message box
   spans the third column with no change. The cap is 1160px, not 992: the composition stops
   growing at 1080px, so at 992 the three columns are only 160px and „Svečių
   skaičius" wraps to two lines. Measured, not guessed. */
@media (min-width: 1160px) {
  .rg-enquiry .rg-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The message box was 212px — a deep empty well under six filled fields. It
   holds four lines, which is the length people actually type into an enquiry;
   the field scrolls past that rather than reserving the room up front. */
.rg-enquiry .rg-field-wide .text-field {
  min-height: 0;
  height: 148px;
}

/* ------------------------------- „Viskas po vienu stogu": the guest's day ---
   2026-08-26. The section that stood here was six cards headed „Nakvynė" —
   true, but a list. The client asked for the same facts as a horizontal
   journey: Atvykstate → Posėdžiaujate → Valgote → Nakvojate → Švenčiate.
   Built after byq's kelvin-process-1 („Numbered Process Steps Timeline") but
   in this template's own classes: no React, no Tailwind, no new type sizes.

   The numbering is earned. These five are not six interchangeable benefits in
   an arbitrary order — a guest genuinely walks through them, and step five is
   only true because step four already happened.

   The hairline behind the nodes is the timeline track, i.e. structure. It is
   not one of the decorative dashed dividers the client banned: solid, 1px,
   and load-bearing — remove it and the nodes float. */

.rg-flow-rail {
  position: relative;
  margin-top: var(--spacing-title-margin-80);
}

/* The five columns only fit on one line above 1200px, which is also the only
   width at which a single continuous track means anything. Below that each
   step carries its own hairline and keeps its own node, so the timeline reads
   as a timeline at every width instead of vanishing on a phone. */
.rg-flow-line {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  overflow: hidden;
}

.rg-flow-fill {
  position: absolute;
  inset: 0;
  display: block;
  background-color: var(--colors-color-accent-1);
  /* Full by default. The scroll-driven fill below is an enhancement; if the
     browser has no view() timeline the line is simply drawn, which is what it
     is supposed to look like anyway. Parking it at scaleX(0) unconditionally
     would leave Safari and Firefox with an empty track forever. */
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.rg-flow-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* 8px is the card-grid gap; this is not a card grid — nothing is boxed — so
     the columns need real air between the paragraphs. (1376 − 4×28) / 5 =
     252.8px per column at 1440. */
  column-gap: 28px;
  row-gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rg-flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* Clears the node and the track it sits on. */
  padding-top: 40px;
  list-style: none;
}

.rg-flow-node {
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  /* Opaque, in the page's own ground, so the track stops cleanly at the node
     instead of running through it. */
  background-color: var(--colors-color-bg-1);
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 26%, transparent);
}

/* text-h4 — 28.8px Instrument Serif, a step of the template ladder, not a new
   size. Deliberately not text-h1: the numbers band directly above this section
   sets 40 / 8 / 24 h / 8,5 in text-h1, and an ordinal at that size would read
   as a fifth statistic. */
.rg-flow-num {
  color: color-mix(in srgb, var(--colors-color-dark) 30%, transparent);
  font-variant-numeric: tabular-nums;
}

.rg-flow-s {
  margin: 0;
  /* Same measure the reference holds its step copy to; at 1440 the column is
     252.8px, so this only bites on the wider tablet layouts. */
  max-width: 34ch;
  color: var(--colors-color-dark-64);
}

/* Below the single-row width the track cannot be one line, so it becomes five
   short ones: each step keeps its hairline and its node, both aligned by
   construction. Breakpoints mirror .why-cards (3 → 2 → 1) so the two new
   sections on this page step down together. */
@media screen and (max-width: 1199px) {
  .rg-flow-line { display: none; }
  .rg-flow-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .rg-flow-step {
    padding-top: 28px;
    border-top: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  }
  /* Centred on the hairline: 13px tall, 1px rule — −6px puts the node's middle
     on the rule's middle. */
  .rg-flow-node { top: -6px; }
}

@media screen and (max-width: 991px) {
  .rg-flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

@media screen and (max-width: 640px) {
  .rg-flow-track { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .rg-flow-s { max-width: none; }
}

/* The one motion in the section: the track draws itself left to right as the
   band arrives, and the five steps lift in behind it. Scroll-driven CSS, so no
   JavaScript owns whether this content is visible — outside the @supports
   block everything is already at its final state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @media (min-width: 1200px) {
      /* A named timeline, not a bare view(). Measured, because the obvious
         version silently did nothing: .rg-flow-line carries overflow: hidden,
         which makes it a scroll container, so view() on the fill inside it
         resolved against a 1376x1px box the fill exactly fills — timeline
         progress pinned at 50% and the animation reported "finished" at every
         scroll position. The rail is the subject that actually moves, and it
         is ~300px tall, so the draw has a real distance to happen over. */
      .rg-flow-rail { view-timeline-name: --rg-flow-rail; view-timeline-axis: block; }
      .rg-flow-fill {
        transform: scaleX(0);
        animation: rg-flow-draw 1ms linear both;
        animation-timeline: --rg-flow-rail;
        animation-range: entry 25% entry 100%;
      }
    }
    /* The steps are their own subjects and sit directly in the document
       scroller, so view() is correct here. */
    .rg-flow-step {
      animation: rg-flow-rise 1ms linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 95%;
    }
  }
}

@keyframes rg-flow-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes rg-flow-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ############################################################################
   2026-08-26 — /renginiams/: the three sections that were promised and never
   built, plus the enquiry rebuilt on byq `halden-miller-cta-2`.
   1. „Renginio paketai"   four combinations, on the light ground after rg-flow
   2. „Verslo svečiams"    the hotel behind the hall, on its own dark band
   3. „Renginio užklausa"  one floating card, headline + proof | form
   Everything above this line is untouched.
   ######################################################################### */

/* ===================================== /renginiams/ · „Renginio paketai" ====
   Four unfilled cards on the site's approved geometry — 1px hairline at 12%
   ink, 16px radius, 8px between them — the same shape as .why-cards two
   sections up, so the page gains a section without gaining a card language.

   The list inside each card is hairline rows rather than bullets: the same
   spec-list shape .rg-menu-fact and .ppr-facts already use, which is what
   makes four cards of unequal length read as one grid. The rules are solid
   and load-bearing (they separate the items); nothing here is a decorative
   divider.

   No card carries a price, and none ever should until the hotel confirms one
   — see the comment in the markup and the 2026-08-26 heading in
   research/notes/open-questions.md. */
.rg-packs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: var(--spacing-title-margin-80);
}

.rg-pack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
  border-radius: var(--spacing-radius-main);
}

/* The kicker says what SHAPE the package is — half a day, a whole day, with a
   night in it, an evening — which is the thing a reader is actually sorting
   by. Accent-1 rather than the section eyebrow's accent-2, so a card label
   never competes with the section label above it. */
.rg-pack-kicker { color: var(--colors-color-accent-1); }
.rg-pack-s { margin: 0; color: color-mix(in srgb, var(--colors-color-dark) 64%, transparent); }

.rg-pack-list { list-style: none; margin: 6px 0 0; padding: 0; }
.rg-pack-li {
  padding: 12px 0;
  line-height: 1.5;
  border-top: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent);
}
.rg-pack-li:last-child { padding-bottom: 0; }

.rg-packs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 40px;
}
.rg-packs-note {
  margin: 0;
  max-width: 64ch;
  color: color-mix(in srgb, var(--colors-color-dark) 64%, transparent);
}
.rg-packs-foot .cta-small { flex: none; }

/* The template's default .cta-small is a cream pill drawn for a dark band; on
   this near-white ground it all but disappears. The dark variant is already in
   the template (it is what the style guide ships), so the button takes that
   rather than a colour invented here. Its hover, though, falls through to
   `.button-bg:hover` — one class, no variant — which repaints it cream under
   white text. Two classes deep and later in the cascade fixes that. */
.rg-packs .button-bg:hover { background-color: var(--colors-color-accent-2); }

@media screen and (max-width: 1199px) {
  .rg-packs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .rg-packs-foot { flex-flow: column; align-items: flex-start; gap: 24px; }
}
@media screen and (max-width: 640px) {
  .rg-packs-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ====================================== /renginiams/ · „Verslo svečiams" ====
   The client: „Don't bury the fact that it's a hotel. Keep your team
   together." A dark band between two light ones is what stops it being
   buried; every other section on this page is about the hall, and this one is
   about the building.

   Two columns, and they are not the same kind of content on purpose. LEFT is
   the invitation — who turns up and why. RIGHT is only what can be checked,
   as a spec list, because the brief that came with this section asked for
   „special rates" and nobody has confirmed the hotel has any. Nothing in here
   claims a discount, a negotiated rate or a corporate programme. */
.rg-biz-halves {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  /* stretch, not start: the left column has to be as tall as the spec list
     beside it so the photograph at its foot can absorb the difference. With
     `start` the column sized to its own content and the frame stayed at its
     180px floor, leaving the two columns 22-43px out of level. */
  align-items: stretch;
}

.rg-biz-left { display: flex; flex-flow: column; gap: 48px; }
/* .rg-headline's own 64px bottom margin would double the column's gap. */
.rg-biz-headline { margin-bottom: 0; max-width: min(560px, 100%); }
.rg-biz-lede {
  margin: 0;
  max-width: 52ch;
  color: color-mix(in srgb, var(--colors-color-light) 72%, transparent);
}

.rg-biz-right {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 16px;
}

/* The left column ran ~250px short of the spec list beside it, which on a dark
   band reads as a hole rather than as air. One real photograph closes it — and
   it is the one frame in the hotel's own set that is actually about this
   section's subject: a desk and a television by the window. It is a flex item
   with `flex: 1 1 auto`, so it takes exactly whatever height the right-hand
   column leaves over instead of a number picked by hand. */
.rg-biz-figure {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--spacing-radius-main);
  background-color: var(--colors-color-light-8);
}
.rg-biz-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rg-biz-sub { color: var(--colors-color-bg-3); }

.rg-biz-cases { display: flex; flex-flow: column; gap: 14px; }
/* Six short lines in one column would be a thin ribbon down half the band;
   two columns of three keep the block in proportion with the spec list beside
   it. */
.rg-biz-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}
.rg-biz-case {
  padding: 14px 0;
  border-top: 1px solid var(--colors-color-light-16);
  color: var(--colors-color-light-88);
}

.rg-biz-facts { margin: 0; display: flex; flex-flow: column; width: 100%; }
.rg-biz-fact {
  padding: 16px 0;
  border-top: 1px solid var(--colors-color-light-16);
}
.rg-biz-fact:last-child { border-bottom: 1px solid var(--colors-color-light-16); }
.rg-biz-dt { color: var(--colors-color-bg-3); margin-bottom: 6px; }
.rg-biz-dd { margin: 0; line-height: 1.55; color: var(--colors-color-light-88); }

.rg-biz-note {
  margin: 8px 0 0;
  max-width: 56ch;
  color: var(--colors-color-light-64);
}
.rg-biz-right > .cta-small { margin-top: 8px; }

@media screen and (max-width: 991px) {
  .rg-biz-halves { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .rg-biz-headline { max-width: none; }
  /* Stacked, there is no leftover height for the frame to absorb, so it takes
     the photograph's own 3:2 instead of a flex remainder of nothing. */
  .rg-biz-figure { flex: 0 0 auto; min-height: 0; aspect-ratio: 3 / 2; }
}
@media screen and (max-width: 640px) {
  .rg-biz-list { grid-template-columns: minmax(0, 1fr); }
}

/* ============ /renginiams/ · the enquiry, rebuilt on byq halden-miller-cta-2 =
   „CTA with Contact Form": one floating rounded card centred on the band,
   split in two — a large serif headline and a strip of proof on the left, the
   form on the right — 64px of padding, 16px radius, columns stacking below
   991px.

   The card is the ground's own lighter tint (light-8 with a light-16 hairline,
   the same pair .rg-contact-card used) rather than the reference's cream
   panel: every field on this page is .text-field.light-48, which is drawn for
   a dark ground. A cream card would have meant restyling seven controls to
   gain nothing the composition needs.

   The reference's left column ends in a marquee of invented client logos.
   This hotel has no partners to show and none will be fabricated, so that
   slot carries the two numbers the site already publishes and can defend —
   8,5 overall and 9,0 for staff — and the review count they rest on.

   The three .rg-contact-card blocks that used to stand in a right-hand column
   are gone; their rules above are now inert rather than wrong, since no
   element on the page carries those classes. The phone, the email and the
   „Atsakysime per 24 valandas" promise moved into the paragraph. */
.rg-enq-card {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 64px;
  border-radius: var(--spacing-radius-main);
  background-color: var(--colors-color-light-8);
  border: 1px solid var(--colors-color-light-16);
}

.rg-enq-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: stretch;
}

/* space-between is the reference's own distribution: the headline sits at the
   top of the card, the proof on its floor, and the slack goes between them —
   which is also what keeps the left column level with a form that is taller
   than its prose. */
.rg-enq-left {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: 56px;
}
.rg-enq-intro { display: flex; flex-flow: column; gap: 24px; }
.rg-enq-lede {
  margin: 0;
  max-width: 46ch;
  color: var(--colors-color-light-88);
}
.rg-enq-direct { margin: 0; line-height: 1.6; color: var(--colors-color-light-64); }
.rg-enq-link {
  color: var(--colors-color-light);
  text-decoration: none;
  border-bottom: 1px solid var(--colors-color-light-32);
  padding-bottom: 1px;
  transition: border-color .25s ease;
}
.rg-enq-link:hover { border-bottom-color: var(--colors-color-light); }

.rg-enq-proof {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 32px;
  /* Structural: it is the line the reference draws between the message and
     the proof under it. Solid, 1px, not decorative. */
  border-top: 1px solid var(--colors-color-light-16);
}
.rg-enq-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: var(--colors-color-light-8);
  border: 1px solid var(--colors-color-light-16);
  color: var(--colors-color-light-88);
}
/* A grid, not a wrapping flex row: measured at 1440 the three labels plus
   their gaps came to 611px in a 499px column, so „~3150" dropped onto a second
   line and the strip stopped reading as one row. Three equal columns keep the
   three numbers level and let the longest label wrap inside its own cell. */
.rg-enq-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
  align-items: start;
  width: 100%;
}
.rg-enq-stat { display: flex; flex-flow: column; gap: 6px; }
.rg-enq-n { color: var(--colors-color-light); }
.rg-enq-l { color: var(--colors-color-light-64); line-height: 1.35; }

/* Inside the card the form is no longer a card of its own: .form-offers keeps
   its field rhythm and loses its ground, its 44px of padding and its radius,
   which the wrapper now carries. Two classes deep so it outranks
   `.rg-enquiry .form-offers` above. */
.rg-enq-card .form-offers {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  gap: 24px;
  text-align: left;
}
.rg-enq-card .form-block-offers { width: 100%; max-width: 100%; margin: 0; }
.rg-enq-right { display: flex; flex-flow: column; }

/* Six short fields two across, the message across both. This also has to beat
   the 1160px three-across rule written for the old full-width form: same
   (0,2,0), later in the file. */
@media screen and (min-width: 992px) {
  .rg-enq-card .rg-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The date field is replaced at runtime by `button.text-field.w-input.dp-field`
   — note the missing `.light-48`, so it fell back to the template's dark-48
   dashed edge and, on this navy band, had no visible border at all. It gets
   the same edge as the six controls around it. */
.rg-enq-card .dp-field { border-color: var(--colors-color-light-48); }
.rg-enq-card .dp-field:focus { border-color: var(--colors-color-light); }

/* The reference's submit is a pill that hugs its label rather than a bar
   across the form. .wrap-submit-invisible is the positioning context for the
   transparent <input type="submit"> laid over it, so it has to shrink with
   the button or the click target would stay full width. */
.rg-enq-card .wrap-submit-invisible { width: max-content; max-width: 100%; }

/* The small arrow the reference carries. .button-bg is absolutely inset over
   the whole button and comes after this in the DOM, so the glyph needs its own
   stacking order to survive. */
.rg-enq-arrow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: inherit;
  transition: transform .3s ease;
}
.rg-enq-arrow svg { display: block; }
.cta-small:hover .rg-enq-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .rg-enq-arrow { transition: none; }
  .cta-small:hover .rg-enq-arrow { transform: none; }
}

@media screen and (max-width: 991px) {
  .rg-enq-cols { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .rg-enq-left { gap: 40px; }
}
@media screen and (max-width: 767px) {
  .rg-enq-card { padding: 32px; }
}
/* Three 12px uppercase labels will not sit side by side in a 262px card. */
@media screen and (max-width: 640px) {
  .rg-enq-strip { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}