/* =========================================================================
   PROCONCIERGE — RESPONSIVE STYLESHEET
   Mobile-first breakpoints layered on top of style.css
   ========================================================================= */

/* Ensure no horizontal scroll anywhere */
html, body { max-width: 100%; overflow-x: hidden; }

/* -------------------------------------------------------------------------
   SMALL MOBILE (< 400px)
   ------------------------------------------------------------------------- */
@media (max-width: 399.98px) {
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.55rem; }
  .pc-hero { padding: 90px 0 40px; }
  .pc-hero h1 { font-size: 1.9rem; }
  .pc-cta-strip { padding: 32px 18px; }
  .pc-info-grid { grid-template-columns: repeat(2,1fr); }
  .pc-mobile-bar a { font-size: 0.62rem; }
}

/* -------------------------------------------------------------------------
   MOBILE PORTRAIT / LANDSCAPE (< 767.98px)
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :root { --pc-header-h: 72px; }

  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }

  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.3rem; }

  .pc-topbar { display: none; }

  .pc-header .navbar-brand img { height: 32px; }

  .pc-hero { padding: 96px 0 44px; text-align: left; }
  .pc-hero h1 { font-size: 2.1rem; }
  .pc-hero p.lead { font-size: 1rem; }
  .pc-hero-panel { padding: 18px; margin-top: 30px; }

  .pc-page-hero { padding: 46px 0 30px; }
  .pc-page-hero h1 { font-size: 1.9rem; }

  .pc-dest-card { height: 300px; }

  /* Keep every product image in the same landscape format on mobile. */
  .pc-card-img { aspect-ratio: 4 / 3; }

  .pc-concierge-media img { min-height: 240px; }
  .pc-about-media { max-width: 100%; height: 250px; }
  .pc-about-media img { min-height: 0; }

  .pc-cta-strip { padding: 40px 24px; }
  .pc-cta-actions { flex-direction: column; }
  .pc-cta-actions .btn-pc { width: 100%; }

  .pc-form-card { padding: 22px; }

  /* Sidebar inquiry form should flow normally below content on small screens. */
  #pcInquiryForm { position: static !important; top: auto !important; }

  .pc-toc { position: static; margin-bottom: 30px; }

  /* Mobile sticky contact bar visible */
  .pc-mobile-bar { display: block; }

  .pc-back-top { bottom: 84px; right: 16px; width: 42px; height: 42px; }

  .pc-steps-row::before { display: none; }
}

/* -------------------------------------------------------------------------
   TABLET PORTRAIT (768px – 991.98px)
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pc-hero h1 { font-size: 2.5rem; }
  .pc-dest-card { height: 320px; }
  .pc-mobile-bar { display: block; }
  .pc-back-top { bottom: 84px; }
}

/* -------------------------------------------------------------------------
   TABLET LANDSCAPE / SMALL LAPTOP (992px – 1199.98px)
   ------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pc-hero h1 { font-size: 2.8rem; }
}

/* -------------------------------------------------------------------------
   DESKTOP (>= 1200px)
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .container { padding: 0 32px; }
}

/* -------------------------------------------------------------------------
   LARGE DESKTOP (>= 1400px)
   ------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  .pc-hero h1 { font-size: 3.4rem; }
}

/* -------------------------------------------------------------------------
   Touch target enforcement (44px min) on all interactive mobile elements
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .btn-pc, .form-control, .form-select, .pc-icon-btn, .nav-link, .accordion-button, .dropdown-item {
    min-height: 44px;
  }
}

/* Prevent layout shift: reserve image ratio boxes already handled via aspect-ratio in style.css */

/* Reduced motion already handled globally in style.css */