/* ============================================================
   ROUTE + VEHICLE LANDING PAGES — route-template.php and van-pattaya.php.
   Loads after style.css → site.css → rates.css.

   The hero uses the HOME PAGE's own classes (.hero / .hero-copy /
   .hero-visual / .hero-quick-book / .header-hooks / .trust), so it
   inherits that layout from site.css unchanged and needs no CSS here.
   Only the blocks below the hero are this page's own.
   Section rhythm: 22px 0 desktop, 15px 0 mobile, 1180px / calc(100% - 26px).
   ============================================================ */

/* ---------- the three headline numbers, straight under the hero ---------- */
.rt-facts{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rt-fact{padding:13px 16px 14px;border:1px solid #e6e9f2;border-radius:14px;background:#fff;
  box-shadow:0 10px 28px rgba(20,26,66,.06);text-align:center}
.rt-fact small{display:block;color:#8a92a8;font-size:9.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase}
.rt-fact b{display:block;margin-top:5px;color:#14225c;font-size:24px;font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.rt-fact em{display:block;margin-top:4px;color:#6d7793;font-style:normal;font-size:11.5px}
.rt-fact--price{border-color:#cddcff;background:linear-gradient(180deg,#f3f8ff,#fff)}
.rt-fact--price b{color:#2a58c9;font-size:30px}

/* ---------- section separation ----------
   The section rhythm stays exactly as the rest of the site (22px 0 desktop,
   15px 0 mobile). What was missing is a visible boundary: white sections on a
   white page read as one long block. Alternate sections get a full-bleed tint
   instead, which separates them without adding the big gaps the owner rejects.
   The tint is a pseudo-element so no extra wrapper markup is needed;
   body already has overflow-x:hidden, so 100vw cannot cause a sideways scroll. */
.rt-journey,.rt-fleet,.rt-related{position:relative}
.rt-journey::before,.rt-fleet::before,.rt-related::before{content:"";position:absolute;z-index:-1;
  top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#f6f8fd;
  border-top:1px solid #e8edf7;border-bottom:1px solid #e8edf7}

/* site.css gives .faq 30px/10px, which breaks the 22/22 rhythm on this page */
.rt-faq{padding:22px 0!important}

/* ---------- price cards ---------- */
.rt-price{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0}
.rt-cars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rt-car{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:13px 12px 14px;border:1.5px solid #e6e9f2;border-radius:16px;background:#fff;
  box-shadow:0 10px 28px rgba(20,26,66,.06);transition:transform .16s ease,box-shadow .16s ease}
.rt-car:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,26,66,.12)}
.rt-car.is-best{border-color:#16225c}
.rt-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  padding:3px 10px;border-radius:999px;background:#18a957;color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.rt-car h3{margin:6px 0 0;color:#15224f;font-size:16px;font-weight:800;letter-spacing:-.01em}
.rt-car .vh-spec{margin-top:5px}
.rt-car-price{margin:9px 0 0;color:#14225c;font-size:26px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.rt-car-go{display:flex;align-items:center;justify-content:center;width:100%;height:38px;
  margin-top:11px;border-radius:11px;background:#16225c;color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.03em;
  transition:background .15s ease}
.rt-car-go:hover{background:#1c2b70}
.rt-car.is-best .rt-car-go{background:linear-gradient(100deg,#2160dd,#28a9ef)}

/* ---------- the journey ---------- */
.rt-journey{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0}
.rt-journey-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.rt-timeline{position:relative;display:grid;gap:14px;margin:0;padding:15px 18px 16px;list-style:none;
  border:1px solid #e6e9f2;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(20,26,66,.05)}
.rt-timeline li{position:relative;padding-left:26px}
.rt-timeline li::before{content:"";position:absolute;left:5px;top:16px;bottom:-16px;width:2px;background:#e4e9f4}
.rt-timeline li:last-child::before{display:none}
.rt-dot{position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(42,88,201,.18),inset 0 0 0 3px #2a58c9}
.rt-timeline b{display:block;color:#15224f;font-size:15px;font-weight:800;letter-spacing:-.01em}
.rt-timeline small{display:block;margin-top:4px;color:#6d7793;font-size:12.5px;line-height:1.5}
.rt-incl{margin:0}

/* ---------- local knowledge (route pages only) ----------
   Reuses .local / .local-head / .local-list / .local-foot from site.css —
   the home page's Local Pattaya block, unchanged. */
.rt-local{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0}
.rt-local .local:first-of-type{margin-top:14px}

/* ---------- real fleet photos ---------- */
.rt-fleet{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0}
.rt-fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.rt-fleet-grid figure{margin:0;overflow:hidden;border-radius:13px;background:#eef1f8;
  box-shadow:0 8px 22px rgba(20,26,66,.07)}
.rt-fleet-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- FAQ side button we add on this page ---------- */
.fs-wa{background:linear-gradient(145deg,#25d366,#128c4b);color:#fff;
  box-shadow:0 8px 18px rgba(18,140,75,.28)}

/* ---------- other routes ---------- */
.rt-related{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0}
.rt-related-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rt-related-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border:1px solid #e6e9f2;border-radius:13px;background:#fff;
  color:#15224f;font-size:13.5px;font-weight:700;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.rt-related-list a:hover{border-color:#c3cde6;transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(20,26,66,.09)}
.rt-related-list i{position:relative;width:15px;height:2px;flex:0 0 15px;border-radius:2px;background:#2a58c9}
.rt-related-list i::after{content:"";position:absolute;right:-1px;top:-3px;width:8px;height:8px;
  border-top:2px solid #2a58c9;border-right:2px solid #2a58c9;transform:rotate(45deg)}

/* ============================================================
   MOBILE (breakpoint 900px, same as everywhere else)
   ============================================================ */
@media(max-width:900px){
  /* one column, in DOM order: headline → artwork → facts/chips/CTA → form */

  .rt-facts{width:calc(100% - 26px);padding:15px 0;grid-template-columns:1fr 1fr;gap:8px}
  .rt-fact{padding:11px 12px 12px;border-radius:12px}
  .rt-fact--price{grid-column:1 / -1}
  .rt-fact b{font-size:20px}
  .rt-fact--price b{font-size:26px}
  .rt-fact--price{grid-column:1 / -1}
  .rt-fact{padding:9px 12px 10px;border-radius:12px}
  .rt-fact b{font-size:17px}
  .rt-fact--price b{font-size:24px}



  .rt-price{width:calc(100% - 26px);padding:15px 0}
  .rt-cars{grid-template-columns:1fr 1fr;gap:9px}
  .rt-car{padding:12px 10px 13px;border-radius:14px}
  .rt-car h3{font-size:15px}
  .rt-car-price{margin-top:7px;font-size:22px}
  .rt-car-go{height:36px;margin-top:9px;border-radius:10px}

  .rt-journey{width:calc(100% - 26px);padding:15px 0}
  .rt-journey-grid{grid-template-columns:1fr;gap:10px}
  .rt-timeline{padding:13px 15px 14px;gap:12px;border-radius:14px}
  .rt-timeline b{font-size:14.5px}

  .rt-local{width:calc(100% - 26px);padding:15px 0}
  .rt-fleet{width:calc(100% - 26px);padding:15px 0}
  .rt-faq{padding:15px 0!important}
  .rt-fleet-grid{grid-template-columns:1fr 1fr;gap:8px}

  .rt-related{width:calc(100% - 26px);padding:15px 0}
  .rt-related-list{grid-template-columns:1fr;gap:8px}
  .rt-related-list a{padding:12px 14px;border-radius:12px}
}

@media(max-width:380px){
  .rt-cars{grid-template-columns:1fr}
  .rt-car-price{font-size:24px}
}


/* ============================================================
   VAN PAGE — van-pattaya.php
   Reuses the rate board, but with a single price column, so the
   grid track list has to be re-declared (rates.css sets six).
   ============================================================ */
.page-van .rate-board{--rb-cols:minmax(0,2.4fr) 1fr minmax(110px,1fr) 100px}
.page-van .rb-cell{align-items:center}
.page-van .rb-cell b{font-size:17px}

.van-intro{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0}
.van-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
.van-shot{margin:0;display:grid;place-items:center;padding:14px;border:1px solid #e6e9f2;
  border-radius:16px;background:linear-gradient(180deg,#f4f8ff,#fff);
  box-shadow:0 10px 28px rgba(20,26,66,.06)}
.van-shot img{width:100%;max-width:420px;height:auto;display:block;
  filter:drop-shadow(0 14px 14px rgba(12,31,80,.18))}
.van-card{margin:0}
.van-fleet-grid{grid-template-columns:repeat(3,1fr)}

@media(max-width:900px){
  .page-van .rate-board{--rb-cols:1fr}
  /* the single price sits on its own row, full width, under the destination */
  .page-van .rb-row{grid-template-columns:1fr 1fr;
    grid-template-areas:"dest dest" "c1 c1" "dur go"}
  .page-van .rb-cell[data-v="van"]{grid-area:c1}
  .page-van .rb-cell{flex-direction:row;justify-content:space-between;padding:9px 12px}
  .page-van .rb-cell i{min-height:0;font-size:10.5px}
  .page-van .rb-cell b{font-size:17px}

  .van-intro{width:calc(100% - 26px);padding:15px 0}
  .van-grid{grid-template-columns:1fr;gap:10px}
  .van-shot{padding:11px;border-radius:14px}
  .van-fleet-grid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   TYPE SCALE — floor 9px, same scale as the rest of the site.
   MUST STAY LAST IN THIS FILE so it wins the cascade.
   ============================================================ */
@media(min-width:901px){
  .rt-fact small{font-size:9.5px!important}
  .rt-fact b{font-size:19px!important}
  .rt-fact--price b{font-size:26px!important}
  .rt-fact em{font-size:10.5px!important}
  .rt-car h3{font-size:16px!important}
  .rt-car-price{font-size:26px!important}
  .rt-car-go{font-size:12.5px!important}
  .rt-badge{font-size:9.5px!important}
  .rt-timeline b{font-size:15px!important}
  .rt-timeline small{font-size:12.5px!important}
  .rt-related-list a{font-size:13.5px!important}
}
@media(max-width:900px){
  .rt-fact small{font-size:9.5px!important}
  .rt-fact b{font-size:17px!important}
  .rt-fact--price b{font-size:24px!important}
  .rt-fact em{font-size:10px!important}
  .rt-car h3{font-size:15px!important}
  .rt-car-price{font-size:22px!important}
  .rt-car-go{font-size:12px!important}
  .rt-badge{font-size:9px!important}
  .rt-timeline b{font-size:14.5px!important}
  .rt-timeline small{font-size:12px!important}
  .rt-related-list a{font-size:13px!important}
}