/* =========================================================
   Destination guide
   Sections added to the location detail page: attractions,
   activities, dining, travel info, FAQs and nearby links.
   Reuses the site's .ert-* tokens so it matches the rest.
   ========================================================= */

.dg-sec { padding: 66px 0; background: #fff; }
.dg-sec--alt { background: #faf8f4; }
/* Jumping to a section must clear the fixed header (90px) and the sticky
   section nav (57px), or the heading lands hidden behind them. */
.dg-sec[id] { scroll-margin-top: 150px; }
.dg-narrow { max-width: 860px; }
.dg-lead { font-size: 17px; line-height: 1.85; color: #4a5b53; margin: 14px 0 0; }
.dg-subhead {
  font-family: 'Playfair Display', serif; font-size: 22px; color: #12291f;
  margin: 38px 0 18px;
}
.dg-note { margin-top: 22px; font-size: 13px; color: #7d8b83; font-style: italic; }

/* --- sticky section nav ---
   The site header is fixed at 90px with z-index 1000, so this must stop
   below it rather than at the top of the viewport, or it slides underneath. */
.dg-nav {
  position: sticky; top: 90px; z-index: 900;
  background: #12291f; border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 991px) { .dg-nav { top: 70px; } }
.dg-nav__row { display: flex; gap: 6px; overflow-x: auto; padding: 0 24px; }
.dg-nav__row::-webkit-scrollbar { display: none; }
.dg-nav a {
  flex: 0 0 auto; padding: 15px 16px; color: rgba(255,255,255,.78) !important;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border-bottom: 2px solid transparent; transition: .2s; white-space: nowrap;
  cursor: pointer;
}
.dg-nav a:hover { color: #fff !important; border-bottom-color: #c69a3d; }
/* The tab whose panel is on screen. */
.dg-nav a.is-active {
  color: #fff !important; border-bottom-color: #c69a3d; background: rgba(198,154,61,.12);
}
.dg-nav a:focus-visible { outline: 2px solid #c69a3d; outline-offset: -2px; }

/* A hidden panel must stay out of the layout entirely, or it would leave a
   gap. `hidden` alone loses to the section's own display rule. */
.dg-panel[hidden] { display: none !important; }

/* --- attractions --- */
.dg-attr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px;
}
.dg-attr {
  background: #fff; border: 1px solid #ece4d8; border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(29,43,38,.05); transition: transform .2s, box-shadow .2s;
}
.dg-attr:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(29,43,38,.1); }
.dg-attr__img { height: 168px; background: #eef1ee center/cover no-repeat; }
.dg-attr__body { padding: 18px 20px; }
.dg-attr__body h3 {
  font-family: 'Playfair Display', serif; font-size: 19px; color: #12291f; margin: 0 0 8px;
}
.dg-attr__body p { font-size: 14px; line-height: 1.65; color: #5c6b62; margin: 0; }

/* --- activities --- */
.dg-act-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px;
}
.dg-act {
  padding: 20px 22px; border-left: 3px solid #c69a3d; background: #faf8f4; border-radius: 0 10px 10px 0;
}
.dg-act h4 { font-size: 16px; font-weight: 600; color: #12291f; margin: 0 0 6px; }
.dg-act p { font-size: 14px; line-height: 1.6; color: #5c6b62; margin: 0; }

/* --- hotels / cruises grouped --- */
.dg-star-group { margin-bottom: 44px; }
.dg-star-group:last-child { margin-bottom: 0; }
.dg-star-head {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid #ece4d8;
}
.dg-star-head h3 {
  font-family: 'Playfair Display', serif; font-size: 21px; color: #12291f; margin: 0;
}
.dg-star-count { font-size: 13px; color: #7d8b83; }

/* --- dining --- */
.dg-dine-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px;
}
.dg-dine-cat h4 {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: #c69a3d; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #ece4d8;
}
.dg-dine-cat ul { list-style: none; margin: 0; padding: 0; }
.dg-dine-cat li { padding: 9px 0; border-bottom: 1px dashed #ece4d8; }
.dg-dine-cat li:last-child { border-bottom: 0; }
.dg-dine-cat li strong { display: block; font-size: 15px; color: #12291f; font-weight: 600; }
.dg-dine-cat li span { display: block; font-size: 13px; color: #7d8b83; line-height: 1.55; margin-top: 3px; }

/* --- travel info + FAQ --- */
.dg-info-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; }
@media (max-width: 900px) { .dg-info-wrap { grid-template-columns: 1fr; gap: 44px; } }
.dg-info-list { margin: 18px 0 0; }
.dg-info-list dt {
  font-size: 14px; font-weight: 600; color: #12291f; margin-top: 16px;
}
.dg-info-list dt:first-child { margin-top: 0; }
.dg-info-list dd {
  margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: #5c6b62;
}
.dg-faqs { margin-top: 18px; }
.dg-faq {
  border: 1px solid #ece4d8; border-radius: 10px; margin-bottom: 10px; background: #fff;
}
.dg-faq summary {
  padding: 15px 18px; font-size: 15px; font-weight: 600; color: #12291f;
  cursor: pointer; list-style: none; position: relative; padding-right: 44px;
}
.dg-faq summary::-webkit-details-marker { display: none; }
.dg-faq summary:after {
  content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: #c69a3d; line-height: 1;
}
.dg-faq[open] summary:after { content: '\2212'; }
.dg-faq p {
  margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.75; color: #5c6b62;
}

/* --- nearby destinations --- */
.dg-nearby-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;
}
.dg-nearby {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: #fff; border: 1px solid #ece4d8; border-radius: 12px; padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.dg-nearby:hover { border-color: #c69a3d; box-shadow: 0 8px 22px rgba(29,43,38,.08); }
.dg-nearby__img {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 10px;
  background: #12291f center/cover no-repeat;
}
.dg-nearby__body { min-width: 0; }
.dg-nearby__body strong { display: block; font-size: 15px; color: #12291f; }
.dg-nearby__body small {
  display: block; font-size: 12px; color: #7d8b83; margin-top: 2px; line-height: 1.4;
}

@media (max-width: 640px) {
  .dg-sec { padding: 44px 0; }
  .dg-attr-grid, .dg-act-grid, .dg-dine-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Cruise listing: duration tabs
   Guests choose how long they have before anything else, so
   the listing leads with the lengths actually on sale.
   ========================================================= */
.cd-tabs{background:#12291f;border-bottom:1px solid rgba(255,255,255,.08)}
.cd-tabs__row{display:flex;gap:4px;overflow-x:auto;padding:0 4px}
.cd-tabs__row::-webkit-scrollbar{display:none}
.cd-tab{flex:0 0 auto;display:flex;flex-direction:column;gap:3px;
  padding:16px 22px;text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;transition:.2s}
.cd-tab__len{font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff}
.cd-tab__meta{font-size:12px;color:rgba(255,255,255,.72)}
.cd-tab__meta b{color:#e0b866;font-weight:600}
.cd-tab:hover{background:rgba(255,255,255,.05);border-bottom-color:rgba(198,154,61,.6)}
.cd-tab:hover .cd-tab__len{color:#fff}
.cd-tab.is-active{background:rgba(198,154,61,.14);border-bottom-color:#c69a3d}
.cd-tab.is-active .cd-tab__len{color:#f0d9a0}
.cd-tab:focus-visible{outline:2px solid #c69a3d;outline-offset:-2px}
@media (max-width:640px){
  .cd-tab{padding:13px 16px}
  .cd-tab__len{font-size:14px}
}

/* --- cruise length sub-tabs ---
   Inside the Cruises panel the lengths are their own row of tabs. They sit
   below the main guide nav, so they are lighter: pill-shaped on the page
   background rather than a second sticky bar competing with the first. */
.dg-sub {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 28px; padding: 0;
}
.dg-sub__tab {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  /* #55524b on #f7f5f1 is 6.4:1, so the unselected tabs are readable rather
     than merely faint. */
  background: #fff; color: #55524b;
  border: 1px solid #e2ded6;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.dg-sub__tab span {
  font-size: 12px; font-weight: 500; opacity: .75;
}
.dg-sub__tab:hover { border-color: #c69a3d; color: #1d3d2c; }
/* The selected length. Gold on #12291f is 5.8:1. */
.dg-sub__tab.is-active {
  background: #12291f; border-color: #12291f; color: #fff;
}
.dg-sub__tab.is-active span { opacity: .85; color: #d8b568; }
.dg-sub__tab:focus-visible { outline: 2px solid #c69a3d; outline-offset: 2px; }

/* Same reasoning as .dg-panel: a hidden group must leave no gap. */
[data-dg-subpanel][hidden] { display: none !important; }