/* =============================================================================
   TGH SECTIONS.CSS — Herbruikbare sectiebibliotheek
   Project : Zelfstandig taxibedrijf Gent
   Prefix  : tgh_
   Scope   : .tgh_site
   Requires: tgh-globals-v1.0.css + tgh-components-v1.0.css
   Aanpak  : Mobile first vanaf 360px
   Versie  : 1.0
   ============================================================================= */

/* =============================================================================
   01. GENERIC SECTION FOUNDATION
   ============================================================================= */

.tgh_site .tgh_section {
  position: relative;
  padding-block: var(--tgh_section-y);
  background: var(--tgh_color-section);
  color: var(--tgh_color-text);
}

.tgh_site .tgh_section--alt {
  background: var(--tgh_color-section-alt);
}

.tgh_site .tgh_section--dark {
  background: var(--tgh_color-section-dark);
  color: var(--tgh_color-text-inverse);
}

.tgh_site .tgh_section--accent {
  background: var(--tgh_color-primary);
  color: var(--tgh_color-button-primary-text);
}

.tgh_site .tgh_section--compact {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.tgh_site .tgh_section__inner {
  width: min(100% - (2 * var(--tgh_container-gutter)), var(--tgh_container-lg));
  margin-inline: auto;
}

.tgh_site .tgh_section__inner--narrow {
  max-width: var(--tgh_container-xs);
}

.tgh_site .tgh_section__inner--wide {
  width: min(100% - (2 * var(--tgh_container-gutter)), var(--tgh_container-xl));
}

.tgh_site .tgh_section__header {
  display: grid;
  gap: var(--tgh_space-3);
  max-width: 46rem;
  margin-block-end: var(--tgh_space-8);
}

.tgh_site .tgh_section__header--center {
  margin-inline: auto;
  text-align: center;
}

.tgh_site .tgh_section__eyebrow {
  color: var(--tgh_color-primary);
  font-size: var(--tgh_text-sm);
  font-weight: var(--tgh_weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tgh_site .tgh_section--dark .tgh_section__eyebrow,
.tgh_site .tgh_section--accent .tgh_section__eyebrow {
  color: inherit;
}

.tgh_site .tgh_section__title {
  color: var(--tgh_color-heading);
  font-size: var(--tgh_text-3xl);
  line-height: var(--tgh_line-tight);
}

.tgh_site .tgh_section--dark .tgh_section__title,
.tgh_site .tgh_section--accent .tgh_section__title {
  color: inherit;
}

.tgh_site .tgh_section__lead {
  color: var(--tgh_color-text-soft);
  font-size: var(--tgh_text-lg);
  line-height: var(--tgh_line-relaxed);
}

.tgh_site .tgh_section--dark .tgh_section__lead,
.tgh_site .tgh_section--accent .tgh_section__lead {
  color: inherit;
}

.tgh_site .tgh_section__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--tgh_space-3);
  margin-block-start: var(--tgh_space-5);
}

.tgh_site .tgh_section__micro {
  margin-block-start: var(--tgh_space-5);
}

/* =============================================================================
   02. HERO — Awareness / Attention
   Mentale vragen:
   - Ben ik hier op de juiste plaats?
   - Rijden jullie in Gent?
   - Kan ik nu een taxi regelen?
   ============================================================================= */

.tgh_site .tgh_section-hero {
  padding-block: clamp(3.5rem, 2.25rem + 5vw, 7rem);
  background: var(--tgh_color-section-dark);
  color: var(--tgh_color-text-inverse);
  overflow: clip;
}

.tgh_site .tgh_section-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-8);
  align-items: center;
}

.tgh_site .tgh_section-hero__copy {
  display: grid;
  gap: var(--tgh_space-5);
  max-width: 46rem;
}

.tgh_site .tgh_section-hero__eyebrow {
  color: var(--tgh_color-primary);
  font-size: var(--tgh_text-sm);
  font-weight: var(--tgh_weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tgh_site .tgh_section-hero__title {
  color: inherit;
  font-size: var(--tgh_text-5xl);
  line-height: var(--tgh_line-tight);
}

.tgh_site .tgh_section-hero__lead {
  color: inherit;
  font-size: var(--tgh_text-lg);
  line-height: var(--tgh_line-relaxed);
  max-width: 40rem;
}

.tgh_site .tgh_section-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--tgh_space-3);
}

.tgh_site .tgh_section-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tgh_space-2);
}

.tgh_site .tgh_section-hero__media {
  min-width: 0;
}

/* =============================================================================
   03. IMMEDIATE TRUST STRIP — Awareness / Trust
   Mentale vragen:
   - Zijn jullie betrouwbaar?
   - Kan ik betalen zoals ik wil?
   - Zijn jullie echt lokaal?
   ============================================================================= */

.tgh_site .tgh_section-trust {
  padding-block: var(--tgh_space-5);
  background: var(--tgh_color-section);
  border-block-end: 1px solid var(--tgh_color-divider);
}

