/* =====================================================================
   DESTINATION LANDING PAGES
   /destination/<country>/ — hero, intro band, the untouched package
   listing, the "what makes these ours" band with its right-edge bleed,
   and the FAQ accordion.

   Nothing here targets .pkg-* . The listing and its filter sidebar are
   the archive's and are left exactly as they render there; the only
   adjustments below are to the page-level padding around them.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HERO
   A real <img> rather than a background, so the photograph carries its
   own alt text and can be given fetchpriority. Absolutely positioned
   against the header, which is a plain block, so no vw is involved.
   --------------------------------------------------------------------- */
.dest-hero {
  position: relative;
  overflow: hidden;
  background: var(--green);
  padding: 190px 0 84px;
  min-height: clamp(460px, 64vh, 640px);
  display: flex;
  align-items: flex-end;
}

.dest-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
}

/* Two stops rather than one: the title sits on the lower third, which
   needs to be darker than the sky the photograph usually opens with. */
.dest-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(13, 23, 18, .88) 0%, rgba(13, 23, 18, .48) 46%, rgba(13, 23, 18, .30) 100%);
}

.dest-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.dest-hero-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin: 0 0 22px;
}

.dest-hero-title {
  font-family: var(--serif);
  font-size: clamp(34px, 5.6vw, 66px);
  line-height: 1.08;
  color: #F7F3E7;
  margin: 0 0 18px;
}

.dest-hero-meta {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 240, .68);
  margin: 0;
}

@media (max-width: 991px) {
  .dest-hero { padding: 150px 0 60px; min-height: 420px; }
  .dest-hero-eyebrow { letter-spacing: 3px; margin-bottom: 16px; }
}

@media (max-width: 767px) {
  .dest-hero { padding: 132px 0 48px; min-height: 360px; }
}

/* ---------------------------------------------------------------------
   2. INTRO BAND
   Asymmetric on purpose: a short serif statement on the left, one
   paragraph of body copy on the right, and a lot of air around both.
   --------------------------------------------------------------------- */
.dest-intro {
  background: #fff;
  padding: 92px 0 88px;
}

.dest-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 72px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.dest-intro-lead {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.24;
  color: var(--green);
  margin: 0;
}

.dest-intro-body {
  font-size: 17px;
  line-height: 1.85;
  color: var(--body);
  font-weight: 300;
  margin: 0;
  padding-top: 6px;
}

@media (max-width: 991px) {
  .dest-intro { padding: 62px 0 58px; }
  .dest-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .dest-intro-body { font-size: 16px; }
}

/* ---------------------------------------------------------------------
   3. THE LISTING SHELL
   The hero has already cleared the fixed header, so .page-shell's own
   190px top padding is no longer doing anything but pushing the grid
   down the page.
   --------------------------------------------------------------------- */
.dest-hero + .page-shell.dest-shell,
.dest-intro + .page-shell.dest-shell {
  padding-top: 58px;
  padding-bottom: 82px;
}

.dest-trips-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(33, 54, 44, .12);
}

.dest-trips-title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--green);
  margin: 0;
}

.dest-trips-all {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-dk);
  white-space: nowrap;
}

.dest-trips-all i { margin-left: 8px; transition: transform .2s ease; }
.dest-trips-all:hover { color: var(--green); }
.dest-trips-all:hover i { transform: translateX(4px); }

@media (max-width: 767px) {
  .dest-hero + .page-shell.dest-shell,
  .dest-intro + .page-shell.dest-shell { padding-top: 42px; padding-bottom: 54px; }
  .dest-trips-head { margin-bottom: 26px; }
}

