/**
 * Travel Offers Plugin — Front-end styles
 *
 * Architecture: BEM (Block__Element--Modifier)
 * Blocks: top-offer-block, top-offer-grid, top-hotel-box, top-destination-box,
 *         top-price, top-stars, top-rating, top-badge, top-skeleton, top-empty-state
 *
 * Breakpoints (matching ACF device_visibility field):
 *   Mobile:  < 768 px
 *   Tablet:  768 – 1279 px
 *   Desktop: ≥ 1280 px
 *
 * Custom properties are set by RenderContext::gridColumnVars() inline
 * on .top-offer-grid so grid columns are driven entirely by PHP/ACF config.
 */

/* =============================================================================
   0. CSS Custom Properties / Design Tokens
   ============================================================================= */

:root {
  /* Colours */
  --top-color-primary:      #0073aa;
  --top-color-primary-dark: #005a87;
  --top-color-accent:       #ff6b35;
  --top-color-success:      #2e7d32;
  --top-color-excellent:      #00A54C;
  --top-color-warning:      #f57f17;
  --top-color-danger:       #c62828;
  --top-color-text:         #1a1a2e;
  --top-color-text-muted:   #637083;
  --top-color-bg:           #ffffff;
  --top-color-surface:      #f7f9fc;
  --top-color-border:       #dde3ec;
  --top-color-skeleton:     #e8edf4;
  --top-color-skeleton-shine: #f4f7fb;
  --top-color-destination: #0E97C2;

  /* Stars */
  --top-star-color:  #f5a623;

  /* Typography */
  --top-font-base: inherit;
  --top-fs-xs:   0.75rem;
  --top-fs-sm:   0.8125rem;
  --top-fs-md:   0.9375rem;
  --top-fs-lg:   1.0625rem;
  --top-fs-xl:   1.25rem;
  --top-fs-2xl:  1.5rem;
  --top-fs-3xl:  1.75rem;

  /* Spacing */
  --top-gap:    1.25rem;
  --top-gap-sm: 0.625rem;
  --top-gap-xs: 0.375rem;
  --top-radius: 0.625rem;
  --top-radius-sm: 0.375rem;

  /* Shadows */
  --top-shadow-card:  0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --top-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);

  /* Transitions */
  --top-transition: 220ms ease;

  /* Grid columns — overridden inline by PHP (RenderContext::gridColumnVars()) */
  --top-cols-desktop: 3;
  --top-cols-tablet:  2;
  --top-cols-mobile:  1;
}

/* =============================================================================
   1. Offer Block — section wrapper
   ============================================================================= */

.top-offer-block {
  container-type: inline-size;
  margin-block: calc(var(--top-gap) * 2);
  font-family: var(--top-font-base);
  max-width: 1320px;
}

/* Device visibility — controlled by PHP via CSS classes */
@media (max-width: 767px) {
  .top-offer-block--hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .top-offer-block--hide-tablet { display: none !important; }
}
@media (min-width: 1280px) {
  .top-offer-block--hide-desktop { display: none !important; }
}

/* ── Header ── */
.top-offer-block__header {
  margin-block-end: var(--top-gap);
  text-align: start;
}

.top-offer-block__headline {
  display: block;
  margin: 0 0 0.35em;
  font-size: var(--top-fs-2xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--top-color-text);
}

.top-offer-block__subheadline {
  margin: 0;
  font-size: var(--top-fs-md);
  color: var(--top-color-text-muted);
}

/* h2 and .top-offer-block__mainheadline must look identical — share one rule */
.top-offer-block__header h2,
.top-offer-block__header .top-offer-block__mainheadline {
  margin: 0 0 0.5em;
  font-family: var(--heading-font);
  font-style: normal;
  font-weight: normal;
  font-size: 1.71429rem;
  line-height: 1.1;
  color: inherit;
  text-rendering: optimizeLegibility;
}

@media screen and (max-width: 40em) {
  .top-offer-block__header h2,
  .top-offer-block__header .top-offer-block__mainheadline {
    font-size: 18px;
  }
}

