/* Phones, landscape phones and tablets. Loaded last on every public page, so equal selectors win here.
   A desktop window with a mouse looks as before down to 801px: the tap-target and 12px-minimum rules
   apply to touch screens (pointer: coarse) and to windows of 800px or narrower; the rest sits in phone
   width queries or the short-landscape query. */

/* ---------------------------------------------------------------------------------------------
   Room page: the booking panel and the photo grid take the full column once it is one column.
   (The phone order uses flex; without stretch the items shrink to their content.) */
@media (max-width: 800px) {
  .room-stay-layout { align-items: stretch; }
}
/* Phones: calendar days stay at least 40px wide (at 320px the panel runs to the screen edges). */
@media (max-width: 600px) {
  .room-booking-panel { padding-inline: 12px; }
  .room-booking-panel .calendar-surface { padding-inline: 4px; }
}
@media (max-width: 359px) {
  .room-booking-panel { margin-inline: calc(var(--inset) * -1); border-radius: 0; }
}

/* ---------------------------------------------------------------------------------------------
   Touch screens at any width: 16px form text, so iOS does not zoom into a field (iPad, landscape). */
@media (pointer: coarse) {
  .form-grid input, .form-grid select, .form-grid textarea,
  .room-form-fields input, .room-form-fields select, .room-form-fields textarea,
  .room-price-options select,
  .contact-fields input, .contact-fields select, .contact-fields textarea { font-size: 16px; }
}

/* ---------------------------------------------------------------------------------------------
   Tap targets on touch screens and phone-width windows (at least 40px). */
