/* ============================================================
   home.css — Homepage-specific styles
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   ACCENT-LINE heading  (gold bars + uppercase text)
   ════════════════════════════════════════════════════════════ */
.accent-line {
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            clamp(.5rem, 3vw, 1.125rem);
  color:          var(--color-primary);
  font-weight:    900;
  font-size:      clamp(1rem, 2.5vw, 1.25rem);
  letter-spacing: .02em;
  text-align:     center;
  margin-bottom:  1.25rem;
  text-transform: uppercase;
}
.accent-line::before,
.accent-line::after {
  content:    '';
  height:     2px;
  width:      clamp(2rem, 18vw, 6.875rem);
  background: var(--color-accent);
  display:    block;
  flex-shrink:0;
}
/* reviews now on white — accent-line inherits dark color from default */

/* ════════════════════════════════════════════════════════════
   HERO — full-bleed dark navy with Amritsar right background
   ════════════════════════════════════════════════════════════ */
.hero {
  background: linear-gradient(100deg, var(--color-navy-deep) 0%, #0A2748 48%, #10284b 100%);
  min-height: 0;
  position:   relative;
  overflow:   hidden;
}

/* Dark-left-to-transparent-right overlay so left text is readable */
.hero::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(90deg, rgba(6,27,53,.98) 0%, rgba(6,27,53,.86) 43%, rgba(6,27,53,.10) 100%);
  z-index:    1;
  pointer-events: none;
}

/* Scenic background photo — right 57% of hero.
   Single composite layer (temple + car); object-fit:cover prevents any
   distortion, object-position keeps the car framed as the box changes. */
.hero-bg {
  position:        absolute;
  right:           0;
  top:             0;
  height:          100%;
  width:           57%;
  object-fit:      cover;
  object-position: center right;
  opacity:         .95;
  display:         block;
}

.hero-inner {
  position:              relative;
  z-index:               2;
  min-height:            380px;
  display:               grid;
  grid-template-columns: 1fr 1.08fr;
  align-items:           center;
  gap:                   16px;
}
.hero-inner > * { min-width: 0; }   /* prevent grid children forcing overflow */

/* Eyebrow: gold lines + text */
.eyebrow {
  display:     inline-flex;
  align-items: center;
  gap:         clamp(8px, 2vw, 14px);
  color:       var(--color-accent);
  font-weight: 900;
  font-size:   clamp(.75rem, 2.7vw, .875rem);
  letter-spacing: .04em;
  margin-bottom:  1.25rem;
  max-width:   100%;
}
.eyebrow::before,
.eyebrow::after {
  content:    '';
  height:     2px;
  width:      clamp(24px, 10vw, 46px);
  background: var(--color-accent);
  display:    block;
  flex-shrink:0;
}

.hero h1 {
  margin:         0 0 18px;
  color:          var(--color-surface);
  font-size:      clamp(1.75rem, 4vw, 2.6875rem);
  line-height:    1.08;
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: .01em;
  overflow-wrap:  anywhere;
}
.hero h1 span { color: var(--color-accent); }

.hero .sub {
  color:         var(--color-surface);
  font-size:     clamp(1rem, 2vw, 1.3125rem);
  font-weight:   800;
  margin-bottom: 1.5rem;
}

/* Trust-feature pills */
.features {
  display:       flex;
  gap:           18px;
  margin:        0 0 1.5rem;
  flex-wrap:     wrap;
}
.feature {
  display:      flex;
  align-items:  center;
  gap:          8px;
  color:        var(--color-surface);
  font-weight:  800;
  font-size:    .8125rem;
  border-right: 1px solid rgba(255,255,255,.18);
  padding-right:16px;
  line-height:  1.35;
}
.feature:last-child { border-right: 0; }
.feature i {
  width:        44px;
  height:       44px;
  min-width:    44px;
  border:       2px solid rgba(245,158,11,.65);
  color:        var(--color-accent);
  border-radius:50%;
  display:      grid;
  place-items:  center;
  font-style:   normal;
  font-size:    1.25rem;
  flex-shrink:  0;
}