/* =============================================================================
   2. Offer Grid — responsive grid
   ============================================================================= */

.top-offer-grid {
  display: grid;
  grid-template-columns: repeat(var(--top-cols-mobile), 1fr);
  gap: var(--top-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tablet breakpoint */
@media (min-width: 768px) {
  .top-offer-grid {
    grid-template-columns: repeat(var(--top-cols-tablet), 1fr);
  }
}

/* Desktop breakpoint */
@media (min-width: 1280px) {
  .top-offer-grid {
    grid-template-columns: repeat(var(--top-cols-desktop), 1fr);
  }
}

/* Container query variant — activates when parent supports it */
@container (min-width: 600px) {
  .top-offer-grid {
    grid-template-columns: repeat(var(--top-cols-tablet), 1fr);
  }
}
@container (min-width: 900px) {
  .top-offer-grid {
    grid-template-columns: repeat(var(--top-cols-desktop), 1fr);
  }
}

/* =============================================================================
   3. Hotel Box — hotel offer card
   ============================================================================= */

.top-hotel-box {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--top-color-bg);
  border: 1px solid var(--top-color-border);
  border-radius: 5px;
  box-shadow: var(--top-shadow-card);
  overflow: hidden;
  transition: box-shadow var(--top-transition), transform var(--top-transition);
  /* Ensure card height stretches to fill grid cell */
  height: 100%;
}

.top-hotel-box:hover,
.top-hotel-box:focus-within {
  box-shadow: var(--top-shadow-hover);
  transform: translateY(-2px);
}

/* ── Media ── */
.top-hotel-box__media {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--top-color-skeleton);
}

.top-hotel-box__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--top-transition);
  display: block;
}

.top-hotel-box:hover .top-hotel-box__image {
  transform: scale(1.04);
}

/* Badges overlay */
.top-hotel-box__badges {
  position: absolute;
  inset-block-start: var(--top-gap-sm);
  inset-inline-start: var(--top-gap-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--top-gap-xs);
  z-index: 1;
}

.top-hotel-box__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  margin: 0;
  padding: var(--top-gap-xs) var(--top-gap-sm);
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: #fff;
  font-size: var(--top-fs-xs);
  font-weight: 500;
}

/* ── Body ── */
.top-hotel-box__body {
  padding: var(--top-gap-sm) var(--top-gap-sm) 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--top-gap-xs);
  min-height: 0;
}

.top-hotel-box__stars { line-height: 1; }

.top-hotel-box__title {
  display: block;
  margin: 0;
  font-size: var(--top-fs-lg);
  font-weight: 600;
  line-height: 1.3;
}

.top-hotel-box__title-text {
  color: var(--top-color-text);
}

.top-hotel-box:hover .top-hotel-box__title-text,
.top-hotel-box:focus-within .top-hotel-box__title-text {
  color: var(--top-color-primary);
  text-decoration: underline;
}

/* Full-card click target — stretches over the whole box, sits above
   everything so the entire card is clickable, not just image/title.
   Works for both <a> (legacy) and <form> (masked-redirect) usage. */
.top-hotel-box__link-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Reset form defaults so the element is invisible. */
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* <button> inside the masked-redirect <form>: fills the entire form area. */
.top-hotel-box__link-overlay-btn {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.top-hotel-box__link-overlay:focus-visible,
.top-hotel-box__link-overlay-btn:focus-visible {
  outline: 2px solid var(--top-color-primary);
  outline-offset: -2px;
}

.top-hotel-box__location {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--top-fs-sm);
  color: var(--top-color-text-muted);
}

/* .top-hotel-box__rating — no longer used; rating badge moved to meta-row */

/* ── Footer ── */
.top-hotel-box__footer {
  padding: var(--top-gap-sm);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--top-gap-sm);
  border-block-start: 1px solid var(--top-color-border);
  margin-block-start: var(--top-gap-sm);
}

/* price-wrap & travelers styles now in section 13 */

