/**
 * Taxi Lille Connect — Divi integration layer.
 *
 * The homepage layout (divi/homepage-layout.json) assigns `tlc-*` classes
 * to Divi sections/rows/modules via their "CSS Class" fields. This file
 * bridges Divi's generated markup to the design system so what the owner
 * edits in the Visual Builder renders exactly like the approved design.
 *
 * The Divi parent theme is never modified.
 */

/* ---------- Replace Divi's default chrome ---------- */

/* The child theme renders its own header/footer (inc/template-parts.php).
   Divi's defaults are hidden rather than dequeued so the parent theme
   stays untouched and Theme Builder can take over later if desired. */
body.tlc-theme #main-header,
body.tlc-theme #top-header,
body.tlc-theme #main-footer {
  display: none;
}

/* Divi JS pads the page for its own fixed header — neutralise it,
   the hero manages its own offset under the custom fixed header. */
body.tlc-theme #page-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ---------- Global Divi resets ---------- */

/* Give our tokens authority over Divi body typography */
#page-container,
.et_pb_section {
  font-family: var(--tlc-font-body);
}

/* Sections tagged with the design system drop Divi's default padding
   in favour of the token rhythm */
.et_pb_section.tlc-section {
  padding: var(--tlc-section-pad) 0;
}

.et_pb_section.tlc-section--sm {
  padding: var(--tlc-section-pad-sm) 0;
}

.et_pb_section.tlc-section--flush {
  padding: 0;
}

/* Rows tagged tlc-row become full design-system containers */
.et_pb_row.tlc-row {
  width: calc(100% - 2 * var(--tlc-gutter));
  max-width: var(--tlc-container);
  padding: 0;
}

.et_pb_row.tlc-row--wide {
  max-width: var(--tlc-container-wide);
}

.et_pb_row.tlc-row--narrow {
  max-width: var(--tlc-container-narrow);
}

/* Kill Divi's default module bottom margin inside tagged rows;
   spacing comes from the components */
.tlc-row .et_pb_module {
  margin-bottom: 0;
}

/* ---------- Surfaces on Divi sections ---------- */

.et_pb_section.tlc-surface-dark { background-color: var(--tlc-color-midnight); }
.et_pb_section.tlc-surface-navy { background-color: var(--tlc-color-navy); }
.et_pb_section.tlc-surface-ink { background-color: var(--tlc-color-ink); }
.et_pb_section.tlc-surface-ivory { background-color: var(--tlc-color-ivory); }
.et_pb_section.tlc-surface-paper { background-color: var(--tlc-color-paper); }

.et_pb_section.tlc-surface-dark,
.et_pb_section.tlc-surface-navy,
.et_pb_section.tlc-surface-ink {
  color: var(--tlc-color-text-inverse);
}

/* ---------- Divi text modules ---------- */

.tlc-row .et_pb_text {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.tlc-row .et_pb_text h1,
.tlc-row .et_pb_text h2,
.tlc-row .et_pb_text h3 {
  font-family: var(--tlc-font-display);
}

/* ---------- Divi buttons → design-system buttons ---------- */

.et_pb_button.tlc-btn,
.et_pb_button_module_wrapper .et_pb_button.tlc-btn {
  padding: 0.85rem 1.7rem !important;
  font-family: var(--tlc-font-body) !important;
  font-size: var(--tlc-text-button) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tlc-tracking-wide) !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
  border-radius: var(--tlc-radius-sm) !important;
  transition: background var(--tlc-transition), color var(--tlc-transition), border-color var(--tlc-transition);
}

/* Remove Divi's injected arrow pseudo-element */
.et_pb_button.tlc-btn::after,
.et_pb_button.tlc-btn::before {
  display: none !important;
}

.et_pb_button.tlc-btn--primary {
  background: var(--tlc-color-gold) !important;
  border: 1px solid var(--tlc-color-gold) !important;
  color: var(--tlc-color-ink) !important;
}

.et_pb_button.tlc-btn--primary:hover {
  background: #D4B172 !important;
  border-color: #D4B172 !important;
}

.et_pb_button.tlc-btn--ghost {
  background: transparent !important;
  border: 1px solid rgba(246, 242, 234, 0.38) !important;
  color: var(--tlc-color-ivory) !important;
}

.et_pb_button.tlc-btn--ghost:hover {
  border-color: var(--tlc-color-ivory) !important;
  background: rgba(246, 242, 234, 0.06) !important;
}

.et_pb_button.tlc-btn--ghost-dark {
  background: transparent !important;
  border: 1px solid rgba(11, 23, 38, 0.35) !important;
  color: var(--tlc-color-text) !important;
}

.et_pb_button.tlc-btn--ghost-dark:hover {
  border-color: var(--tlc-color-navy) !important;
  background: rgba(11, 23, 38, 0.04) !important;
}

/* Divi wraps buttons; keep them inline for action groups */
.tlc-actions .et_pb_button_module_wrapper {
  display: inline-block;
  margin-right: var(--tlc-space-sm);
  margin-bottom: var(--tlc-space-sm);
}

/* ---------- Divi blurbs → services / benefits ---------- */

.et_pb_blurb.tlc-service .et_pb_main_blurb_image {
  margin-bottom: var(--tlc-space-sm);
}

.et_pb_blurb.tlc-service .et_pb_blurb_container,
.et_pb_blurb.tlc-benefit .et_pb_blurb_container {
  padding: 0;
}