/* CTA buttons */
.cta-row {
  display:   flex;
  gap:       14px;
  flex-wrap: wrap;
}
/* Hero CTA buttons — scoped class so the global .btn (style.css) is untouched */
.hero-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             12px;
  border-radius:   8px;
  padding:         16px 22px;
  color:           var(--color-surface);
  font-weight:     900;
  box-shadow:      0 8px 20px rgba(0,0,0,.15);
  text-decoration: none;
  transition:      transform var(--transition), box-shadow var(--transition);
}
.hero-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.hero-btn small {
  display:     block;
  font-size:   .6875rem;
  line-height: 1;
  font-weight: 600;
}
.hero-btn strong {
  display:     block;
  font-size:   1.125rem;
  line-height: 1.2;
}
.hero-btn--orange         { background: var(--color-accent); color: var(--color-navy-deep); }
.hero-btn--orange small,
.hero-btn--orange strong  { color: var(--color-navy-deep); }
.hero-btn--green          { background: var(--color-wa-tab); }

/* Orange clip-path swoosh at bottom-right of hero */
.hero-swoosh {
  position:  absolute;
  right:     -80px;
  bottom:    0;
  width:     56%;
  height:    72px;
  background:var(--color-accent);
  clip-path: polygon(22% 70%, 100% 0, 100% 100%, 0 100%);
  z-index:   1;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   OUR SERVICES — 6 icon cards on white
   ════════════════════════════════════════════════════════════ */
.services {
  background:  var(--color-surface);
  padding:     2rem 0;
}
.card-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   14px;
  margin-top:            1.25rem;
}
.service-card {
  background:     var(--color-surface);
  border:         1px solid #edf0f5;
  border-radius:  12px;
  box-shadow:     0 8px 18px rgba(15,23,42,.09);
  padding:        22px 12px;
  text-align:     center;
  min-height:     156px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            9px;
  transition:     transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15,23,42,.12); }
.service-card .icon {
  font-size:    2.625rem;
  color:        var(--color-navy-deep);
  line-height:  1;
  margin-bottom:3px;
}
.service-card h3 {
  font-size:      1rem;
  line-height:    1.1;
  margin:         0;
  color:          var(--color-navy-deep);
  text-transform: uppercase;
  font-weight:    900;
}
.service-card p {
  font-size:  .75rem;
  line-height:1.35;
  color:      var(--color-text);
  margin:     0 auto;
  max-width:  135px;
  flex-grow:  1;
}
.mini-line { width: 28px; height: 2px; background: var(--color-accent); margin: 0 auto; }

/* ════════════════════════════════════════════════════════════
   WHY CHOOSE — dark navy band
   ════════════════════════════════════════════════════════════ */
.why {
  background: var(--color-navy-deep);
  padding:    1.25rem 0;
  color:      var(--color-surface);
}
.why h2 {
  color:          var(--color-surface);
  margin:         0 0 1.125rem;
  text-align:     center;
  font-size:      clamp(1rem, 2.5vw, 1.375rem);
  text-transform: uppercase;
  font-weight:    900;
}
.why-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   16px;
}
.why-item {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  padding-right:10px;
}
.why-icon {
  font-size:  2.125rem;
  color:      var(--color-accent);
  flex-shrink:0;
  line-height:1;
  min-width:  38px;
}
.why-item h3 {
  font-size:      .8125rem;
  margin:         0 0 6px;
  text-transform: uppercase;
  color:          var(--color-surface);
  font-weight:    800;
}
.why-item p {
  font-size:  .75rem;
  line-height:1.3;
  margin:     0;
  color:      #e2e8f0;
}

/* ════════════════════════════════════════════════════════════
   POPULAR DESTINATIONS — photo grid
   ════════════════════════════════════════════════════════════ */
.destinations {
  background:     var(--color-surface);
  padding-bottom: 1.125rem;
}
.dest-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   8px;
  margin-top:            1.125rem;
}
.dest-card {
  height:        88px;
  position:      relative;
  border-radius: 5px;
  overflow:      hidden;
  box-shadow:    0 6px 12px rgba(15,23,42,.12);
  display:       block;
  text-decoration:none;
}
.dest-card img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: top;
  transition:      transform var(--transition-slow) ease;
  display:         block;
}
.dest-card:hover img { transform: scale(1.07); }
.dest-card::after {
  content:    '';
  position:   absolute;
  inset:      auto 0 0;
  height:     45%;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  z-index:    1;
}
.dest-card__content {
  position:    absolute;
  left:        0;
  right:       0;
  bottom:      8px;
  text-align:  center;
  color:       var(--color-surface);
  z-index:     2;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  line-height: 1.2;
  padding:     0 4px;
}
.dest-card__title {
  display:     block;
  font-weight: 900;
  font-size:   .8125rem;
}
.dest-card__meta {
  display:     block;
  margin-top:  2px;
  font-size:   .625rem;
  font-weight: 700;
  opacity:     .92;
}

