/* ── Booking-ред за резултатите (28.08.2026) ────────────────────────────────
   Андреј, врз три слики (стар whitelabel · whitelabel.klaudija · b2b), сите три
   со иста вертикална картичка: „Sfakjas? · Booking com izgled".

   ШТО БЕШЕ МЕРЕНО ПРЕД ДА СЕ ПИШУВА (живо, Kefalonia Island · 29.08→05.09 ·
   2 гости, chromium, `drive.py`):

     ширина 1440 → картичка 1152×240, ред (слика 380 + текст 770)   ✔ ред
     ширина  935 → картичка  887×240, ред (слика 301 + текст 584)   ✔ ред
     ширина  760 → картичка  712×374, `display:block`, слика 710×200 ГОРЕ  ✘

   Значи редот од `overlay.css` (26.08) постоеше, но зад `@media (min-width:900px)`.
   Прозорецот на Андреј е ~950 уреднички пиксели; со Windows-скалирање 125% тоа е
   760 CSS-пиксели → под прагот → тој ја гледаше СТАРАТА вертикална картичка.
   Затоа првата поправка не е нов изглед, туку прагот да не биде на екранот.

   ЗОШТО @container, А НЕ @media: ширината што одлучува е ширината на КАРТИЧКАТА,
   не на екранот. Кога мапата е отворена (`body.sv-map-split`) листата се стеснува
   за ширината на панелот — на 1000px екран со отворена мапа редот има ~530px и
   трите колони не се вклопуваат, иако `@media` би рекол „широко е“. Контејнерското
   прашање го фаќа и едното и другото со едно правило.

   ЕДЕН ИЗВОР НА ВИСТИНА: овој фајл го презема редот од `overlay.css`; тамошниот
   блок `@media (min-width:900px)` е тргнат во истиот удар, за да нема две
   дефиниции што утре се разидуваат.

   Врати назад: тргни ги двата `bookinglook.*` реда од sub_filter во
   `whitelabel-klaudija.nginx.conf` + `nginx -s reload`. Без овој фајл картичката
   се враќа на вертикалната — не се крши.                                      */

/* Решетката станува контејнер за прашување по ширина. `inline-size` значи дека
   се ограничува само водорамната оска — висината останува слободна, инаку
   редовите со различна должина на името би се исекле. */
.sv-hotel-grid {
  container-type: inline-size;
  container-name: svlist;
  gap: 12px !important;          /* booking ги држи редовите блиску, не разлеани */
}

/* ═══ ТЕСНО (под 560px од КАРТИЧКАТА) ═════════════════════════════════════
   Тука booking исто така се сложува вертикално: слика горе, податоци долу.
   Разликата е во густината и во копчето — на телефон копчето е она што се
   допира, значи цел ред и ≥44px.                                            */
.sv-hotel-card {
  border-radius: 12px !important;
  transition: box-shadow .18s ease !important;
}
.sv-hotel-card:hover {
  transform: none !important;               /* booking не подигнува редови */
  box-shadow: 0 2px 12px rgba(0, 0, 0, .10) !important;
}

/* ═══ Hover — во духот на „Препорачано за вас" (11.09.2026) ═══════════════
   Андреј, гледајќи ги препорачаните картички: „ova hover mi se svigja …
   mora moderno da bide i ubavo". Во листата: длабока мека сенка, топол тон
   на рамката и бавно зумирање на сликата ВО нејзината рамка.
   БЕЗ подигање (translateY) — измерено 11.09 (workflow wf_058a3229-4bb):
   ред што се крева 4px „бега" од покажувачот оставен во долните 4px, па
   трепка (4 влегувања / 4 излегувања за 1,5s без мрдање на глувчето), а во
   вертикална листа покажувачот постојано минува преку тој раб. Затоа
   правилото погоре („booking не подигнува") останува. Кај препорачаните
   подигањето останува — лентата е хоризонтална.
   Само `(hover: hover) and (pointer: fine)`: на допир hover се „залепува".
   Зумирањето само кај `prefers-reduced-motion: no-preference`. */
