/* Home page (index.html) only. Layout stays the template's; these rules only adapt
   elements whose template content had a very different length. */

/* Big counter: the true number has 2 to 3 digits (template: 12,000+), so the rotated badge
   is anchored to the number's top-right corner from the left and kept on one line,
   instead of covering the digits. */
.counter-center-item .counter-badge { white-space: nowrap; right: auto; left: calc(100% - 70px); }

/* Viber link in place of the template's Instagram link: solid brand colour (the gradient text was too light on white) */
.instagram-link.ih-viber-link { background-image: none; -webkit-text-fill-color: currentColor; color: #7360f2; }

/* Hero title „Открий света по твой начин”: the accent phrase is 649px, 9px over the template's 640px column, and
   would wrap to a third line; kept whole, the title widens by those 9px (still centred) and stays on 2 lines */
@media screen and (min-width: 480px) { .hero-title .accent-word-text { white-space: nowrap; } }

/* Hero CTAs (client, 2026-10-01): the template's inline button row, centred like the rest of the hero, with the
   hero's own 20px gap so both buttons fit the 640px column at their natural width */
.ih-hero-buttons { justify-content: center; grid-column-gap: var(--gap--gap-6); grid-row-gap: var(--gap--gap-6); }
.ih-hero-buttons > a { flex: none; white-space: nowrap; }

/* Rotating hero (js/home.js): the wrapper takes the template's .hero-image box (100% x 110%, moved by its
   reveal and parallax); the photos fill it exactly, each fading in over the one before. The first one is in
   the HTML and shows without any script (.ih-hero-first, removed once another photo covers it). */
.ih-hero-slides { position: relative; z-index: 0; } /* own stacking context: the photos' z-index never reaches the overlay or clouds */
/* descendant, not child: on phones the first photo sits in a <picture class="ih-pic"> (display: contents) for its crop */
.ih-hero-slides .ih-hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ih-hero-slide { opacity: 0; visibility: hidden; }
.ih-hero-slide.is-on, .ih-hero-slide.ih-hero-first { visibility: inherit; } /* inherit: stays hidden until the template reveals the hero */
.ih-hero-slide.ih-hero-first { opacity: 1; }

/* Categories carousel arrows (the destinations slider's arrows, see home.mjs): either side of the dots,
   centred on them; the dots move up 10px so the 50px arrows fit inside the slider's clipped box */
.categories-slider .slide-nav { bottom: 10px; }
.categories-slider .ih-cat-arrow { top: auto; bottom: 0; margin: 0; }
.categories-slider .ih-cat-arrow.left-arrow { left: auto; right: calc(50% + 55px + var(--gap--gap-5)); }
.categories-slider .ih-cat-arrow.right-arrow { right: auto; left: calc(50% + 55px + var(--gap--gap-5)); }
.categories-slider .ih-cat-arrow:focus-visible { outline: 2px solid var(--ih-turq-deep); outline-offset: -3px; } /* inside: the slider clips its edge */

/* Stand-in for the removed pre-title badge in the hero's load-in stagger (home.mjs): takes no space, shows nothing */
.ih-reveal-anchor { position: absolute; top: 0; left: 50%; width: 1px; height: 1px; pointer-events: none; }

/* Short and narrow laptop windows (2026-10-03). The template sizes some boxes in vh or fits them to 1440px; these
   rules only take effect where that breaks (window under about 1160px wide or under 625px / 864px tall), so from
   1440x900, 1536x864 and 1920x1080 up the page is exactly as before. Tablets and phones (< 992px) keep the template. */
@media screen and (min-width: 992px) {
  /* „Нашето обещание”: the section is 85vh tall, but its 4 shapes hang below the heading (.item-four 210px under
     .promise-content, plus the 50px scroll drift). Under 864px of window height 85vh is shorter than that and the
     shapes covered the next section's heading. Now the section grows to fit them: the bottom padding holds the
     hang + drift + the 50px of air the design shows at 1536x864 (734px = 85% of 864, so taller windows keep 85vh). */
  .promise-section { height: auto; min-height: 85vh; padding-bottom: calc(210px + 50px + 50px); }
  /* Under ~1160px the 680px heading line reaches under the two top shapes (they sit at the container's edges):
     the heading block moves down by up to 125px (the top shapes stay where they are), and the two bottom shapes
     move out by up to 40px, so all four stay clear of the text like at 1440px. 100% = the container's width. */
  .promise-content { padding-top: clamp(0px, (1160px - 100%) * 1.2, 125px); }
  .promise-item.item-three { left: calc(120px - clamp(0px, (1160px - 100%) * 0.4, 40px)); }
  .promise-item.item-four { right: calc(160px - clamp(0px, (1160px - 100%) * 0.4, 40px)); }

  /* Hero: the title, text, buttons and chips take 406px under a fixed 200px top padding; in a window under 625px
     tall the chips fell below the first screen. The padding gives way there so they stay in view (20px of air). */
  .hero-section { padding-top: min(12.5rem, calc(100vh - 425px)); }

  /* Destinations slider: the London and India stamps sit in the margins beside the 650px card. Under ~1180px
     those margins get narrower than the stamps and they covered the photo, the card's corner and the text under
     it; they now slide out with the margin (keeping ~20px from the card) and may bleed off the window edge. */
  .cities-tours-section .left-vector { left: min(80px, calc(50% - 503px)); }
  .cities-tours-section .right-vector { right: min(50px, calc(50% - 545px)); }

  /* FAQ „Попитай ни” button + Viber link: under ~1150px the column is narrower than both and the button label
     wrapped to two lines inside the pill; the button keeps its size, the Viber link wraps instead. */
  .testimonial-section .testimonial-button-inline > .button-black { flex: none; }

  /* Categories carousel: three 350px cards + two 30px gaps need 1110px; on ~1024px windows the third card was cut
     by the window edge. The cards narrow just enough to show three whole ones (100% = the slider's width); from
     ~1170px up they keep the template's 350px. */
  .categories-mask { max-width: min(350px, calc((100% - 2 * 1.875rem) / 3)); }
}
/* CTA „Един нов свят чака да го откриеш”: on windows under 1152px the tilted photo stack (which hangs 170px past
   the container's right edge by design) covered the right arm of the „т” in „свят”; it moves 40px further out
   there. From 1152px up it only touches the letter, as in the 1440px design. */
@media screen and (min-width: 992px) and (max-width: 1151px) {
  .cta-image-list { right: -210px; }
}

/* Short laptop windows (2026-10-05, client: on her ~1280x650 window the categories cards and the destinations slider ran
   under the window edge). Under 864px of window height the sections whose 1440x900 design is one screen become a
   proportionally smaller version of it, so the block from the pre-title to its last important element fits in the window
   with ~20px to spare above and below: photo cards (aspect ratios kept), gaps and inner paddings shrink with the window
   height (clamp() with vh); fonts, buttons and arrows keep their size. 1440x900, 1536x864 and 1920x1080 are untouched.
   Each section has one length that follows the window: k = 100vh - (the block's fixed part + 40px), capped at the
   scalable part's design total, so k / total is the scale (1 = the design). */
@media screen and (min-width: 992px) and (max-height: 863px) {
  /* „Видове пътувания”: pre-title, heading, the three arch cards with their names, arrows and dots (857px at 1440x900;
     the fixed part is 266px, the rest, 591px, scales). Exactly three whole cards stay in view: the slider narrows with
     them (3 cards + 2 gaps + the design's 20px of slack, all scaled), so it stays centred and home.js still counts
     3 cards per view. The edge fades scale with the cards but stop at the photos: the names keep their size, and a
     scaled fade would wash them out more than the design does. Down to 54% (a 625px window). */
  .categories-section { --ih-cat-k: clamp(319px, 100vh - 306px, 591px); }
  .categories-section .categories-top { row-gap: calc(var(--ih-cat-k) * 20 / 591); }
  .categories-section .categories-content { row-gap: calc(var(--ih-cat-k) * 40 / 591); }
  .categories-section .categories-slider { max-width: calc(var(--ih-cat-k) * 1130 / 591); padding-bottom: calc(50px + var(--ih-cat-k) * 30 / 591); }
  .categories-section .categories-slide { margin-right: calc(var(--ih-cat-k) * 30 / 591); }
  .categories-section .categories-mask { max-width: min(calc(var(--ih-cat-k) * 350 / 591), calc((100% - 2 * var(--ih-cat-k) * 30 / 591) / 3)); }
  .categories-section .categories-item { row-gap: calc(var(--ih-cat-k) * 20 / 591); }
  .categories-section .categories-slider .fade-left,
  .categories-section .categories-slider .fade-right { width: calc(var(--ih-cat-k) * 170 / 591); height: calc(var(--ih-cat-k) * 481 / 591); }

  /* „Къде да пътуваш този сезон”: pre-title, heading, the 650x325 card, the text under it and „Всички дестинации”
     (730px; 285px fixed, 325px of card and 120px of gaps scale). The card's text column (heading, 2 lines, region,
     button) needs ~290px of height, so the card stops at 90% (585x293). That fits windows from ~730px tall. Below
     ~662px, where the card has stopped, the gaps alone keep the heading-to-button block (254px + 2.5 gaps + the card)
     at the window height minus 40px, down to 50% of their design size (a 636px window); so on 625 to 650px windows the
     heading, card, text and button fit together with room above and below, and only the small pre-title stays above
     the window edge. The arrows keep their 30px (scaled) from the card. The dashed line under the city
     marquee sat at 75.5% of the section's height from its bottom: pinned where it is (the section gets shorter), and
     the two stamps keep their place beside the card. */
  .cities-tours-section {
    --ih-dc: clamp(585px, (100vh - 325px) * 650 / 445, 650px); /* the card's width */
    /* the heading-to-card gap (the others follow it) */
    --ih-dg: clamp(20px, min((100vh - 325px) * 40 / 445, (100vh - 586.5px) / 2.5), 40px);
  }
  .cities-tours-section .tours-title-wrap { row-gap: calc(var(--ih-dg) / 2); }
  .cities-tours-section .tours-item-content { row-gap: var(--ih-dg); }
  .cities-tours-section .location-content { row-gap: calc(var(--ih-dg) * 0.75); }
  .cities-tours-section .location-slider { width: calc(var(--ih-dc) * 710 / 650 + 100px); max-width: calc(var(--ih-dc) * 710 / 650 + 100px); }
  .cities-tours-section .location-mask { max-width: var(--ih-dc); }
  .cities-tours-section .location-item { column-gap: calc(var(--ih-dc) * 30 / 650); }
  .cities-tours-section .location-image-wrap { height: calc(var(--ih-dc) / 2); }
  .cities-tours-section .location-info { padding: calc(var(--ih-dc) * 30 / 650) calc(var(--ih-dc) * 30 / 650) calc(var(--ih-dc) * 30 / 650) 0; row-gap: calc(var(--ih-dc) * 20 / 650); }
  .cities-tours-section .bottom-vector { top: 305.4px; bottom: auto; } /* = 1320px - 75.5% - 18px, as designed */
  .cities-tours-section .left-vector { bottom: calc(190px + var(--ih-dg) * 1.5); }                    /* 250px at full size */
  .cities-tours-section .right-vector { bottom: calc(215px + var(--ih-dg) * 1.5 + var(--ih-dc) / 2); } /* 600px at full size */

  /* „Резервация в 4 стъпки”: the dark panel (813px; heading, step circles, title and text are 291px, the paddings, gaps
     and the 200px step photo, 522px, scale), down to 54% like the categories (a 613px window; on 600px windows the
     panel still fits, also on the tabs whose text takes 3 lines at 1024px wide). The dashed line through the step
     circles sat at 40% of the panel's height, which only matches the circles at the design height (and the heading
     takes 1 line instead of 2 on very wide windows): it joins the flow right above the circles, with a negative margin
     that gives back its row (so nothing moves), and sits 28px down, 3px under their centre, as designed. */
  .step-section { --ih-st: clamp(282px, 100vh - 331px, 522px); }
  .step-section .step-info-wrap { padding: calc(var(--ih-st) * 20 / 522); }
  .step-section .step-info { padding: calc(var(--ih-st) * 80 / 522); row-gap: calc(var(--ih-st) * 40 / 522); }
  .step-section .step-tabs-menu { margin-bottom: calc(var(--ih-st) * 40 / 522); }
  .step-section .step-tab-item { row-gap: calc(var(--ih-st) * 20 / 522); }
  .step-section .step-tab-wrap { width: calc(var(--ih-st) * 200 / 522); height: calc(var(--ih-st) * 200 / 522); }
  .step-section .step-tab-wrap .vector-shape { width: 100%; height: 100%; }
  .step-section .step-divider { position: relative; top: 28px; margin-bottom: calc(-1px - var(--ih-st) * 40 / 522); }
}

/* FAQ cards (client, 2026-10-08: „има повторение”): the template scrolled each column endlessly, with a second
   copy of every card for the loop, and hid the middle column on phones. Each question now shows once and stands
   still: the grid takes the cards' own height (no 900px window, no fade overlays; home.mjs removes the copies),
   the loop's transform is cancelled, and under 768px the 12 cards form one swipeable row instead of two narrow
   columns (since 2026-10-12 up to 991px: tablets showed three cramped columns). */
.grid-testimonial-bottom.ih-faq-static { height: auto; overflow: visible; align-items: start; }
.ih-faq-static .testimonial-marquee-list { transform: none !important; }
@media screen and (max-width: 991px) {
  .grid-testimonial-bottom.ih-faq-static {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; gap: var(--gap--gap-5); align-items: stretch;
    /* the row runs to the window edges (the section's 15px padding) and snaps the cards back inside it */
    margin-left: -15px; margin-right: -15px; padding: 0 15px; scroll-padding: 0 15px;
  }
  .grid-testimonial-bottom.ih-faq-static::-webkit-scrollbar { display: none; }
  .ih-faq-static .testimonial-marquee, .ih-faq-static .testimonial-marquee-list { display: contents; }
  .ih-faq-static .testimonial-marquee-item { flex: 0 0 min(82%, 340px); scroll-snap-align: start; }
}

/* ===== phones & tablets: home ===== */
@media screen and (max-width: 991px) {
  /* the hero's backdrop is the brand navy, not black: no black flash before the first photo paints */
  .hero-bg-item { background-color: var(--ih-ink); }
  /* step circles: 44 px tap targets (the template's 40 px at ≤ 991) */
  .step-tab-link { width: 44px; height: 44px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* FAQ swipe row on tablets: two cards and a part of the third in view */
  .ih-faq-static .testimonial-marquee-item { flex: 0 0 min(45%, 340px); }
}
@media screen and (max-width: 767px) {
  /* hero text over bright photos: a brighter description, darker chips (their blur stays) */
  .hero-description { color: rgba(255, 255, 255, .92); }
  .hero-badge { background-color: rgba(15, 39, 69, .55); }
  /* categories and destinations slider arrows: 44 px tap targets (the template's 40 px) */
  .categories-slider .ih-cat-arrow, .location-slider .left-arrow, .location-slider .right-arrow { width: 44px; height: 44px; }
  /* FAQ „Пиши ни във Viber”: a 44 px tall tap target (the text was 30 px) */
  .instagram-link.ih-viber-link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media screen and (max-width: 479px) {
  /* the hero fills the first screen (the template's 700 px left a white band under it on taller phones); the photo box
     stays 110 % of it, so the parallax still has its margin */
  .hero-section, .hero-bg-item { height: max(700px, 100svh); }
}