/* ---------------------------------------------------------------------------
 * m2t-partner.css - the partner pages (template-partner.php, template-partner-faq.php)
 *
 * Loaded on top of m2t-home.css and m2t-currency.css, and on the order pages also on
 * top of m2t-order.css. Only two things are new here: the partner hero and the link to
 * the partner's FAQ. The card, the skeleton and the terms strip are the order page's
 * own styles, and the questions use the shared FAQ styles, so none of it is forked.
 * Radii 3-7px, brand tokens only, flat. Hyphens only, no long dashes.
 * ------------------------------------------------------------------------- */

/* ---- the partner hero: their photo, under our navy --------------------------
   The photo is an <img>, not a CSS background, so it can carry fetchpriority=high and
   a srcset: it is the largest thing on the page and the LCP element. It is decoration
   (alt=""), because the partner's name is already in the H1 and on the logo's alt.

   The navy wash has to hold white type over any part of either photo - the WTB photo
   has a bright yellow shirt and sky, the Odyssey one a bright sky - so it is dense in
   the middle where the type sits and densest at the foot, where the card overlaps.

   The logo goes on a white plate. The partners' logos are dark ink drawn for a white
   page (WTB's wordmark is charcoal, Odyssey's is navy on navy, Hawthorn's black), which
   is why the live Odyssey banner shows its logo barely legible against the photo.

   THE LOGO FITS A BOX, 84px tall and at most 300px wide (70 x 230 on phones). WTB's and
   Odyssey's are near square, so the height holds them, exactly as before. Hawthorn's is a
   wide wordmark (624x141): at 84px tall it would be 372px wide and push a 320px phone
   sideways. The box is fixed BEFORE the file arrives - the height is set and the width
   comes from the width/height attributes, then max-width clamps it - so nothing below
   moves when it loads, and object-fit:contain draws the logo inside without squashing. */
.m2t-phero{ position:relative; isolation:isolate; overflow:hidden; color:#fff;
  background:var(--navy); padding:118px 0 98px; }
.m2t .m2t-phero-bg{ position:absolute; inset:0; z-index:-2; display:block;
  width:100%; height:100%; max-width:none; object-fit:cover; }
.m2t-phero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,34,64,.72) 0%, rgba(10,34,64,.66) 48%, rgba(5,16,31,.88) 100%); }

/* 1000px so "Money2Travel & Woolworths Team Bank" fits on one line at full size; when the
   screen is narrower, balance splits it evenly instead of leaving one word alone */
.m2t-phero-in{ position:relative; max-width:1000px; margin:0 auto; padding:0 24px; text-align:center; }
.m2t-phero-logo{ display:inline-flex; align-items:center; justify-content:center;
  margin:4px 0 24px; padding:14px 22px; border-radius:7px; background:#fff; }
.m2t .m2t-phero-logo img{ display:block; height:84px; width:auto; max-width:300px; object-fit:contain; }
.m2t-phero-h1{ margin:0; font-size:clamp(30px,4.1vw,48px); line-height:1.12; font-weight:800;
  letter-spacing:-.02em; color:#fff; text-wrap:balance; }
.m2t-phero-sub{ margin:14px auto 0; max-width:60ch; font-size:19px; line-height:1.55; color:#d3dfee;
  text-wrap:balance; }
.m2t-phero-sub a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.m2t-phero-note{ margin:20px auto 0; max-width:62ch; padding:11px 15px; border-radius:5px;
  background:rgba(255,255,255,.1); font-size:15px; line-height:1.5; color:#fff; }

/* the FAQ pages have no card overlapping the hero's foot */
.m2t-phero--faq{ padding-bottom:82px; }
.m2t-phero--unset{ padding-bottom:120px; }

/* ---- the link to the partner's FAQ, under the order card ------------------
   A quiet bordered row rather than a button: the page's one action is the order form
   above it, and nothing should compete with that. */
.m2t .m2t-pnext{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  max-width:560px; margin:28px auto 60px; padding:16px 20px;
  border:1px solid var(--line); border-radius:7px; background:#fff;
  font-size:17px; color:var(--muted); transition:border-color .15s ease; }
.m2t-pnext b{ font-weight:700; color:var(--cyan-d); }
.m2t-pnext svg{ width:18px; height:18px; flex:none; color:var(--cyan-d); transition:transform .15s ease; }
.m2t .m2t-pnext:hover{ border-color:var(--cyan); }
.m2t-pnext:hover svg{ transform:translateX(3px); }

/* ---- the partner FAQ list: one flat list, so the room before the CTA band ---- */
.m2t-pfaq{ padding-bottom:88px; }

@media (max-width:980px){
  /* match the breadcrumb, which steps in to 18px here (m2t-currency.css) */
  .m2t-phero-in{ padding:0 18px; }
}
@media (max-width:640px){
  /* the card stops overlapping on phones (m2t-order.css), so the foot can be shorter */
  .m2t-phero{ padding:104px 0 56px; }
  .m2t-phero--faq{ padding-bottom:52px; }
  .m2t-phero-logo{ margin-bottom:18px; padding:12px 18px; }
  .m2t .m2t-phero-logo img{ height:70px; max-width:230px; }
  .m2t-phero-h1{ font-size:29px; }
  .m2t-phero-sub{ font-size:17px; }
  .m2t .m2t-pnext{ margin:20px 0 56px; font-size:16px; }
  .m2t-pfaq{ padding-bottom:64px; }
}
@media (prefers-reduced-motion:reduce){
  .m2t-pnext svg{ transition:none; }
}