.tgh_site .tgh_section-trust .tgh_trust-strip {
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* =============================================================================
   04. PRIMARY SERVICES — Awareness / Interest
   Mentale vragen:
   - Welke ritten doen jullie?
   - Past jullie service bij mijn situatie?
   ============================================================================= */

.tgh_site .tgh_section-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-4);
}

.tgh_site .tgh_section-services .tgh_service-card {
  height: 100%;
}

.tgh_site .tgh_section-services__footer {
  margin-block-start: var(--tgh_space-6);
}

/* =============================================================================
   05. WHY CHOOSE US — Consideration / Desire / Trust
   Mentale vragen:
   - Waarom zou ik jullie kiezen?
   - Wat krijg ik concreet?
   ============================================================================= */

.tgh_site .tgh_section-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-4);
}

.tgh_site .tgh_section-benefits__aside {
  margin-block-start: var(--tgh_space-6);
}

/* =============================================================================
   06. TAXI CALCULATOR — Consideration / Evaluation
   Mentale vraag:
   - Wat kost mijn taxirit ongeveer?
   ============================================================================= */

.tgh_site .tgh_section-calculator__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-6);
  align-items: start;
}

.tgh_site .tgh_section-calculator__context {
  display: grid;
  gap: var(--tgh_space-4);
}

.tgh_site .tgh_section-calculator__trust {
  display: grid;
  gap: var(--tgh_space-3);
}

/* =============================================================================
   07. HOW IT WORKS — Consideration / Comprehension
   Mentale vragen:
   - Hoe werkt reserveren?
   - Wat gebeurt er daarna?
   ============================================================================= */

.tgh_site .tgh_section-process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-6);
}

.tgh_site .tgh_section-process__support {
  display: grid;
  gap: var(--tgh_space-4);
}

/* =============================================================================
   08. AIRPORT TRANSPORT — Consideration / Desire
   Mentale vragen:
   - Brengen jullie mij naar de luchthaven?
   - Hoe zit het met bagage, vluchtvertraging en prijs?
   ============================================================================= */

.tgh_site .tgh_section-airport__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-6);
  align-items: center;
}

.tgh_site .tgh_section-airport__content {
  display: grid;
  gap: var(--tgh_space-4);
}

.tgh_site .tgh_section-airport__prices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-3);
}

/* =============================================================================
   09. BUSINESS TRANSPORT — Consideration / Desire
   Mentale vragen:
   - Is dit geschikt voor zakelijke ritten?
   - Kan ik professioneel en eenvoudig boeken/betalen?
   ============================================================================= */

.tgh_site .tgh_section-business__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-6);
  align-items: center;
}

.tgh_site .tgh_section-business__benefits {
  display: grid;
  gap: var(--tgh_space-3);
}

/* =============================================================================
   10. LOCAL COVERAGE — Consideration / Evaluation / Local SEO
   Mentale vragen:
   - Komen jullie naar mijn adres?
   - Welke delen van Gent bedienen jullie?
   ============================================================================= */

.tgh_site .tgh_section-coverage__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-6);
}

.tgh_site .tgh_section-coverage__locations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tgh_space-2);
}

.tgh_site .tgh_section-coverage__media {
  min-width: 0;
}

/* =============================================================================
   11. REVIEWS / SOCIAL PROOF — Trust / Evaluation
   Mentale vragen:
   - Wat zeggen andere klanten?
   - Kan ik deze chauffeur vertrouwen?
   ============================================================================= */

.tgh_site .tgh_section-reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tgh_space-4);
  margin-block-end: var(--tgh_space-6);
}

.tgh_site .tgh_section-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-4);
}

.tgh_site .tgh_section-reviews__footer {
  margin-block-start: var(--tgh_space-6);
}

/* =============================================================================
   12. PERSONAL / DRIVER TRUST — Trust / Conviction
   Mentale vragen:
   - Wie komt mij ophalen?
   - Is dit een persoonlijke lokale service?
   ============================================================================= */

.tgh_site .tgh_section-driver__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-6);
  align-items: center;
}

.tgh_site .tgh_section-driver__content {
  display: grid;
  gap: var(--tgh_space-4);
}

/* =============================================================================
   13. PAYMENT & BOOKING CERTAINTY — Decision / Risk reduction
   Mentale vragen:
   - Hoe kan ik betalen?
   - Krijg ik bevestiging?
   - Is reserveren veilig en duidelijk?
   ============================================================================= */

.tgh_site .tgh_section-certainty__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-4);
}

.tgh_site .tgh_section-certainty__payments {
  margin-block-start: var(--tgh_space-5);
}

/* =============================================================================
   14. SHORT BOOKING WIZARD — Decision / Action
   Mentale vraag:
   - Hoe reserveer ik nu snel?
   ============================================================================= */

.tgh_site .tgh_section-booking__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-6);
  align-items: start;
}

.tgh_site .tgh_section-booking__context {
  display: grid;
  gap: var(--tgh_space-4);
}

.tgh_site .tgh_section-booking__alternatives {
  display: grid;
  gap: var(--tgh_space-3);
}