.top-hotel-box__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.45em 0.9em;
  background: var(--top-color-primary);
  color: #fff;
  font-size: var(--top-fs-sm);
  font-weight: 600;
  border-radius: var(--top-radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--top-transition);
  flex-shrink: 0;
}

.top-hotel-box__cta:hover,
.top-hotel-box__cta:focus-visible {
  background: var(--top-color-primary-dark);
  color: #fff;
  outline: 2px solid var(--top-color-primary);
  outline-offset: 2px;
}

.top-hotel-box__cta-arrow { transition: transform var(--top-transition); }
.top-hotel-box__cta:hover .top-hotel-box__cta-arrow { transform: translateX(3px); }

/* =============================================================================
   4. Destination Box
   ============================================================================= */

.top-destination-box {
  display: block;
  border-radius: var(--top-radius);
  box-shadow: var(--top-shadow-card);
  overflow: hidden;
  transition: box-shadow var(--top-transition), transform var(--top-transition);
  width: 100%;
  height: 370px;
  background: var(--top-color-skeleton);
  position: relative;
}

.top-destination-box:hover,
.top-destination-box:focus-within {
  box-shadow: var(--top-shadow-hover);
  transform: translateY(-3px);
}

/* ── Full-card link ── */
.top-destination-box__link {
  display: block;
  position: relative;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ── Media — fills entire card ── */
.top-destination-box__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--top-color-skeleton);
}

/* Gradient overlay for text readability — sits on top of image */
.top-destination-box__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(58,58,58,0) 66.15%, rgba(31,31,31,0.6) 82.29%, rgba(0,0,0,0.9) 100%);
  pointer-events: none;
}

.top-destination-box__image,
.top-destination-box__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--top-transition);
  display: block;
}

.top-destination-box__link:hover .top-destination-box__image,
.top-destination-box__link:hover .top-destination-box__media img,
.top-destination-box__link:has(.top-hotel-box__link-overlay-btn:focus-visible) .top-destination-box__image,
.top-destination-box__link:has(.top-hotel-box__link-overlay-btn:focus-visible) .top-destination-box__media img {
  transform: scale(1.05);
}

/* ── Footer — overlaid at bottom of card ── */
.top-destination-box__footer {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.75rem var(--top-gap-sm);
  z-index: 1;
}
.top-offer-slider--variable .top-offer-slider__slide {
  flex: 0 0 300px;
  width: 300px !important;
}

.top-destination-box__region {
  display: block;
  color: #fff;
  font-size: var(--top-fs-xl);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  /*white-space: nowrap;*/
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-destination-box__footer-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--top-gap-sm);
}

.top-destination-box__trip-info {
  font-size: var(--top-fs-sm);
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.top-destination-box__price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 1px;
}

.top-destination-box__price-main {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  white-space: nowrap;
}

.top-destination-box__price-from {
  font-size: var(--top-fs-xs);
  color: rgba(255,255,255,0.75);
}

.top-destination-box__price-amount {
  font-size: var(--top-fs-xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.top-destination-box__price-pp {
  font-size: var(--top-fs-xs);
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}

/* =============================================================================
   5. Price component
   ============================================================================= */

.top-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  font-weight: 700;
  color: var(--top-color-text);
}

.top-price__from {
  font-size: var(--top-fs-xs);
  font-weight: 400;
  color: var(--top-color-text-muted);
  align-self: center;
}

.top-price__amount { font-size: var(--top-fs-3xl); line-height: 32px; }
.top-price__currency { font-size: var(--top-fs-3xl); font-weight: 500; }

/* Discounted price pair */
.top-price--discounted {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.top-price__original {
  font-size: var(--top-fs-sm);
  font-weight: 400;
  color: var(--top-color-text-muted);
  text-decoration: line-through;
}

.top-price__amount--sale {
  font-size: var(--top-fs-xl);
  color: var(--top-color-accent);
}

/* =============================================================================
   6. Stars component
   ============================================================================= */

.top-stars {
  display: inline-flex;
  gap: 1px;
  color: black;
  font-size: 1rem;
  width: 1rem;
  line-height: 1;
}

/* =============================================================================
   7. Rating component
   ============================================================================= */

.top-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--top-fs-sm);
}

