/* =============================================================================
   EXTRAORDINARY SAFARIS — SECTIONS
   Shared section layouts used across homepage and country templates
============================================================================= */

/* -------------------------------------------------------------------------
   SECTION HEADER — eyebrow + headline + optional intro
-------------------------------------------------------------------------- */

.section-header {
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
}

.section-header--center .gold-rule {
  margin-inline: auto;
}

.section-header__eyebrow {
  margin-bottom: var(--space-4);
  display: block;
}

.section-header__heading {
  margin-bottom: var(--space-5);
}

.section-header__intro {
  font-size: clamp(var(--text-base), 1.2vw, var(--text-md));
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
}

.section-header--center .section-header__intro {
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   SECTION — VIEW ALL LINK ROW
-------------------------------------------------------------------------- */

.section-footer {
  margin-top: var(--space-10);
  display: flex;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   PLACES GRID — destination country cards
-------------------------------------------------------------------------- */

.places-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .places-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .places-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

.place-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.place-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.place-card:hover .place-card__image {
  transform: scale(1.06);
}

.place-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,12,10,0.85) 0%, rgba(14,12,10,0.1) 60%);
  transition: background var(--duration-base) var(--ease-out);
}

.place-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-5);
}

.place-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.place-card__regions {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
}

/* -------------------------------------------------------------------------
   WAYS TO TRAVEL GRID
-------------------------------------------------------------------------- */

.travel-types-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto auto;
  gap: var(--space-4);
}

/* Row 1 — 2 cards, each spanning 3 of 6 columns */
.travel-type-card:nth-child(1),
.travel-type-card:nth-child(2) {
  grid-column: span 3;
}

/* Row 2 — 3 cards, each spanning 2 of 6 columns */
.travel-type-card:nth-child(3),
.travel-type-card:nth-child(4),
.travel-type-card:nth-child(5) {
  grid-column: span 2;
}

/* Row 3 — 2 cards, each spanning 3 of 6 columns */
.travel-type-card:nth-child(6),
.travel-type-card:nth-child(7),
.travel-type-card:nth-child(8) {
  grid-column: span 3;
}

/* Row 1 cards taller, row 2 shorter, row 3 medium */
.travel-type-card:nth-child(1),
.travel-type-card:nth-child(2) {
  aspect-ratio: 16/10;
}

.travel-type-card:nth-child(3),
.travel-type-card:nth-child(4),
.travel-type-card:nth-child(5) {
  aspect-ratio: 4/3;
}

.travel-type-card:nth-child(6),
.travel-type-card:nth-child(7),
.travel-type-card:nth-child(8) {
  aspect-ratio: 16/10;
}

@media (max-width: 1100px) {
  .travel-types-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .travel-type-card:nth-child(n) {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }
}

@media (max-width: 540px) {
  .travel-types-grid {
    grid-template-columns: 1fr;
  }
  .travel-type-card:nth-child(n) {
    grid-column: span 1;
    aspect-ratio: 3/2;
  }
}

.travel-type-card {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-1);
  transition: border-color var(--duration-base) var(--ease-out),
              transform    var(--duration-base) var(--ease-out);
}

.travel-type-card:hover {
  border-color: var(--color-gold-muted);
  transform: translateY(-3px);
}

.travel-type-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.travel-type-card:hover .travel-type-card__image {
  transform: scale(1.05);
}

.travel-type-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,12,10,0.9) 0%, rgba(14,12,10,0.2) 55%);
}

.travel-type-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-5);
}

.travel-type-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.travel-type-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   HOW WE WORK — 3 beat section
-------------------------------------------------------------------------- */

.how-we-work__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  position: relative;
}

.how-we-work__steps::before {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(33.333% - 20px);
  right: calc(33.333% - 20px);
  height: 1px;
  background: linear-gradient(to right, var(--color-gold-muted), transparent 50%, var(--color-gold-muted));
  pointer-events: none;
}

@media (max-width: 768px) {
  .how-we-work__steps {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .how-we-work__steps::before { display: none; }
}

.how-we-work__step-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-gold);
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-5);
}

.how-we-work__step-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.how-we-work__step-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 32ch;
}

/* -------------------------------------------------------------------------
   TESTIMONIAL
-------------------------------------------------------------------------- */

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

@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
}

.testimonial-card {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.testimonial-card__quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  font-style: italic;
}

.testimonial-card__author {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.testimonial-card__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
}

.testimonial-card__origin {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   LEAD GENERATION / DISPATCH SECTION
-------------------------------------------------------------------------- */

.dispatch-section {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

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

.dispatch-section__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--weight-light);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.dispatch-section__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 42ch;
}

.dispatch-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.dispatch-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.dispatch-form__submit {
  align-self: flex-start;
}

.dispatch-form__note {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--leading-relaxed);
}

/* -------------------------------------------------------------------------
   FINAL CTA BAND
-------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-24) var(--space-16);
  text-align: center;
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
}

.cta-band__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}

.cta-band__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.cta-band__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-light);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
  line-height: var(--leading-snug);
}

.cta-band__sub {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
  max-width: 50ch;
  margin-inline: auto;
}

.cta-band__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.cta-band__whatsapp {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  transition: color var(--duration-fast) var(--ease-out);
}

.cta-band__whatsapp:hover {
  color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------
   CONSERVATION MENTION
-------------------------------------------------------------------------- */

.conservation-mention {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-12);
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.conservation-mention__rule {
  flex-shrink: 0;
  width: 1px;
  height: 80px;
  background-color: var(--color-gold-muted);
}

.conservation-mention__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 72ch;
}

.conservation-mention__text a {
  color: var(--color-gold);
  transition: color var(--duration-fast) var(--ease-out);
}

.conservation-mention__text a:hover {
  color: var(--color-text-primary);
}

@media (max-width: 640px) {
  .conservation-mention {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8);
    gap: var(--space-6);
  }
  .conservation-mention__rule {
    width: 40px;
    height: 1px;
  }
}