/* ============================================================
   Traveronto — Promotions Page (ALL Accor+ Explorer)
   Scoped under .promo-page-wrap to avoid conflicts with theme
   ============================================================ */

/* Google Fonts (Fraunces serif for headings) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,600;1,500&family=Inter:wght@400;600;700;800&display=swap');

/* ── Variables ── */
.promo-page-wrap {
  --promo-navy:     #0a1f3c;
  --promo-navy-2:   #0e2a52;
  --promo-ink:      #13243d;
  --promo-gold:     #c9a24b;
  --promo-gold-2:   #e3c178;
  --promo-blue:     #1e73be;
  --promo-paper:    #f6f8fb;
  --promo-card:     #fff;
  --promo-line:     #e6ecf3;
  --promo-txt:      #1c2b40;
  --promo-muted:    #5e7088;
  --promo-shadow:   0 22px 48px -22px rgba(10,31,60,.45);
  --promo-shadow-sm:0 8px 22px -12px rgba(10,31,60,.32);
  --promo-serif:    'Fraunces', Georgia, serif;
  --promo-sans:     'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  font-family: var(--promo-sans);
  color: var(--promo-txt);
  background: var(--promo-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.promo-page-wrap * { box-sizing: border-box; }
.promo-page-wrap img { max-width: 100%; display: block; }

/* ── Container ── */
.promo-wrap {
  width: min(1180px, 92vw);
  margin-inline: auto;
}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.promo-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  min-height: 480px;
}
.promo-hero .promo-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  /* Match Traveronto theme gradient (same as Contact/About pages) */
  background-image: linear-gradient(135deg, #16213e 0%, #0f3460 45%, #C93D26 100%);
}
.promo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    rgba(22,33,62,.92) 0%,
    rgba(15,52,96,.85) 45%,
    rgba(201,61,38,.75) 100%
  );
}
.promo-hero .promo-wrap {
  position: relative;
  padding: 80px 0 90px;
}
.promo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  padding: 7px 15px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--promo-gold-2);
}
.promo-hero h1 {
  font-family: var(--promo-serif);
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.04;
  margin: 20px 0 14px;
  letter-spacing: -.5px;
  color: #fff !important;
}
.promo-hero h1 em {
  font-style: italic;
  color: var(--promo-gold-2) !important;
}
.promo-hero p.promo-lead {
  font-size: clamp(15px, 2vw, 19px);
  max-width: 620px;
  color: #e4edf8 !important;
  margin: 0 0 24px;
}
.promo-hero p.promo-lead strong {
  color: #fff;
}
.promo-hero-stats .ps b {
  color: #fff !important;
}
.promo-hero-stats .ps span {
  color: #bccbe0 !important;
}
.promo-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.promo-hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.promo-hero-stats .ps b {
  font-family: var(--promo-serif);
  font-size: 32px;
  display: block;
}
.promo-hero-stats .ps span {
  font-size: 12px;
  color: #bccbe0;
  text-transform: uppercase;
  letter-spacing: .7px;
}

/* ── Buttons ── */
.promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform .15s, box-shadow .2s;
  font-family: var(--promo-sans);
}
.promo-btn-gold {
  background: linear-gradient(135deg, var(--promo-gold), var(--promo-gold-2));
  color: #06152b !important;
  box-shadow: 0 16px 34px -14px rgba(201,162,75,.75);
}
.promo-btn-ghost {
  background: rgba(255,255,255,.10);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.30);
}
.promo-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