/* =============================================================================
   15. AFTER BOOKING / REASSURANCE — Reassurance
   Mentale vragen:
   - Is mijn reservatie definitief?
   - Wat gebeurt er nu?
   - Kan ik wijzigen of annuleren?
   ============================================================================= */

.tgh_site .tgh_section-reassurance__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-5);
}

.tgh_site .tgh_section-reassurance__actions {
  display: flex;
  flex-direction: column;
  gap: var(--tgh_space-3);
  margin-block-start: var(--tgh_space-5);
}

/* =============================================================================
   16. FAQ — Evaluation / Decision / Reassurance
   Mentale vragen:
   - Welke laatste twijfels of praktische vragen heb ik?
   ============================================================================= */

.tgh_site .tgh_section-faq__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-6);
}

.tgh_site .tgh_section-faq__side {
  display: grid;
  align-content: start;
  gap: var(--tgh_space-4);
}

/* =============================================================================
   17. FINAL CTA — Decision / Action
   Mentale vraag:
   - Welke actie neem ik nu?
   ============================================================================= */

.tgh_site .tgh_section-final-cta {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  background: var(--tgh_color-section-dark);
  color: var(--tgh_color-text-inverse);
}

.tgh_site .tgh_section-final-cta__inner {
  display: grid;
  gap: var(--tgh_space-5);
  align-items: center;
}

.tgh_site .tgh_section-final-cta__copy {
  display: grid;
  gap: var(--tgh_space-3);
}

.tgh_site .tgh_section-final-cta__title {
  color: inherit;
}

.tgh_site .tgh_section-final-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--tgh_space-3);
}

/* =============================================================================
   18. LOYALTY / RETURNING CUSTOMER — Retention
   Mentale vraag:
   - Hoe boek ik de volgende keer nog sneller?
   ============================================================================= */

.tgh_site .tgh_section-loyalty__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-4);
}

.tgh_site .tgh_section-loyalty__actions {
  display: flex;
  flex-direction: column;
  gap: var(--tgh_space-3);
}

/* =============================================================================
   19. OPTIONAL SECTION PATTERNS
   Deze worden alleen gebruikt wanneer ze inhoudelijk waarde toevoegen.
   ============================================================================= */

/* Popular routes */
.tgh_site .tgh_section-routes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-3);
}

/* Vehicle / comfort */
.tgh_site .tgh_section-comfort__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-6);
  align-items: center;
}

/* Contact choice */
.tgh_site .tgh_section-contact-choice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tgh_space-4);
}

/* =============================================================================
   20. SECTION SEQUENCING HELPERS
   Geen visuele salesfunnel-labels; enkel technische compositie.
   ============================================================================= */

.tgh_site .tgh_section + .tgh_section {
  border-block-start: 0 solid transparent;
}

.tgh_site .tgh_section-anchor {
  scroll-margin-top: calc(var(--tgh_header-height) + var(--tgh_space-4));
}

/* =============================================================================
   21. RESPONSIVE SECTION RULES — MOBILE FIRST
   ============================================================================= */

/* Small tablet */
@media (min-width: 600px) {
  .tgh_site .tgh_section__actions,
  .tgh_site .tgh_section-hero__actions,
  .tgh_site .tgh_section-reassurance__actions,
  .tgh_site .tgh_section-final-cta__actions,
  .tgh_site .tgh_section-loyalty__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .tgh_site .tgh_section-services__grid,
  .tgh_site .tgh_section-benefits__grid,
  .tgh_site .tgh_section-reviews__grid,
  .tgh_site .tgh_section-certainty__grid,
  .tgh_site .tgh_section-routes__grid,
  .tgh_site .tgh_section-contact-choice__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgh_site .tgh_section-airport__prices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Large tablet */
@media (min-width: 768px) {
  .tgh_site .tgh_section-hero__grid,
  .tgh_site .tgh_section-calculator__grid,
  .tgh_site .tgh_section-airport__grid,
  .tgh_site .tgh_section-business__grid,
  .tgh_site .tgh_section-coverage__layout,
  .tgh_site .tgh_section-driver__grid,
  .tgh_site .tgh_section-booking__grid,
  .tgh_site .tgh_section-faq__layout,
  .tgh_site .tgh_section-comfort__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgh_site .tgh_section-process__grid,
  .tgh_site .tgh_section-reassurance__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  }

  .tgh_site .tgh_section-loyalty__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Laptop */
@media (min-width: 1024px) {
  .tgh_site .tgh_section-services__grid,
  .tgh_site .tgh_section-benefits__grid,
  .tgh_site .tgh_section-reviews__grid,
  .tgh_site .tgh_section-certainty__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tgh_site .tgh_section-final-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tgh_site .tgh_section-final-cta__actions {
    justify-content: flex-end;
  }

  .tgh_site .tgh_section-contact-choice__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop */
@media (min-width: 1280px) {
  .tgh_site .tgh_section-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
  }

  .tgh_site .tgh_section-calculator__grid,
  .tgh_site .tgh_section-booking__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(28rem, 1.2fr);
  }
}

/* =============================================================================
   22. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .tgh_site .tgh_section-anchor {
    scroll-behavior: auto;
  }
}