/* ==========================================================================
   Adventure Nomad — Homepage CSS
   ========================================================================== */

/* --- About Section --- */
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}

.about-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}

.about-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-image .img-placeholder {
  min-height: 400px;
}

.about-content .lead {
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}

.about-content p + p {
  margin-top: var(--space-4);
}

.about-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}

.about-cta {
  margin-top: var(--space-5);
}

/* --- Fleet Section --- */
.fleet-section {
  max-width: var(--max-width);
  margin: 0 auto;
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}

/* --- Reviews Section --- */
.reviews-section {
  padding: var(--space-9) var(--content-padding);
}

.reviews-section .section-header--center .label,
.reviews-section .section-header--center h2 {
  color: var(--white);
}

.reviews-section .section-header--center p {
  color: rgba(255, 255, 255, 0.7);
}

/* Reviews carousel */
.reviews-carousel {
  position: relative;
}

.reviews-track-outer {
  overflow: hidden;
}

.reviews-track {
  display: flex;
  gap: var(--space-5);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.reviews-slide {
  /* Desktop: 3 per view */
  flex: 0 0 calc((100% - var(--space-5) * 2) / 3);
  min-width: 0;
}

.reviews-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.reviews-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), opacity var(--transition);
  flex-shrink: 0;
}

.reviews-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.reviews-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.reviews-dots {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.reviews-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}

.reviews-dot.is-active {
  background: var(--white);
  transform: scale(1.5);
}

/* --- How It Works section --- */
.how-section {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* --- FAQ Section (homepage — dark) --- */
.faq-section-home {
  max-width: var(--max-width);
  margin: 0 auto;
}

.faq-section-home .section-header .label {
  color: var(--teal);
}

.faq-section-home .section-header h2 {
  color: var(--white);
}

.faq-cta-row {
  text-align: center;
  margin-top: var(--space-6);
}

/* Big Book Now Button (homepage hero) */
.hero-book-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 800;
  padding: 20px 52px;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 40px rgba(0, 180, 200, 0.55);
  text-decoration: none;
  transition: all var(--transition);
  letter-spacing: 0.01em;
}

.hero-book-now:hover {
  background: var(--teal-dark);
  transform: translateY(-3px);
  box-shadow: 0 14px 48px rgba(0, 180, 200, 0.65);
}

.hero-book-now svg {
  width: 20px;
  height: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-teaser-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .fleet-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tablet: 2 reviews per view */
  .reviews-slide {
    flex: 0 0 calc((100% - var(--space-5)) / 2);
  }
}

@media (max-width: 640px) {
  /* Mobile: 1 review per view */
  .reviews-slide {
    flex: 0 0 100%;
  }
}

@media (max-width: 768px) {
  .about-section {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .fleet-grid {
    grid-template-columns: 1fr;
  }

  .blog-teaser-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hide hero Book Now on mobile — floating button covers this */
  .hero-book-now {
    display: none;
  }
}