/* ============================================================
   RESPONSIVE — responsive.css
   Mobile-first breakpoints
   Breakpoints:
     xl:  1200px+  (large desktop)
     lg:  1024px   (small desktop / landscape tablet)
     md:   768px   (tablet)
     sm:   480px   (large phone)
     xs:   360px   (small phone)
   ============================================================ */

/* =======================
   LARGE DESKTOP  (1200px+)
   ======================= */
@media (min-width: 1200px) {
  :root { --section-py: 96px; }
}


/* =======================
   SMALL DESKTOP / TABLET LANDSCAPE  (max 1024px)
   ======================= */
@media (max-width: 1024px) {

  /* Carousel — show 3 cards */
  .featured-trips .carousel__track .tour-card,
  .trending .carousel__track .tour-card {
    min-width: calc((100% - 40px) / 3.1);
  }

  /* Footer */
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand__desc { max-width: 100%; }
  .newsletter-form { max-width: 400px; }

  /* About */
  .about__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  /* Boat banner */
  .boat-banner__image { width: 300px; height: 210px; }

  /* Cultural Identity */
  .cultural-identity__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .cultural-identity__img-main { width: min(100%, 360px); }

  /* Cuisine */
  .cuisine__grid { grid-template-columns: repeat(2, 1fr); }

  /* Gallery bento — simplify on smaller desktop */
  .gallery__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 240px 240px;
  }
  .gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .gallery-item:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 2; }
  .gallery-item:nth-child(3) { grid-column: 5 / 7; grid-row: 1 / 2; }
  .gallery-item:nth-child(4) { grid-column: 3 / 5; grid-row: 2 / 3; }
  .gallery-item:nth-child(5) { grid-column: 5 / 6; grid-row: 2 / 3; }
  .gallery-item:nth-child(6) { grid-column: 6 / 7; grid-row: 2 / 3; }

  /* Cultural experiences */
  .cultural-exp__grid { grid-template-columns: repeat(2, 1fr); }
  .exp-card { height: 340px; }
}


/* =======================
   TABLET  (max 768px)
   ======================= */
@media (max-width: 768px) {

  :root {
    --section-py: 72px;
    --container-pad: 24px;
  }

  /* Header */
  .site-nav { display: none; }
  .site-header__hamburger { display: flex; }
  .site-nav--mobile { display: flex; }

  /* Hero */
  .hero__stats { display: none; }
  .hero__scroll { display: none; }
  .hero__content { padding-top: 80px; }

  /* Plan Holiday */
  .plan-holiday__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
  }
  .arch-cards {
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .arch-cards::-webkit-scrollbar { display: none; }
  .arch-card__frame { width: 110px; height: 158px; }

  /* About */
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }
  .about__img-sm { right: -10px; }
  .about__badge { left: -10px; }
  .about__dots { display: none; }

  /* Featured Trips + Trending */
  .featured-trips .carousel__track .tour-card,
  .trending .carousel__track .tour-card {
    min-width: calc(80vw - 40px);
  }
  .featured-trips__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  /* Boat Banner */
  .boat-banner__inner {
    flex-wrap: wrap;
    gap: var(--sp-7);
  }
  .boat-banner__image {
    width: 100%;
    height: 220px;
    order: -1;
  }
  .combo-badge { margin: 0 auto; }

  /* Attractions */
  .attractions__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .attractions__left { position: static; }
  .attractions__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Testimonials */
  .testimonials__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .testimonials__image-wrap { height: 280px; }

  /* Travel Guides */
  .travel-guides__grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .footer-brand { grid-column: auto; }
  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
  }

  /* Cultural identity */
  .cultural-identity__grid { grid-template-columns: 1fr; gap: var(--sp-12); }
  .cultural-identity__img-main { width: min(100%, 380px); margin-inline: auto; }
  .cultural-identity__badge { left: 0; }
  .lantern-group { right: 0; }
  .cultural-pillars { grid-template-columns: 1fr; }

  /* Cuisine */
  .cuisine__grid { grid-template-columns: 1fr; }
  .cuisine-note { flex-direction: column; text-align: center; }
  .cuisine-note .btn { width: 100%; justify-content: center; }

  /* Gallery bento → 2-col stack */
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px 220px;
  }
  .gallery-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
  .gallery-item:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
  .gallery-item:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }
  .gallery-item:nth-child(4) { grid-column: 1 / 2; grid-row: 3 / 4; }
  .gallery-item:nth-child(5) { grid-column: 2 / 3; grid-row: 3 / 4; }
  .gallery-item:nth-child(6) { display: none; }

  /* Lantern banner */
  .lantern-banner__dates { position: static; margin-top: var(--sp-7); flex-direction: row; flex-wrap: wrap; }

  /* Cultural experiences */
  .cultural-exp__grid { grid-template-columns: 1fr; }
  .exp-card { height: 320px; }
}


/* =======================
   LARGE PHONE  (max 480px)
   ======================= */
@media (max-width: 480px) {

  :root { --section-py: 56px; }

  /* Hero */
  .hero__headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0;
  }

  .hero__headline > * {
    margin: 0 !important;
  }

  .hero__headline .hero__script-overlay {
    position: static;
    display: block;
    width: 100%;
    line-height: 1.15 !important;
    font-size: 2rem !important;
    transform: none !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }
  .hero__actions { flex-direction: column; align-items: flex-start; }

  /* Display headings: boost size on small phones so inner counters stay clear */
  .plan-holiday__heading .section-title,
  .about__text .section-title,
  .featured-trips .section-title,
  .trending .section-title,
  .cultural-identity__title {
    font-size: clamp(3.35rem, 9.2vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: 0.02em;
  }

  /* Arch cards */
  .arch-card__frame { width: 96px; height: 138px; }
  .arch-card__name { font-size: var(--fs-12); }
  .arch-card__from { font-size: var(--fs-11); }

  /* Attractions */
  .attractions__cards {
    grid-template-columns: 1fr;
  }

  /* Footer legal */
  .footer-legal-links { flex-direction: column; gap: var(--sp-2); align-items: center; }

  /* Cultural pillars — single column */
  .cultural-pillars { grid-template-columns: 1fr; }

  /* Gallery — single col */
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 220px);
  }
  .gallery-item { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .gallery-item:nth-child(6) { display: block; }

  /* Lantern banner actions */
  .lantern-banner__actions { flex-direction: column; }
  .lantern-banner__actions .btn { width: 100%; text-align: center; }

  /* Cuisine note */
  .cuisine-note { padding: var(--sp-5); }
}


/* =======================
   SMALL PHONE  (max 360px)
   ======================= */
@media (max-width: 360px) {
  .hero__title-line {
    font-size: 2.6rem;
  }
  .hero__script-overlay {
    font-size: 1.7rem;
  }
}