.et_pb_blurb.tlc-service h4,
.et_pb_blurb.tlc-benefit h4 {
  font-family: var(--tlc-font-body);
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.et_pb_blurb.tlc-service .et_pb_blurb_description,
.et_pb_blurb.tlc-benefit .et_pb_blurb_description {
  font-size: var(--tlc-text-xs);
  color: var(--tlc-color-text-soft);
  line-height: 1.55;
}

/* ---------- Divi images ---------- */

.tlc-row .et_pb_image {
  text-align: center;
}

.tlc-row .et_pb_image img {
  border-radius: var(--tlc-radius-sm);
}

/* ---------- Section surfaces & spacing at Divi specificity ----------
   Divi ships `.et_pb_section { background-color: #fff }` and emits
   per-section padding rules like `.et_pb_section_3 { padding: 0 }`.
   Both are single-class selectors, so component styles written as
   `.tlc-hero` can lose depending on stylesheet order. Re-declaring the
   load-bearing properties as `.et_pb_section.tlc-*` (two classes) makes
   the design system win deterministically. */

.et_pb_section.tlc-hero {
  min-height: min(94vh, 900px);
  padding: calc(var(--tlc-header-height) + var(--tlc-space-xl)) 0 var(--tlc-space-xl);
  background-color: var(--tlc-color-ink);
  color: var(--tlc-color-text-inverse);
}

.et_pb_section.tlc-trust {
  padding: 0;
  background-color: var(--tlc-color-navy);
  color: var(--tlc-color-text-inverse);
}

.et_pb_section.tlc-cta {
  padding: var(--tlc-section-pad) 0;
  background-color: var(--tlc-color-midnight);
  color: var(--tlc-color-text-inverse);
}

.et_pb_section.tlc-page-hero {
  padding: calc(var(--tlc-header-height) + var(--tlc-space-xl)) 0 var(--tlc-space-xl);
  background-color: var(--tlc-color-midnight);
  color: var(--tlc-color-text-inverse);
}

.et_pb_section.tlc-404 {
  background-color: var(--tlc-color-navy);
  color: var(--tlc-color-text-inverse);
}

/* Divi resets heading colours per module; keep inverse text on dark
   sections regardless of which module renders it. */
.et_pb_section.tlc-hero h1,
.et_pb_section.tlc-hero h2,
.et_pb_section.tlc-cta h2,
.et_pb_section.tlc-page-hero h1,
.et_pb_section.tlc-surface-dark h2,
.et_pb_section.tlc-surface-navy h2,
.et_pb_section.tlc-surface-ink h2 {
  color: var(--tlc-color-ivory);
}

.et_pb_section.tlc-hero .et_pb_text,
.et_pb_section.tlc-trust .et_pb_text,
.et_pb_section.tlc-cta .et_pb_text,
.et_pb_section.tlc-page-hero .et_pb_text,
.et_pb_section.tlc-surface-dark .et_pb_text,
.et_pb_section.tlc-surface-navy .et_pb_text,
.et_pb_section.tlc-surface-ink .et_pb_text {
  color: var(--tlc-color-text-inverse);
}

/* ---------- Structural bridge for the homepage layout ---------- */

/* Hero as a Divi section: the vehicle photo is the section background
   (editable in the Visual Builder); the cinematic overlay is recreated
   on ::before so no extra markup is needed. */
.et_pb_section.tlc-hero {
  position: relative;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: 68% center;
}

.et_pb_section.tlc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(5, 10, 16, 0.92) 0%, rgba(5, 10, 16, 0.72) 34%, rgba(5, 10, 16, 0.18) 66%, rgba(5, 10, 16, 0.42) 100%),
    linear-gradient(to top, rgba(5, 10, 16, 0.85), rgba(5, 10, 16, 0) 36%);
}

.et_pb_section.tlc-hero .et_pb_row {
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  .et_pb_section.tlc-hero::before {
    background:
      linear-gradient(to bottom, rgba(5, 10, 16, 0.55) 0%, rgba(5, 10, 16, 0.82) 55%, rgba(5, 10, 16, 0.94) 100%);
  }
}

/* Final CTA as a Divi section with a background image */
.et_pb_section.tlc-cta--bg {
  position: relative;
  background-size: cover;
  background-position: center;
}

.et_pb_section.tlc-cta--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(7, 17, 31, 0.88);
}

.et_pb_section.tlc-cta--bg .et_pb_row {
  position: relative;
  z-index: 2;
}

/* Divi rows that should render as design-system grids.
   Columns become plain grid items. */
.et_pb_row.tlc-grid-row {
  display: grid !important;
}

.tlc-grid-row .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
}

.et_pb_row.tlc-row-services {
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--tlc-space-2xl);
  align-items: start;
}

.et_pb_row.tlc-row-tarifs {
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--tlc-space-2xl);
  align-items: start;
}

.et_pb_row.tlc-row-comfort {
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: var(--tlc-space-2xl);
  align-items: center;
}

.et_pb_row.tlc-row-feedback {
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: var(--tlc-space-lg);
  align-items: start;
}

.et_pb_row.tlc-row-desthead {
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--tlc-space-lg);
  align-items: end;
  margin-bottom: var(--tlc-space-lg) !important;
}

.tlc-row-desthead .tlc-destinations__cta {
  justify-self: end;
}

@media (max-width: 1180px) {
  .et_pb_row.tlc-row-services,
  .et_pb_row.tlc-row-comfort,
  .et_pb_row.tlc-row-tarifs {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-xl);
  }
}

@media (max-width: 980px) {
  .et_pb_row.tlc-row-feedback,
  .et_pb_row.tlc-row-desthead {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tlc-row-desthead .tlc-destinations__cta {
    justify-self: start;
  }
}

/* ---------- Misc Divi cleanups ---------- */

/* Hide Divi's default page-wide top padding under our fixed header
   (the hero manages its own offset) */
.tlc-home #main-content .container {
  padding-top: 0;
}

/* Ensure Divi animations never introduce horizontal overflow */
#page-container {
  overflow-x: clip;
}