/*
 * Jolstra Responsive Layer v1.0
 * Global mobile/tablet hardening for iPhone, Android, iPad and compact laptops.
 * Loaded after the normal Vite bundle so it can safely correct page-specific CSS.
 */

:root {
  --j-mobile-gutter: clamp(15px, 4vw, 28px);
  --j-touch-target: 44px;
  --j-safe-top: env(safe-area-inset-top, 0px);
  --j-safe-right: env(safe-area-inset-right, 0px);
  --j-safe-bottom: env(safe-area-inset-bottom, 0px);
  --j-safe-left: env(safe-area-inset-left, 0px);
  --j-viewport-height: 100dvh;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 92px;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  min-height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Prevent grid/flex children from forcing horizontal overflow. */
main *,
.site-shell *,
footer * {
  min-width: 0;
  box-sizing: border-box;
}

img,
picture,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe {
  border: 0;
}

pre,
code,
kbd,
samp {
  max-width: 100%;
}

pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
}

p,
li,
dd,
td,
th,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Global page container safety. */
.container-shell,
.jseo-container,
.jl-wrap,
.legal-shell,
.tool-shell,
.config-shell,
.page-shell {
  max-width: 100%;
}

/* Mobile-friendly controls and iOS zoom prevention. */
button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

button,
[role="button"],
.button,
.jseo-btn,
.jl-btn,
.ja-button,
.ja-action {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  font-size: max(16px, 1em);
}

input,
select,
textarea,
button {
  min-height: var(--j-touch-target);
}

input[type="checkbox"],
input[type="radio"] {
  min-height: 0;
}

textarea {
  resize: vertical;
}