.top-rating__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  padding: 0.15em 0.4em;
  border-radius: var(--top-radius-sm);
  font-weight: 700;
  font-size: var(--top-fs-md);
  color: #fff;
  line-height: 1;
}

.top-rating--excellent .top-rating__score { background: #2e7d32; }
.top-rating--good      .top-rating__score { background: #388e3c; }
.top-rating--fair      .top-rating__score { background: #f57f17; }
.top-rating--poor      .top-rating__score { background: #c62828; }

.top-rating__label {
  font-weight: 600;
  color: var(--top-color-text);
}

.top-rating__count {
  color: var(--top-color-text-muted);
  font-size: var(--top-fs-xs);
}

/* =============================================================================
   8. Badge component
   ============================================================================= */

.top-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.55em;
  border-radius: var(--top-radius-sm);
  font-size: var(--top-fs-xs);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.top-badge--discount {
  background: var(--top-color-accent);
  color: #fff;
}

.top-badge--reco {
  background: rgba(255,255,255,0.92);
  color: var(--top-color-text);
  border: 1px solid var(--top-color-border);
}

/* =============================================================================
   9. Skeleton loader
   ============================================================================= */

@keyframes top-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.top-skeleton {
  background: linear-gradient(
    90deg,
    var(--top-color-skeleton)        25%,
    var(--top-color-skeleton-shine)  50%,
    var(--top-color-skeleton)        75%
  );
  background-size: 800px 100%;
  animation: top-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--top-radius-sm);
  display: block;
}

/* Prevent text from appearing inside skeleton elements */
.top-skeleton * { visibility: hidden; }

.top-skeleton--image {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.top-skeleton--image-tall { aspect-ratio: 4 / 3; }

.top-skeleton--text {
  height: 1em;
  width: 100%;
}
.top-skeleton--text-lg { width: 80%; height: 1.2em; }
.top-skeleton--text-md { width: 60%; }
.top-skeleton--text-sm { width: 40%; height: 0.85em; }

.top-skeleton--badge {
  width: 3em;
  height: 1.6em;
}

.top-skeleton--button {
  height: 2.2em;
  width: 7em;
  border-radius: var(--top-radius-sm);
}

.top-skeleton--stars {
  width: 5em;
  height: 1em;
}

/* Skeleton card structure inherits hotel-box layout */
.top-hotel-box--skeleton,
.top-destination-box--skeleton {
  pointer-events: none;
}

/* =============================================================================
   10. Empty state
   ============================================================================= */

.top-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--top-gap-sm);
  padding: calc(var(--top-gap) * 2);
  text-align: center;
  color: var(--top-color-text-muted);
  border: 2px dashed var(--top-color-border);
  border-radius: var(--top-radius);
  background: var(--top-color-surface);
}

.top-empty-state__icon { font-size: 2.5rem; line-height: 1; }

.top-empty-state__message {
  margin: 0;
  font-size: var(--top-fs-md);
  max-width: 36ch;
}

.top-empty-state__retry {
  padding: 0.45em 1.2em;
  background: var(--top-color-primary);
  color: #fff;
  border: none;
  border-radius: var(--top-radius-sm);
  font-size: var(--top-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--top-transition);
}

.top-empty-state__retry:hover { background: var(--top-color-primary-dark); }

/* Error type — red tint */
.top-empty-state--error {
  border-color: #f5c6c6;
  background: #fff5f5;
}

/* =============================================================================
   11. Reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .top-hotel-box,
  .top-destination-box,
  .top-hotel-box__image,
  .top-destination-box__image,
  .top-destination-box__media img,
  .top-skeleton,
  .top-hotel-box__cta {
    transition: none;
    animation: none;
  }
}

/* =============================================================================
   12. High-contrast mode
   ============================================================================= */

@media (forced-colors: active) {
  .top-hotel-box,
  .top-destination-box {
    border: 2px solid ButtonText;
  }

  .top-hotel-box__cta {
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
  }

  .top-badge,
  .top-rating__score {
    border: 1px solid ButtonText;
  }
}

/* =============================================================================
   13. Hotel Box — redesigned card elements
   ============================================================================= */

/* ── Meta row: destination (left) + rating badge (right) ── */

.top-hotel-box__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--top-gap-xs);
  min-height: 1.4em; /* prevents layout shift when one side is absent */
}
.top-hotel-box__meta-row .top-hotel-box__icon{
  display: none;
}

