/* /explore: one tile per destination beyond the four top-level pages, in the
   1180 column the home page uses. Navy + gold, photo tiles with a navy wash,
   the MICHELIN tile in the Guide's red, Recently Closed a plain navy card. */
:root{--oe-col:1180px;--xp-navy:#101530;--xp-gold:#ecaf18;--xp-cream:#f7f2e9;--xp-ink:#132338}
*{box-sizing:border-box}
html{background:var(--xp-cream)}
body{margin:0;background:var(--xp-cream);color:var(--xp-ink);font-family:'DM Sans',sans-serif}
.explore-page main{overflow:hidden}
.xp-wrap{max-width:1180px;margin:0 auto;padding:34px 34px 10px}
.xp-head{margin:0 0 8px}
.xp-label{margin:0 0 10px;font:700 12px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#b47713}
.xp-head h1{margin:0 0 10px;font-family:'DM Sans',sans-serif!important;font-weight:800;font-size:clamp(30px,3.4vw,44px);line-height:1.02;letter-spacing:-.03em;color:var(--xp-ink)}
.xp-sub{margin:0;font:16px/1.55 'Source Sans 3','DM Sans',sans-serif;color:#42505a;max-width:62ch}

/* Cards like the home page's story cards: the photo is the hero, the words sit
   in a white body underneath (owner 2026-09-28). */
.xp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.xp-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ded7cc;border-radius:10px;overflow:hidden;text-decoration:none;color:var(--xp-ink);box-shadow:0 5px 16px rgba(15,44,64,.07);transition:transform .18s ease,box-shadow .18s ease}
.xp-card:hover,.xp-card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,44,64,.14);outline:0}
.xp-card-hero{position:relative;display:block;height:140px;background:linear-gradient(160deg,#1a2350,#101530);overflow:hidden}
.xp-card-hero img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.xp-card:hover .xp-card-hero img{transform:scale(1.04)}
/* Heroes are 3:2 Higgsfield renders; nudge the crop so each subject stays in the 140px band. */
.xp-card--closed .xp-card-hero img{object-position:50% 40%}
.xp-card--passport .xp-card-hero img,.xp-card--editorials .xp-card-hero img{object-position:50% 70%}
.xp-card--markets .xp-card-hero img{object-position:50% 65%}
.xp-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 14px 12px;flex:1 1 auto}
.xp-card-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;background:var(--xp-gold);color:var(--xp-navy);font:700 10.5px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.xp-card-tag i{width:7px;height:7px;border-radius:50%;background:#1f7a45;animation:xpLive 1.1s ease-in-out infinite}
.xp-card--michelin .xp-card-tag{background:#8e1a22;color:#fffdf8}
.xp-card--passport .xp-card-tag.is-live{background:#3ddc84;color:#0b3a22}
@keyframes xpLive{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.6)}}
.xp-card-body strong{font:700 17px/1.15 'DM Sans',sans-serif;letter-spacing:-.01em;color:var(--xp-ink)}
.xp-card-body small{font:13.5px/1.35 'Source Sans 3','DM Sans',sans-serif;color:#596166}
.xp-card-go{display:inline-flex;align-items:center;gap:2px;margin-top:auto;padding-top:6px;font:800 12.5px 'DM Sans',sans-serif;color:var(--xp-navy)}
.xp-card-go svg{width:14px;height:14px;transition:transform .12s ease}
.xp-card:hover .xp-card-go svg{transform:translateX(3px)}
.xp-card:hover .xp-card-go{color:#b47713}

/* The passport shelf under the header: same cream, no top padding of its own,
   so header to banner is the 18px banner to cards is. Two classes, because
   passport-promo.css loads after this file and its .pps padding won a tie. */
.pps.pps--explore{padding-top:0}
.xp-wrap--cards{padding-top:18px}

@media (max-width:980px){
  .xp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .xp-card-hero{height:130px}
}
@media (max-width:620px){
  .xp-wrap{padding:26px 20px 6px}
  .xp-grid{grid-template-columns:1fr;gap:14px}
  .xp-card-hero{height:150px}
}
@media (prefers-reduced-motion:reduce){.xp-card,.xp-card-hero img,.xp-card-go svg{transition:none}.xp-card:hover{transform:none}.xp-card:hover .xp-card-hero img{transform:none}.xp-card-tag i{animation:none}}