/* Shared mobile safeguards for the LUICT public site and dashboard. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

@media (max-width: 900px) {
  .container {
    width: min(100% - 32px, 1180px) !important;
  }

  .top-bar-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center;
  }

  .navbar,
  .navbar-inner {
    min-height: auto !important;
  }

  .navbar-inner {
    padding: 14px 0 !important;
    flex-wrap: wrap !important;
  }

  .navbar-menu {
    z-index: 1000 !important;
    width: 100% !important;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }

  .brand,
  .navbar-brand {
    min-width: 0;
  }

  .hero {
    min-height: auto !important;
    padding: 58px 0 64px !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero h1,
  .hero-content h1 {
    font-size: clamp(38px, 11vw, 58px) !important;
    overflow-wrap: anywhere;
  }

  .hero-actions,
  .header-actions,
  .actions,
  .action-links {
    flex-wrap: wrap !important;
  }

  .hero-features {
    width: min(100% - 32px, 760px) !important;
  }

  .section {
    padding: 58px 0 !important;
  }

  .section-title,
  .services-header .section-title {
    font-size: clamp(28px, 8vw, 38px) !important;
    overflow-wrap: anywhere;
  }

  .services-grid,
  .projects-grid,
  .process-grid,
  .about-grid,
  .enquiry-grid,
  .footer-grid,
  .option-grid,
  .form-grid,
  .cards-row,
  .grid,
  .details {
    grid-template-columns: 1fr !important;
  }

  .projects-slider .project-card {
    flex-basis: 100% !important;
  }

  .project-arrow.prev {
    left: 8px !important;
  }

  .project-arrow.next {
    right: 8px !important;
  }

  .form-card,
  .form-shell,
  .panel,
  .content-card,
  .section-card {
    padding: 22px !important;
  }

  .dashboard-layout {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
  }

  .sidebar {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    padding: 18px 16px !important;
    gap: 16px !important;
  }

  .sidebar nav,
  .sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .sidebar-nav-title,
  .nav-section-title {
    grid-column: 1 / -1;
    margin: 10px 0 2px !important;
  }

  .sidebar-link,
  .nav-link {
    margin: 0 !important;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .sidebar-footer {
    margin-top: 8px !important;
  }

  .dashboard-main,
  .main {
    width: 100% !important;
    min-width: 0;
    padding: 22px 16px !important;
    overflow-x: hidden !important;
  }

  .top-header,
  .hero.request-hero,
  .request-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 24px !important;
  }

  .top-header h1,
  .hero h1 {
    overflow-wrap: anywhere;
  }

  .table-wrapper {
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 760px;
  }

  .item {
    grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) !important;
  }

  .request,
  .stat-card {
    min-width: 0;
  }

  .request-head {
    padding: 0 !important;
  }

  .actions form {
    flex-wrap: wrap;
  }

  .invoice-paper,
  .quote-paper,
  .document,
  .preview {
    max-width: 100% !important;
    overflow-x: auto;
  }
}

@media (max-width: 600px) {
  .container {
    width: min(100% - 24px, 1180px) !important;
  }

  .navbar-menu a,
  .nav-actions a {
    width: 100%;
  }

  .nav-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
  }

  .hero {
    padding: 46px 0 54px !important;
  }

  .hero h1,
  .hero-content h1 {
    font-size: clamp(34px, 12vw, 48px) !important;
  }

  .hero-actions > *,
  .header-actions > *,
  .actions > a,
  .actions > button {
    width: 100%;
    text-align: center;
  }

  .sidebar nav,
  .sidebar-nav {
    grid-template-columns: 1fr;
  }

  .sidebar-nav-title,
  .nav-section-title {
    grid-column: auto;
  }

  .dashboard-main,
  .main {
    padding: 16px 12px !important;
  }

  .top-header,
  .content-card,
  .section-card,
  .panel,
  .form-card,
  .form-shell,
  .request {
    padding: 18px !important;
  }

  .item {
    grid-template-columns: 1fr !important;
  }

  .item img,
  .current-image {
    width: 100% !important;
    height: auto;
    max-height: 240px;
    object-fit: contain;
  }

  .actions,
  .actions form,
  .action-links {
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
  }

  .actions form > *,
  .action-links > a,
  .action-links > button,
  .btn-primary,
  .btn-dark,
  .btn-danger {
    width: 100%;
    text-align: center;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }

  .whatsapp-float {
    right: 14px !important;
    bottom: 14px !important;
  }
}


@media (max-width: 900px) {
  .layout,
  .client-meta,
  .services {
    grid-template-columns: 1fr !important;
  }

  .section-head,
  .service-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}


@media (max-width: 900px) {
  .request-actions {
    grid-template-columns: 1fr !important;
  }

  .topbar-inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .service-meta,
  .meta {
    grid-template-columns: 1fr !important;
  }
}