/* ════════════════════════════════════════════════════════════
   OUR FLEET — 5 vehicle cards
   ════════════════════════════════════════════════════════════ */
.fleet {
  background:    var(--color-surface);
  padding-top:   .625rem;
  padding-bottom:2rem;
}
.fleet-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   14px;
  margin-top:            1.125rem;
}
.fleet-card {
  border:        1px solid #edf0f5;
  border-radius: 12px;
  box-shadow:    0 8px 18px rgba(15,23,42,.08);
  padding:       10px;
  text-align:    center;
  transition:    transform var(--transition), box-shadow var(--transition);
}
.fleet-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,23,42,.12); }
.fleet-card img {
  height:     70px;
  width:      100%;
  object-fit: contain;
  margin:     0 auto;
  display:    block;
  transition: transform var(--transition);
}
.fleet-card:hover img { transform: scale(1.05); }
.specs {
  display:         flex;
  justify-content: center;
  gap:             12px;
  font-size:       .625rem;
  color:           var(--color-text);
  flex-wrap:       wrap;
}

/* ════════════════════════════════════════════════════════════
   CUSTOMER REVIEWS — white background
   ════════════════════════════════════════════════════════════ */
.reviews {
  background: var(--color-surface);
  color:      var(--color-text);
  padding:    2rem 0;
}
.review-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   18px;
  margin-top:            1.125rem;
}
.review-card {
  background:    var(--color-surface);
  border:        1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow:    0 4px 16px rgba(15,23,42,.08);
  color:         var(--color-text);
  padding:       16px;
  display:       grid;
  grid-template-columns: 64px 1fr;
  gap:           14px;
  align-items:   start;
  transition:    transform var(--transition), box-shadow var(--transition);
}
.review-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15,23,42,.12); }
.review-card img {
  width:        58px;
  height:       58px;
  border-radius:50%;
  object-fit:   cover;
  display:      block;
}
.stars {
  color:          var(--color-accent);
  font-size:      1.0625rem;
  letter-spacing: 2px;
}
.review-card p {
  font-size:  .8125rem;
  line-height:1.35;
  margin:     5px 0;
}
.review-card b { font-size: .75rem; }

/* ════════════════════════════════════════════════════════════
   FAQ + CTA — light background band
   ════════════════════════════════════════════════════════════ */
