/* ==========================================================================
   EBF — Destination (money) page design pass
   Loaded after ebf-quick-answer.css, so it reuses the same --qa-* tokens and
   the same card language: warm paper, hairline border, 16px radius.

   Several rules below carry !important. That is deliberate and narrow: the
   legacy money-page styling in pages.css / ebf-studio.css uses !important on
   the same elements, so a plain declaration silently loses. Each one is
   commented with what it is overriding.
   ========================================================================== */

/* ----------------------------------------------------------- page rhythm -- */
.money-page .money-body{
  padding-top:clamp(1.75rem,3.5vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}
.money-layout{
  align-items:flex-start;
}

/* One consistent gap between the major blocks of the main column, instead of
   each partial bringing its own margin. */
/* A visible edge between blocks, not just air. The main column runs the cabin
   comparison, the departure-fare table and five prose sections one after
   another; with only a 32-48px margin between them the whole column read as
   one undifferentiated stretch of page. A hairline plus the same spacing turns
   it into bands you can see the start of. */
.money-guide > * + *{
  margin-top:0;
  border-top:1px solid var(--qa-line,rgba(20,32,43,.10));
  padding-top:clamp(2rem,3.4vw,3rem);
}

/* ------------------------------------------------------------ fare panel -- */
.money-fare-panel{
  background:var(--qa-surface,#FBF7F3);
  border:1px solid var(--qa-line,rgba(20,32,43,.10));
  border-radius:var(--qa-radius,16px);
  padding:1.5rem 1.4rem;
  box-shadow:0 1px 2px rgba(20,32,43,.04);
  text-align:left;
}
.money-page .money-body .money-fare-panel__eyebrow{
  margin:0 0 .35rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--qa-muted,#4A6173);
}
.money-page .money-body .money-fare-panel__amount{
  margin:0;
  font-size:clamp(1.9rem,3.2vw,2.4rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--qa-ink,#14202B);
}
.money-page .money-body .money-fare-panel__amount--quote{ font-size:clamp(1.5rem,2.4vw,1.8rem); }
.money-page .money-body .money-fare-panel__basis{
  margin:.35rem 0 0;
  font-size:.95rem;
  color:var(--qa-ink,#14202B);
}
.money-page .money-body .money-fare-panel__checked,
.money-page .money-body .money-fare-panel__note{
  margin:.55rem 0 0;
  font-size:.82rem;
  line-height:1.5;
  color:var(--qa-muted,#4A6173);
}
.money-fare-panel__cta{
  display:block;
  width:100%;
  margin-top:1.15rem;
  text-align:center;
  font-weight:700;
}
.money-fare-panel__contact{
  display:block;
  margin-top:.7rem;
  text-align:center;
  font-weight:700;
  font-size:.95rem;
  /* The contact string can be a long email address; the legacy sidebar card
     clipped it. Let it wrap instead of overflowing the panel. */
  overflow-wrap:anywhere;
  word-break:normal;
  color:var(--qa-ink,#14202B);
}
.money-fare-panel__contact:hover{ color:var(--qa-gold,#C4400E); }
.money-fare-panel__trust{
  list-style:none;
  margin:1.15rem 0 0;
  padding:.9rem 0 0;
  border-top:1px solid var(--qa-line,rgba(20,32,43,.10));
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .9rem;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--qa-muted,#4A6173);
}
.money-fare-panel__trust li{ margin:0; }

@media (min-width:992px){
  .money-fare-panel.money-side-sticky{
    position:sticky;
    /* offset set once in the alignment pass at the foot of this file */
  }
}

/* --------------------------------------------------- headings in column -- */
/* The legacy money-page headings were sized for a full-width column and wrap
   awkwardly inside col-lg-8. Bring them back to a readable scale. */
.money-guide h2,
.money-rich-content h2{
  font-size:clamp(1.35rem,2.2vw,1.75rem)!important;   /* pages.css sizes these up */
  line-height:1.25;
  letter-spacing:-.01em;
  margin:0 0 .75rem;
  color:var(--qa-ink,#14202B);
}
.money-guide h3,
.money-rich-content h3{
  font-size:clamp(1.1rem,1.7vw,1.3rem)!important;
  line-height:1.3;
  margin:1.9rem 0 .6rem;
  color:var(--qa-ink,#14202B);
}
.money-rich-content > h2{ margin-top:2.6rem; }
.money-rich-content > h2:first-child{ margin-top:0; }

/* ------------------------------------------------------------ body copy -- */
.money-rich-content{
  font-size:1rem;
  line-height:1.7;
  color:var(--qa-ink,#14202B);
}
.money-page .money-body .money-rich-content p{ margin:0 0 1.05rem; max-width:72ch; }
.money-rich-content ul,
.money-rich-content ol{ margin:0 0 1.25rem; padding-left:0; max-width:72ch; }
.money-rich-content ul{ list-style:none; }
.money-rich-content ul > li{
  position:relative;
  padding-left:1.35rem;
  margin-bottom:.55rem;
}
.money-rich-content ul > li::before{
  content:"";
  position:absolute;
  left:.3rem; top:.68em;
  width:.4rem; height:.4rem;
  border-radius:50%;
  background:var(--qa-gold,#C4400E);
}
.money-rich-content ol{ padding-left:1.3rem; }
.money-rich-content ol > li{ margin-bottom:.55rem; }
.money-rich-content strong{ font-weight:700; color:var(--qa-ink,#14202B); }

/* ------------------------------------------------- cabin/channel compare -- */
.money-compare__scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--qa-line,rgba(20,32,43,.10));
  border-radius:12px;
  background:#fff;
}
.money-compare__table{
  width:100%;
  min-width:540px;
  border-collapse:collapse;
  font-size:.94rem;
  margin:0;
}
.money-compare__table th,
.money-compare__table td{
  /* Legacy table rules set nowrap on cells; these columns carry prose. */
  white-space:normal;
  overflow-wrap:break-word;
  text-align:left;
  vertical-align:top;
  padding:.8rem .95rem;
  border-bottom:1px solid var(--qa-line,rgba(20,32,43,.10));
}
.money-compare__table thead th,
body.theme-studio .money-compare__table thead th{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  /* The navy header is the site's established table treatment (pages.css and
     ebf-studio.css), so keep it. What was broken is the text on it: this file
     loads last, so a muted colour here beat the white in pages.css and left
     grey-on-navy. Restore white. */
  color:#fff!important;
  white-space:nowrap;
}
.money-compare__table tbody tr:last-child td{ border-bottom:0; }
.money-compare__table tbody td:nth-child(2){
  font-weight:700;
  color:var(--qa-ink,#14202B);
  white-space:nowrap;
}
.money-page .money-body .money-compare__note{
  margin:.7rem 0 0;
  font-size:.85rem;
  color:var(--qa-muted,#4A6173);
}
@media (max-width:600px){
  .money-compare__table thead th{ white-space:normal; }
}

/* ---------------------------------------------------------- route rows -- */
.money-routes-title{
  font-size:clamp(1.1rem,1.7vw,1.3rem)!important;
  margin:0 0 .9rem;
  color:var(--qa-ink,#14202B);
}
.money-page .money-sample-routes{
  /* The legacy rule makes this a flex column with a 12px gap, which turns the
     hairline row separators into floating cards. One list, one border. */
  display:block;
  gap:0;
  border:1px solid var(--qa-line,rgba(20,32,43,.10));
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.money-sample-routes .money-routes-title{
  padding:1rem 1.1rem .9rem;
  margin:0;
  border-bottom:1px solid var(--qa-line,rgba(20,32,43,.10));
  background:var(--qa-surface,#FBF7F3);
}
.money-route-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  padding:.85rem 1.1rem;
  margin:0!important;                      /* legacy per-row card margins */
  border:0!important;
  border-bottom:1px solid var(--qa-line,rgba(20,32,43,.10))!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
.money-route-row:last-child{ border-bottom:0!important; }
/* Verified origin IATA code, in place of the removed airline logo. */
.money-page .money-route-code{
  width:3.4rem;
  flex:0 0 auto;
  text-align:center;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--qa-muted,#4A6173);
  background:var(--qa-surface,#FBF7F3);
  border:1px solid var(--qa-line,rgba(20,32,43,.10));
  border-radius:8px;
  padding:.3rem 0;
}
.money-page .money-routes-note{
  margin:0;
  padding:.85rem 1.1rem 1rem;
  border-top:1px solid var(--qa-line,rgba(20,32,43,.10));
  background:var(--qa-surface,#FBF7F3);
  font-size:.8rem;
  line-height:1.55;
  color:var(--qa-muted,#4A6173);
}
.money-route-path{
  display:flex;
  align-items:center;
  gap:.85rem;
  flex-wrap:wrap;
  min-width:0;
}
.money-route-end small,
.money-route-fare small{
  display:block;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--qa-muted,#4A6173);
}
.money-route-end strong{
  font-size:.98rem;
  font-weight:700;
  color:var(--qa-ink,#14202B);
}
.money-route-arrow{ color:var(--qa-muted,#4A6173); }
.money-route-fare{ text-align:right; white-space:nowrap; }
.money-route-fare strong{
  font-size:1.05rem;
  font-weight:800;
  color:var(--qa-gold,#C4400E);
}

@media (max-width:640px){
  .money-route-row{
    grid-template-columns:1fr auto;
    row-gap:.5rem;
  }
  .money-route-code{ grid-column:1 / -1; width:auto; max-width:3.4rem; }
  .money-route-path{ gap:.6rem; }
  .money-route-end strong{ font-size:.92rem; }
}

/* --------------------------------------------------------- problem/solve -- */
.money-problem,
.money-solution{ margin:0; }
.money-page .money-body .money-problem p,
.money-page .money-body .money-solution p{ max-width:64ch; line-height:1.7; margin:0 0 1rem; }
.money-page .money-solution__next{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.75rem;
  margin:1.1rem 0 0;
}
.money-solution__next .btn{ font-weight:700; }
.money-solution__next span{ color:var(--qa-muted,#4A6173); font-size:.95rem; }

/* ------------------------------------------------------------- proof list -- */
.money-proof__list{ list-style:none; margin:0; padding:0; }
.money-proof__list li{
  position:relative;
  padding-left:1.35rem;
  margin-bottom:.5rem;
  color:var(--qa-ink,#14202B);
}
.money-proof__list li::before{
  content:"";
  position:absolute; left:.3rem; top:.68em;
  width:.4rem; height:.4rem; border-radius:50%;
  background:var(--qa-gold,#C4400E);
}

/* ------------------------------------------- tables inside stored body HTML -- */
/* Destination body copy is stored HTML and uses the shared `money-related-table`
   class, which pages.css / ebf-studio.css style as a PRICE table: last column
   no-wrap, bold, gold. Editorial tables in body copy carry prose there, so the
   cell overflows its column. Any such table inside body copy is editorial. */
.money-rich-content .money-related-table th,
.money-rich-content .money-related-table td,
.money-rich-content .money-related-table td:last-child{
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}
.money-rich-content .money-related-table td:last-child,
body.theme-studio .money-rich-content .money-related-table td:last-child{
  font-weight:400;
  color:var(--qa-ink,#14202B)!important;
}
.money-rich-content .money-related-table{ min-width:0; }
@media (min-width:641px){
  .money-rich-content .money-related-table{ min-width:560px; }
}

/* ------------------------------------------------------ mobile ordering -- */
@media (max-width:991.98px){
  /* On a phone the fare panel is the thing a visitor wants early, not after
     the whole guide. */
  .money-layout{ display:flex; flex-direction:column; }
  .money-layout > aside{ order:-1; margin-bottom:1.75rem; }
  .money-fare-panel{ padding:1.25rem 1.15rem; }
}

/* ==========================================================================
   S15 — structural alignment pass.
   Everything below fixes where a band sits, not how it looks. No colour,
   type or component design is changed.
   ========================================================================== */

/* ------------------------------------------- the prose was inset by 30px -- */
/* .city-description is a legacy card from public/css/style.css: a border, a
   16px radius, 30px of LEFT padding and none on the right (pages.css already
   strips the right padding to kill an old fixed-height scrollbox). The result
   was body copy starting 30px to the right of every heading above it, inside a
   stray bordered box — the single clearest "one section is not aligned with
   another" defect on the page. That file loads asynchronously, so the inset
   also appeared after first paint.
   The prose keeps the page's own measure and edge instead. */
.money-page .city-description{
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  font-size:inherit;
}

/* --------------------------------- the two columns now start on one line -- */
/* .money-layout already sets align-items:flex-start, so the grid rows agree.
   What did not agree was optical: the fare panel carries 1.5rem of its own
   padding before its first line, while the main column's first heading has
   none, so the right rail's text sat ~24px below the left column's. */
@media (min-width:992px){
  .money-layout > [class*="col-lg-8"] > .money-guide{ padding-top:1.5rem; }
}

/* ------------------------------------------------- one sticky offset ------ */
/* pages.css parks .money-side-sticky at 6.5rem; this file parked the fare
   panel at 6rem, so the same rail stopped in two different places depending on
   which page type you were on, under the same fixed header. One value. */
@media (min-width:992px){
  .money-fare-panel.money-side-sticky{ top:6.5rem; }
}

/* -------------------------------------------- the body band's own rhythm -- */
/* .money-page .money-body was written to open tighter than a full section and
   close at full height, and never applied: .money-page > section:not(.money-hero)
   is (0,2,1) and beat it. Same declarations, matched specificity. */
.money-page > section.money-body{
  padding-top:clamp(1.75rem,3.5vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}

/* ------------------------------ editor-pasted tables in the prose -------- */
/* A table typed into the CMS body arrives with no class. The studio theme
   paints its thead navy, so what rendered was a navy header sitting on a
   browser-default body: no borders, no padding, no width, overflowing the
   column on a narrow screen. This is the floor for any table in the prose;
   components that bring their own classes are unaffected. */
.money-rich-content table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.35rem;
  font-size:.95rem;
}
.money-rich-content th,
.money-rich-content td{
  padding:.6rem .75rem;
  border-bottom:1px solid var(--qa-line,rgba(20,32,43,.10));
  text-align:left;
  vertical-align:top;
}
.money-rich-content thead th{
  font-weight:700;
  border-bottom-width:2px;
}
/* Wide content scrolls inside itself; the page never scrolls sideways. */
.money-rich-content .table-wrap,
.money-rich-content .money-related-table-wrap{ overflow-x:auto; }

/* ------------- bands moved onto the money page keep their own scale ------ */
/* The partner strip now uses the airline page's markup. Inside .money-page,
   `.money-page h2` was sizing its heading at 40px - the largest on the page,
   for a logo strip. It takes the band-heading scale instead. */
.money-page .airline-partners__head h2{
  font-size:clamp(1.25rem,2vw,1.45rem);
  font-weight:600;
  letter-spacing:-.01em;
}

/* The S15 fix strips the legacy .city-description card, including its border.
   That also removed the band edge the body column now uses, so the prose block
   lost the rule its siblings have. Restore just the top edge. */
.money-page .money-guide > * + *.city-description{
  border-top:1px solid var(--qa-line,rgba(20,32,43,.10));
  padding-top:clamp(2rem,3.4vw,3rem);
}

/* --------------- band headings vs the broad .money-page h2 rule ---------- */
/* ROOT CAUSE, worth stating once. `.money-page h2` in ebf-money.css is (0,1,1)
   and applies to EVERY h2 on the page, including headings that belong to
   self-contained bands with their own scale. Because it loads late it beats
   `.ebf-explore h2` and `.money-related h2` at equal specificity, so the footer
   link directory and the related-destinations band both rendered at 40px — the
   loudest headings on the page, for the two least important bands on it.
   These restore each band's own scale at (0,2,1). The same pattern already had
   to be applied to the Quick Answer, key-facts and jump-nav titles. */
.money-page .ebf-explore h2,
.money-page .money-related h2,
.money-page .tbf-related-title{
  font-size:clamp(1.25rem,2vw,1.45rem);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
}