.top-hotel-box__destination {
  font-size: var(--top-fs-xs);
  color: var(--top-color-destination);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

/* ── Rating badge — X.X/6 scale ── */

.top-rating-badge {
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0.18em 0.45em;
  border-radius: 2px;
  font-size: var(--top-fs-sm);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

/*.top-rating-badge__denom {*/
/*  font-size: 0.72em;*/
/*  font-weight: 400;*/
/*  opacity: 0.72;*/
/*}*/

.top-rating-badge--excellent { background: var(--top-color-excellent); }
.top-rating-badge--good      { background: var(--top-color-excellent);  }
.top-rating-badge--fair      { background: var(--top-color-excellent);  }
.top-rating-badge--poor      { background: var(--top-color-excellent);  }

/* ── Info row: date | duration | board type ── */

.top-hotel-box__info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em;
  font-size: var(--top-fs-xs);
  color: var(--top-color-text-muted);
  margin-block-start: auto; /* pushes row to bottom of body */
}

.top-hotel-box__info-sep {
  color: var(--top-color-border);
  user-select: none;
  font-weight: 300;
}

.top-hotel-box__info-item {
  white-space: nowrap;
}

/* ── Departure airport row ── */

.top-hotel-box__info-row + .top-hotel-box__airport {
  margin-block-start: -20px;
}

.top-hotel-box__airport {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--top-fs-xs);
  color: #595959;
}

.top-hotel-box__airport-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ── Footer: price-wrap is flex row now (price + travelers inline) ── */

.top-hotel-box__price-wrap {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.25em;
  min-width: 0;
  margin-inline-start: auto;
}

.top-hotel-box__travelers {
  font-size: var(--top-fs-xs);
  color: var(--top-color-text-muted);
  white-space: nowrap;
}

/* ── Price component adjustments inside card ── */

.top-hotel-box .top-price {
  font-size: var(--top-fs-lg);
  font-weight: 700;
  color: var(--top-color-text);
  white-space: nowrap;
}

.top-hotel-box .top-price__from {
  font-size: var(--top-fs-xs);
  font-weight: 400;
  color: var(--top-color-text-muted);
}

/* ── CTA arrow update ── */

.top-hotel-box__cta-arrow {
  transition: transform var(--top-transition);
  font-style: normal;
}

/* =============================================================================
   14. Offer Slider
   ============================================================================= */

.top-offer-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Viewport clips the scrollable track.
   touch-action: pan-y lets JS own horizontal swipes for paging while
   still allowing normal vertical page scrolling with one finger. */
.top-offer-slider__viewport {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
}

/* Track — horizontal flex strip, animated via transform */
.top-offer-slider__track {
  display: flex;
  gap: 16px;
  align-items: stretch;
  padding-bottom: 20px;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Slide: CSS calc pre-sizes for the correct column count before JS/Slick runs.
   100% resolves to the flex container (track) width = viewport width.
   Matches Slick's post-init card width, preventing the 3.5→4 flash. */
.top-offer-slider__slide {
  flex: 0 0 calc((100% - (var(--top-cols-desktop, 4) - 1) * 16px) / var(--top-cols-desktop, 4));
  width:    calc((100% - (var(--top-cols-desktop, 4) - 1) * 16px) / var(--top-cols-desktop, 4));
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1279px) {
  .top-offer-slider__slide {
    flex: 0 0 calc((100% - (var(--top-cols-tablet, 2) - 1) * 16px) / var(--top-cols-tablet, 2));
    width:    calc((100% - (var(--top-cols-tablet, 2) - 1) * 16px) / var(--top-cols-tablet, 2));
  }
}

@media (max-width: 767px) {
  .top-offer-slider__slide {
    flex: 0 0 calc((100% - (var(--top-cols-mobile, 1) - 1) * 16px) / var(--top-cols-mobile, 1));
    width:    calc((100% - (var(--top-cols-mobile, 1) - 1) * 16px) / var(--top-cols-mobile, 1));
  }
}

/* No hover lift inside slider */
.top-offer-slider__slide .top-destination-box:hover,
.top-offer-slider__slide .top-destination-box:focus-within,
.top-offer-slider__slide .top-hotel-box:hover,
.top-offer-slider__slide .top-hotel-box:focus-within {
  transform: none;
}

/* ── Stage (viewport + side arrows) ── */

.top-offer-slider__stage {
  position: relative;
  display: flex;
  align-items: center;
}

.top-offer-slider__stage .top-offer-slider__viewport {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Controls bar (dots only) ── */

.top-offer-slider__controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--top-gap-sm);
  margin-top: var(--top-gap);
}

