/* =========================================================================
   DESTINATION PAGE - VERSION 2
   =========================================================================

   Loaded only by destinations/index2.phtml, which sets $dest2 and includes
   destinations/index.phtml. Everything is scoped under .dt2, so dropping the
   stylesheet returns the page to v1 exactly.

   WHY THIS IS A SKIN AND NOT A REWRITE

   The destination page is not the marketing page it looks like. It carries
   three live search widgets - flights (#airportorigin / #airportdestination
   / #airdatefrom / #airpaxes / #searchair), hotels (#hotelsearchdate /
   #ddtravelers3 / #searchhotels) and things to do (#activitiesearchdate /
   #ddtravelers4 / #searchactivities) - plus the flight offers list, the CMS
   section blocks with their CKEditor save handlers, the weather block, the
   lazy-loaded hotel grid and the fancybox gallery. All of that is driven by
   ids and classes from main.js and the product bundles.

   Duplicating it into a standalone v2 would mean two copies of three search
   widgets. So v1's markup stays and this file restyles it, exactly as
   home2.css does for the home page.

   Colours come from main.css's custom properties so a white-label agent
   keeps their palette.
   ========================================================================= */

.dt2 {
  --dt2-ink: #07182b;
}


/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */

/* v1 puts the photograph on .maincontainer as a background-image. v2 needs
   it on its own layer so the slow zoom does not scale the copy with it, so
   the inherited background is cleared and .dt2-hero-layers takes over.
   The v1 rule is left in the template: it is simply overridden here.

   THE DARK FILL GOES ON .infoHero, NOT ON .maincontainer.

   .dt2-hero-layers is a child of .infoHero and a SIBLING that comes before
   .maincontainer. Painting a background colour on .maincontainer therefore
   paints it straight over the photograph - the hero rendered as a flat navy
   block. .infoHero is the ancestor of both, so the fill there sits behind
   the layers and only shows through where the photograph does not reach. */
.dt2 .infoHero {
  position: relative;
  background-color: var(--dt2-ink);
  background-image: none !important;
}

.dt2 .infoHero .maincontainer {
  background-image: none !important;
  background-color: transparent;
  position: relative;
  z-index: 1;
  min-height: 62vh;
  padding-top: 4rem;
}

.dt2 .infoHero.infoHero-sm .maincontainer {
  min-height: 62vh;
}

/* v1 draws a torn-paper PNG and a ::before overlay on the hero. Both go. */
.dt2 .infoHero .hero-divider,
.dt2 .infoHero .maincontainer:before {
  display: none !important;
  content: none !important;
}

/* The layers are clipped HERE and not on .maincontainer, and not on
   .infoHero. Anything with overflow:hidden that is an ancestor of a search
   field clips that field's autocomplete panel - the mistake that silently
   killed every autocomplete on the home page. This element contains nothing
   but the photograph and the scrim. */
.dt2 .dt2-hero-layers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.dt2 .dt2-hero-bg {
  position: absolute;
  inset: -4%;
  background-position: center;
  background-size: cover;
  will-change: transform;
  animation: dt2-kenburns 34s ease-in-out infinite alternate;
}

@keyframes dt2-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

.dt2 .dt2-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 24, 43, .55) 0%, rgba(7, 24, 43, .15) 35%, rgba(7, 24, 43, .80) 100%),
    linear-gradient(105deg, rgba(7, 24, 43, .60) 0%, rgba(7, 24, 43, 0) 62%);
}

.dt2 .infoHero .maincontainer > .container {
  position: relative;
  z-index: 2;
}

.dt2 .hero-text-container {
  max-width: 46rem;
}

.dt2 .dt2-hero-kicker {
  font-family: 'Lato', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--travel-color-10);
  margin-bottom: .6rem;
}