@media (hover: hover) and (pointer: fine) {
  .sv-hotel-card {
    transition: box-shadow .35s ease, border-color .35s ease !important;
  }
  /* `z-index` — без подигањето редот не е свој слој, па следниот ред се
     црташе ПРЕКУ сенката (мерено 11.09: долната сенка исчезнуваше). Редовите
     се ставки во решетка, па z-index важи без `position` и без промена на
     геометријата — нема ризик од трепкање. */
  .sv-hotel-card:hover {
    z-index: 1 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .10), 0 18px 44px rgba(0, 0, 0, .07) !important;
    border-color: rgba(var(--brand-accent-rgb, 249, 115, 22), .35) !important;
  }
}
/* Тастатура: истиот знак кога фокусот е на копче во картичката. */
.sv-hotel-card:has(:focus-visible) {
  z-index: 1 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .10), 0 18px 44px rgba(0, 0, 0, .07) !important;
  border-color: rgba(var(--brand-accent-rgb, 249, 115, 22), .55) !important;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Фотографија: `<img>` нема дете во кое би се скалирала, па се скалира
     самата (1.07), а `clip-path` истовремено ја стеснува за истиот дел
     (3,27% ≈ (1 − 1/1.07)/2) — обоената површина останува точно во рамката,
     зумирање внатре. Работи во сите три мотори (дотогаш `object-view-box` =
     само Chromium; мерено 11.09: мирување [40,40,280,199], зум
     [40,40,280,200] во Chromium, WebKit и Firefox). Само во редот (≥560) —
     во сложениот распоред сликата е залепена за горниот раб на картичката. */
  @container svlist (min-width: 560px) {
    .sv-hotel-card > img:first-child {
      clip-path: inset(0 round 10px);
      transition: transform .7s cubic-bezier(.2, .8, .2, 1),
                  clip-path .7s cubic-bezier(.2, .8, .2, 1);
    }
    .sv-hotel-card:hover > img:first-child {
      transform: scale(1.07);
      clip-path: inset(3.27% round 9.35px);
    }
  }
  /* Илустрацијата зумира исто, за ред со и без фотографија да се однесуваат
     еднакво. SVG-то е `slice`, па 100% 100% се црта како `cover`. */
  .sv-hotel-card > div:first-child:has(> svg) {
    transition: background-size .7s cubic-bezier(.2, .8, .2, 1) !important;
  }
  .sv-hotel-card:hover > div:first-child:has(> svg) {
    background-size: 107.5% 107.5% !important;
  }
}

/* ═══ Кога снабдувачот не дал слика (11.09.2026) ══════════════════════════
   Андреј: „i koga nema slika mu sleduva ubava slika edna za da ne bide
   prazno". Билдот црта `div` со икона и „Нема достапни слики" на бледа
   позадина — празно поле среде листа од фотографии (Париз: 486 од 586).
   Наместо тоа — една иста илустрација, `sv-noimg.svg`. Цртеж, не
   фотографија: не смее да се чита како изгледот на хотелот.
   Селекторот бара `div` со икона како ПРВО дете — сликата на билдот е `img`
   на истото место, па вистинска фотографија никогаш не се покрива. */
.sv-hotel-card > div:first-child:has(> svg) {
  position: relative !important;
  background: #f4c4ab url("sv-noimg.svg") center / 100% 100% no-repeat !important;
}
.sv-hotel-card > div:first-child:has(> svg) > svg {
  display: none !important;
}
/* Реченицата на билдот („Нема достапни слики", преведена по јазикот на
   сајтот) останува видлива како мала ознака долу лево: цртежот е украс, и
   тоа мора да се гледа — истиот залез крај море стои и на градски хотел. */
.sv-hotel-card > div:first-child:has(> svg) > p {
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
  max-width: calc(100% - 16px) !important;
  margin: 0 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .86) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--brand-text, #1a1a2e) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Тесен ред (листа до 820px, рамка 150–166px): на 11px ознаката бараше
   151px, а добиваше најмногу 141 → „Нема достапни сл…" (мерено 11.09 на
   760: сите 492). На 10px со помала подлога бара ~132px. Истото важи и за
   ознаката на нашите редови (`.sv-rail-noimg::after`, svrail.css). */
