/* Pelion Stones — shared mobile / responsive styles */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

header.ps-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

header.ps-site-header .ps-logo-link {
  flex: 0 0 auto;
}

header.ps-site-header .ps-logo {
  display: block;
  height: 50px !important;
  width: auto !important;
  max-width: none;
  max-height: 50px;
  object-fit: contain;
}

.ps-logo--footer {
  display: block;
  height: 34px !important;
  width: auto !important;
  max-width: none;
}

.ps-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid oklch(52% 0.13 70);
  border-radius: 999px;
  background: transparent;
  color: oklch(52% 0.13 70);
  cursor: pointer;
  flex-shrink: 0;
}

.ps-nav-toggle svg {
  display: block;
}

.ps-nav-toggle[aria-expanded="true"] .ps-nav-icon-open {
  display: none;
}

.ps-nav-toggle[aria-expanded="false"] .ps-nav-icon-close,
.ps-nav-toggle:not([aria-expanded="true"]) .ps-nav-icon-close {
  display: none;
}

.ps-nav-toggle[aria-expanded="true"] .ps-nav-icon-close {
  display: block;
}

@media (max-width: 900px) {
  .ps-nav-toggle {
    display: inline-flex;
  }

  header.ps-site-header > div {
    gap: 12px !important;
    padding: 12px 16px !important;
    flex-wrap: nowrap !important;
  }

  header.ps-site-header > div > a img,
  header.ps-site-header .ps-logo {
    height: 40px !important;
    max-height: 40px;
  }

  #ps-main-nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 16px 16px !important;
    background: oklch(99% 0.004 75);
    border-bottom: 1px solid oklch(89% 0.014 70);
    box-shadow: 0 12px 28px oklch(20% 0.02 50 / 0.12);
  }

  header.ps-nav-open #ps-main-nav {
    display: flex !important;
  }

  #ps-main-nav > a {
    padding: 14px 8px !important;
    border-bottom: 1px solid oklch(92% 0.01 70) !important;
    font-size: 15px !important;
  }

  #ps-main-nav > a:last-child {
    border-bottom: 0 !important;
  }

  header.ps-site-header > div > div {
    margin-left: auto;
    gap: 8px !important;
  }

  header.ps-site-header a[href^="tel:"] {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .ps-hero {
    height: min(72vh, 520px) !important;
    min-height: 420px !important;
  }

  .ps-hero > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 16px !important;
  }

  .ps-section,
  .ps-pad {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .ps-section-lg {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .ps-grid-2,
  .ps-grid-about,
  .ps-grid-footer,
  .ps-grid-contact {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .ps-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .ps-grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  #pelionstones-stats .ps-grid-4,
  #pelionstones-stats [style*="repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }

  .ps-masonry {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 160px !important;
    gap: 10px !important;
  }

  .ps-masonry > img[style*="grid-row:span 2"],
  .ps-masonry > img[style*="grid-row: span 2"] {
    grid-row: span 1 !important;
  }

  .ps-img-lg {
    height: 280px !important;
  }

  .ps-img-md {
    height: 240px !important;
  }

  .ps-img-sm {
    height: 180px !important;
  }

  .ps-product-jump > div,
  section.ps-product-jump > div {
    gap: 10px 14px !important;
    padding: 12px 16px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  section.ps-product-jump {
    top: 64px !important;
  }

  .ps-form-card {
    padding: 24px 18px !important;
  }

  .ps-order-reset,
  [style*="order:1"],
  [style*="order: 1"],
  [style*="order:2"],
  [style*="order: 2"] {
    order: 0 !important;
  }

  iframe[style*="height:440px"],
  iframe[style*="height: 440px"] {
    height: 280px !important;
  }

  iframe[style*="height:340px"],
  iframe[style*="height: 340px"],
  iframe[style*="height:280px"],
  iframe[style*="height: 280px"] {
    height: 240px !important;
  }

  /* Fallbacks for pages not yet classed (DC may add spaces after :) */
  [style*="height:640px"],
  [style*="height: 640px"] {
    height: min(72vh, 520px) !important;
    min-height: 420px !important;
  }

  [style*="grid-template-columns:0.9fr"],
  [style*="grid-template-columns: 0.9fr"],
  [style*="grid-template-columns:0.85fr"],
  [style*="grid-template-columns: 0.85fr"],
  [style*="grid-template-columns:1.15fr"],
  [style*="grid-template-columns: 1.15fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.3fr"],
  [style*="grid-template-columns: 1.3fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  [style*="grid-auto-rows:220px"],
  [style*="grid-auto-rows: 220px"] {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 160px !important;
    gap: 10px !important;
  }

  [style*="96px 32px"],
  [style*="72px 32px"],
  [style*="64px 32px"],
  [style*="56px 32px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  [style*="96px 32px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  [style*="height:520px"],
  [style*="height: 520px"] {
    height: 280px !important;
  }

  [style*="height:360px"],
  [style*="height: 360px"] {
    height: 240px !important;
  }

  [style*="padding:44px"],
  [style*="padding: 44px"] {
    padding: 24px 18px !important;
  }
}

@media (max-width: 560px) {
  .ps-grid-4,
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  #pelionstones-stats .ps-grid-4,
  #pelionstones-stats [style*="repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  .ps-masonry,
  [style*="grid-auto-rows:220px"],
  [style*="grid-auto-rows: 220px"] {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 220px !important;
  }

  .ps-masonry > img[style*="grid-column:span 2"],
  .ps-masonry > img[style*="grid-column: span 2"],
  [style*="grid-auto-rows"] > img[style*="grid-column:span 2"],
  [style*="grid-auto-rows"] > img[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }

  header.ps-site-header > div > div > a[href^="tel:"] {
    display: none !important;
  }

  .ps-hero,
  [style*="height:640px"],
  [style*="height: 640px"] {
    height: auto !important;
    min-height: 420px !important;
    padding: 72px 0 56px !important;
  }

  [style*="font-size:44px"],
  [style*="font-size: 44px"] {
    font-size: 34px !important;
  }
}

@media (max-width: 900px) {
  .ps-lightbox__caption {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

#ai-business-facts {
  padding: 40px 32px 64px;
}