/* Tables should never push the viewport wider than the device. */
@media (max-width: 820px) {
  main table:not(.no-responsive-table),
  .site-shell table:not(.no-responsive-table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Sticky/fixed layers need notch awareness. */
.site-header,
.mobile-nav,
[role="dialog"],
.modal,
.dialog,
.bottom-sheet {
  padding-left: max(0px, var(--j-safe-left));
  padding-right: max(0px, var(--j-safe-right));
}

/* Header and navigation hardening. */
.site-header {
  max-width: 100vw;
}

.nav-shell {
  min-width: 0;
}

.brand-link,
.brand-logo {
  min-width: 0;
  max-width: 100%;
}

.mobile-menu-button {
  flex: 0 0 auto;
  min-width: var(--j-touch-target);
  min-height: var(--j-touch-target);
}

.mobile-nav {
  max-width: 100vw;
  max-height: calc(var(--j-viewport-height) - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(16px, var(--j-safe-bottom));
}

.mobile-nav[hidden] {
  display: none !important;
}

.mobile-nav a {
  min-height: var(--j-touch-target);
}

/* Footer must collapse cleanly even when page-specific styles are rigid. */
.site-footer,
footer {
  max-width: 100vw;
  overflow: clip;
}

.footer-grid,
.footer-main,
.footer-columns,
.footer-top {
  min-width: 0;
}

/* Known Jolstra marketing patterns. */
.jseo-actions,
.jl-hero-actions,
.jl-callout-actions,
.jl-final-actions,
.hero-actions,
.cta-actions,
.form-actions,
.config-actions {
  max-width: 100%;
}

.jseo-btn,
.jl-btn,
.button {
  white-space: normal;
  text-align: center;
}

.jseo-cta-band,
.jl-final-box,
.jl-assess-box,
.jl-logo-grid,
.jl-unifi-grid,
.jl-hero-grid,
.config-final-grid,
.commerce-final-grid {
  min-width: 0;
}

.jl-visual-frame,
.jl-floating-card,
.jl-products-float,
.jl-side-card,
.jl-case,
.jl-product,
.jl-service,
.jl-logo-box,
.jl-tech-panel,
.jl-callout-card,
.jl-unifi-box,
.jl-assess-box,
.jseo-card,
.jseo-panel,
.form-card,
.order-summary,
.commerce-summary {
  max-width: 100%;
}

/* Configurator / forms. */
.form-grid,
.config-grid,
.config-final-grid,
.commerce-final-grid,
.request-type-box,
.summary-prices,
.tool-grid {
  min-width: 0;
}

.save-solution-box,
.order-summary,
.commerce-summary {
  overflow-wrap: anywhere;
}

/* Free tools / calculators. */
.tool-field,
.tool-card,
.tool-panel,
.tool-result,
.tool-actions {
  min-width: 0;
  max-width: 100%;
}

/* Media embeds and comparison visuals. */
.case-visual,
.case-image,
.before-after,
.comparison,
.hero-media,
.media-frame {
  max-width: 100%;
  overflow: hidden;
}

/* Desktop/tablet boundary. */
@media (max-width: 1100px) {
  .container-shell {
    width: 100%;
    padding-left: clamp(20px, 3vw, 32px);
    padding-right: clamp(20px, 3vw, 32px);
  }

  .desktop-nav {
    gap: 10px;
  }

  .jl-wrap {
    width: min(100% - 48px, 1480px) !important;
  }

  .jl-products,
  .jl-services,
  .jl-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jl-hero-grid,
  .jl-unifi-grid,
  .jl-assess-box,
  .jl-final-box,
  .jl-logo-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .jseo-cta-band {
    gap: 22px;
  }
}

/* Phones + small tablets. */
@media (max-width: 820px) {
  :root {
    --j-mobile-gutter: clamp(15px, 4.5vw, 22px);
  }

  html {
    scroll-padding-top: 76px;
  }

  body {
    font-size: 16px;
  }

  .container-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: calc(var(--j-mobile-gutter) + var(--j-safe-left)) !important;
    padding-right: calc(var(--j-mobile-gutter) + var(--j-safe-right)) !important;
  }

  /* Force desktop navigation out and mobile navigation in at a safe breakpoint. */
  .desktop-nav {
    display: none !important;
  }

  .mobile-menu-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .brand-logo {
    width: min(185px, 53vw) !important;
    height: auto !important;
  }

  .mobile-nav .container-shell {
    display: grid !important;
    gap: 4px;
    padding-top: 10px;
    padding-bottom: max(18px, var(--j-safe-bottom));
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 4px;
  }

  .mobile-nav .button {
    justify-content: center;
    margin-top: 8px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Common section spacing: enough breathing room without desktop-sized gaps. */
  main section,
  .jseo-section,
  .jl-section {
    max-width: 100%;
  }

  .jl-wrap {
    width: auto !important;
    max-width: none !important;
    margin-left: calc(var(--j-mobile-gutter) + var(--j-safe-left)) !important;
    margin-right: calc(var(--j-mobile-gutter) + var(--j-safe-right)) !important;
  }

  .jl-hero {
    padding-top: clamp(96px, 20vw, 118px) !important;
    padding-bottom: 30px !important;
  }

  .jl-hero-copy h1 {
    font-size: clamp(2.35rem, 11vw, 3.7rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  .jl-hero-copy p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .jl-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  .jl-head h2 {
    font-size: clamp(1.9rem, 8vw, 2.7rem) !important;
  }

  .jl-services,
  .jl-cases,
  .jl-products,
  .jl-app-cloud,
  .jl-points,
  .jl-logo-grid,
  .jl-assess-box,
  .jl-final-box,
  .jl-unifi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .jl-section {
    padding: 52px 0 !important;
  }

  .jl-service,
  .jl-case-body,
  .jl-logo-box,
  .jl-tech-panel,
  .jl-callout-card,
  .jl-unifi-box,
  .jl-assess-box,
  .jl-final-box {
    padding-left: clamp(18px, 5vw, 24px) !important;
    padding-right: clamp(18px, 5vw, 24px) !important;
  }

  .jl-product {
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .jl-product img {
    width: 56px !important;
    height: 56px !important;
  }

  .jl-floating-card,
  .jl-products-float,
  .jl-side-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .jl-side-card {
    margin-bottom: 16px !important;
  }

  .jl-products-float {
    margin-top: 16px !important;
  }

  .jl-visual-frame {
    padding: clamp(12px, 4vw, 18px) !important;
    border-radius: 24px !important;
  }

  .jl-visual-frame img {
    border-radius: 17px !important;
  }

  .jl-hero-actions,
  .jl-final-actions,
  .jseo-actions,
  .cta-actions,
  .form-actions,
  .config-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .jl-btn,
  .jseo-btn,
  .hero-actions .button,
  .cta-actions .button,
  .form-actions .button,
  .config-actions .button {
    width: 100% !important;
    min-height: 50px;
    justify-content: center;
  }

  .jl-trust {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .jl-strip-box {
    align-items: flex-start !important;
  }

  .jl-strip-box h2 {
    width: 100%;
    white-space: normal !important;
  }

  .jl-app-cloud,
  .jl-products-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jl-stats-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .jl-case-visual {
    aspect-ratio: 4 / 3 !important;
  }

  /* Generic marketing patterns. */
  .jseo-cta-band {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 18px !important;
  }

  .jseo-section-head,
  .section-head,
  .page-head,
  .hero-grid,
  .content-grid,
  .cards-grid,
  .pricing-grid,
  .case-grid,
  .service-grid,
  .contact-grid,
  .assessment-grid,
  .feature-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Configurator. */
  .config-final-grid,
  .commerce-final-grid,
  .form-grid,
  .config-grid,
  .tool-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .order-summary,
  .commerce-summary {
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  .request-type-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .summary-prices {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Footer. */
  .footer-grid,
  .footer-main,
  .footer-columns,
  .footer-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Dialogs become comfortable bottom sheets on phones. */
  [role="dialog"],
  .modal-panel,
  .dialog-panel,
  .bottom-sheet {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(var(--j-viewport-height) - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Narrow iPhones / small Android devices. */
@media (max-width: 480px) {
  :root {
    --j-mobile-gutter: 15px;
  }

  .brand-logo {
    width: min(165px, 50vw) !important;
  }

  .jl-hero-copy h1 {
    font-size: clamp(2.15rem, 11.5vw, 3rem) !important;
  }

  .jl-kicker,
  .jseo-kicker,
  .eyebrow {
    max-width: 100%;
    white-space: normal !important;
  }

  .jl-service,
  .jl-case-body,
  .jl-logo-box,
  .jl-tech-panel,
  .jl-callout-card,
  .jl-unifi-box,
  .jl-assess-box,
  .jl-final-box {
    border-radius: 20px !important;
  }

  .jl-product {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  .jl-product > span:last-child {
    grid-column: 2;
    justify-self: start;
  }

  .jl-app-cloud,
  .jl-products-logos {
    gap: 10px !important;
  }

  .jl-app-cloud a {
    padding: 14px 8px !important;
  }

  .jseo-btn,
  .jl-btn,
  .button {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .form-card,
  .order-summary,
  .commerce-summary,
  .tool-card,
  .tool-panel {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Extra-narrow devices / zoomed layouts. */
@media (max-width: 360px) {
  :root {
    --j-mobile-gutter: 12px;
  }

  .brand-logo {
    width: 145px !important;
  }

  .jl-hero-copy h1 {
    font-size: 2rem !important;
  }

  .jl-chip {
    font-size: .78rem !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Landscape phones: avoid giant heroes and menus. */
@media (max-height: 520px) and (orientation: landscape) {
  .mobile-nav {
    max-height: calc(100dvh - 54px) !important;
  }

  .jl-hero {
    padding-top: 82px !important;
  }

  .jl-hero-copy h1 {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }
}

/* Touch-only behaviour: remove hover movement that feels sticky on mobile. */
@media (hover: none) and (pointer: coarse) {
  .jl-btn:hover,
  .jl-service:hover,
  .jl-case:hover,
  .jl-product:hover,
  .jl-soft-card:hover {
    transform: none !important;
  }

  a,
  button,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: rgba(37, 99, 235, .08);
  }
}

/* Reduced motion support. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Admin responsive hardening (does not change desktop appearance). */
@media (max-width: 900px) {
  .ja-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ja-sidebar {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  .ja-main {
    min-width: 0 !important;
    padding: 16px !important;
  }

  .ja-topbar,
  .ja-content-grid,
  .ja-lower-grid,
  .ja-kpis,
  .ja-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ja-filters {
    flex-direction: column !important;
  }

  .ja-card,
  .ja-panel,
  .ja-kpi {
    max-width: 100% !important;
  }

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

/* Footer logo: reserve correct space before lazy load to prevent CLS */
.footer-logo {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 420 / 111;
    object-fit: contain;
    object-position: left center;
}