@container svlist (min-width: 560px) and (max-width: 820px) {
  .sv-hotel-card > div:first-child:has(> svg) > p,
  .sv-rail-noimg::after {
    font-size: 10px !important;
    padding: 2px 7px !important;
    letter-spacing: 0 !important;
  }
}

/* Празната плочка со ѕвездички: кај нула ѕвездички билдот црта ПРАЗЕН јазол со
   позадина — сива пилула без содржина горе десно (мерено кај Alekos Beach
   Houses, `rating.value = 0`). Празно поле не е податок, значи не се црта. */
.sv-hotel-card > :nth-child(2) > :nth-child(1) > :last-child:empty {
  display: none !important;
}

/* ═══ РЕД (над 560px од КАРТИЧКАТА) ═══════════════════════════════════════ */
@container svlist (min-width: 560px) {

  .sv-hotel-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    gap: 16px !important;
  }

  /* 1 · сликата (или плочката „Нема достапни слики")
     Кај booking сликата е ВНАТРЕ во картичката, со свои заоблени агли — не
     залепена за работ.
     11.09.2026 — `height:100%` НЕ беше фиксна висина. Во ред без зададена
     висина процентот се чита како `auto`, па `<img>` ја зема висината од
     сопствената пропорција: портрет 320×480 → 240×360 (Maison Eugenie,
     Париз), квадрат 320×320 → 240×240. Мерено на живо: 150–360px во иста
     листа (Андреј: „zaso site sliki se isti samo ednava strci?").
     Сега висината ја носи РАМКАТА, не фотографијата:
     · `contain: size` — природната големина на фотографијата не учествува
       во висината на редот воопшто;
     · `min-height` = 2/3 од ширината на рамката (облик 3:2 на најчестата
       фотографија, 320×213), изразена преку ширината на листата (`cqi` на
       svlist: рамката е 23% од содржината на картичката = листа − 30px),
       ограничена на 150–160px;
     · `stretch` — ако текстот е повисок, сликата го следи, наместо под неа
       да остане празно.
     Зошто не `aspect-ratio`: во WebKit (Safari) растегната ставка го губи
     пропорцискиот минимум — фотографиите останаа 160, а плочките без слика
     и нашите редови 150 во иста листа (мерено 11.09, три проби). Со
     формулата трите мотори даваат ист резултат. На 1024 текстот понекогаш е
     до 1px повисок од рамката; рамката го следи. */
  .sv-hotel-card > :nth-child(1) {
    flex: 0 0 clamp(150px, 23%, 240px) !important;
    width: clamp(150px, 23%, 240px) !important;
    max-width: 240px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    contain: size !important;
    min-height: clamp(150px, calc(15.33cqi - 4.6px), 160px) !important;
    align-self: stretch !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  /* 2 · текстот. `padding-right` е местото на десната колона — таа е извадена
     од текот (`absolute`), па без резервација името би легнало под цената.
     Бројот е ширина(184) + процеп(16). */
  .sv-hotel-card > :nth-child(2) {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 2px 0 2px 0 !important;
    padding-right: 200px !important;
    min-height: 150px !important;
  }

  /* 3 · десната колона: цена и копче, одделени со линија.
     Тоа е потписот на booking — не боја, туку таа вертикална граница и цената
     подравнета десно, долу.

     Зошто `absolute`, а не трета колона во решетка: последниот ред е ЕДИНСТВЕН
     јазол во туѓиот JSX и над него стојат 2 до 4 реда (име, растојание,
     локација, соба) во променлив број. Решетка би барала да се знае бројот
     редови; вадењето од текот не бара ништо да се знае. */
  .sv-hotel-card > :nth-child(2) > :last-child {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 184px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding-left: 16px !important;
    border-left: 1px solid var(--brand-border, rgba(0, 0, 0, .12)) !important;
    text-align: right !important;
  }

  /* Името и ѕвездичките ЗАЕДНО, лево.
     Билдот го реди редот со `justify-content: space-between` и `flex:1` на
     името, па ѕвездичките завршуваа залепени за десниот раб на текстот —
     половина екран од името на кое се однесуваат (мерено на Paralia: име на
     x=417, ѕвездички на x=1021). Кај booking ѕвездичките се дел од името. */
  .sv-hotel-card > :nth-child(2) > :nth-child(1) {
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  .sv-hotel-card > :nth-child(2) > :nth-child(1) > :first-child {
    flex: 0 1 auto !important;
    margin-right: 0 !important;
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
  }
}

/* ═══ Колку ноќи и колку гости ════════════════════════════════════════════
   Кај booking над цената стои „7 ноќи, 2 возрасни" — тоа е реченица за
   ПРЕБАРУВАЊЕТО, не тврдење за основата на цената, па не бара ништо што го
   немаме. Текстот го пишува `bookinglook.js` во променливата `--sv-stay`,
   читан од самата форма (истиот извор како кај `searchbar.js`). Кога го нема,
   `content` е празна низа и редот не постои — не се пишува претпоставка. */
.sv-hotel-card > :nth-child(2) > :last-child::before {
  content: var(--sv-stay, "");
  display: block;
  font-size: .74rem;
  line-height: 1.2;
  color: var(--brand-text-muted, #6b7280);
  margin-bottom: 2px;
}

/* ═══ Цената и копчето ════════════════════════════════════════════════════
   Кај booking цената е крупна и НЕУТРАЛНА, а копчето е она што вика. Кај нас
   беше обратно: цената портокалова, копчето бледо со тенка рамка — па редот
   немаше што да се притисне. Тежината се преместува на копчето.             */
.sv-hotel-card > :nth-child(2) > :last-child > :nth-child(1) {
  color: var(--brand-text, #1a1a2e) !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  line-height: 1.15 !important;
}

.sv-hotel-card > :nth-child(2) > :last-child button {
  width: 100% !important;
  min-height: 44px !important;              /* прагот за прст, правило 22.04 */
  justify-content: center !important;
  background: var(--brand-accent, #f0801a) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
}
.sv-hotel-card > :nth-child(2) > :last-child button:hover {
  background: var(--brand-accent-dark, #d96a08) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.sv-hotel-card > :nth-child(2) > :last-child button svg {
  color: #fff !important;
}

/* ═══ Тесно: сликата останува горе, цената и копчето во еден ред ══════════
   Тука редот со цената е ВО текот (не е `absolute`), па `::before` е трет
   член на истиот flex — без ова „7 ноќи · 2 гости" би седнало ЛЕВО од цената
   како да е дел од неа. Затоа зема цел ред и оди прв.                        */
@container svlist (max-width: 559.98px) {
  .sv-hotel-card > :nth-child(2) > :last-child {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  .sv-hotel-card > :nth-child(2) > :last-child::before {
    flex: 0 0 100% !important;
    order: -1 !important;
    text-align: left !important;
  }
  .sv-hotel-card > :nth-child(2) > :last-child button {
    min-height: 44px !important;
    flex: 0 0 auto !important;
  }
}

/* ═══ „Препорачано за вас" со 1–2 картички: лизгање наместо сечење (12.09.2026)
   Од 12.09 регионот повеќе не се дополнува од надвор (wl_recommend.py), па
   лента со ТОЧНО 2 картички е реална состојба (мерено на LAB, Египет/Hurgada:
   Хургада + El Qoseir). overlay.js под 3 картички црта СТАТИЧНА патека
   (`.sv-rec-static`, без копија, без анимација), а `.sv-rec-strip{overflow:hidden}`
   од overlay.css на 390px ја сечеше втората картичка на 14% видливост без
   начин да се стигне до неа (scrollLeft остануваше 0 на тркалце и на влечење).
   Лентата што кружи (≥3) не се менува: правилото важи само кога во лентата
   стои статична патека со ВИСТИНСКИ картички — не и скелетот при вчитување.
   overlay.css е туѓ фајл денес; правилото живее тука, по него во редоследот
   на sub_filter, со поголема специфичност. Врати назад: избриши го блокот. */
.sv-rec-strip:has(> .sv-rec-track.sv-rec-static a.sv-rec-card) {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.sv-rec-strip:has(> .sv-rec-track.sv-rec-static a.sv-rec-card) .sv-rec-half > * {
  scroll-snap-align: start;
}