/* ============ Expérience — page hub (visite, bistro, cocktails) ============
   Layered on top of tokens.css + site.css. Uses patterns from mh-*, dh-*
   where possible; only page-specific classes live here under .xp-*.
   ========================================================================== */

/* ----- META grid tweaks (visite + bistro meta rows) ----- */
.xp-meta {
  display: grid; grid-template-columns: repeat(3, max-content);
  gap: 40px;
  border-top: 1px solid rgba(176,138,62,0.22);
  padding-top: 28px; margin-top: 32px;
}
.xp-meta .k {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #B08A3E; margin-bottom: 10px;
}
.xp-meta .v {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.25;
  color: var(--mf-ink);
}
.xp-meta .v .unit {
  font-family: var(--font-body); font-size: 11px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mf-ink-3); margin-left: 4px;
}
.sec--ink .xp-meta .v,
.sec--green .xp-meta .v { color: var(--mf-paper); }
.sec--ink .xp-meta .v .unit,
.sec--green .xp-meta .v .unit { color: var(--mf-paper-3); }
.sec--green .xp-meta .k,
.sec--ink .xp-meta .k { color: #CFAF66; }

.xp-ctas {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px;
}

/* ----- COCKTAILS — header + filters ----- */
.xp-cocktails { padding: 140px 64px; background: var(--mf-ink); color: var(--mf-paper); }
.xp-cocktails__head {
  max-width: 1180px; margin: 0 auto 32px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: end;
}
.xp-cocktails__head h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.06;
  margin: 18px 0 0; color: var(--mf-paper);
  letter-spacing: -0.005em;
}
.xp-cocktails__head h2 em {
  font-style: italic;
  background: var(--foil-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.xp-cocktails__lede {
  font-family: var(--font-subhead); font-style: italic;
  font-size: 19px; line-height: 1.6;
  color: var(--mf-paper-3); max-width: 50ch; margin: 0;
}

.xp-cocktails__filters {
  max-width: 1180px; margin: 0 auto 40px;
  display: flex; flex-wrap: wrap; gap: 24px 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(176,138,62,0.2);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mf-paper-3);
}
.xp-cocktails__filters .f {
  cursor: pointer; position: relative; padding: 8px 0;
  transition: color var(--t-fast);
}
.xp-cocktails__filters .f:hover { color: var(--mf-paper); }
.xp-cocktails__filters .f.is-active { color: #CFAF66; }
.xp-cocktails__filters .f.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -19px;
  height: 1px; background: var(--mf-gold);
}

/* ----- COCKTAIL CARD ----- */
.xp-cocktails__grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.xp-cocktail-card.is-hidden { display: none; }
.xp-cocktail-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px 28px 26px;
  background: rgba(30,26,22,0.55);
  border: 1px solid rgba(176,138,62,0.22);
  text-decoration: none; color: inherit;
  transition: transform var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              background var(--t-med) var(--ease-out);
}
.xp-cocktail-card:hover {
  transform: translateY(-4px);
  border-color: var(--mf-gold);
  background: rgba(30,26,22,0.85);
}
.xp-cocktail-card__num {
  font-family: var(--font-display); font-style: italic;
  font-size: 14px; letter-spacing: 0.1em;
  color: #CFAF66; margin-bottom: 4px;
}
.xp-cocktail-card__base {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--mf-silver); margin-bottom: 18px;
}
.xp-cocktail-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0 -28px 22px;
  overflow: hidden;
  background: #0c0907;
}
.xp-cocktail-card__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.xp-cocktail-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out),
              filter var(--t-slow) var(--ease-out);
  filter: saturate(1.02) contrast(1.03);
}
.xp-cocktail-card:hover .xp-cocktail-card__media img {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.06);
}
.xp-cocktail-card__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.15;
  margin: 0 0 10px; color: var(--mf-paper);
}
.xp-cocktail-card__desc {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  color: var(--mf-paper-3); margin: 0 0 20px;
  min-height: 3em;
}
.xp-cocktail-card__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(176,138,62,0.2);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--mf-paper);
  transition: color var(--t-fast), gap var(--t-fast);
}
.xp-cocktail-card:hover .xp-cocktail-card__link {
  color: #CFAF66; gap: 14px;
}
.xp-cocktail-card__link i { font-size: 16px; }

/* ----- FINAL CTA (links) ----- */
.xp-outro { padding: 120px 64px; background: var(--mf-paper); color: var(--mf-ink); text-align: center; }
.xp-outro__wrap { max-width: 1180px; margin: 0 auto; }
.xp-outro h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.06;
  margin: 18px 0 56px; color: var(--mf-ink);
  letter-spacing: -0.005em;
}
.xp-outro h2 em {
  font-style: italic; color: #B08A3E;
  -webkit-text-fill-color: #B08A3E;
}
.xp-outro .mh-label { margin: 0 auto 20px; }
.xp-outro__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  text-align: left;
}
.xp-outro .mh-link-card {
  background: var(--mf-ink);
  color: var(--mf-paper);
  border: 1px solid rgba(176,138,62,0.3);
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .xp-cocktails, .xp-outro { padding: 110px 40px; }
  .xp-cocktails__head { grid-template-columns: 1fr; gap: 18px; }
  .xp-cocktails__grid { grid-template-columns: repeat(2, 1fr); }
  .xp-outro__grid { grid-template-columns: repeat(2, 1fr); }
  .xp-meta { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
}
@media (max-width: 900px) {
  .xp-cocktails__filters { gap: 16px 22px; font-size: 11.5px; }
  .xp-cocktails__filters .f.is-active::after { bottom: -17px; }
  .xp-cocktail-card__media { height: 190px; }
  .xp-cocktail-card__name { font-size: 22px; }
  .xp-outro h2 { font-size: clamp(32px, 6vw, 48px); margin-bottom: 44px; }
}
@media (max-width: 680px) {
  .xp-cocktails, .xp-outro { padding: 80px 20px; }
  .xp-cocktails__grid { grid-template-columns: 1fr; gap: 16px; }
  .xp-outro__grid { grid-template-columns: 1fr; gap: 14px; }
  .xp-meta { grid-template-columns: 1fr 1fr; gap: 18px 20px; padding-top: 22px; }
  .xp-ctas { gap: 10px; }
  .xp-ctas .btn-gold, .xp-ctas .btn-ghost {
    padding: 14px 22px; font-size: 11.5px; letter-spacing: 0.28em;
    width: 100%; text-align: center;
  }
}