/* ========================================
   PAGE SHELL
   ======================================== */
.page--travel-database{background:linear-gradient(180deg, #fff9f2 0%, var(--color-surface-warm) 100%)}
.page--travel-database #main{padding-bottom:1.5rem}
@media (min-width: 768px){
.page--travel-database #main{padding-bottom:3rem}
}

@media (max-width: 767.98px){
.page--travel-database :is(.section,.rail){border-top:0}
.page--travel-database #selection,
.page--travel-database .rail-group,
.page--travel-database #main > .section,
.page--travel-database #selection + .rail,
.page--travel-database #selection + #results,
.page--travel-database .rail + .rail{margin-top:0.5rem}
}

/* Section subtitles are page-specific because this stylesheet is isolated
   to the Travel Database pages. */
.page--travel-database .section > header p{color:var(--color-text-muted);font-size:0.8125rem;margin-top:0.25rem}
@media (min-width: 768px){
.page--travel-database .section > header p{font-size:var(--font-size-reading)}
}

#wat,
#waar{scroll-margin-top:calc(var(--header-h) + 3.5rem)}

/* ========================================
   CHOICE GRID
   ======================================== */
.choice-grid{--cols:var(--cols-s, 3);--gap-col:1rem;--gap-row:1.5rem;--pad-x:0rem;--tile-max:10rem;align-content:flex-start;display:flex;flex-wrap:wrap;gap:var(--gap-row) var(--gap-col);justify-content:center;margin:0 auto;max-width:calc(var(--cols) * var(--tile-max) + (var(--cols) - 1) * var(--gap-col) + 2 * var(--pad-x));padding:0 var(--pad-x);width:100%}
@media (min-width: 600px){
.choice-grid{--gap-col:1.5rem;--gap-row:2rem}
}
@media (min-width: 768px){
.choice-grid{--cols:var(--cols-m, 3)}
}
@media (min-width: 1024px){
.choice-grid{--cols:var(--cols-l, 5);--gap-col:1.75rem;--tile-max:11rem}
}

.choice-grid li{flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap-col)) / var(--cols));max-width:var(--tile-max);min-width:0}
.choice-grid a{align-items:center;display:flex;flex-direction:column;gap:0.625rem;text-align:center}
.choice-grid a > div{aspect-ratio:1 / 1;background-color:var(--color-surface);border:4px solid var(--color-surface);border-radius:50%;box-shadow:0 8px 16px rgb(0 0 0 / 0.06);overflow:hidden;position:relative;transition:border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);width:100%}
.choice-grid img{height:100%;inset:0;object-fit:cover;position:absolute;transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);width:100%}
.choice-grid a:hover > div{border-color:var(--color-primary-border-soft);box-shadow:0 12px 24px var(--color-primary-shadow-soft);transform:translateY(-6px) scale(1.05)}
.choice-grid a:hover img{transform:scale(1.15)}
.choice-grid a:active > div{box-shadow:var(--shadow-xs);transform:scale(0.95)}
.choice-grid span{font-size:0.8125rem;font-weight:var(--font-weight-ui);line-height:1.2;min-height:2lh;transition:color 0.2s ease}
@media (min-width: 480px){
.choice-grid span{font-size:0.9375rem}
}

.choice-grid a:hover span{color:var(--color-primary-dark)}

/* ========================================
   DESTINATION GROUPS
   ======================================== */
