/* ============================================================
   Sinjemore — responsive.css
   Version: 2.0 — February 2026
   ============================================================ */

/* Wide (1280px+) */
@media (min-width: 1280px) {
  :root {
    --font-size-h1: 3rem;
    --font-size-h2: 2rem;
  }
}

/* Tablet and below (max 1023px) */
@media (max-width: 1023px) {
  :root {
    --section-padding: 48px 24px;
  }

  .container { padding: 0 24px; }
  .nav__inner { padding: 0 24px; }

  .grid-3 { grid-template-columns: 1fr 1fr; }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer { padding: 40px 24px 0; }
  .page-header { padding: 40px 24px 32px; }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
  :root {
    --font-size-h1:   2rem;
    --font-size-h2:   1.5rem;
    --font-size-h3:   1.15rem;
    --section-padding: 40px 16px;
  }

  .container { padding: 0 16px; }
  .nav__inner { padding: 0 16px; }

  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__mobile-menu { padding: 16px 16px 24px; }

  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }

  .page-header { padding: 32px 16px 24px; }

  .footer { padding: 40px 16px 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }

  .map-embed { height: 280px; border-radius: var(--radius-sm); }

  .btn { width: 100%; text-align: center; }

  .section__header { margin-bottom: 28px; }

  .intro { grid-template-columns: 1fr; }
  .intro__image img { height: 280px; }

  .fleet-detail__grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-layout { grid-template-columns: 1fr; }

  .booking-steps { grid-template-columns: 1fr; gap: 24px; }
  .booking-selector { flex-direction: column; }
  .booking-boat-btn,
  .booking-route-btn { width: 100%; text-align: center; }

  .card__actions { flex-direction: column; }
  .card__actions .btn { width: 100%; text-align: center; }

  /* Carousel */
  .carousel__img            { height: 220px; }
  .carousel__img--enlarged  { height: 320px; }
  .carousel__btn            { width: 36px; height: 36px; font-size: 1.3rem; }
  .fleet-detail__carousel .carousel__img           { height: 260px; }
  .fleet-detail__carousel .carousel__img--enlarged { height: 380px; }

  /* WhatsApp */
  .whatsapp-float {
    bottom: 20px;
    right: 16px;
    padding: 12px;
    max-width: 52px;
  }
  .whatsapp-float__label { display: none; }
}

/* Print */
@media print {
  .nav, .footer, .btn, .whatsapp-float { display: none; }
  body { font-size: 12pt; color: #000; }
  .container { max-width: 100%; padding: 0; }
}