.faq-cta { background: #F8FAFC; padding: 1.125rem 0 1.625rem; }
.faq-cta .container {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   18px;
}
.faq-box,
.cta-box { border-radius: 12px; overflow: hidden; }

/* FAQ box */
.faq-box { background: var(--color-surface); padding: 18px; }
.faq-box h2 {
  font-size:      1.125rem;
  text-align:     center;
  color:          var(--color-navy-deep);
  margin:         0 0 14px;
  font-weight:    900;
  text-transform: uppercase;
}
details.faq-item {
  background:    #f8fafc;
  border:        1px solid #e5e7eb;
  border-radius: 6px;
  margin:        8px 0;
  padding:       9px 12px;
  font-size:     .8125rem;
}
details.faq-item summary {
  font-weight: 800;
  cursor:      pointer;
  list-style:  none;
  min-height:  44px;
  display:     flex;
  align-items: center;
  color:       var(--color-text);
  transition:  color var(--transition);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::marker               { display: none; }
details.faq-item[open] summary { color: var(--color-accent-dark); }
details.faq-item p {
  padding:    8px 0 4px;
  color:      var(--color-text-muted);
  line-height:1.75;
}

/* CTA box — orange gradient with car photo */
.cta-box {
  background:            linear-gradient(95deg, #f9b233, var(--color-accent));
  display:               grid;
  grid-template-columns: 1fr;
  align-items:           center;
  padding:               22px 24px;
}
.cta-box h2 {
  font-size:   clamp(1.375rem, 3vw, 1.6875rem);
  margin:      0 0 8px;
  color:       var(--color-navy-deep);
  font-weight: 900;
}
.cta-box p {
  font-size:   1rem;
  font-weight: 800;
  margin:      0 0 12px;
  color:       var(--color-navy-deep);
}
.cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.small-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  border-radius:   7px;
  padding:         11px 18px;
  color:           var(--color-surface);
  font-weight:     900;
  font-size:       .875rem;
  text-decoration: none;
  min-height:      44px;
  transition:      opacity var(--transition), transform var(--transition);
}
.small-btn:hover { opacity: .9; transform: translateY(-1px); }
.small-btn.navy  { background: var(--color-navy-deep); }
.small-btn.green { background: #16A34A; }
.cta-car {
  align-self: end;
  display:    none;
  max-height: 147px;
  width:      auto;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

/* ── Tablet portrait / large phone ──────────────────────── */
@media (min-width: 480px) {
  .card-grid  { grid-template-columns: repeat(3, 1fr); }
  .why-grid   { grid-template-columns: repeat(3, 1fr); }
  .dest-grid  { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tablet ──────────────────────────────────────────────── */
@media (min-width: 768px) {
  .card-grid   { grid-template-columns: repeat(3, 1fr); }
  .fleet-grid  { grid-template-columns: repeat(3, 1fr); }
  .review-grid { grid-template-columns: repeat(3, 1fr); }
  .faq-cta .container {
    grid-template-columns: 1fr 1.25fr;
    align-items: start;
  }
  .cta-box {
    grid-template-columns: 1fr 260px;
    min-height:            147px;
  }
  .cta-car { display: block; }
}

/* ── Desktop ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .card-grid  { grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .why-grid   { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .why-item   { border-right: 1px solid rgba(245,158,11,.35); padding-right: 10px; }
  .why-item:last-child { border-right: 0; }
  .dest-grid  { grid-template-columns: repeat(5, 1fr); }
  .fleet-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── Mobile/tablet: single-column hero ───────────────────────
   One composite image becomes a dim full-width backdrop; the dark
   gradient overlay + navy base keep the text readable. */
@media (max-width: 900px) {
  .hero-inner  { grid-template-columns: 1fr; min-height: auto; padding-top: 34px; padding-bottom: 34px; }
  .hero-bg     { width: 100%; opacity: .38; object-position: center bottom; }
  .hero h1     { font-size: clamp(1.5rem, 5vw, 2.125rem); }
  .hero-swoosh { display: none; }
}

/* ── Small phone ─────────────────────────────────────────── */
@media (max-width: 520px) {
  .hero-inner  { padding-top: 28px; padding-bottom: 28px; }
  .features    { gap: 14px 10px; }
  .feature     { flex: 1 1 calc(50% - 10px); min-width: 0; padding-right: 8px; }
  .feature i   { width: 40px; height: 40px; min-width: 40px; }
  .cta-row     { flex-direction: column; }
  .hero-btn    { width: 100%; justify-content: center; }
  .card-grid   { grid-template-columns: repeat(2, 1fr); }
  .why-grid    { grid-template-columns: 1fr; }
  .dest-grid   { grid-template-columns: 1fr; }
  .fleet-grid  { grid-template-columns: 1fr 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .cta-buttons { flex-direction: column; }
  .small-btn   { width: 100%; justify-content: center; }
}

/* ── Very small phone (≤360) ─────────────────────────────── */
@media (max-width: 360px) {
  .accent-line::before,
  .accent-line::after { width: clamp(1.5rem, 12vw, 2.5rem); }
  .eyebrow::after { display: none; }
  .feature        { font-size: .75rem; }
  .hero-btn       { padding-inline: 16px; }
}

/* Public Fleet page — vehicle name, use-case, CTA on fleet cards */
.fleet-card__name {
  margin: .6rem 0 .2rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-primary, #1E293B);
}
.fleet-card__use {
  margin: .5rem 0 .8rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--color-text-muted, #64748B);
}
.fleet-card__cta {
  display: inline-block;
  width: 100%;
}

/* Make service & fleet cards behave as block links */
a.service-card, a.fleet-card { text-decoration:none; color:inherit; display:block; cursor:pointer; }

/* Hero "Book Online" button — white, stands out on the dark hero */
.hero-btn--book{ background:#fff; color:#0B2D5B; }
.hero-btn--book:hover{ background:#F1F5F9; }

/* ── Homepage gallery (managed from admin) ── */
.gallery { padding: 3.5rem 0; background: var(--color-background, #F8FAFC); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.gallery-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 4px 14px rgba(2, 6, 23, .08);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.gallery-item img:hover { transform: scale(1.06); }

/* Gallery intro + image captions */
.gallery-intro { text-align: center; max-width: 640px; margin: .5rem auto 0; color: var(--color-text-muted, #64748B); }
.gallery-item { position: relative; }
.gallery-item__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .55rem .65rem; font-size: .78rem; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(2,6,23,.80), rgba(2,6,23,0));
  line-height: 1.2;
}