@media (max-width: 800px), (pointer: coarse) {
  /* Stay search: guest stepper and the calendar controls. */
  .stay-stepper button { width: 40px; height: 40px; }
  .stay-stepper .icon { width: 18px; height: 18px; }
  .stay-calendar-head { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .stay-calendar-nav { width: 40px; height: 40px; }
  .stay-calendar-clear { min-height: 44px; padding-inline: 8px; }
  /* Room booking calendar: month arrows and "Clear". */
  .room-booking-panel .calendar-month-heading button { width: 40px; height: 40px; }
  .room-booking-panel [data-calendar-clear] { min-height: 40px; padding: 8px 4px 8px 12px; }
  /* Room photo and testimonial dots: a wider hit area around the same small dot. */
  .room-dot, .testimonial-dot { padding-inline: 16px; }
  /* Room links in running copy and in the footer. */
  .room-description-contact { gap: 2px; }
  .room-description-contact h3 { margin-bottom: 6px; }
  .room-description-contact p { margin-bottom: 2px; }
  .room-description-contact a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-navigation nav { row-gap: 0; }
  .footer-navigation nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 40px; }
  .footer-contact { gap: 0; }
  .footer-navigation h2, .footer-contact h2 { margin-bottom: 8px; }
  .footer-contact a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-contact .footer-map { margin-top: 0; }
  /* Contact page details. */
  .contact-detail h2 { margin-bottom: 4px; }
  .contact-detail a { display: inline-flex; align-items: center; min-height: 40px; }
  .contact-detail .contact-directions { margin-top: 6px; min-height: 44px; }
  /* Breadcrumbs: taller links without moving the line. */
  .room-breadcrumb a, .inner-page .breadcrumb a { display: inline-flex; align-items: center; min-height: 40px; margin: -11px -4px; padding-inline: 4px; }
  /* Linked card titles and the long-stay link: a little taller. */
  .rooms-result-heading h2 a, .feature h2 a { display: inline-block; min-height: 40px; padding-block: 5px; margin-block: -5px; }
  .long-stay-offer a { padding-block: 8px; margin-top: 0; }
  /* Article photo "+" control. */
  .article-photo-control { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------------------------------------
   Phones in portrait. */
@media (max-width: 600px) {
  /* Homepage rooms list: the "open room" arrow is a 40px-wide target beside the name, not over it;
     the name keeps the rest of the card and scales with it, so „Единична стая“ stays on one line. */
  .rooms .room-choice .room-option,
  .rooms .room-choice .room-option:first-child { padding-left: 12px; padding-right: 40px; }
  .rooms .room-detail-link { right: 0; width: 40px; height: 100%; justify-content: flex-end; padding-right: 10px; }
  .rooms .room-name { font-size: clamp(14px, calc(6.5vw - 10.7px), 17px); }

  /* Booking modal fields keep 16px text. */
  .booking-dialog .form-grid input, .booking-dialog .form-grid select, .booking-dialog .form-grid textarea { font-size: 16px; }

  /* No text under 12px. The last footer line stays clear of the back-to-top circle at the page end. */
  .footer-bottom { font-size: 12px; padding-right: 46px; }
  .concierge { font-size: 12px; }
  .inner-page .breadcrumb { font-size: 12px; }
  .template-lightbox figcaption, .lightbox figcaption { font-size: 12px; }
  .gallery-result-count { font-size: 12px; }
  .language-picker summary { font-size: 12px; }
  .site-header .main-nav, .site-header.is-sticky .main-nav { font-size: 12px; }
  .header-book, .site-header.is-sticky .header-book { font-size: 12px; }
}
@media (max-width: 760px) {
  .article-pair-figure figcaption, .article-lead-photo figcaption, .article-back { font-size: 12px; }
  .article-contents a { min-height: 44px; padding-block: 9px; font-size: 12px; }
}
/* The header address (shown from 601px up) is a 40px-tall link; at 12px it breaks before the city name. */
@media (min-width: 601px) and (max-width: 800px), (min-width: 601px) and (pointer: coarse) {
  .header-address { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (min-width: 601px) and (max-width: 800px), (min-width: 601px) and (pointer: coarse) {
  .header-address { text-wrap: balance; }
}
/* No text under 12px on phones and touch screens (these are 10–11px there otherwise). */
@media (max-width: 800px), (pointer: coarse) and (max-width: 1799px) {
  .room-rates > p, .availability-preview-note, .reservation-submit .field-hint, .room-price-summary small,
  .room-alternative-meta, .calendar-weekdays, .stay-weekdays, .contact-submit p, .footer-bottom,
  .article-contents a, .form-required { font-size: 12px; }
}
@media (max-width: 800px), (pointer: coarse) and (max-width: 1250px) {
  .header-address { font-size: 12px; }
}
/* Touch screens with the wide header: the phone number is a 40px-tall link too, in the same header height. */
@media (pointer: coarse) and (min-width: 1251px) {
  .site-header:not(.is-sticky) .header-location { gap: 0; padding-block: 7px; }
  .header-address { align-items: flex-end; padding-bottom: 3px; }
  .header-phone { display: inline-flex; align-items: flex-start; min-height: 40px; padding-top: 3px; }
}
/* Touch tablets: the booking panel is a narrow side column; the calendar card uses more of its width,
   so the days stay 40px wide (also on a touch tablet in landscape up to 1439px). */
@media (min-width: 801px) and (max-width: 1100px) and (pointer: coarse) {
  .room-stay-layout { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
  .room-booking-panel .calendar-surface { margin-inline: -10px; }
}
@media (pointer: coarse) and (min-width: 1101px) and (max-width: 1439px) {
  .room-booking-panel { padding-inline: 16px; }
  .room-booking-panel .calendar-surface { margin-inline: -10px; padding-inline: 4px; }
}
/* Not-found pages: a little air between the text and the way back. */
@media (max-width: 800px), (pointer: coarse) and (max-width: 1100px) {
  section.section-inset#page-content > p + a.button,
  .article-intro#page-content > p + a.button,
  .module-custom-intro#page-content > h1 + a.button { margin-top: 24px; }
}

/* The five equal header cells are 62px wide at 320px; "Контакти" needs 64.6px at 12px, so they keep 11px. */
@media (max-width: 340px) {
  .site-header .main-nav, .site-header.is-sticky .main-nav { font-size: 11px; }
}
/* Narrow phones: the homepage room list is one column, so every name fits beside its arrow. */
@media (max-width: 380px) {
  .module-room-showcase .room-list { grid-template-columns: 1fr; }
  .rooms .room-name { font-size: 16px; }
}
/* Very narrow phones: calendar days keep 40px; the booking modal gives each date a full row,
   so the native date field shows the whole date (the other paired fields stay side by side). */
@media (max-width: 360px) {
  .stay-day, .stay-day-blank { height: 40px; }
  /* The stay calendar keeps a six-week month, its summary and Clear / Done on a 640px-tall screen
     under the sticky bar: a one-line hint and tighter rows. */
  .stay-calendar { padding: 12px 10px 10px; }
  .stay-calendar-head { gap: 6px; margin-bottom: 4px; }
  .stay-calendar-hint { font-size: 13px; }
  .stay-month-title { margin: 2px 0 8px; }
  .stay-weekdays { margin-bottom: 2px; }
  .stay-weekdays span { padding-block: 2px; }
  .stay-days { row-gap: 2px; }
  .stay-calendar-foot { gap: 6px 12px; margin-top: 10px; padding-top: 10px; }
}
@media (max-width: 350px) {
  .booking-dialog .form-grid > label:has(input[type='date']) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------------------------
   Sticky header on phones and tablets: cells and controls at least 40–44px. */
@media (max-width: 800px), (pointer: coarse) and (max-width: 900px) {
  .site-header.is-sticky .main-nav a.nav-link,
  .site-header.is-sticky .main-nav button.nav-link { min-height: 42px; padding-block: 8px; }
}
@media (max-width: 800px), (pointer: coarse) {
  .site-header.is-sticky .header-brand { min-height: 40px; }
  .site-header.is-sticky .header-book { min-height: 40px; }
  .site-header.is-sticky .language-picker summary { min-height: 40px; }
}

/* ---------------------------------------------------------------------------------------------
   Contact heading: balanced lines (no lone last word). */
@media (max-width: 1100px) {
  .contact-intro h1 { text-wrap: balance; }
}

/* ---------------------------------------------------------------------------------------------
   Back-to-top on phones and tablets: hidden while the page is being read downwards (mobile.js). */
@media (max-width: 800px) {
  .back-to-top { transition: opacity .2s ease, visibility .2s ease, background .2s, color .2s; }
  .is-reading-down .back-to-top { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* =============================================================================================
   Landscape phones: short screens (about 320–430px tall). */
@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  /* Header over the photo: a slimmer top row. */
  .site-header:not(.is-sticky) .header-top { min-height: 0; }
  .site-header:not(.is-sticky) .header-brand { padding-block: 6px; }
  .site-header:not(.is-sticky) .header-brand img { width: 76px; height: 48px; }
  .site-header:not(.is-sticky) .header-location,
  .site-header:not(.is-sticky) .header-contact { padding-block: 6px; }
  .site-header:not(.is-sticky) .header-book { min-height: 44px; padding-block: 8px; }
  .site-header:not(.is-sticky) .main-nav a.nav-link,
  .site-header:not(.is-sticky) .main-nav button.nav-link { min-height: 44px; padding-block: 8px; }

  /* Rooms drop-down: a full-width panel under the navigation with the rooms in two columns,
     so every room and the gold "all rooms" button fit in the short screen. */
  .site-header .main-nav .nav-item[data-nav-menu] { position: static; }
  .site-header.is-sticky .main-nav { position: static; }
  .site-header .nav-menu { left: 10px; right: 10px; width: auto; max-height: calc(100svh - 124px); overflow-y: auto; overscroll-behavior: contain; border-radius: 4px; }
  .site-header.is-sticky .nav-menu { max-height: calc(100svh - var(--sticky-offset, 70px) + 12px); }
  .site-header .nav-menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  .site-header .main-nav .nav-menu .nav-menu-link { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 5px 8px; }
  .site-header .nav-menu-link img { width: 56px; height: 38px; }
  .site-header .main-nav .nav-menu .nav-menu-all { position: sticky; bottom: 0; margin-top: 6px; padding-block: 11px; box-shadow: 0 -8px 10px var(--paper); }

  /* Hero: at least one screen tall, the heading and the main action at its foot, the search band after it.
     The content sits in the flow under the header, so the hero grows rather than slide under it. */
  .hero { display: flex; flex-direction: column; min-height: 100svh; height: auto; max-height: none; aspect-ratio: auto; }
  .hero-content { position: relative; left: auto; bottom: auto; margin: auto 0 20px var(--inset); padding-top: 14px; max-width: min(78%, 600px); }
  .hero-city { font-size: 20px; margin-bottom: 2px; }
  .hero h1 { font-size: 44px; line-height: 1.05; }
  .hero-description { max-width: 52ch; margin-top: 8px; font-size: 14px; line-height: 1.55; }
  .hero-button { min-height: 46px; margin-top: 14px; padding-block: 10px; }
  .room-detail-hero.hero { min-height: 100svh; height: auto; max-height: none; }
  .room-breadcrumb { margin-top: 14px; }
  .room-hero-content { position: relative; left: auto; right: auto; bottom: auto; margin: auto var(--inset) 20px; padding-top: 14px; gap: 24px; }
  .room-detail-hero h1 { font-size: 44px; }
  .room-hero-content p { max-width: 52ch; margin-top: 8px; font-size: 14px; line-height: 1.55; }
  .room-hero-actions { gap: 8px; padding: 0; }
  .room-hero-actions .button, .room-photos-link { min-height: 46px; padding-block: 10px; }

  /* Homepage rooms: the list beside the photo (as on a wide screen), both one screen tall,
     so choosing a room changes the photo in view. The short descriptions stay hidden, as on phones. */
  .rooms { --room-panel-height: clamp(200px, calc(100svh - 76px), 440px); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: 'heading heading' 'selection presentation'; gap: 18px 16px; }
  .module-room-showcase:not(:has(.rooms-heading)) { grid-template-areas: 'selection presentation'; }
  .rooms-selection { height: var(--room-panel-height); }
  .room-presentation { height: var(--room-panel-height); }
  .module-room-showcase .room-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--module-room-count, 4), minmax(0, 1fr)); gap: 8px; height: 100%; }
  .room-option, .room-option:first-child { min-height: 0; padding-block: 6px; }
  .rooms .room-description { display: none; }
  .room-portrait .room-actions { align-items: stretch; }

  /* Search band: shorter fields. */
  .stay-field { min-height: 64px; padding-block: 10px; gap: 4px; }
  .stay-search .stay-search-submit { min-height: 56px; }

  /* Stay calendar: one month in a sheet over the whole screen; the month sits at the right,
     the hint, the summary and Clear / Done at the left, so everything is visible at once. */
  .is-stay-calendar-open .stay-search { z-index: 70; }
  .stay-calendar { position: fixed; inset: 0; z-index: 70; width: auto; max-width: none; display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px minmax(0, 1.55fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "prev title next weekdays" "hint hint hint days" "foot foot foot days";
    align-content: center; gap: 0; padding: 12px max(24px, calc((100vw - 820px) / 2)); border-radius: 0; box-shadow: none;
    overflow-y: auto; overscroll-behavior: contain; }
  .stay-calendar.is-above { border-radius: 0; box-shadow: none; }
  .stay-calendar-head, .stay-calendar-months, .stay-month { display: contents; }
  .stay-calendar-nav[data-stay-month='-1'] { grid-area: prev; }
  .stay-calendar-nav[data-stay-month='1'] { grid-area: next; }
  .stay-month-title { grid-area: title; align-self: center; margin: 0; font-size: 20px; }
  .stay-calendar-hint { grid-area: hint; margin: 16px 0 0; }
  .stay-weekdays { grid-area: weekdays; align-self: end; margin: 0 0 2px 28px; }
  .stay-days { grid-area: days; align-self: start; align-content: start; margin-left: 28px; }
  .stay-days { row-gap: 2px; }
  .stay-day, .stay-day-blank { height: 40px; }
  .stay-calendar-foot { grid-area: foot; align-self: end; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0 0; padding-top: 12px; }
  .stay-calendar-summary { flex-basis: 100%; }
  .stay-calendar .stay-calendar-done { margin-left: auto; }

  /* Photo viewer: the photo uses the height; swipe to browse (no thumbnail strip). */
  .template-lightbox[open] { padding: 8px 72px; gap: 0; }
  .template-lightbox > figure { gap: 4px; }
  .viewer-stage { height: calc(100svh - 40px); }
  .viewer-thumbnails { display: none; }
  .lightbox .dialog-close { top: 10px; right: 12px; }

  /* Booking modal: less padding so more of the form shows. */
  .booking-dialog { padding: 20px 28px 28px; }
  .booking-dialog .dialog-close { top: 10px; right: 12px; }
  .booking-heading h2 { font-size: 26px; }
  .booking-dialog form { margin-top: 14px; }
}

/* Booking modal on short screens: the × keeps its corner while the form scrolls under it (sticky in the dialog).
   It starts exactly where it sat before: the negative margins cancel the dialog padding and its own height,
   and the sticky top counts from inside the dialog padding (so it equals the top margin). */
@media (max-width: 600px) {
  .booking-dialog .dialog-close { position: sticky; top: -10px; right: auto; float: right; margin: -10px -6px -34px 0; background: var(--paper); }
}
@media (min-width: 601px) and (max-height: 840px) {
  .booking-dialog .dialog-close { position: sticky; top: -6px; right: auto; float: right; margin: -6px -18px -38px 0; background: var(--paper); }
}
@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .booking-dialog .dialog-close { position: sticky; top: -10px; right: auto; float: right; margin: -10px -16px -34px 0; background: var(--paper); }
}

/* Room search results on landscape phones: the photo beside the text, and the name, price and buttons
   first, so all four are on the short screen together; the summary and the features follow them. */
@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .rooms-result { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); min-height: 0; }
  /* The photo is about one screen tall, beside the name, price and buttons, instead of a strip as tall as the whole card. */
  .rooms-result-photo { aspect-ratio: auto; min-height: 0; align-self: start; height: calc(100svh - 64px); }
  .rooms-result-body { gap: 10px; padding: 14px 20px 18px; }
  .rooms-result-heading { gap: 6px 14px; }
  .rooms-result h2 { font-size: 24px; }
  .rooms-status { min-height: 0; padding: 4px 10px; }
  .rooms-result-footer { order: 1; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 0 0 4px; padding-top: 10px; }
  .rooms-result-summary, .rooms-result-features { order: 2; }
  .rooms-result-price strong { font-size: 24px; }
  .rooms-result-actions { flex-wrap: wrap; gap: 8px; }
  .rooms-result-actions .button { flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 10px 14px; font-size: 13px; white-space: nowrap; }
}
/* Narrower landscape phones: a narrower photo, so both buttons stay on one row beside it. */
@media (max-width: 700px) and (max-height: 500px) and (orientation: landscape) {
  .rooms-result { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .rooms-result-body { padding-inline: 16px; }
  .rooms-result-actions .button { padding-inline: 10px; }
}
/* Up to 600px wide the sticky bar keeps two rows: the availability note follows the buttons there. */
@media (max-width: 600px) and (max-height: 500px) and (orientation: landscape) {
  .rooms-result-heading { display: contents; }
  .rooms-result-body > .rooms-status, .rooms-result-heading > .rooms-status { order: 2; align-self: flex-start; }
}

/* Guest quotes on landscape phones: tighter spacing and the photo beside the name, so the heading,
   the quote, who wrote it and the dots fit on the short screen together. */
@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .testimonials { padding-top: 12px; padding-bottom: 8px; }
  .testimonial-viewport { margin-top: 8px; }
  .testimonials .testimonial-slide { gap: 12px; padding-block: 0; }
  .testimonial-slide figcaption { display: grid; grid-template-columns: auto auto; gap: 0 12px; align-items: center; justify-content: center; text-align: left; }
  .testimonial-avatar { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .testimonial-avatar .icon { width: 22px; height: 22px; }
  .testimonial-name { align-self: end; }
  .testimonial-origin { align-self: start; }
  .testimonials .testimonial-controls { margin-top: 0; }
}
@media (max-width: 600px) and (max-height: 500px) and (orientation: landscape) {
  .testimonials .testimonial-slide blockquote p { font-size: 22px; }
}

/* Landscape phones up to 600px wide (the phone header keeps its two rows): a slimmer header,
   the two hero actions side by side, and calendar-sheet days of 40px. */
@media (max-width: 600px) and (max-height: 500px) and (orientation: landscape) {
  .site-header:not(.is-sticky) .header-top { padding-block: 2px; }
  .site-header:not(.is-sticky) .main-nav { min-height: 44px; }
  .hero-content { margin-left: 26px; }
  .room-hero-content { margin-inline: 22px; gap: 14px; }
  .room-hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rooms { --room-panel-height: clamp(200px, calc(100svh - 108px), 440px); }
  .stay-calendar { grid-template-columns: 40px minmax(0, 1fr) 40px 296px; padding-inline: 16px; }
  .stay-month-title { font-size: 18px; }
  .stay-weekdays, .stay-days { margin-left: 16px; }
}

/* Room page features on phones and tablets: two columns with smaller icons while the block is
   306–365px wide (13px labels below 326px), so a long word such as „местоположение“ still fits its cell;
   one column below that. */
@media (max-width: 1100px) {
  @container room-features (min-width: 306px) and (max-width: 365px) {
    .room-description-column .room-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .room-description-column .room-feature { gap: 8px; }
    .room-description-column .room-feature-icon { width: 32px; height: 32px; }
    .room-description-column .room-feature-svg { width: 19px; height: 19px; }
    .room-description-column .room-feature-label { overflow-wrap: break-word; }
  }
  @container room-features (min-width: 306px) and (max-width: 325px) {
    .room-description-column .room-feature-label { font-size: 13px; }
  }
  @container room-features (min-width: 301px) and (max-width: 305px) {
    .room-description-column .room-feature-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  }
}

/* Landscape phones from 601px wide: the sticky bar is one row (logo, navigation, language, booking) instead of two;
   the hero text keeps clear of the "contact us" bell at the right. */
@media (min-width: 601px) and (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .hero-content { max-width: min(78%, 600px, calc(100% - 190px)); }
  .site-header.is-sticky { grid-template-columns: 100px minmax(0, 1fr) auto; gap: 0 12px; min-height: 0; padding-block: 4px; }
  .site-header.is-sticky .header-brand .brand-wordmark { width: 98px; height: 21px; }
  .site-header.is-sticky .main-nav { grid-area: 1 / 2; align-self: stretch; margin-block: -4px; border-top: 0; font-size: 12px; }
  .site-header.is-sticky .header-contact { grid-area: 1 / 3; gap: 8px; }
  .site-header.is-sticky .main-nav a.nav-link,
  .site-header.is-sticky .main-nav button.nav-link { min-height: 48px; padding: 6px 3px; }
  .site-header.is-sticky .header-book { min-width: 0; min-height: 40px; padding: 8px 12px; font-size: 12px; }
  .site-header.is-sticky .nav-label-long { display: none; }
  .site-header.is-sticky .nav-label-short { display: inline; }
}
/* Narrow landscape phones (about 640–700px wide): the one-row sticky bar shows the flag without "BG". */
@media (min-width: 601px) and (max-width: 700px) and (max-height: 500px) and (orientation: landscape) {
  .site-header.is-sticky { grid-template-columns: 92px minmax(0, 1fr) auto; column-gap: 8px; }
  .site-header.is-sticky .header-brand .brand-wordmark { width: 90px; height: 19px; }
  .site-header.is-sticky .language-picker summary > span { display: none; }
}

/* =============================================================================================
   Six menu items (Admin → Меню на сайта) on phones, in the header and in the sticky bar alike: each cell is
   as wide as its label and the spare width is shared equally, so the labels stay evenly spaced and never
   run into each other. 12px text, 11px at 360px and below; these override the five-item sizes above. */
@media (max-width: 600px) {
  .site-header .main-nav.is-crowded,
  .site-header.is-sticky .main-nav.is-crowded { grid-template-columns: repeat(var(--nav-count, 6), minmax(min-content, auto)); justify-content: normal; padding-inline: 0; font-size: 12px; overflow-x: clip; }
  .site-header.is-sticky .main-nav.is-crowded { margin-inline: -16px; }
  .site-header .main-nav.is-crowded a.nav-link,
  .site-header .main-nav.is-crowded button.nav-link { padding-inline: 2px; }
}
@media (max-width: 360px) {
  .site-header .main-nav.is-crowded,
  .site-header.is-sticky .main-nav.is-crowded { font-size: 11px; }
}
/* Where only a few pixels separate the labels (340px and below, the landscape bar below 701px),
   a hairline between the cells keeps them apart. */
@media (max-width: 340px) {
  .site-header .main-nav.is-crowded > :is(a.nav-link, .nav-item):not(:first-child) { background-image: linear-gradient(#f8f4ec40, #f8f4ec40); background-size: 1px 40%; background-position: 0 50%; background-repeat: no-repeat; }
}
@media (min-width: 601px) and (max-width: 700px) and (max-height: 500px) and (orientation: landscape) {
  .site-header.is-sticky .main-nav.is-crowded > :is(a.nav-link, .nav-item):not(:first-child) { background-image: linear-gradient(#f8f4ec40, #f8f4ec40); background-size: 1px 40%; background-position: 0 50%; background-repeat: no-repeat; }
}
/* The one-row sticky bar of landscape phones: the same cells, a smaller chevron without its spacer; 11px below 701px. */
@media (min-width: 601px) and (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .site-header.is-sticky .main-nav.is-crowded { grid-template-columns: repeat(var(--nav-count, 6), minmax(min-content, auto)); justify-content: normal; }
  .site-header.is-sticky .main-nav.is-crowded a.nav-link,
  .site-header.is-sticky .main-nav.is-crowded button.nav-link { gap: 2px; padding-inline: 2px; }
  .site-header.is-sticky .main-nav.is-crowded .nav-menu-toggle::before { content: none; }
  .site-header.is-sticky .main-nav.is-crowded .nav-link .icon { width: 11px; height: 11px; }
}
@media (min-width: 601px) and (max-width: 700px) and (max-height: 500px) and (orientation: landscape) {
  .site-header.is-sticky .main-nav.is-crowded { font-size: 11px; }
}

/* ---------------------------------------------------------------------------------------------
   Owner, 29 Sep 2026. Phones (600px and narrower): the header is [menu button] [logo, centred] [book]; the menu row
   and the language picker move into a menu that slides in from the left. The room photo dots and the homepage
   "Browse all" button go; the testimonial quote is twice as large. Every width: the contact bell on the hero is the
   icon only. */
.nav-toggle { display: none; }
@media (max-width: 600px) {
  .site-header .main-nav, .site-header .header-contact .language-picker { display: none; }
  .site-header.is-sticky { display: block; padding: 0; }
  .site-header .header-top, .site-header.is-sticky .header-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 0; padding: 12px 16px; }
  .site-header.is-sticky .header-top { padding-block: 8px; }
  .site-header .header-location, .site-header.is-sticky .header-location { display: flex; grid-area: 1 / 1; justify-self: start; align-items: center; padding: 0; border: 0; }
  .site-header .header-location > a { display: none; }
  .site-header .header-brand, .site-header.is-sticky .header-brand { grid-area: 1 / 2; justify-self: center; justify-content: center; padding: 0; border: 0; }
  .site-header .header-contact, .site-header.is-sticky .header-contact { grid-area: 1 / 3; justify-self: end; justify-content: flex-end; padding: 0; gap: 0; }
  .site-header .header-book, .site-header.is-sticky .header-book { min-width: 0; min-height: 44px; padding: 10px 14px; font-size: 12px; }
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -8px; padding: 0; background: none; border: 0; color: var(--ivory); cursor: pointer; }
  .nav-toggle-bars { display: grid; gap: 5px; width: 24px; }
  .nav-toggle-bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .nav-toggle:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; border-radius: 4px; }
  .room-portrait .room-dots { display: none; }
  .articles-browse-all { display: none; }
  .testimonials .testimonial-slide blockquote p { font-size: calc(2 * min(var(--quote-size, clamp(40px, 4.6vw, 72px)), calc(185cqi / min(var(--quote-ch, 34), 40)))); line-height: 1.25; }
}
@media (max-width: 360px) {
  .site-header .header-book, .site-header.is-sticky .header-book { padding-inline: 10px; font-size: 11px; }
}

/* The menu: a panel from the left over a darkened page. It glides in on a soft curve, then its links follow one
   after another; it slides back out a little faster. */
html.nav-drawer-open { overflow: hidden; }
.nav-drawer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.nav-drawer::backdrop { background: rgb(20 14 10 / 55%); }
.nav-drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: min(86vw, 360px); padding: 12px 24px 28px; overflow-y: auto; overscroll-behavior: contain; background: var(--footer); color: var(--ivory); box-shadow: 18px 0 40px rgb(20 14 10 / 30%); }
.nav-drawer[open] .nav-drawer-panel { animation: nav-drawer-in .55s cubic-bezier(.32, .72, 0, 1) both; }
.nav-drawer[open]::backdrop { animation: nav-drawer-fade-in .45s ease both; }
.nav-drawer[open] .nav-drawer-panel > :not(.nav-drawer-head), .nav-drawer[open] .nav-drawer-links > * { animation: nav-drawer-item .5s cubic-bezier(.32, .72, 0, 1) both; animation-delay: calc(140ms + var(--i, 0) * 45ms); }
.nav-drawer[open] .nav-drawer-panel > .nav-drawer-links { animation: none; }
.nav-drawer.is-closing .nav-drawer-panel { animation: nav-drawer-out .32s cubic-bezier(.4, 0, 1, 1) both; }
.nav-drawer.is-closing::backdrop { animation: nav-drawer-fade-out .32s ease both; }
@keyframes nav-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes nav-drawer-out { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes nav-drawer-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-drawer-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes nav-drawer-item { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.nav-drawer-brand img { display: block; width: 84px; height: auto; }
.nav-drawer-close { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; padding: 0; background: none; border: 0; color: var(--ivory); cursor: pointer; }
.nav-drawer-close .icon { width: 24px; height: 24px; }
.nav-drawer-links { display: flex; flex-direction: column; }
.nav-drawer-link { display: flex; align-items: center; min-height: 52px; padding: 8px 0; font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--ivory); }
.nav-drawer-link[aria-current="page"] { color: var(--button-gold); }
.nav-drawer-rooms { margin: -4px 0 10px; padding: 0 0 0 14px; list-style: none; }
.nav-drawer-rooms a { display: flex; align-items: center; min-height: 40px; font-size: 15px; color: rgb(248 244 236 / 82%); }
.nav-drawer-links a:hover, .nav-drawer-links a:focus-visible { color: var(--button-gold-hover); }
.nav-drawer-languages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.nav-drawer-languages a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 8px 12px; border-radius: 4px; background: rgb(248 244 236 / 8%); color: var(--ivory); font-size: 14px; transition: background-color .2s; }
.nav-drawer-languages a:hover { background: rgb(248 244 236 / 14%); }
.nav-drawer-languages a[aria-current] { background: var(--button-gold); color: var(--button-ink); font-weight: 700; }
.nav-drawer-languages img { width: 22px; height: 15px; border-radius: 2px; }
.nav-drawer-contact { display: grid; gap: 4px; margin-top: auto; padding-top: 28px; font-size: 14px; }
.nav-drawer-contact a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: rgb(248 244 236 / 88%); }
.nav-drawer-contact .icon { flex: none; width: 22px; height: 22px; color: var(--button-gold); }
.nav-drawer :focus-visible { outline: 2px solid var(--button-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer[open] .nav-drawer-panel, .nav-drawer.is-closing .nav-drawer-panel, .nav-drawer[open]::backdrop, .nav-drawer.is-closing::backdrop,
  .nav-drawer[open] .nav-drawer-panel > :not(.nav-drawer-head), .nav-drawer[open] .nav-drawer-links > * { animation: none; }
}

/* ---------------------------------------------------------------------------------------------
   Owner, 29 Sep 2026 (batch 5). */
/* Phone header: the menu button and the booking button are equal squares (the booking one shows a calendar). */
.header-book .icon { display: none; }
@media (max-width: 600px) {
  .nav-toggle { margin-left: 0; border-radius: 3px; background: rgb(248 244 236 / 14%); }
  .site-header .header-book, .site-header.is-sticky .header-book { display: grid; place-items: center; width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0; }
  .site-header .header-book .icon { display: block; width: 24px; height: 24px; }
  .site-header .header-book-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Hero on phones: the button and the contact bell on one line at the foot of the photo. */
.concierge.concierge-inline { display: none; }
@media (max-width: 600px) {
  .hero-content { bottom: 22px; }
  .hero > .concierge { display: none; }
  .hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
  .hero-actions .hero-button { margin-top: 0; }
  .concierge.concierge-inline { position: static; display: flex; max-width: none; }
  .concierge-inline .concierge-icon { width: 54px; height: 54px; }
  .concierge-inline .concierge-icon .icon { width: 26px; height: 26px; }
}
/* Phones: a tighter rhythm between sections, and every section heading the same size. */
@media (max-width: 600px) {
  [data-module]:not(.testimonials):not([data-module-kind="spacer"]) { padding-bottom: 28px; }
  [data-module].hotel-story, [data-module].module-room-showcase { padding-top: 28px; }
  [data-module].testimonials { padding-top: 36px; padding-bottom: 32px; }
  [data-module] h2[id^="module-"][id$="-heading"] { font-size: 34px; line-height: 1.15; }
}
/* Story titles in lists a little smaller. */
.story-index-copy h2 { font-size: clamp(26px, 2.6vw, 38px); }
[data-module-kind="articles"] .feature h2 { font-size: clamp(22px, 1.8vw, 30px); }
.article-related-grid .article-related-copy h3 { font-size: clamp(20px, 1.5vw, 24px); }
@media (max-width: 800px) { .story-index-copy h2 { font-size: 26px; } [data-module-kind="articles"] .feature h2 { font-size: 23px; } }
/* Booking form: the × sits outside the window (beside its top-right corner; above it on phones) and no band sticks
   over the fields while they scroll. */
dialog.booking-dialog { overflow: visible; }
dialog.booking-dialog::before { display: none; }
dialog.booking-dialog > .booking-body { border-radius: inherit; scroll-padding-top: 16px; }
dialog.booking-dialog > .dialog-close { top: 0; right: -60px; background: var(--button-gold); }
dialog.booking-dialog > .dialog-close:hover { background: var(--button-gold-hover); }
.booking-heading { padding-right: 0; }
@media (max-width: 600px) {
  dialog.booking-dialog { margin-top: 70px; max-height: calc(100dvh - 86px); }
  dialog.booking-dialog > .dialog-close { top: -58px; right: 0; }
  .booking-heading h2 { white-space: normal; }
}
/* Story contents on phones: a select field that jumps to the chosen section. */
.article-contents-picker { display: none; }
@media (max-width: 760px) {
  .article-reading-layout > .article-contents { position: static; max-width: none; padding-top: 0; }
  .article-contents nav { display: none; }
  .article-contents-picker { position: relative; display: block; --caret-size: 14px; }
  .article-contents-picker select { width: 100%; min-height: 54px; padding: 14px 48px 14px 18px; border: 0; border-radius: 4px; background: var(--canvas); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; -webkit-appearance: none; appearance: none; }
  .article-contents-picker .icon { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); pointer-events: none; }
}
/* The phone menu's languages: round flags with the language under them. */
.nav-drawer-languages { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.nav-drawer-languages a { flex-direction: column; justify-content: flex-start; gap: 7px; min-height: 0; padding: 4px 2px; background: none; font-size: 12px; color: rgb(248 244 236 / 78%); }
.nav-drawer-languages a:hover { background: none; color: var(--ivory); }
.nav-drawer-languages img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.nav-drawer-languages a[aria-current] { background: none; color: var(--button-gold); font-weight: 700; }
.nav-drawer-languages a[aria-current] img { box-shadow: 0 0 0 2px var(--footer), 0 0 0 4px var(--button-gold); }
/* A language without a flag file shows its code. */
.language-code-badge { display: inline-grid; place-items: center; min-width: 24px; height: 16px; padding: 0 3px; border-radius: 2px; background: var(--gold-tint, #f1e8d6); color: var(--ink); font-size: 10px; font-weight: 700; line-height: 1; }
.nav-drawer-languages .language-code-badge { width: 40px; height: 40px; border-radius: 50%; font-size: 13px; }