.dt2 h1.dt2-hero-title {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 .85rem 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.dt2 .dt2-hero-sub {
  font-family: 'Lato', sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  max-width: 40rem;
}

.dt2 .dt2-hero-sub p:last-child {
  margin-bottom: 0;
}

/* The best-months line. Real data - cities_best_travel - so it gets a proper
   pill rather than the unstyled run-on text v1 gave it. */
.dt2 .dt2-hero-months {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: 'Lato', sans-serif;
  font-size: .92rem;
  color: rgba(255, 255, 255, .9);
}

.dt2 .dt2-hero-months i {
  color: var(--travel-color-10);
}

.dt2 .dt2-hero-months strong {
  color: #fff;
}

/* The editor button. float-end inside the <h1> parked it in the middle of
   the hero, beside the title, on the longest line of the page. Pinned to the
   top right of the hero instead - it is a staff control, not part of the
   destination's headline. Only ever rendered when $enableeditor is true. */
.dt2 .dt2-editbtn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  font-size: .78rem;
  padding: .4rem 1rem;
  z-index: 3;
}

@media (max-width: 767.98px) {
  .dt2 .dt2-editbtn {
    position: static;
    display: inline-block;
    margin-top: .75rem !important;
  }
}


/* -------------------------------------------------------------------------
   BREADCRUMB
   ------------------------------------------------------------------------- */

.dt2 .breadcrumb {
  font-family: 'Lato', sans-serif;
  font-size: .86rem;
  margin-bottom: 0;
}

.dt2 .breadcrumb a {
  color: var(--main-color);
  text-decoration: none;
}

.dt2 .breadcrumb a:hover {
  color: var(--travel-color-01);
}


/* -------------------------------------------------------------------------
   SEARCH PANELS
   -------------------------------------------------------------------------

   .search-col is v1's wrapper for all three widgets. Restyled once here, so
   flights, hotels and things-to-do stay consistent without touching any of
   the markup the JS depends on. */

.dt2 .search-col {
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 18px;
  box-shadow: 0 18px 40px -30px rgba(7, 24, 43, .55);
}

.dt2 .search-col h2 {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--travel-color-02);
  letter-spacing: -.01em;
}

.dt2 .search-col h2.fs-6 {
  font-family: 'Lato', sans-serif;
  font-size: .78rem !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--main-color);
  margin-bottom: .35rem !important;
}

/* Fields. No overflow:hidden on .input-group - every one of these has an
   autocomplete or a date picker hanging below it. Corners are rounded on the
   children instead. */
.dt2 .input-group {
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 4px 14px -10px rgba(7, 24, 43, .5);
  transition: box-shadow .18s ease;
}

.dt2 .input-group:focus-within {
  box-shadow: 0 0 0 3px rgba(247, 190, 22, .5), 0 4px 14px -10px rgba(7, 24, 43, .5);
}

