/* Home: the cheapest-destinations bento, weekends / months / how-it-works row, route map and FAQ. */

.section-head.is-centered { display: grid; justify-content: center; justify-items: center; gap: 0; text-align: center; }

/* ---------- Destination photo tiles ---------- */

/* Uniform grid (Everywhere results); #popular-grid overrides it with the bento below. */
.dest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 320px; gap: var(--bento-gap); }

.dc { color: #fff; }
.dc:has(.dc-hit:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.dc:hover > .cover { transform: scale(1.03); }
.dc-hit { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; background: transparent; }
.dc-hit:focus-visible { outline: none; }
.dc-country,
.dc-price,
.dc-body,
.dc-orb { position: absolute; z-index: 2; pointer-events: none; }
.dc-country { top: 14px; left: 14px; max-width: calc(100% - 140px); overflow: hidden; text-overflow: ellipsis; }
.dc-price { top: 14px; right: 14px; }
.dc-body { left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 6px; padding: 20px 72px 20px 20px; }
.dc-name {
  max-width: 100%;
  padding: 4px 14px 5px;
  border-radius: var(--r-inner);
  background: rgb(17 17 19 / 0.55);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dc-stats { max-width: 100%; }
.dc-count { padding: 3px 10px; border-radius: var(--r-pill); background: rgb(17 17 19 / 0.55); font-size: var(--fs-xs); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dc-orb { right: 14px; bottom: 14px; width: 40px; height: 40px; }
.dc:not(.is-featured) .dc-body { padding-right: 62px; }
.dc:not(.is-featured) .dc-stats { min-height: 30px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
.dc:not(.is-featured) .dc-stats > span + span { margin-left: var(--space-2); padding-left: var(--space-2); }
.dc-orb .icon { width: 16px; height: 16px; }

/* ---------- Bento: 2×2 featured tile, four small tiles, then three more and the accent tile ---------- */

#popular-grid.is-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(280px, auto); }
#popular-grid .is-featured { grid-column: span 2; grid-row: span 2; }
#popular-grid .is-featured .dc-name { padding: 6px 20px 8px; border-radius: var(--r-card); font-size: var(--fs-h1); letter-spacing: -0.03em; }
#popular-grid .is-featured .dc-body { gap: 8px; padding: 28px 96px 28px 28px; }
#popular-grid .is-featured .dc-country { top: 20px; left: 20px; }
#popular-grid .is-featured .dc-price { top: 20px; right: 20px; height: 40px; padding: 0 16px; font-size: var(--fs-lg); }

/* The notch: a canvas-coloured cut-out in the bottom-right corner holding a black orb. Two inverted
   fillets join it to the tile's edges so tile and notch read as one continuous shape. */
.dc-notch {
  --notch-pad: 10px;
  --fillet: 22px;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  padding: var(--notch-pad) 0 0 var(--notch-pad);
  border-top-left-radius: calc(28px + var(--notch-pad));
  background: var(--canvas);
  pointer-events: none;
}
.dc-notch::before,
.dc-notch::after {
  content: '';
  position: absolute;
  width: var(--fillet);
  height: var(--fillet);
  background: radial-gradient(circle at 0 0, transparent 70%, var(--canvas) 71%);
}
.dc-notch::before { right: 0; bottom: 100%; }
.dc-notch::after { right: 100%; bottom: 0; }
.dc-notch .orb .icon { width: 20px; height: 20px; }
.dc.is-featured:hover .dc-notch .orb { background: var(--accent); }

.dc-more { display: flex; flex-direction: column; gap: var(--space-4); }
.dc-more-title { font-size: var(--fs-xl); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.dc-more-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dc-more-chips .chip { height: 32px; padding: 0 var(--space-3); }
.dc-more .pill-orb { align-self: flex-start; margin-top: auto; }

.dashes:empty,
#popular-dashes { display: none; }

/* ---------- Weekends · cheapest months · how it works ---------- */

.bento-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bento-gap); margin-top: var(--section-gap); }
.bento-row > .tile { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.wk-tile { grid-column: span 5; }
.months-tile { grid-column: span 3; }
/* Wide enough for its stat pill on one line. */
.how-tile { grid-column: span 4; }
.tile-head h2 { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.tile-sub { margin-top: var(--space-1); color: var(--ink-2); font-size: var(--fs-sm); }

.wk-list { display: grid; }
.wk {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: var(--space-3) 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  text-align: left;
}
.wk:first-child { border-top: 0; }
.wk-thumb { position: relative; width: 56px; height: 56px; overflow: hidden; border-radius: var(--r-inner); background: var(--sunk); }
.wk-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk-text { display: grid; min-width: 0; line-height: 1.35; }
.wk-text strong { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.wk-text span { color: var(--ink-3); font-size: var(--fs-sm); }
.wk-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.wk:hover .wk-orb { background: var(--black); color: #fff; }
.wk-tile .pill-orb { align-self: flex-start; margin-top: auto; }

#months-chart { display: flex; flex: 1; min-height: 220px; }
.months-chart { display: flex; flex: 1; align-items: stretch; gap: 10px; }
.mc-col { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: var(--space-2); flex: 1; min-width: 0; padding: 22px 0 0; border: 0; border-radius: var(--r-inner); background: none; }
.mc-bar { position: relative; align-self: end; width: 100%; max-width: 44px; height: calc(var(--fill) * 100%); border-radius: var(--r-pill); background: var(--fog); transition: background-color var(--t-fast) var(--ease); }
/* The price sits just above its bar. */
.mc-price { position: absolute; left: 50%; bottom: calc(100% + 6px); color: var(--ink); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; translate: -50% 0; transition: opacity var(--t-fast) var(--ease); }
.mc-label { color: var(--ink-3); font-size: var(--fs-xs); }
.mc-col.is-cheapest .mc-bar { background: var(--accent); }
.mc-col.is-cheapest .mc-price,
.mc-col.is-selected .mc-price,
.mc-col:hover .mc-price,
.mc-col:focus-visible .mc-price { opacity: 1; }
.mc-col.is-selected .mc-bar,
.mc-col:hover .mc-bar,
.mc-col:focus-visible .mc-bar { background: var(--black); }
.mc-col.is-selected .mc-label { color: var(--ink); font-weight: 600; }

.how-title { font-family: var(--font-display); font-size: var(--fs-xl); font-stretch: 125%; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.how-list { display: grid; margin: 0; padding: 0; list-style: none; color: rgb(255 255 255 / 0.75); font-size: var(--fs-sm); }
.how-list li { padding: var(--space-3) 0; border-top: 1px solid rgb(255 255 255 / 0.12); }
.how-stats { align-self: flex-start; margin-top: auto; }

/* ---------- Route map: a white tile, ink arcs, accent deals, pill labels ---------- */

.map-tile { display: grid; gap: var(--space-5); }
.map-head { display: grid; justify-items: start; }
.map-head h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; }
.map-legend { display: flex; gap: var(--space-5); margin: var(--space-3) 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--fs-xs); }
.map-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.legend-dot.is-deal { background: var(--accent); }
.map-scroll { overflow-x: auto; scrollbar-width: none; }
.map-scroll::-webkit-scrollbar { display: none; }
.map-canvas { position: relative; }
.map-svg { display: block; width: 100%; height: auto; overflow: visible; }
.map-grid { fill: none; stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.map-arc { fill: none; stroke: rgb(17 17 19 / 0.15); stroke-width: 1px; }
.map-arc.is-deal { stroke: var(--accent); stroke-width: 1.5px; }
.map-arc.is-selected { stroke: var(--black); stroke-width: 2.5px; }
.map-dest { cursor: pointer; outline: none; }
.map-hit { fill: transparent; }
.map-dest:focus-visible .map-hit { stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.map-dot { fill: var(--ink-4); transition: fill var(--t-fast) var(--ease); }
/* Deals: 7px accent with a 2px white ring (the inner half of the 4px stroke sits under the fill). */
.map-dest.is-deal .map-dot { fill: var(--accent); stroke: #fff; stroke-width: 4px; paint-order: stroke; vector-effect: non-scaling-stroke; }
.map-dest:hover .map-dot,
.map-dest:focus-visible .map-dot { fill: var(--black); }
.map-origin-dot { fill: var(--black); stroke: #fff; stroke-width: 4px; paint-order: stroke; vector-effect: non-scaling-stroke; }

.map-pill {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--tile);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-float);
  pointer-events: none;
}
.map-pill strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.map-pill.is-origin { background: var(--black); color: #fff; font-weight: 600; }
.map-pill.is-right { translate: 10px -50%; }
.map-pill.is-left { translate: calc(-100% - 10px) -50%; }
.map-pill.is-top { translate: -50% calc(-100% - 10px); }
.map-pill.is-bottom { translate: -50% 10px; }
.map-tip {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  min-width: 11rem;
  padding: 10px 14px;
  border-radius: var(--r-inner);
  background: var(--tile);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.4;
  pointer-events: none;
  box-shadow: var(--shadow-float);
  translate: -50% calc(-100% - 14px);
}
.map-tip strong { display: block; font-weight: 600; }
.map-tip span { color: var(--ink-2); font-size: var(--fs-xs); }

/* ---------- Good to know ---------- */

.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8) var(--space-16); align-items: start; }
.faq-head { position: sticky; top: var(--space-6); }
.faq-head h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; }
.faq-list { display: grid; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-size: var(--fs-lg); font-weight: 500; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-toggle { position: relative; background: var(--tile); transition: rotate var(--t-base) var(--ease); }
.faq-toggle::before,
.faq-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; border-radius: 1px; background: currentColor; translate: -50% -50%; }
.faq-toggle::after { rotate: 90deg; }
.faq-list details[open] .faq-toggle { rotate: 45deg; }
.faq-list summary:hover .faq-toggle { background: var(--line); }
.faq-list details p { max-width: 62ch; padding: 0 var(--space-12) var(--space-6) 0; color: var(--ink-2); }