/* =========================================================================
   Landing-page section components: hero, section heading, arrival steps,
   FAQ, trust bar. All token-driven, RTL-safe, mobile-first.
   ========================================================================= */

.tt-hero { position: relative; color: var(--tt-color-text-invert); border-radius: var(--tt-radius-xl); overflow: hidden; isolation:isolate; }
/* Layered premium background: deep gradient + radial glow + supports a real photo via --tt-hero-img */
.tt-hero__bg { position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 120% at 85% 10%, rgba(34,197,94,.18), transparent 45%),
    radial-gradient(140% 100% at 0% 100%, rgba(15,98,254,.55), transparent 55%),
    linear-gradient(135deg,#091A40 0%, #0B2E7A 45%, #0F62FE 100%);
}
.tt-hero__bg::before { content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 22px 22px; opacity:.5; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.tt-hero__bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(9,26,64,.10), rgba(9,26,64,.45)); }
/* If a hero image is set, layer it under the gradient */
.tt-hero--photo .tt-hero__bg { background-image:
    linear-gradient(135deg, rgba(9,26,64,.78), rgba(15,98,254,.55)), var(--tt-hero-img);
  background-size: cover; background-position: center; }
.tt-hero__inner { position: relative; padding: var(--tt-space-80) var(--tt-space-32); max-width: 720px; }
@media (min-width:768px){ .tt-hero__inner { padding: var(--tt-space-128) var(--tt-space-48); min-height: 480px; display:flex; flex-direction:column; justify-content:center; } }
.tt-hero h1 { color: var(--tt-color-text-invert); }
.tt-hero .tt-lead { color: rgba(255,255,255,.9); max-width:46ch; }

/* --- Hero trust claims row (Homepage Redesign Spec §Section 1) -------- */
.tt-hero__claims { display:flex; flex-wrap:wrap; gap: var(--tt-space-16); list-style:none; margin: var(--tt-space-24) 0 0; padding:0; }
.tt-hero__claims li { display:inline-flex; align-items:center; gap: 6px; font-size: var(--tt-fs-caption); color: rgba(255,255,255,.85); }
.tt-hero__claims svg { width:15px; height:15px; color:#5B9BFF; flex-shrink:0; }

/* --- Section heading -------------------------------------------------- */
.tt-section-head { max-width: 640px; margin-bottom: var(--tt-space-32); }
.tt-section-head .tt-overline { display:block; margin-bottom: var(--tt-space-8); }

/* --- Arrival steps (Meet & Greet timeline) ---------------------------- */
.tt-steps { display: grid; gap: var(--tt-space-16); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width:768px){ .tt-steps { grid-template-columns: repeat(5,1fr); } }
.tt-step { display:flex; gap: var(--tt-space-12); align-items:flex-start; padding: var(--tt-space-16); background: var(--tt-color-bg); border-radius: var(--tt-radius-lg); box-shadow: var(--tt-shadow-1); }
@media (min-width:768px){ .tt-step { flex-direction: column; } }
.tt-step__num { flex: 0 0 auto; width: 36px; height: 36px; display:grid; place-items:center; border-radius: var(--tt-radius-pill); background: var(--tt-color-primary); color:#fff; font-family: var(--tt-font-heading); font-weight: var(--tt-fw-bold); }
.tt-step__num::before { counter-increment: step; content: counter(step); }
.tt-step__text { font-size: var(--tt-fs-small); }
.tt-step__text b { display:block; font-family: var(--tt-font-heading); margin-bottom: 2px; }

/* --- Included / feature grid ------------------------------------------ */
.tt-features { display:grid; gap: var(--tt-space-16); grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr)); }
.tt-feature { display:flex; gap: var(--tt-space-12); padding: var(--tt-space-24); background: var(--tt-color-bg); border:1px solid var(--tt-color-border); border-radius: var(--tt-radius-lg); }
.tt-feature svg { width:24px; height:24px; color: var(--tt-color-secondary); flex:0 0 auto; }
.tt-feature b { font-family: var(--tt-font-heading); display:block; margin-bottom: 2px; }
.tt-feature span { color: var(--tt-color-text-soft); font-size: var(--tt-fs-small); }

/* --- FAQ accordion ---------------------------------------------------- */
.tt-faq { max-width: 760px; }
.tt-faq__item { border-bottom: 1px solid var(--tt-color-border); }
.tt-faq__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap: var(--tt-space-16); padding: var(--tt-space-24) 0; background:none; border:none; text-align:start; font-family: var(--tt-font-heading); font-weight: var(--tt-fw-semibold); font-size: var(--tt-fs-h6); color: var(--tt-color-text); }
.tt-faq__icon { flex:0 0 auto; width:24px; height:24px; transition: transform var(--tt-duration) var(--tt-ease); }
.tt-faq__q[aria-expanded="true"] .tt-faq__icon { transform: rotate(45deg); }
.tt-faq__a { overflow:hidden; max-height:0; transition: max-height var(--tt-duration) var(--tt-ease); }
.tt-faq__a[hidden] { display:block; } /* JS toggles max-height; hidden kept for no-JS semantics */
.tt-faq__a-inner { padding-bottom: var(--tt-space-24); color: var(--tt-color-text-soft); }