#waar > div{display:grid;gap:1.5rem}
@media (min-width: 768px){
#waar > div{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width: 1024px){
#waar > div{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

h3:has(+ .destination-list){color:var(--color-text-muted);font-size:0.75rem;font-weight:var(--font-weight-ui);letter-spacing:0.08em;margin-bottom:0.5rem;text-transform:uppercase}

.destination-list{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
.destination-list li + li{border-top:1px solid var(--color-border)}
.destination-list a{align-items:center;display:flex;font-weight:var(--font-weight-ui);gap:0.625rem;padding:0.75rem 1rem;transition:background-color 0.15s, color 0.15s}
.destination-list strong{flex:1;min-width:0}
@media (min-width: 768px){
.destination-list a{padding:0.875rem 1rem}
}

.destination-list a:hover{background-color:var(--color-link-bg-soft);color:var(--color-link)}
.destination-list a::after{color:var(--color-text-light);content:"chevron_right";flex-shrink:0;font-family:"Material Symbols Outlined";-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-size:18px;font-style:normal;font-variation-settings:"FILL" 0;font-weight:normal;letter-spacing:normal;line-height:1;text-transform:none;transition:color 0.15s}
.destination-list a:hover::after{color:var(--color-link)}

.destination-list a > span{color:var(--color-text-muted);font-family:var(--font-body);font-size:0.8125rem;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-body)}
.destination-list a:hover > span{color:var(--color-link)}

/* ========================================
   RAIL GROUP — CHAPTER MARKER
   ======================================== */
.rail-group > header{padding:1.25rem 1rem 1rem}
@media (min-width: 768px){
.rail-group > header{padding:1.25rem 0}
}

.rail-group > header h2{color:var(--color-text-main);font-family:var(--font-display);font-size:1.375rem;font-weight:var(--font-weight-display);letter-spacing:-0.02em;line-height:1.15}
@media (min-width: 768px){
.rail-group > header h2{font-size:1.75rem}
}

.rail-group > header h2::after{background-color:var(--color-primary);border-radius:var(--radius-full);content:"";display:block;height:0.1875rem;margin-top:0.5rem;width:2rem}

.rail-group > header p{color:var(--color-text-muted);font-size:0.8125rem;margin-top:0.5rem}
@media (min-width: 768px){
.rail-group > header p{font-size:var(--font-size-reading)}
}

/* ========================================
   RAIL
   ======================================== */
.rail header h2{line-height:1.25;min-width:0}
@media (max-width: 767.98px){
.rail header h2{font-size:1.0625rem}
}

.rail header a{font-size:0.75rem;margin-top:0.125rem}
@media (min-width: 768px){
.rail header a{font-size:0.875rem}
}

.rail .alt-carousel{margin-right:-1rem;padding-right:1rem}
@media (min-width: 768px){
.rail .alt-carousel{margin-right:0;padding-right:0}
}

.rail .alt-card{flex:0 0 clamp(13rem, 20vw, 15rem)}

/* ========================================
   CAROUSEL ARROWS
   ======================================== */
.rail__viewport{position:relative}
.rail__arrow{display:none}

@media (min-width: 768px){
.rail__arrow{align-items:center;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:50%;box-shadow:var(--shadow-card);color:var(--color-text-main);display:flex;height:2.5rem;justify-content:center;position:absolute;top:calc(50% - 0.25rem);transition:background-color 0.15s, color 0.15s, opacity 0.2s;translate:0 -50%;width:2.5rem;z-index:var(--z-raised)}
.rail__arrow:hover{background-color:var(--color-link-bg-soft);color:var(--color-link)}
.rail__arrow:disabled{opacity:0;pointer-events:none}
.rail__arrow--prev{left:0.5rem}
.rail__arrow--next{right:0.5rem}
.rail__arrow .material-symbols-outlined{font-size:20px}
}

/* ========================================
   SELECTION DIALOG
   ======================================== */
.selection-dialog::backdrop{background-color:var(--color-overlay-medium)}
.selection-dialog .dialog-overlay__panel{background-color:var(--color-surface)}
.selection-dialog .dialog-overlay__panel > header{align-items:center;border-bottom:1px solid var(--color-border);display:grid;flex:0 0 auto;gap:1rem;grid-template-columns:minmax(0, 1fr) auto;padding:1rem}
.selection-dialog h2{font-family:var(--font-display);font-size:1.25rem;font-weight:var(--font-weight-display)}
.selection-dialog header p{color:var(--color-text-muted);font-size:0.8125rem;margin-top:0.125rem}
.selection-dialog header button{align-items:center;background-color:var(--color-background);border-radius:50%;display:flex;height:2.5rem;justify-content:center;transition:background-color 0.15s, color 0.15s;width:2.5rem}
.selection-dialog header button:hover{background-color:var(--color-surface-alt);color:var(--color-link)}
.selection-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1rem 1rem 1.5rem}
.selection-dialog__body section + section{margin-top:2rem}
.selection-dialog__body h3{color:var(--color-text-muted);font-size:0.75rem;font-weight:var(--font-weight-ui);letter-spacing:0.08em;margin-bottom:0.5rem;text-transform:uppercase}

#popular-destinations ul{background-color:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:grid;gap:1px;grid-template-columns:repeat(auto-fit, minmax(min(100%, 19.5rem), 1fr));overflow:hidden}
#popular-destinations li{background-color:var(--color-surface)}
#popular-destinations a{align-items:center;display:flex;font-weight:var(--font-weight-ui);gap:0.625rem;padding:0.75rem 1rem;transition:background-color 0.15s, color 0.15s}
#popular-destinations a::before{color:var(--color-primary);content:"location_on";flex-shrink:0;font-family:"Material Symbols Outlined";-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-size:20px;font-style:normal;font-variation-settings:"FILL" 1;font-weight:normal;letter-spacing:normal;line-height:1;text-transform:none}
#popular-destinations strong{flex:1;min-width:0}
#popular-destinations a:hover{background-color:var(--color-link-bg-soft);color:var(--color-link)}
#popular-destinations a::after{color:var(--color-text-light);content:"chevron_right";flex-shrink:0;font-family:"Material Symbols Outlined";-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-size:18px;font-style:normal;font-variation-settings:"FILL" 0;font-weight:normal;letter-spacing:normal;line-height:1;text-transform:none;transition:color 0.15s}
#popular-destinations a:hover::after{color:var(--color-link)}
#popular-destinations a > span{color:var(--color-text-muted);font-family:var(--font-body);font-size:0.8125rem;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-body)}
#popular-destinations a:hover > span{color:var(--color-link)}

#all-destinations ul{display:grid;gap:0 0.75rem;grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr))}
#all-destinations li{border-bottom:1px solid var(--color-border)}
#all-destinations a{align-items:center;border-radius:var(--radius);display:flex;font-size:0.875rem;font-weight:var(--font-weight-ui);gap:0.375rem;min-height:2.75rem;padding:0.625rem 0.5rem;transition:background-color 0.15s, color 0.15s}
#all-destinations strong{flex:1;min-width:0}
#all-destinations a:hover{background-color:var(--color-link-bg-soft);color:var(--color-link)}
#all-destinations a::after{color:var(--color-text-light);content:"chevron_right";flex-shrink:0;font-family:"Material Symbols Outlined";-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-size:18px;font-style:normal;font-variation-settings:"FILL" 0;font-weight:normal;letter-spacing:normal;line-height:1;text-transform:none;transition:color 0.15s}
#all-destinations a:hover::after{color:var(--color-link)}
#all-destinations a > span{color:var(--color-text-muted);font-family:var(--font-body);font-size:0.75rem;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-body)}
#all-destinations a:hover > span{color:var(--color-link)}
@media (min-width: 768px){
.selection-dialog__body{padding:1.5rem}
#popular-destinations a{padding:0.875rem 1rem}
}