/* YosuTravels desktop marketplace width correction v8
 * Presentation only. Desktop scoped; mobile/tablet remain on the existing rules.
 */

:root {
  --yt-marketplace-max: 1560px;
  --yt-marketplace-gutter: clamp(24px, 3vw, 56px);
}

@media (min-width: 1200px) {
  /* Shared public marketplace shell: large viewport with intentional gutters. */
  body.public-hue-bg .home-stable-page,
  body.public-hue-bg:has(.listing-shell) .page-wrapper > .container,
  body.public-hue-bg .yt-search-page,
  body.public-hue-bg:has(.home-tourist-sites-cards-v21e) .home-content-section,
  body.public-hue-bg:has(.home-stable-page) .public-footer-wrap > .container {
    width: calc(100% - (2 * var(--yt-marketplace-gutter))) !important;
    max-width: var(--yt-marketplace-max) !important;
    margin-inline: auto !important;
  }

  /* Header/footer align to the same public grid without redesigning controls. */
  body.public-hue-bg .fixed-header.container-lg {
    width: calc(100% - (2 * var(--yt-marketplace-gutter))) !important;
    max-width: var(--yt-marketplace-max) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* Remove nested desktop-only caps that kept marketplace modules tablet-sized. */
  body.public-hue-bg .home-stable-page > .home-stable-section > .d-flex.justify-content-between,
  body.public-hue-bg .home-stable-page > .home-stable-section > .row,
  body.public-hue-bg .home-service-links-grid,
  body.public-hue-bg .home-content-section.home-tourist-sites-cards-v21e {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  /* CTA modules are UI surfaces, not prose columns. */
  body.public-hue-bg .home-account-cta-card {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  /* Keep intentional explanatory copy readable inside a wider module. */
  body.public-hue-bg .home-section-intro,
  body.public-hue-bg .home-account-cta-card p,
  body.public-hue-bg .yt-destination-hero p {
    max-width: 72ch;
  }

  /* Marketplace carousels gain viewport width; card dimensions remain controlled. */
  body.public-hue-bg .home-horizontal-scroll {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    scroll-padding-inline: 0;
  }

  body.public-hue-bg .home-horizontal-scroll > .home-scroll-item {
    flex: 0 0 clamp(270px, 22vw, 330px) !important;
    width: clamp(270px, 22vw, 330px) !important;
    max-width: 330px !important;
  }

  /* The old stylesheet exposes only three destinations at all desktop widths. */
  body.public-hue-bg .home-destination-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 1.6vw, 26px) !important;
  }

  body.public-hue-bg .home-destination-strip > .home-destination-item:nth-child(-n + 4) {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Listing/result cards: four useful columns instead of three oversized columns. */
  body.public-hue-bg:has(.listing-shell) .page-wrapper > .container > .row > [class*="col-"]:has(.listing-editorial-card),
  body.public-hue-bg .yt-search-page .row > [class*="col-"]:has(.listing-editorial-card) {
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important;
  }

  body.public-hue-bg:has(.listing-shell) .listing-editorial-card,
  body.public-hue-bg .yt-search-page .listing-editorial-card {
    width: 100% !important;
  }
}

@media (min-width: 1600px) {
  body.public-hue-bg .home-destination-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body.public-hue-bg .home-destination-strip > .home-destination-item:nth-child(-n + 5) {
    display: block !important;
    width: auto !important;
  }

  body.public-hue-bg .home-horizontal-scroll > .home-scroll-item {
    flex-basis: clamp(280px, 19vw, 310px) !important;
    width: clamp(280px, 19vw, 310px) !important;
  }
}

/* Explicitly preserve existing phone and tablet architecture. */
@media (max-width: 1199.98px) {
  :root {
    --yt-marketplace-max: initial;
    --yt-marketplace-gutter: initial;
  }
}