.dt2 .input-group > :first-child {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

/* Not :last-child. Every autocomplete appends its panel as the last child of
   the input group, so the field stops being :last-child the moment it has
   one - the bug that left Hotels with a square corner on the home page. */
.dt2 .input-group > .form-control,
.dt2 .input-group > .form-select {
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

.dt2 .form-control,
.dt2 .form-select,
.dt2 .input-group-text {
  border: 1px solid #e3e1dc;
  background-color: #fff;
  padding: .6rem .85rem;
}

.dt2 .input-group-text {
  border-right: 0;
  color: var(--travel-color-01);
}

.dt2 .input-group > .form-control,
.dt2 .input-group > .form-select {
  border-left: 0;
}

/* The autocomplete panels, all nine class names the product bundles use.
   Matching the group's radius so the focus ring does not show through as a
   notch at the top corners. */
.dt2 [class*="search-helper"],
.dt2 .fx-suggest-list,
.dt2 .rc-suggest-list {
  border-radius: 14px !important;
}

.dt2 .btn-book,
.dt2 .search-col .btn-primary {
  background: linear-gradient(135deg, var(--travel-color-10) 0%, #ffd452 100%);
  color: var(--travel-color-02);
  border: 0;
  border-radius: 999px;
  padding: .7rem 2rem;
  font-weight: 700;
  box-shadow: 0 14px 28px -16px rgba(247, 190, 22, .9);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.dt2 .btn-book:hover,
.dt2 .search-col .btn-primary:hover {
  background: var(--travel-color-02);
  color: #fff;
  transform: translateY(-2px);
}


/* -------------------------------------------------------------------------
   FLIGHT OFFERS
   ------------------------------------------------------------------------- */

.dt2 .offer .item.card {
  border: 1px solid #e8e6e1 !important;
  border-radius: 16px;
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dt2 .offer .item.card:hover {
  transform: translateY(-3px);
  border-color: transparent !important;
  box-shadow: 0 20px 40px -26px rgba(7, 24, 43, .6) !important;
}

.dt2 .offer .flight-company-img {
  max-height: 34px;
  width: auto;
}

.dt2 .offer .results-flights-price .fs-3 {
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  color: var(--travel-color-02) !important;
}


/* -------------------------------------------------------------------------
   THE MAIN BAND
   ------------------------------------------------------------------------- */

/* v1 wraps the two-column area in .bg-light. A flat grey full-bleed band
   directly under a photographic hero makes the page look like it stopped;
   the warm tint reads as a deliberate section. */
.dt2 .container-fluid.bg-light {
  background: #f7f5f1 !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}


/* -------------------------------------------------------------------------
   HOTEL CARDS
   ------------------------------------------------------------------------- */

.dt2 .results-col .col-12.fs-5 {
  font-family: 'Lora', serif !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  color: var(--travel-color-02);
  letter-spacing: -.015em;
  margin-bottom: .5rem;
}

.dt2 .results-col .card.item {
  border: 1px solid #e8e6e1 !important;
  border-radius: 16px;
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dt2 .results-col .card.item:hover {
  transform: translateY(-4px);
  border-color: transparent !important;
  box-shadow: 0 22px 44px -26px rgba(7, 24, 43, .6) !important;
}

.dt2 .card-img-hotel {
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.dt2 .results-col .card.item:hover .card-img-hotel {
  transform: scale(1.05);
}

.dt2 .results-col .card.item .title a {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: var(--travel-color-02);
  text-decoration: none;
}

/* These stars are real - hotels[].stars comes from the hotel feed - so they
   stay. They are only restyled. */
.dt2 .results-col .reviews {
  color: var(--travel-color-10);
  letter-spacing: .05em;
}

.dt2 #loadmorehotels {
  border-radius: 999px;
  border: 1px solid var(--travel-color-01);
  color: var(--travel-color-01);
  background: transparent;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  padding: .7rem 2rem;
}

.dt2 #loadmorehotels:hover {
  background: var(--travel-color-01);
  color: #fff;
}


/* -------------------------------------------------------------------------
   WEATHER + CMS BLOCKS
   ------------------------------------------------------------------------- */

.dt2 #containercontentweather,
.dt2 #containercontent {
  font-family: 'Lato', sans-serif;
  line-height: 1.65;
  color: var(--main-color);
}

.dt2 #containercontent h2,
.dt2 #containercontent h3 {
  font-family: 'Lora', serif;
  color: var(--travel-color-02);
}


/* -------------------------------------------------------------------------
   GALLERY
   ------------------------------------------------------------------------- */

.dt2 .picgrid .grid-item a {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
}

.dt2 .picgrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.dt2 .picgrid .grid-item a:hover img {
  transform: scale(1.06);
}


/* -------------------------------------------------------------------------
   CLOSING BAND - description + map
   ------------------------------------------------------------------------- */

.dt2 .container.marketing h2 {
  font-family: 'Lora', serif;
  font-weight: 700;
  color: var(--travel-color-02);
  letter-spacing: -.015em;
}

.dt2 .container.marketing .lead {
  font-family: 'Lato', sans-serif;
  color: var(--main-color);
  font-size: 1.02rem;
  line-height: 1.7;
}

.dt2 .map-border {
  border: 1px solid #e8e6e1;
  border-radius: 16px !important;
  transition: box-shadow .2s ease;
}

.dt2 .mapPopup:hover .map-border {
  box-shadow: 0 18px 36px -24px rgba(7, 24, 43, .6);
}


/* -------------------------------------------------------------------------
   MOTION
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dt2 .dt2-hero-bg {
    animation: none !important;
  }
  .dt2 .card-img-hotel,
  .dt2 .picgrid img,
  .dt2 .results-col .card.item,
  .dt2 .offer .item.card {
    transition: none !important;
  }
}


/* -------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .dt2 .infoHero .maincontainer,
  .dt2 .infoHero.infoHero-sm .maincontainer {
    min-height: 54vh;
    padding-top: 2.5rem;
  }
  .dt2 .dt2-hero-months {
    font-size: .84rem;
  }
  .dt2 .container-fluid.bg-light {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}