/* ── Arrow buttons ── */
.top-offer-slider__arrow[type='button']{
  border-radius: 50%;
}
.top-offer-slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--top-color-border);
  background: var(--top-color-bg);
  color: var(--top-color-text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--top-transition),
    background var(--top-transition),
    color var(--top-transition);
}

.top-offer-slider__arrow:hover:not(:disabled) {
  border-color: var(--top-color-primary);
  color: var(--top-color-primary);
  background: var(--top-color-surface);
}

.top-offer-slider__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Dots container ── */

.top-offer-slider__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ── Individual dot ── */

.top-offer-slider__dot[type='button']{
  border-radius: 999px;
} 
.top-offer-slider__dot {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--top-color-border);
  cursor: pointer;
  transition: background var(--top-transition);
  flex-shrink: 0;
}

.top-offer-slider__dot--active {
  background: var(--top-color-primary);
}

.top-offer-slider__dot:hover:not(.top-offer-slider__dot--active) {
  background: var(--top-color-text-muted);
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .top-offer-slider__track {
    transition: none;
  }
  .top-offer-slider__dot {
    transition: none;
  }
}

/* ── Slick overrides (when Slick is active inside our slider) ──
   Theme main.css applies .slick-arrow / .slick-dots globally; reset
   those rules when the elements live inside .top-offer-slider.        */

/* Track: reset flex layout so Slick's block/absolute engine takes over */
.top-offer-slider__track.slick-initialized {
  display: block;
  gap: 0;
  padding-bottom: 0;
  transition: none;
  will-change: auto;
  overflow: visible;
  margin-bottom: 0; /* cancel .slick-dotted margin-bottom from theme */
}

/* Slick adds margin-bottom:30px to .slick-dotted; we handle spacing via __controls */
.top-offer-slider__track.slick-dotted.slick-slider {
  margin-bottom: 0;
}

/* Gap between slides via padding + negative list margin.
   Desktop only: -8px makes listWidth = vpWidth+16 so Slick's outerWidth setter
   subtracts padding (16px) → card content = (vpWidth+16)/cols - 16 = same as CSS calc. */
.top-offer-slider__track.slick-initialized .slick-list {
  margin: 0 -8px;
}
.top-offer-slider__track.slick-initialized .slick-slide {
  padding: 0 8px;
  margin: 0;
  box-sizing: content-box;
  height: auto !important;
  display: flex !important;
  flex-direction: column;
}

/* Equal-height: make slick-track a flex row so all slides stretch to tallest */
.top-offer-slider__track.slick-initialized .slick-track {
  display: flex !important;
  align-items: stretch;
}

/* Pass height through Slick's inner wrapper div */
.top-offer-slider__track.slick-initialized .slick-slide > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Override Slick's inline display:inline-block on our slide wrapper */
.top-offer-slider__track.slick-initialized .top-offer-slider__slide {
  display: flex !important;
  flex-direction: column;
  flex: 1;
}

/* Card fills the full slide height */
.top-offer-slider__track.slick-initialized .top-hotel-box {
  flex: 1;
}

