/**
 * Taxi Lille Connect — Responsive refinements.
 * Mobile is designed intentionally, not merely shrunk.
 * Component files own their primary breakpoints; this file handles
 * cross-component layout shifts and small-screen polish.
 */

/* =========================================================
   ≤ 1180px — comfortable laptop
   ========================================================= */

@media (max-width: 1180px) {
  .tlc-services__layout,
  .tlc-comfort__layout {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-xl);
  }

  .tlc-section-head {
    max-width: 560px;
  }

  .tlc-destinations__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   ≤ 980px — tablet
   ========================================================= */

@media (max-width: 980px) {
  :root {
    --tlc-header-height: 64px;
  }

  .tlc-hero {
    min-height: 88vh;
  }

  .tlc-hero__media img,
  .tlc-hero__media {
    object-position: 74% center;
  }

  .tlc-trust__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tlc-trust__item:nth-child(3) {
    border-left: 0;
  }

  .tlc-trust__item:nth-child(n+3) {
    border-top: 1px solid var(--tlc-color-line-dark);
  }

  .tlc-services__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tlc-benefits__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tlc-benefit:nth-child(4) {
    border-left: 0;
  }

  .tlc-benefit:nth-child(n+4) {
    border-top: 1px solid var(--tlc-color-line-light);
  }

  .tlc-steps__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--tlc-space-xl) var(--tlc-space-lg);
  }

  .tlc-feedback__layout {
    grid-template-columns: 1fr;
  }

  .tlc-destinations__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

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

/* =========================================================
   ≤ 700px — large phones
   ========================================================= */

@media (max-width: 700px) {
  .tlc-hero {
    min-height: 0;
    padding-top: calc(var(--tlc-header-height) + var(--tlc-space-2xl));
  }

  .tlc-hero__media::after {
    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%);
  }

  .tlc-hero__actions .tlc-btn {
    flex: 1 1 auto;
  }

  .tlc-comfort__gallery {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-lg);
  }

  .tlc-comfort__gallery .tlc-figure img {
    aspect-ratio: 16 / 10;
  }

  .tlc-destinations__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tlc-destinations__grid .tlc-destination:last-child {
    grid-column: 1 / -1;
  }

  .tlc-destinations__grid .tlc-destination:last-child img {
    aspect-ratio: 16 / 9;
  }

  .tlc-review-card {
    padding: var(--tlc-space-lg) var(--tlc-space-md);
  }

  .tlc-review-card__actions .tlc-btn {
    width: 100%;
  }

  .tlc-cta__actions .tlc-btn {
    flex: 1 1 100%;
  }
}

/* =========================================================
   ≤ 480px — phones
   ========================================================= */

@media (max-width: 480px) {
  .tlc-trust__grid {
    grid-template-columns: 1fr;
  }

  .tlc-trust__item {
    padding: var(--tlc-space-md) 0;
  }

  .tlc-trust__item + .tlc-trust__item {
    border-left: 0;
    border-top: 1px solid var(--tlc-color-line-dark);
  }

  .tlc-services__grid {
    grid-template-columns: 1fr;
    border-left: 0;
    border-top: 0;
  }

  .tlc-service {
    border-right: 0;
    border-bottom: 1px solid var(--tlc-color-line-light);
  }

  .tlc-service__img {
    aspect-ratio: 16 / 9;
  }

  .tlc-service__body {
    padding: var(--tlc-space-md) 0;
  }

  .tlc-benefits__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tlc-benefit:nth-child(3) {
    border-left: 0;
  }

  .tlc-benefit:nth-child(n+3) {
    border-top: 1px solid var(--tlc-color-line-light);
  }

  .tlc-benefit:nth-child(even) {
    border-left: 1px solid var(--tlc-color-line-light);
  }

  .tlc-steps__grid {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-lg);
  }

  .tlc-step {
    text-align: left;
    padding-inline: 0;
  }

  .tlc-step__num::after {
    margin-left: 0;
  }
}

/* =========================================================
   ≥ 1500px — large screens: keep hero art-directed
   ========================================================= */

@media (min-width: 1500px) {
  .tlc-hero {
    min-height: min(88vh, 960px);
  }
}