/* ==========================================================================
   Destinations menus (header dropdown + side menu) — 12 hotels, 3 brand groups
   Layout follows the Great Destinations parent site; colours, fonts and spacing
   stay this site's own (gold accent, Manrope / Playfair, existing card styles).
   Loaded after gdh-navbar.css on every page.
   ========================================================================== */

/* ---------- 1. Header "Destinations" dropdown ----------
   VIVIDUS Sleek (2) and VIVIDUS (1) side by side on top, MySpace (9) below a divider;
   every hotel sits on one shared 4-column grid so the top items line up with the MySpace columns.
   The panel stays centred under the nav bar and inside the screen. */
html body .site-header .nav .mega-menu--dest { --mega-w: min(1140px, calc(100vw - 48px)) !important; }
html body .site-header .nav .nav-links .mega-dest-top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 4px;
  margin: 0 0 4px;
  padding: 0 16px 16px;
  border-bottom: 1px solid rgba(46, 40, 24, .1);
}
html body .site-header .nav .nav-links .mega-dest-top > .mega-dest-group {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: 4px;
  row-gap: 4px;
  align-content: start;
}
html body .site-header .nav .nav-links .mega-dest-top .mega-dest-group > .mega-dest-brand {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 16px 8px 12px !important;
  background: transparent !important;   /* lets the panel's gold top line run the full width */
}
html body .site-header .nav .nav-links .mega-dest-top .mega-dest-vv-row { display: contents !important; }

/* ---------- 2. Side menu: "Our Destinations" cards (desktop) ---------- */
/* brand label, name and location line up across each row, even when a name wraps (subgrid) */
html body .idx-dest-row { grid-auto-rows: auto; }
html body .idx-dest-row > .idx-hotel-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
html body .idx-dest-row > .idx-hotel-card > .idx-hotel-info { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 4px; align-content: start; }
html body .idx-dest-group + .idx-dest-group { margin-top: 32px; }

/* VIVIDUS + VIVIDUS Sleek side by side, MySpace below — all on one 3-column card grid */
@media (min-width: 961px) {
  html body .idx-dest-pair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
  html body .idx-dest-pair > .idx-dest-group { margin-top: 0 !important; }
  html body .idx-dest-pair > .idx-dest-group[data-brand="vividus"] { grid-column: span 1; }
  html body .idx-dest-pair > .idx-dest-group[data-brand="sleek"] { grid-column: span 2; }
  html body .idx-dest-pair [data-brand="vividus"] .idx-dest-row { grid-template-columns: minmax(0, 1fr) !important; }
  html body .idx-dest-pair [data-brand="sleek"] .idx-dest-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .idx-dest-group[data-brand="myspace"] .idx-dest-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body .idx-dest-pair + .idx-dest-group { margin-top: 32px; }
}
html body .idx-dest-pair[hidden],
html body .idx-dest-group[hidden],
html body .idx-drop-panel[hidden],
html body .idx-prop-list[hidden] { display: none !important; }

/* ---------- 3. Brand filter buttons (VIVIDUS / VIVIDUS Sleek / MySpace under Destinations) ---------- */
html body .idx-sub-heading.idx-brand-filter {
  pointer-events: auto;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--fb, 'Manrope', sans-serif);
}
html body .idx-sub-heading.idx-brand-filter:hover,
html body .idx-sub-heading.idx-brand-filter:focus-visible { color: var(--vv-deep, #9D8345); background: rgba(157, 131, 69, .07); outline: none; }
html body .idx-sub-heading.idx-brand-filter.is-active { color: var(--vv-deep, #9D8345); font-weight: 700; }

/* ---------- 4. Destinations arrow: points down when open, right when closed ---------- */
html body .idx-drop-trigger .idx-drop-caret { transition: transform 220ms ease; translate: 0 3px; }   /* sits on the visual middle of the serif word */
html body .idx-drop-trigger[aria-expanded="true"] .idx-drop-caret { transform: none !important; }
html body .idx-drop-trigger[aria-expanded="false"] .idx-drop-caret { transform: rotate(-90deg) !important; }