/* ---------------------------------------------------------------------
   4. "WHAT MAKES OUR … TRIPS DIFFERENT" — THE RIGHT-EDGE BLEED
   The photograph must run to the right edge of the viewport and stand
   the full height of the band.

   The obvious `width:50vw` is wrong on Windows: 100vw includes the
   scrollbar, so half of it over-measures and the image pokes past the
   right edge, reintroducing horizontal scroll. html{overflow-x:clip}
   in style.css would hide that while leaving the layout wrong.

   Instead .dest-special-media is absolutely positioned against
   <section class="dest-special">, a plain block in normal flow whose
   padding box is already exactly the viewport minus the scrollbar.
   left:50% and right:0 resolve against that box, so the frame is
   full-bleed by measurement and no vw appears in its width at all.

   The copy column is 50% of a centred .container. A centred container's
   horizontal midpoint is the viewport's midpoint whatever the window
   width, so the copy's right edge and the photograph's left edge meet
   at exactly the same pixel with no magic numbers.
   --------------------------------------------------------------------- */
.dest-special {
  position: relative;
  background: var(--green);
  color: #F7F3E7;
  overflow: hidden;
}

.dest-special-inner {
  padding-top: 92px;
  padding-bottom: 96px;
}

.dest-special-copy {
  width: 50%;
  padding-right: clamp(28px, 4.5vw, 76px);
}

.dest-special-title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.2;
  color: #F7F3E7;
  margin: 0 0 30px;
}

.dest-special-points {
  list-style: none;
  margin: 0 0 38px;
  padding: 0;
}

.dest-special-points li {
  position: relative;
  padding: 0 0 20px 26px;
  font-size: 15.5px;
  line-height: 1.72;
  font-weight: 300;
  color: rgba(247, 243, 231, .84);
}

.dest-special-points li:last-child { padding-bottom: 0; }

.dest-special-points li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 1px;
  background: var(--gold);
}

.dest-special-points b {
  font-weight: 600;
  color: #fff;
}

.dest-special-cta {
  display: inline-block;
  background: var(--gold);
  color: var(--green);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 2px;
  transition: background .2s ease, color .2s ease;
}

.dest-special-cta:hover,
.dest-special-cta:focus {
  background: var(--gold-lt);
  color: var(--green);
}

.dest-special-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.dest-special-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
}

/* Stacked below the breakpoint: the frame returns to normal flow under
   the copy and takes an explicit height. vw is safe for a height —
   over-measuring the scrollbar there changes the number by a few pixels
   and cannot cause overflow. */
@media (max-width: 991px) {
  .dest-special-inner { padding-top: 62px; padding-bottom: 56px; }
  .dest-special-copy { width: 100%; padding-right: 0; }
  .dest-special-points li { font-size: 15px; }

  .dest-special-media {
    position: static;
    height: clamp(240px, 46vw, 400px);
  }
}

/* ---------------------------------------------------------------------
   5. FAQ ACCORDION
   <details>/<summary>, so it opens and closes with scripting off. The
   chevron rotation is a CSS-only response to [open].
   --------------------------------------------------------------------- */
.dest-faq {
  background: var(--stone);
  padding: 92px 0 96px;
}

.dest-faq-head {
  max-width: 760px;
  margin: 0 0 44px;
}

.dest-faq-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.16;
  color: var(--green);
  margin: 0 0 14px;
}

.dest-faq-sub {
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--body);
  margin: 0;
}

.dest-faq-list {
  max-width: 980px;
  border-top: 1px solid rgba(33, 54, 44, .14);
}

.dest-faq-item {
  border-bottom: 1px solid rgba(33, 54, 44, .14);
}

.dest-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.4;
  color: var(--green);
}

/* Safari still paints the default disclosure triangle without this. */
.dest-faq-q::-webkit-details-marker { display: none; }

.dest-faq-q:hover { color: var(--gold-dk); }

.dest-faq-q i {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--gold-dk);
  transition: transform .25s ease;
}

.dest-faq-item[open] > .dest-faq-q i { transform: rotate(180deg); }

.dest-faq-a {
  padding: 0 64px 26px 4px;
}

.dest-faq-a p {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--body);
}

@media (max-width: 767px) {
  .dest-faq { padding: 60px 0 64px; }
  .dest-faq-head { margin-bottom: 30px; }
  .dest-faq-q { padding: 20px 2px; gap: 16px; }
  .dest-faq-a { padding: 0 0 22px 2px; }
  .dest-faq-a p { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .dest-faq-q i,
  .dest-trips-all i { transition: none; }
}