/* OTTOPUS · responsive.css · all @media breakpoints in one place
   Breakpoints: sm 600 · md 720 · lg 880 · xl 1024 · 2xl 1440 */

@media (min-width: 600px) { .boat-specs { grid-template-columns: repeat(3, 1fr); } .book-cabin-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .crew-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .pillar  { padding: clamp(40px, 4vw, 64px) clamp(20px, 2vw, 32px); }
  .pillar + .pillar { box-shadow: -1px 0 0 var(--hairline); }
  .t-day { grid-template-columns: 96px 1fr 180px; align-items: baseline; gap: 24px; padding: clamp(16px, 1.6vw, 22px) 4px; }
  .t-day__head { flex-direction: column; gap: 4px; align-items: flex-start; }
  .t-day__tag  { text-align: right; }
  .stages { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
  .g-cell:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
  .footer__brand-row { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .included-grid { grid-template-columns: 1fr 1fr; }
  .brand-story__three { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 880px) {
  .nav__links { display: flex; }
  .nav__burger { display: none !important; }
  .mobile-menu { display: none !important; }
  .hero        { padding: 100px 0 48px; }
  .hero__bottom { grid-template-columns: 1fr auto; align-items: end; gap: 32px; }
  .promo { aspect-ratio: 21 / 9; }
  .profile { grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
  .profile--reverse .profile__photo { order: 2; }
  .profile--reverse .profile__text  { order: 1; }
  .boat-specs { grid-template-columns: repeat(4, 1fr); }
  .budget-wrap { grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 64px); }
}
@media (min-width: 920px) {
  .book-grid { grid-template-columns: 5fr 7fr; }
}
@media (min-width: 960px) {
  .boat-layout { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) { .crew-grid { grid-template-columns: repeat(4, 1fr); } }

@media print {
  .nav, .hero__media, .lightbox, video { display: none; }
  .hero { color: var(--ink); }
  body  { background: #fff; }
}