/* ==========================
   MOBILE FUJI
========================== */

@media (max-width: 900px) {
  /* ==========================
     HERO
  ========================== */

  .hero-destination {
    height: 56vh;
  }

  .hero-overlay {
    width: calc(100% - 40px);

    left: 20px;
    right: 20px;
    bottom: 20px;

    transform: none;

    padding: 22px;

    border-radius: 24px;
  }

  .hero-overlay h1 {
    font-size: 2rem;

    line-height: 1.1;

    margin-bottom: 12px;
  }

  .hero-overlay p {
    font-size: 14px;

    line-height: 1.6;

    text-align: center;
  }

  /* ==========================
     INFOS RAPIDES
  ========================== */

  .quick-info {
    grid-template-columns: 1fr;

    gap: 16px;

    margin: 30px auto;

    padding: 0 20px;
  }

  .quick-card {
    padding: 22px;
  }

  /* ==========================
     TIMELINE
  ========================== */

  .trip-timeline {
    margin: 20px;

    padding: 24px 20px;
  }

  .timeline-track {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;
  }

  .timeline-item {
    width: auto;

    text-align: center;
  }

  .timeline-arrow {
    transform: rotate(90deg);
  }

  /* ==========================
     DEBRIEF
  ========================== */

  .debrief-section {
    padding: 10px 20px 30px;
  }

  .debrief-container {
    padding: 28px;
  }

  .debrief-container p {
    text-align: left;

    font-size: 16px;
  }

  /* ==========================
     PROGRAMME
  ========================== */

  .programme-section {
    padding: 20px;
  }

  .glass-container {
    padding: 28px;
  }

  /* ==========================
     TABLEAU
  ========================== */

  .table-wrapper {
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }

  .program-table {
    width: 100%;

    min-width: 520px;

    border-radius: 20px;
  }

  .program-table th,
  .program-table td {
    padding: 12px;

    font-size: 14px;
  }

  /* ==========================
     TIPS
  ========================== */

  .tips-list {
    grid-template-columns: 1fr;
  }

  .tips-box {
    padding: 25px;
  }

  /* ==========================
     GALERIE
  ========================== */

  .image-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;
  }

  .image-card {
    overflow: hidden;
  }

  .image-card img {
    width: 100%;

    height: 170px;

    object-fit: cover;

    display: block;
  }

  .image-content {
    padding: 14px;
  }

  .image-content h3 {
    font-size: 15px;
  }

  .image-content p {
    font-size: 13px;

    line-height: 1.5;
  }

  /* ==========================
     FULLSCREEN IMAGE
  ========================== */

  .modal-image {
    width: 94%;

    max-height: 80vh;
  }

  .close-modal {
    top: 15px;
    right: 18px;

    font-size: 32px;
  }

  /* ==========================
     FOOTER
  ========================== */

  .footer-content {
    grid-template-columns: 1fr;

    text-align: center;

    gap: 30px;
  }

  .footer-links {
    align-items: center;
  }
}