/* --- Trust bar -------------------------------------------------------- */
.tt-trustbar { display:flex; flex-wrap:wrap; gap: var(--tt-space-24); justify-content:center; padding: var(--tt-space-24); background: var(--tt-color-surface); border-radius: var(--tt-radius-lg); }
.tt-trustbar li { display:inline-flex; align-items:center; gap: var(--tt-space-8); font-size: var(--tt-fs-small); font-weight: var(--tt-fw-medium); }
.tt-trustbar svg { width:20px; height:20px; color: var(--tt-color-secondary); }

/* --- Breadcrumb ------------------------------------------------------- */
.tt-breadcrumb { font-size: var(--tt-fs-caption); color: var(--tt-color-text-soft); padding-block: var(--tt-space-16); }
.tt-breadcrumb ol { display:flex; flex-wrap:wrap; gap: var(--tt-space-8); align-items:center; list-style:none; padding:0; margin:0; }
.tt-breadcrumb li::after { content:"/"; margin-inline-start: var(--tt-space-8); color: var(--tt-color-border); }
.tt-breadcrumb li:last-child::after { content:""; }
.tt-breadcrumb a:hover { color: var(--tt-color-primary); }

/* --- Journey summary (Route hero) ------------------------------------- */
.tt-journey { display:flex; flex-wrap:wrap; align-items:center; gap: var(--tt-space-16); }
.tt-journey__point { font-family: var(--tt-font-heading); font-weight: var(--tt-fw-bold); font-size: var(--tt-fs-h3); color: var(--tt-color-text-invert); }
.tt-journey__arrow { width:32px; height:32px; color: rgba(255,255,255,.7); flex:0 0 auto; }
[dir="rtl"] .tt-journey__arrow { transform: scaleX(-1); }
.tt-journey__stats { display:flex; flex-wrap:wrap; gap: var(--tt-space-32); margin-top: var(--tt-space-24); }
.tt-journey__stat b { display:block; font-family: var(--tt-font-heading); font-size: var(--tt-fs-h5); color: var(--tt-color-text-invert); }
.tt-journey__stat span { font-size: var(--tt-fs-caption); color: rgba(255,255,255,.75); }

/* --- Info list (travel details) -------------------------------------- */
.tt-info { display:grid; gap: var(--tt-space-16); grid-template-columns: repeat(auto-fill,minmax(min(100%,240px),1fr)); }
.tt-info__item { padding: var(--tt-space-24); background: var(--tt-color-bg); border:1px solid var(--tt-color-border); border-radius: var(--tt-radius-lg); }
.tt-info__item dt { font-size: var(--tt-fs-caption); color: var(--tt-color-text-soft); margin-bottom: var(--tt-space-4); }
.tt-info__item dd { margin:0; font-family: var(--tt-font-heading); font-weight: var(--tt-fw-semibold); font-size: var(--tt-fs-h6); }

/* --- Statistics band -------------------------------------------------- */
.tt-stats { display:grid; gap: var(--tt-space-32); grid-template-columns: repeat(2,1fr); text-align:center; }
@media (min-width:768px){ .tt-stats { grid-template-columns: repeat(4,1fr); } }
.tt-stat b { display:block; font-family: var(--tt-font-heading); font-weight: var(--tt-fw-bold); font-size: var(--tt-fs-h2); color: var(--tt-color-primary); line-height:1; }
.tt-stat span { display:block; margin-top: var(--tt-space-8); font-size: var(--tt-fs-small); color: var(--tt-color-text-soft); }

