/* Lipru Healthcare — shared fluid responsive layer
   Safety-first overrides: preserves page structure and all existing features. */
:root {
  --lipru-page-gutter: clamp(14px, 3.5vw, 32px);
}
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
img, picture, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }
iframe { max-width: 100%; }
button, input, select, textarea { max-width: 100%; font: inherit; }
input, select, textarea { min-width: 0; }
h1, h2, h3, h4, p, a, button, label, td, th { overflow-wrap: anywhere; }
main, header, footer, section, nav, article, aside, form,
.container, .nav-container, .section-container, .content, .main,
.hero-grid, .about-grid, .booking-layout, .contact-grid,
.benefit-grid, .services-grid, .packages-grid, .package-grid,
.footer-grid, .form-grid, .stats-grid, .content-card, .table-wrap {
  min-width: 0;
}
.container, .nav-container, .section-container {
  width: min(100% - (var(--lipru-page-gutter) * 2), 1240px);
  margin-inline: auto;
}
table { max-width: 100%; }
.table-wrap, .table-container, .table-responsive, .overflow-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
:focus-visible { outline-offset: 3px; }

/* Tablet and compact laptop */
@media (max-width: 900px) {
  .container, .nav-container, .section-container {
    width: min(100% - 32px, 100%);
  }
  .hero-grid, .about-grid, .booking-layout, .contact-grid,
  .benefit-grid, .services-grid, .packages-grid, .package-grid,
  .footer-grid, .form-grid {
    min-width: 0;
  }
  .hero-grid > *, .about-grid > *, .booking-layout > *,
  .contact-grid > *, .benefit-grid > *, .services-grid > *,
  .packages-grid > *, .package-grid > *, .footer-grid > *,
  .form-grid > * { min-width: 0; }
}

/* Phones */
@media (max-width: 600px) {
  :root { --lipru-page-gutter: 16px; }
  .container, .nav-container, .section-container {
    width: calc(100% - 32px);
  }
  .hero, .section, .booking-section {
    scroll-margin-top: 76px;
  }
  .hero h1, .hero-copy h1 {
    font-size: clamp(29px, 8vw, 40px);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }
  .section h2, .content-card h2 {
    font-size: clamp(21px, 6vw, 30px);
    line-height: 1.2;
  }
  .hero-actions, .cta-actions, .form-actions {
    flex-wrap: wrap;
    min-width: 0;
  }
  .hero-actions > *, .cta-actions > *, .form-actions > * {
    min-width: 0;
    max-width: 100%;
  }
  .form-row, .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .form-group.full-width, .detail-field.full { grid-column: auto !important; }
  .booking-form-card, .booking-info, .contact-form, .contact-info,
  .location-card, .content-card { min-width: 0; }
  .table-wrap, .table-container, .table-responsive, .overflow-table {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .table-wrap table, .table-container table, .table-responsive table,
  .overflow-table table { min-width: 620px; }
  .details-panel, .modal, .login-card {
    width: min(100%, 100%);
    max-width: 100%;
  }
}

/* Very narrow phones */
@media (max-width: 360px) {
  :root { --lipru-page-gutter: 12px; }
  .container, .nav-container, .section-container {
    width: calc(100% - 24px);
  }
  .navbar { gap: 8px; }
  .logo { min-width: 0; max-width: calc(100% - 58px); }
  .hero h1, .hero-copy h1 { font-size: clamp(27px, 8vw, 32px); }
  .btn, button { max-width: 100%; }
  .stat-card { min-width: 0; }
}

/* Admin dashboard — fluid cards, safe tables and usable dialogs */
.admin-page, .admin-layout, .dashboard, .main, .sidebar,
.top-header, .stats-grid, .content-card, .toolbar { min-width: 0; }
.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr));
}
.stat-card, .content-card, .card-header, .toolbar,
.search-input, .filter-select { min-width: 0; max-width: 100%; }
.main { max-width: 100%; }
.table-wrap { width: 100%; }
.details-backdrop { padding: clamp(8px, 2vw, 24px); }
.details-panel {
  width: min(100%, 760px);
  max-width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.details-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
@media (max-width: 750px) {
  .main { width: 100%; }
  .top-header { flex-wrap: wrap; gap: 12px; }
  .toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
  .toolbar > * { min-width: 0; }
}
@media (max-width: 420px) {
  .main { padding-inline: 12px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: 13px; }
  .stat-card h2 { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}