/* Container, flow and 12/8/4 responsive grid. */
body:not(.wp-admin) {
  max-width: 100%;
  overflow-x: clip;
}

body:not(.wp-admin) *,
body:not(.wp-admin) *::before,
body:not(.wp-admin) *::after { box-sizing: border-box; }

body:not(.wp-admin) img {
  display: block;
  max-width: 100%;
  height: auto;
}

.np-container,
.np-layout-container,
body:not(.wp-admin) .container {
  width: min(calc(100% - (2 * var(--np-page-gutter))), var(--np-container));
  margin-inline: auto;
}

.np-section,
body:not(.wp-admin) .section { padding-block: var(--np-section-space); }

.np-section-head,
body:not(.wp-admin) .section-head {
  display: flex;
  gap: 24px;
  align-items: end;
  justify-content: space-between;
  margin-block-end: 28px;
}

.np-section-head > :first-child,
body:not(.wp-admin) .section-head > :first-child { min-width: 0; }

.np-section-head :where(h1, h2, h3),
body:not(.wp-admin) .section-head :where(h1, h2, h3) {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.625rem);
  line-height: 1.25;
}

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

.np-grid > * { min-width: 0; }
.np-col-12 { grid-column: span 12; }
.np-col-8 { grid-column: span 8; }
.np-col-6 { grid-column: span 6; }
.np-col-4 { grid-column: span 4; }
.np-col-3 { grid-column: span 3; }
.np-col-2 { grid-column: span 2; }
.np-col-1 { grid-column: span 1; }

.np-stack { display: grid; gap: var(--np-grid-gap); }
.np-cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.np-split { display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.np-sidebar-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: var(--np-grid-gap); }

body.np-overlay-open,
body.overlay-open { overflow: hidden; }

@media (max-width: 1024px) {
  .np-col-12,
  .np-col-8 { grid-column: span 8; }
  .np-col-6,
  .np-col-4 { grid-column: span 4; }
  .np-col-3 { grid-column: span 4; }
  .np-sidebar-layout { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 767px) {
  .np-section-head,
  body:not(.wp-admin) .section-head { align-items: start; flex-direction: column; }
  .np-split { align-items: stretch; flex-direction: column; }
  .np-sidebar-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .np-col-12,
  .np-col-8,
  .np-col-6,
  .np-col-4,
  .np-col-3 { grid-column: span 4; }
  .np-col-2 { grid-column: span 2; }
  .np-col-1 { grid-column: span 1; }
}