/**
 * NetPardaz layout grid
 *
 * An opt-in, mobile-first 12-column system. The np- namespace keeps these
 * utilities isolated from WooCommerce, Gravity Forms and legacy page styles.
 */
:root {
  --np-grid-columns: 12;
  --np-grid-gap: clamp(12px, 1.6vw, 24px);
  --np-grid-gap-small: clamp(8px, 1vw, 14px);
  --np-grid-gap-large: clamp(20px, 2.4vw, 36px);
  --np-container-max: 1180px;
  --np-container-pad: clamp(16px, 3vw, 32px);
}

.np-container {
  width: 100%;
  max-width: calc(var(--np-container-max) + var(--np-container-pad) + var(--np-container-pad));
  margin-inline: auto;
  padding-inline: var(--np-container-pad);
}

/* Keep the established container width, while making nested content shrinkable. */
.container {
  max-width: var(--np-container-max);
}

.np-grid {
  display: grid;
  grid-template-columns: repeat(var(--np-grid-columns), minmax(0, 1fr));
  gap: var(--np-grid-gap);
  width: 100%;
}

.np-grid > * {
  grid-column: span 12;
  min-width: 0;
  max-width: 100%;
}

.np-grid--gap-none { gap: 0; }
.np-grid--gap-small { gap: var(--np-grid-gap-small); }
.np-grid--gap-large { gap: var(--np-grid-gap-large); }
.np-grid--align-start { align-items: start; }
.np-grid--align-center { align-items: center; }
.np-grid--align-end { align-items: end; }
.np-grid--stretch { align-items: stretch; }

.np-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--np-grid-item-min, 240px)), 1fr));
}

.np-grid--auto > * { grid-column: auto; }

.np-col-1 { grid-column: span 1; }
.np-col-2 { grid-column: span 2; }
.np-col-3 { grid-column: span 3; }
.np-col-4 { grid-column: span 4; }
.np-col-5 { grid-column: span 5; }
.np-col-6 { grid-column: span 6; }
.np-col-7 { grid-column: span 7; }
.np-col-8 { grid-column: span 8; }
.np-col-9 { grid-column: span 9; }
.np-col-10 { grid-column: span 10; }
.np-col-11 { grid-column: span 11; }
.np-col-12 { grid-column: span 12; }

.np-full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.np-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Existing high-traffic grids get the same intrinsic-size protection. */
:where(
  .hero-grid,
  .post-grid,
  .np-product-grid,
  .np-final-hero-grid,
  .np-split-feature,
  .np-trust-grid,
  .np-activity-grid,
  .np-partner-grid,
  .woocommerce ul.products
) > * {
  min-width: 0;
  max-width: 100%;
}

:where(img, video, canvas, iframe) {
  max-width: 100%;
}

:where(h1, h2, h3, h4, p, a, span, td, th) {
  overflow-wrap: break-word;
}

@media (min-width: 641px) {
  .np-col-md-1 { grid-column: span 1; }
  .np-col-md-2 { grid-column: span 2; }
  .np-col-md-3 { grid-column: span 3; }
  .np-col-md-4 { grid-column: span 4; }
  .np-col-md-5 { grid-column: span 5; }
  .np-col-md-6 { grid-column: span 6; }
  .np-col-md-7 { grid-column: span 7; }
  .np-col-md-8 { grid-column: span 8; }
  .np-col-md-9 { grid-column: span 9; }
  .np-col-md-10 { grid-column: span 10; }
  .np-col-md-11 { grid-column: span 11; }
  .np-col-md-12 { grid-column: span 12; }
}

@media (min-width: 981px) {
  .np-col-lg-1 { grid-column: span 1; }
  .np-col-lg-2 { grid-column: span 2; }
  .np-col-lg-3 { grid-column: span 3; }
  .np-col-lg-4 { grid-column: span 4; }
  .np-col-lg-5 { grid-column: span 5; }
  .np-col-lg-6 { grid-column: span 6; }
  .np-col-lg-7 { grid-column: span 7; }
  .np-col-lg-8 { grid-column: span 8; }
  .np-col-lg-9 { grid-column: span 9; }
  .np-col-lg-10 { grid-column: span 10; }
  .np-col-lg-11 { grid-column: span 11; }
  .np-col-lg-12 { grid-column: span 12; }
}

@media (max-width: 640px) {
  .np-container { --np-container-pad: 16px; }
  .np-grid { --np-grid-gap: 12px; }
  .np-grid--mobile-2 > * { grid-column: span 6; }
}