/**
 * HAIBO — package cards & misc mobile (destinations: destinations-mobile.css)
 */

/* ─── Phones ─── */
@media (max-width: 767px) {
  .py-28 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .px-8,
  .md\:px-20 {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  .section-title {
    font-size: clamp(1.45rem, 5vw, 1.85rem) !important;
    line-height: 1.15 !important;
  }

  /* Package cards — see packages-grid.css */

  #detail-root section {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  #detail-root section.py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  #detail-root section:last-of-type {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  #detail-root .page-hero .page-heading {
    font-size: clamp(1.5rem, 6.5vw, 2.1rem) !important;
    overflow-wrap: break-word;
  }

  #detail-root .page-hero .text-xl {
    font-size: 0.9rem !important;
  }

  #detail-root .page-hero .leading-8 {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }

  #detail-root .page-hero .flex.flex-wrap.gap-3 span {
    font-size: 0.68rem !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dest-experience-card {
    padding: 0.9rem !important;
  }

  .dest-experience-card h4 {
    font-size: 0.88rem !important;
  }

  .dest-experience-card p {
    font-size: 0.78rem !important;
  }

  .gallery.grid.grid-cols-2 {
    gap: 0.5rem !important;
  }
}

/* Tablet — package grid in packages-grid.css */

/* WhatsApp + safe area */
@media (max-width: 767px) {
  body:not(:has(footer.site-footer)) {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body {
    overflow-x: hidden;
  }

  body:not(:has(footer.site-footer)) .whatsapp-float {
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem)) !important;
    right: max(0.75rem, env(safe-area-inset-right, 0.75rem)) !important;
    width: 2.85rem !important;
    height: 2.85rem !important;
    z-index: 45;
  }

  .whatsapp-float.floating {
    animation: none;
  }

  #detail-root > section:last-child,
  main section.py-20:last-of-type {
    scroll-margin-bottom: 5.5rem;
  }

  /* Gallery cards — gallery-page.css */
}

/* Admin */
@media (max-width: 767px) {
  #admin-login-gate .admin-login-card {
    padding: 1.25rem 1rem;
    margin: 0 0.5rem;
    width: calc(100% - 1rem);
    max-width: 22rem;
  }

  .admin-main {
    padding: 1rem !important;
  }

  .admin-card-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .admin-thumb {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
  }

  .admin-glass {
    padding: 1rem !important;
  }
}