/* ══════════════════════════════════════════
   BENEFITS STRIP
══════════════════════════════════════════ */
.promo-benefits {
  background: var(--promo-card);
  border-bottom: 1px solid var(--promo-line);
}
.promo-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 36px 0;
}
.promo-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.promo-benefit .pic {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fff4dd, #fbe6bd);
  font-size: 22px;
}
.promo-benefit h4 {
  margin: 2px 0 3px;
  font-size: 15px;
  color: #13243d !important;
}
.promo-benefit p {
  margin: 0;
  font-size: 13px;
  color: var(--promo-muted);
}
@media (max-width: 820px) {
  .promo-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .promo-benefits-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   FEATURED CARD
══════════════════════════════════════════ */
.promo-featured {
  padding: 54px 0 0;
}
.promo-feat-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  padding: 46px 44px;
  background:
    radial-gradient(600px 300px at 88% -20%, rgba(201,162,75,.5), transparent 60%),
    linear-gradient(135deg, #0a1f3c, #163d72);
  box-shadow: var(--promo-shadow);
}
.promo-feat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.promo-feat-flag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #c0392b;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
}
.promo-feat-card h2 {
  position: relative;
  z-index: 1;
  font-family: var(--promo-serif);
  font-weight: 600;
  font-size: clamp(26px, 3.8vw, 40px);
  margin: 14px 0 8px;
  color: #fff !important;
}
.promo-feat-card h2 em {
  color: var(--promo-gold-2) !important;
  font-style: normal;
}
.promo-feat-card p {
  position: relative;
  z-index: 1;
  max-width: 560px;
  color: #dce7f5 !important;
  margin: 0 0 18px;
  font-size: 16px;
}
.promo-feat-ends {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: #f0c98a;
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════
   SECTION HEAD
══════════════════════════════════════════ */
.promo-section {
  padding: 60px 0;
}
.promo-shead {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 28px;
}
.promo-shead .kick {
  color: var(--promo-blue);
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 13px;
}
.promo-shead h2 {
  font-family: var(--promo-serif);
  font-weight: 600;
  font-size: clamp(26px, 3.8vw, 42px);
  margin: 10px 0 12px;
  color: #13243d !important;
  letter-spacing: -.4px;
}
.promo-shead p {
  color: var(--promo-muted);
  font-size: 16px;
  margin: 0;
}

/* ── Search bar ── */
.promo-search {
  position: relative;
  max-width: 430px;
  margin: 0 auto 30px;
}
.promo-search input {
  width: 100%;
  padding: 13px 16px 13px 46px;
  border-radius: 999px;
  border: 1px solid var(--promo-line);
  font-size: 15px;
  font-family: var(--promo-sans);
  background: #fff;
  box-shadow: var(--promo-shadow-sm);
}
.promo-search input:focus {
  outline: none;
  border-color: var(--promo-blue);
}
.promo-search svg {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--promo-muted);
}

/* ══════════════════════════════════════════
   DESTINATION CARDS GRID
══════════════════════════════════════════ */
.promo-dgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}
.promo-dcard {
  position: relative;
  background: var(--promo-card);
  border: 1px solid var(--promo-line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--promo-shadow-sm);
  transition: transform .2s, box-shadow .25s;
}
.promo-dcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--promo-shadow);
}

/* Card image area */
.promo-dmedia {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--promo-navy);
  background-size: cover;
  background-position: center;
  transition: background-size .5s ease;
}
.promo-dcard:hover .promo-dmedia {
  background-size: 108%;
}
.promo-dmedia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(7,18,36,.80) 0%,
    rgba(7,18,36,.12) 45%,
    transparent 70%
  );
}
.promo-dmedia .promo-place {
  position: absolute;
  left: 16px;
  bottom: 13px;
  z-index: 2;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.promo-dmedia .promo-place .pfl {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.4));
}
.promo-dmedia .promo-place .pnm {
  font-family: var(--promo-serif);
  font-weight: 600;
  font-size: 22px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  display: block;
  line-height: 1.1;
}
.promo-dmedia .promo-place .ptg {
  display: block;
  font-family: var(--promo-sans);
  font-size: 11px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #e7eefa;
  opacity: .92;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* Card body */
.promo-dbody {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.promo-dchips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.promo-dchip {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f1f5fb;
  color: #33506f;
}
.promo-dbody p.promo-art {
  font-size: 14px;
  color: var(--promo-muted);
  margin: 0 0 18px;
  flex: 1;
  line-height: 1.55;
}
.promo-dcta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, var(--promo-navy), var(--promo-navy-2));
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 16px;
  border-radius: 12px;
  transition: filter .15s, transform .15s;
  margin-top: auto;
}
.promo-dcta:hover {
  filter: brightness(1.22);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

/* Empty state */
.promo-empty {
  text-align: center;
  color: var(--promo-muted);
  padding: 50px 0;
  font-size: 17px;
  display: none;
}

/* ══════════════════════════════════════════
   CTA BAND
══════════════════════════════════════════ */
.promo-band {
  color: #fff;
  text-align: center;
  background:
    radial-gradient(700px 400px at 50% -20%, rgba(201,162,75,.42), transparent),
    linear-gradient(135deg, #0a1f3c, #143a6e);
}
.promo-band .promo-wrap {
  padding: 70px 0;
}
.promo-band h2 {
  font-family: var(--promo-serif);
  font-weight: 600;
  font-size: clamp(26px, 3.8vw, 44px);
  margin: 0 0 12px;
  color: #fff !important;
}
.promo-band p {
  color: #d7e2f1 !important;
  max-width: 540px;
  margin: 0 auto 26px;
  font-size: 17px;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 820px) {
  .promo-feat-card { padding: 32px 24px; }
  .promo-hero .promo-wrap { padding: 60px 0 70px; }
}
@media (max-width: 600px) {
  .promo-dgrid { grid-template-columns: 1fr; }
  .promo-feat-card { padding: 26px 20px; }
}