/*
 * Responsive rules for public travel pages.
 * Kept separate from the base travel system to keep each stylesheet focused.
 */

@media (prefers-reduced-motion: reduce) {
  .travel-hero__media,
  .travel-hero__scroll svg,
  .travel-enhanced .reveal {
    animation: none;
    transition: none;
  }
}

@media (max-width: 1100px) {
  .travel-hero {
    padding-inline: 3rem;
  }

  .travel-hero__inner,
  .travel-split,
  .travel-concierge,
  .travel-guide-cta {
    grid-template-columns: 1fr;
  }

  .travel-hero__panel {
    width: min(100%, 42rem);
  }

  .travel-concierge__actions,
  .travel-guide-cta__actions {
    justify-content: flex-start;
  }

  .travel-card-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .travel-destination-grid,
  .travel-card-grid,
  .travel-card-grid--three,
  .travel-status-grid,
  .travel-timeline,
  .travel-weather-strip {
    grid-template-columns: 1fr;
  }

  .travel-guide-section {
    padding: 2rem;
  }
}

@media (max-width: 720px) {
  .travel-hero {
    min-height: 88svh;
    padding: calc(var(--header-height) + 4rem) 1rem 4rem;
  }

  .travel-hero::after {
    border-top-width: 2.6rem;
    border-bottom-width: 2.6rem;
  }

  .travel-hero__inner {
    gap: 1.35rem;
  }

  .travel-hero__title {
    width: min(100%, 10ch);
    font-size: 3.65rem;
  }

  .travel-hero__subtitle {
    font-size: 1.18rem;
  }

  .travel-panel__list li {
    font-size: 0.95rem;
    line-height: 1.38;
  }

  .travel-hero__actions,
  .travel-concierge__actions,
  .travel-guide-cta__actions,
  .travel-page-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .travel-hero__actions .btn,
  .travel-concierge__actions .btn,
  .travel-guide-cta__actions .btn,
  .travel-page-nav a {
    width: 100%;
    justify-content: center;
  }

  .travel-hero__panel,
  .travel-concierge,
  .travel-guide-cta {
    padding: 1rem;
  }

  .travel-hero__scroll {
    right: 1rem;
    bottom: 1rem;
  }

  .travel-container {
    width: min(100% - 1.5rem, 1180px);
  }

  .travel-section,
  .travel-guide-section {
    padding-block: 4.5rem;
  }

  .travel-guide-section {
    padding-inline: 1rem;
  }

  .travel-section__header h2,
  .travel-concierge h2,
  .travel-guide-cta h2 {
    font-size: 2.5rem;
  }

  .travel-destination-card {
    min-height: 31rem;
  }

  .travel-destination-card__content {
    padding: 1.2rem;
  }

  .travel-destination-card strong {
    font-size: 2.45rem;
  }

  .travel-quick-nav {
    top: calc(var(--header-height) + 0.5rem);
    margin-top: -1.5rem;
  }
}