/* Tour package posters preserve their original proportions. */
.tour-design-heading { max-width: 680px; margin: 0 auto 28px; text-align: center; }
.tour-design-heading h2 { margin: 0 0 12px; font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.3; }
body.about-page main .tour-design-heading :is(h2, p) { text-align: center !important; margin-inline: auto; }
.tour-design-heading p { color: var(--text-muted); line-height: 1.75; }
.tour-design-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tour-design-card { min-width: 0; aspect-ratio: 4 / 5; border: 1px solid #C5EAF3; border-radius: 18px; background: linear-gradient(150deg, #F4FCFE, #EAFAFE); overflow: hidden; }
.tour-design-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tour-options-heading { margin-top: 64px; }
.tour-card h2 { font-size: 21px; }
.tour-note { padding: 28px; border-radius: 18px; background: #F4FCFE; }
@media (max-width: 768px) {
  .tour-design-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 440px; margin-inline: auto; }
  .tour-options-heading { margin-top: 44px; }
  .tour-note { padding: 24px; }
}

/* Compact mobile layout: swipe through poster cards instead of a long stack. */
@media (max-width: 768px) {
  body.about-page .about-hero { padding: 36px 0 40px; }
  body.about-page .about-hero h1 { font-size: clamp(1.9rem, 7.5vw, 2.5rem); line-height: 1.2; }
  body.about-page .hero-copy { font-size: 15px; line-height: 1.75; }
  body.about-page .tour-section { padding: 32px 0 44px; }
  body.about-page .tour-design-heading { margin-bottom: 20px; }
  body.about-page .tour-design-heading h2 { font-size: 24px; line-height: 1.3; }
  body.about-page main .tour-design-heading p { margin: 0; font-size: 14px; line-height: 1.7; }
  body.about-page .tour-design-grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: min(82%, 300px); gap: 14px;
    width: 100%; max-width: none; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; padding: 0 0 14px;
    scrollbar-width: thin; scrollbar-color: #02A8D4 #EAFAFE;
  }
  body.about-page .tour-design-card { scroll-snap-align: start; border-radius: 16px; }
  body.about-page .tour-options-heading { margin-top: 32px; }
  body.about-page .tour-grid { gap: 14px; }
  body.about-page .tour-card { padding: 22px; width: 100%; min-width: 0; }
  body.about-page .tour-card > i { margin-bottom: 14px; width: 42px; height: 42px; font-size: 21px; }
  body.about-page main .tour-card h2 { font-size: 20px; line-height: 1.4; margin: 0 0 10px; text-align: left !important; }
  body.about-page main .tour-card p { font-size: 14px; line-height: 1.75; margin: 0 0 18px; text-align: left !important; }
  body.about-page .tour-card .btn { width: 100%; min-height: 48px; padding: 12px 16px; white-space: normal; text-align: center; }
  body.about-page .tour-note { margin-top: 28px; padding: 22px; }
  body.about-page main .tour-note h2 { font-size: 21px; line-height: 1.4; margin: 0 0 12px; }
  body.about-page main .tour-note p { font-size: 14px; line-height: 1.8; margin-bottom: 16px; }
}

/* Center and balance the tour page introduction on phones in both languages. */
@media (max-width: 768px) {
  body.tour-page .about-hero { padding: 36px 0; }
  body.tour-page .about-hero-grid { display: block; padding-inline: 22px; }
  body.tour-page .about-hero-grid > div { width: 100%; min-width: 0; }
  body.tour-page main .about-hero :is(.eyebrow, h1, .hero-copy) {
    text-align: center !important;
    text-align-last: auto;
    margin-inline: auto;
    hyphens: none;
  }
  body.tour-page main .about-hero .eyebrow {
    width: auto; max-width: 100%; margin-bottom: 12px;
    font-size: 12px; line-height: 1.5; letter-spacing: .1em;
  }
  body.tour-page main .about-hero h1 {
    width: 100%; max-width: 19ch; margin-bottom: 16px;
    font-size: clamp(1.8rem, 7.2vw, 2.3rem); line-height: 1.25;
    letter-spacing: -.025em; text-wrap: balance;
  }
  body.tour-page main .about-hero .hero-copy {
    max-width: 38ch; margin-bottom: 0; padding: 0;
    font-size: 15px; line-height: 1.8; text-wrap: pretty;
  }
  body.tour-page main .tour-design-heading :is(h2, p) {
    width: 100%; max-width: 34ch; text-align: center !important;
    text-align-last: auto; margin-inline: auto; text-wrap: balance;
  }
}