/* Destinations (/destinacii, /destinacia/<slug>): only what the content swap needs.
   Layout stays the template's. */

/* client-side paging of the destination grid (8 per page, like the template's „1 / 2”).
   Cards beyond page 1 are marked at build time so there is no flash before destinations.js runs;
   without JavaScript every card stays visible. */
.w-mod-js .grid-location-list > .ih-page-hidden { display: none; }
.grid-location-list > .ih-page-in { animation: ih-dest-in .5s ease both; animation-delay: calc(var(--ih-i, 0) * 60ms); }
@keyframes ih-dest-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* „Предишна” uses the template's pagination button; the icon sits before the label */
.w-pagination-previous.button-primary .w-pagination-previous-icon { margin-right: 4px; }

/* hero: the generated flag map keeps the template art's 100px height */
.location-flag-secondary { object-fit: contain; }

/* hero, narrower laptops (1024 to 1366): a wide country map (Узбекистан, Турция, Австрия…) next to a long
   name ran out of the dark panel and off the page (sideways scroll). Wherever the map fits, its size and place
   stay exactly as before: flush right, or (like the template's own art) reaching up to 40px into the panel's
   50px padding. Only beyond that it is drawn smaller (object-fit: contain, never under 64px wide); a name so
   long that not even that fits puts the map on its own line above the name, at the right.
   How: the row is 40px wider (into the padding); the map starts at 64px and grows first (flex-grow 1e6) up to
   its natural width; then the spacer after it grows up to 40px, which keeps the map's old right edge. */
@media screen and (min-width: 992px) {
  .location-sidebar-info { flex-wrap: wrap-reverse; width: calc(100% + 40px); }
  .location-flag-secondary { flex: 1000000 1 64px; min-width: 0; max-width: max-content; margin-left: auto; }
  .location-sidebar-info::after { content: ""; flex: 1 1 0px; max-width: 40px; margin-left: calc(-1 * var(--gap--gap-4)); }
}

/* hero, short laptop windows (2026-10-05, the client's ~1280x650 Windows laptop): the photo and the dark facts panel
   are ~640px tall, one screen at 1440x900 with the „Виж офертите” button in view; on windows under ~680px tall the
   button ran under the bottom edge. There the panel's padding (50px, down to 30) and the space between the facts and
   the button (100px, down to 40) shrink in step with the window, so the hero stays 40px shorter than the window
   (down to ~560px at 600px tall). Taller windows are unchanged.
   --ih-fit-cut = how much shorter the hero gets; the three parts below add up to exactly that.
   The photo's own proportions also set a minimum height for the row (at 1366 wide a 4:3 photo is ~610px tall), so
   where the panel shrinks the photo is laid over the left half instead (same box, object-fit: cover) and simply
   follows the panel's height. */
@media screen and (min-width: 992px) and (max-height: 863px) {
  .location-detail-section { --ih-fit-cut: clamp(0px, 682px - 100vh, 100px); }
  .location-detail-content {
    padding-top: calc(50px - var(--ih-fit-cut) / 5);
    padding-bottom: calc(50px - var(--ih-fit-cut) / 5);
    grid-row-gap: calc(100px - var(--ih-fit-cut) * 3 / 5); row-gap: calc(100px - var(--ih-fit-cut) * 3 / 5);
  }
}
@media screen and (min-width: 992px) and (max-height: 681px) {
  .location-detail-left { position: relative; }
  .location-detail-left .location-detail-image { position: absolute; inset: 0; }
}

/* a country's cities with a page (/destinacia/<city>): the listing pages' chips, left-aligned under „Оферти за …” */
.tours-category-wrap.ih-city-chips { justify-content: flex-start; align-items: center; margin-top: var(--gap--gap-6); }
.ih-city-chips .tours-category-title { margin-right: var(--gap--gap-2); }

/* ===== phones & tablets: destinations ===== */
@media screen and (max-width: 991px) {
  /* hero facts panel: a wide country map (Узбекистан, Турция…) next to the name ran off the page at 480 to 991 px
     (sideways scroll). As on laptops: the map shrinks (never under 64 px wide) and, if even that does not fit,
     goes on its own line above the name, at the right. */
  .location-sidebar-info { flex-wrap: wrap-reverse; }
  .location-flag-secondary { flex: 1000000 1 64px; min-width: 0; max-width: max-content; margin-left: auto; }
}
@media screen and (max-width: 767px) {
  /* „Оферти за / Малдивите и още”: the two headings flow like one line of text and wrap between words */
  #oferti .tours-section-title { flex-wrap: wrap; column-gap: .25em; row-gap: 0; }
}