/* --- Testimonial card ------------------------------------------------- */
.tt-testimonial { display:flex; flex-direction:column; gap: var(--tt-space-16); padding: var(--tt-space-32); background: var(--tt-color-bg); border:1px solid var(--tt-color-border); border-radius: var(--tt-radius-lg); }
.tt-testimonial__stars { color: #F59E0B; letter-spacing:2px; font-size: var(--tt-fs-small); }
.tt-testimonial__quote { font-size: var(--tt-fs-body); }
.tt-testimonial__who { display:flex; align-items:center; gap: var(--tt-space-12); margin-top:auto; }
.tt-testimonial__avatar { width:40px; height:40px; border-radius: var(--tt-radius-pill); background: var(--tt-color-surface); display:grid; place-items:center; font-family: var(--tt-font-heading); font-weight: var(--tt-fw-bold); color: var(--tt-color-primary); flex:0 0 auto; }
.tt-testimonial__name b { display:block; font-family: var(--tt-font-heading); }
.tt-testimonial__name span { font-size: var(--tt-fs-caption); color: var(--tt-color-text-soft); }

/* --- CTA band --------------------------------------------------------- */
.tt-cta { text-align:center; padding: var(--tt-space-64) var(--tt-space-32); background: linear-gradient(135deg,#0B1F4D,#0F62FE); border-radius: var(--tt-radius-xl); color: var(--tt-color-text-invert); }
.tt-cta h2 { color: var(--tt-color-text-invert); }
.tt-cta p { color: rgba(255,255,255,.85); margin-inline:auto; }
.tt-cta .tt-cluster { justify-content:center; margin-top: var(--tt-space-32); }
.tt-cta .tt-btn--secondary { background: transparent; color:#fff; border-color: rgba(255,255,255,.5); }
.tt-cta .tt-btn--secondary:hover { background: rgba(255,255,255,.12); }

/* --- Vehicle hero (image + key specs split) --------------------------- */
.tt-vehicle-hero { display:grid; gap: var(--tt-space-32); grid-template-columns: 1fr; align-items:center; }
@media (min-width:880px){ .tt-vehicle-hero { grid-template-columns: 1.2fr 1fr; } }
.tt-vehicle-hero__media { aspect-ratio: 16/10; border-radius: var(--tt-radius-xl); overflow:hidden; background: linear-gradient(135deg,#1f2937,#374151); box-shadow: var(--tt-shadow-2); }
.tt-vehicle-hero__media img { width:100%; height:100%; object-fit:cover; }
.tt-vehicle-hero__spec { display:flex; gap: var(--tt-space-24); margin:var(--tt-space-24) 0; }
.tt-vehicle-hero__spec div b { display:block; font-family: var(--tt-font-heading); font-size: var(--tt-fs-h4); }
.tt-vehicle-hero__spec div span { font-size: var(--tt-fs-caption); color: var(--tt-color-text-soft); }
.tt-vehicle-hero__price { display:flex; align-items:baseline; gap: var(--tt-space-8); margin-bottom: var(--tt-space-24); }
.tt-vehicle-hero__price b { font-family: var(--tt-font-heading); font-size: var(--tt-fs-h2); color: var(--tt-color-primary); }
.tt-vehicle-hero__price span { color: var(--tt-color-text-soft); }

/* --- Archive intro band + pagination ---------------------------------- */
.tt-archive-intro { text-align:center; padding-block: var(--tt-space-48); max-width: 720px; margin-inline:auto; }
.tt-archive-intro h1 { margin-bottom: var(--tt-space-16); }
.tt-pagination { display:flex; flex-wrap:wrap; gap: var(--tt-space-8); justify-content:center; margin-top: var(--tt-space-48); }
.tt-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding-inline: var(--tt-space-12); border:1px solid var(--tt-color-border); border-radius: var(--tt-radius-md); font-weight: var(--tt-fw-medium); color: var(--tt-color-text); }
.tt-pagination .page-numbers.current { background: var(--tt-color-primary); color:#fff; border-color: var(--tt-color-primary); }
.tt-pagination a.page-numbers:hover { border-color: var(--tt-color-primary); color: var(--tt-color-primary); }
.tt-archive-seo { max-width: 760px; margin-inline:auto; color: var(--tt-color-text-soft); }

/* --- Price-by-vehicle table (route pages) ----------------------------- */
.tt-pricetable { width:100%; border-collapse:collapse; background:var(--tt-color-bg); border-radius:var(--tt-radius-lg); overflow:hidden; box-shadow:var(--tt-shadow-1); }
.tt-pricetable caption { text-align:start; color:var(--tt-color-text-soft); font-size:var(--tt-fs-caption); padding-bottom:var(--tt-space-12); }
.tt-pricetable th, .tt-pricetable td { padding:var(--tt-space-16); text-align:start; border-bottom:1px solid var(--tt-color-border); }
.tt-pricetable thead th { font-family:var(--tt-font-heading); font-size:var(--tt-fs-caption); text-transform:uppercase; letter-spacing:.05em; color:var(--tt-color-text-soft); background:var(--tt-color-surface); }
.tt-pricetable tbody tr:last-child td { border-bottom:none; }
.tt-pricetable td:last-child { text-align:end; font-family:var(--tt-font-heading); font-weight:var(--tt-fw-bold); color:var(--tt-color-primary); white-space:nowrap; }
.tt-pricetable .tt-pt-cap { color:var(--tt-color-text-soft); font-weight:var(--tt-fw-regular); font-size:var(--tt-fs-caption); }