/* ============================================================
   TTP — RESPONSIVE
   The Travel Place | responsive.css
   ============================================================ */

/* Breakpoints:
   xs: 360px
   sm: 480px
   md: 768px
   lg: 1024px
   xl: 1280px
   2xl: 1440px
*/

/* ── 1280px ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }

  .footer-grid > *:last-child {
    grid-column: span 2;
  }
}

/* ── 1024px ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --header-height: 64px;
    --header-height-scrolled: 56px;
  }

  /* Header */
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: span 2;
  }

  /* Value prop */
  .value-prop-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .value-prop-item:first-child {
    grid-row: span 1;
    grid-column: span 2;
  }

  /* Why TTP */
  .why-ttp-editorial {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .why-ttp-large-text {
    font-size: clamp(2.5rem, 5vw, 4rem);
  }

  /* Story */
  .story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .story-image-composition {
    max-width: 480px;
    margin: 0 auto;
  }

  /* Search */
  .search-panel {
    margin-top: -48px;
    border-radius: var(--radius-xl);
  }

  .search-form.is-active {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Offer cards — tilt disabled on touch */
  .tilt-card {
    transform: none !important;
  }
}

/* ── 768px ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
    --header-height-scrolled: 52px;
  }

  /* Sections */
  .section {
    padding-top: clamp(48px, 8vw, 80px);
    padding-bottom: clamp(48px, 8vw, 80px);
  }

  /* Section header */
  .section-cta-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Grid */
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .hero-counter { display: none; }
  .hero-scroll-hint { display: none; }

  .hero-slide-headline {
    font-size: clamp(1.9rem, 6vw, 2.8rem);
  }

  .hero-slide-sub {
    font-size: var(--text-md);
  }

  .hero-slide-actions {
    flex-direction: column;
    gap: var(--space-3);
  }

  .hero-slide-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Search */
  .search-panel {
    margin-top: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }

  .search-forms {
    padding: var(--space-6);
  }

  .search-form.is-active {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Cards */
  .offer-card {
    min-width: calc(100vw - var(--space-8));
    max-width: 380px;
  }

  /* Value prop */
  .value-prop-grid {
    grid-template-columns: 1fr;
  }

  .value-prop-item:first-child {
    grid-column: span 1;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-brand { grid-column: span 1; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-legal-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* CTA */
  .cta-section h2 {
    font-size: var(--text-3xl);
  }

  /* Why TTP */
  .why-ttp-large-text {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  /* Stats */
  .stats-bar {
    gap: var(--space-8);
    flex-wrap: wrap;
  }

  /* Service hero */
  .service-hero h1 {
    font-size: var(--text-3xl);
  }

  .service-hero-actions {
    flex-direction: column;
  }

  /* Steps */
  .steps {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ── 480px ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Grid */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* Hero */
  .hero-slide-headline {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  /* Cards */
  .offer-card {
    min-width: calc(100vw - 32px);
    max-width: 100%;
  }

  /* Buttons */
  .btn--xl {
    font-size: var(--text-md);
    padding: 15px 32px;
  }

  /* Blog */
  .blog-card-title {
    font-size: var(--text-md);
  }

  /* Service card */
  .service-card {
    padding: var(--space-6);
  }

  /* Testimonial */
  .testimonial-card {
    padding: var(--space-6);
  }

  /* CTA */
  .cta-buttons {
    flex-direction: column;
  }

  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* Newsletter */
  .newsletter-form {
    flex-direction: column;
  }

  /* Search tabs */
  .search-tab {
    padding: var(--space-4) var(--space-3);
    font-size: var(--text-xs);
  }

  /* Story */
  .story-img-accent {
    display: none;
  }

  .story-stats-pill {
    display: none;
  }
}

/* ── 360px ───────────────────────────────────────────────── */
@media (max-width: 360px) {
  :root {
    --container-pad: 12px;
  }

  .hero-slide-headline {
    font-size: 1.6rem;
  }

  .section-title {
    font-size: var(--text-2xl);
  }
}

/* ── Large Screens ───────────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --container-pad: 48px;
  }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .site-header,
  .mobile-menu,
  .cursor-dot,
  .cursor-ring,
  #page-loader,
  .hero-canvas {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }
}

/* ── Landscape Mobile ────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    height: 100svh;
    min-height: 500px;
  }

  .hero-slide-headline {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  .hero-slide-sub {
    display: none;
  }
}

/* ── Touch device optimizations ─────────────────────────── */
@media (hover: none) {
  .offer-card-cta {
    opacity: 1;
    transform: none;
    background: var(--ttp-red);
    border-color: var(--ttp-red);
    color: #fff;
  }

  .dest-card-cta {
    opacity: 1;
    transform: none;
  }

  .offer-card:hover .offer-card-cta {
    transform: none;
  }

  /* Disable hover-only states on touch */
  .service-card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }

  .card:hover {
    transform: none;
  }
}

/* ── High contrast mode ──────────────────────────────────── */
@media (forced-colors: active) {
  .btn--primary {
    border: 2px solid ButtonText;
  }

  .nav-link::after {
    background: Highlight;
  }

  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}