/* ════════════════════════════════
   RESPONSIVE — tablet & mobile
════════════════════════════════ */

/* ── Tablet ≤ 1100px ── */
@media (max-width: 1100px) {
  #cards-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  #card1 { grid-column: 1; grid-row: 1; min-height: 360px; }
  #card2 { grid-column: 2; grid-row: 1; min-height: 240px; }
  #card5 { grid-column: 1; grid-row: 2; min-height: 360px; }
  #card4 { grid-column: 2; grid-row: 2; min-height: 240px; }
  #card3 { grid-column: 1 / 3; grid-row: 3; height: 260px; }

  #detail-grid  { grid-template-columns: 1fr; }
  #detail-image { height: 420px; }

  #hero-headline    { font-size: 66px; }
  #about-heading-h2 { font-size: 50px; }
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
  #page-wrap { padding: 12px 14px 56px; }

  /* Hero */
  #hero-card        { height: 580px; border-radius: 24px; }
  #hero-headline    { font-size: 52px; line-height: 1; }
  #hero-text-block  { bottom: 138px; left: 24px; }
  #hero-nav         { top: 20px; }
  /* 4 links don't fit at full size on narrow screens */
  #hero-nav .nav-link { padding: 8px 12px; font-size: 12px; }
  #hero-tags        { display: none; }
  #hero-contact     { display: none; }

  /* Booking bar */
  #booking-bar        { padding: 14px 18px; }
  .bk-label           { font-size: 9px; margin-bottom: 3px; }
  .bk-val             { font-size: 13px; }
  #booking-field-3    { display: none; }
  #booking-cta        { padding-left: 10px; }
  .btn-book           { padding: 10px 16px; font-size: 11px; }

  /* Cards — single column */
  #cards-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  #card1,
  #card2,
  #card3,
  #card4,
  #card5 {
    grid-column: 1;
    grid-row: auto;
    min-height: 260px;
    height: auto;
  }

  #card3 { height: 220px; }

  /* Detail */
  #detail-grid      { grid-template-columns: 1fr; }
  #detail-image     { height: 320px; }

  /* Typography */
  #about-heading-h2 { font-size: 40px; }
  #pricing-heading  { font-size: 44px; }
  #detail-right-h2  { font-size: 38px; }
  .stat-num         { font-size: 36px; }
}