/* Tablet / mobile peek mode: remove negative list margin so the fractional
   peek slide stays inside the list's own overflow:hidden (no viewport clip). */
@media (max-width: 1279px) {
  .top-offer-slider__track.slick-initialized .slick-list {
    margin: 0;
  }
}

/* Arrows: keep our design, override theme's position:absolute / background */
.top-offer-slider__arrow.slick-arrow {
  position: static;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  background-color: var(--top-color-bg);
  border: 2px solid var(--top-color-border);
  color: var(--top-color-text);
  width: 2.25rem;
  height: 2.25rem;
  z-index: auto;
}

.top-offer-slider__arrow.slick-arrow:hover {
  background-color: var(--top-color-surface);
  color: var(--top-color-primary);
  border-color: var(--top-color-primary);
}

/* Slick hides arrow text via color:transparent + ::before pseudo for icon font.
   Our arrows already contain the glyph as text, so suppress the pseudo. */
.top-offer-slider__arrow.slick-arrow::before {
  display: none;
}

/* Dots: Slick appends a <ul class="slick-dots"> inside .top-offer-slider__dots.
   Reset the theme's position:absolute and style to match our dot design. */
.top-offer-slider__dots .slick-dots {
  position: static;
  bottom: auto;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  width: auto;
  text-align: left;
  overflow: visible;
}

.top-offer-slider__dots .slick-dots li {
  display: flex;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

.top-offer-slider__dots .slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: var(--top-color-border);
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: background var(--top-transition), transform var(--top-transition);
}

.top-offer-slider__dots .slick-dots li button::before {
  display: none;
}

.top-offer-slider__dots .slick-dots li.slick-active button {
  background: var(--top-color-primary);
  transform: scale(1.35);
}

.top-offer-slider__dots .slick-dots li button:hover {
  background: var(--top-color-primary);
}

/* =============================================================================
   15. Small-screen slider corrections (mobile only — desktop/tablet untouched)
   ============================================================================= */

/* Gap between the stage arrows and the card.
   Slick wraps every slide in .slick-slide with `padding: 0 8px`, so the gutter
   also sits on the outer edges — 8px of dead space between the arrow and the
   card, and the off-screen neighbour's box-shadow bleeds into that strip.
   Desktop hides it with the list's `margin: 0 -8px`, but the ≤1279px rule
   above resets that to `margin: 0`.
   Fix at the source instead: put the whole 16px gutter on the right of each
   slide, so every card's left edge is flush with the viewport edge. The
   trailing gutter of the last visible card is pulled back out with a
   right-only negative list margin, so N cards still fill the viewport exactly
   (same arithmetic as the desktop `-8px` trick, without the left offset). */
@media (max-width: 767px) {
  .top-offer-slider__track.slick-initialized .slick-slide {
    padding: 0 16px 0 0;
  }

  .top-offer-slider__track.slick-initialized .slick-list {
    margin: 0 -16px 0 0;
  }

  /* Non-Slick fallback (TopSlider) has no per-slide gutter — just make sure
     the stage itself contributes no gap either. */
  .top-offer-slider__stage {
    gap: 0;
  }
}

/* Card width on very small screens: 275px leaves room for both arrows.
   Only the variable-width (ACF "default") slider has a fixed card width;
   configured column counts stay fluid and are left alone. */
@media (max-width: 399px) {
  .top-offer-slider--variable .top-offer-slider__slide {
    flex: 0 0 275px;
    width: 275px !important;
  }

  /* A fixed 275px card is narrower than the stretched viewport, so the
     leftover space piles up on the right as a gap before the next arrow.
     Clamp the viewport to the card width and centre the stage: both arrows
     then sit tight against the card. Scoped to <400px, where only one card
     fits anyway, so multi-card peek on larger phones is unaffected. */
  .top-offer-slider--variable .top-offer-slider__stage {
    justify-content: center;
  }

  .top-offer-slider--variable .top-offer-slider__stage .top-offer-slider__viewport {
    flex: 0 1 275px;
    max-width: 100%;
  }
}