/*
 * how-to-library — converted from src/components/how-to/HowToLibrary.module.css
 * Declarations are unchanged; only class selectors were renamed.
 */
.np-how-to-library__section {
  padding: 64px 40px 96px;
  max-width: var(--container-width);
  margin: 0 auto;
}

.np-how-to-library__header {
  margin-bottom: 40px;
}

.np-how-to-library__header h2 {
  font-family: var(--font-head);
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 700;
  color: var(--navy);
}

.np-how-to-library__category {
  margin-bottom: 40px;
}

.np-how-to-library__category:last-child {
  margin-bottom: 0;
}

.np-how-to-library__category h3 {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 20px;
}

.np-how-to-library__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1000px) {
  .np-how-to-library__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .np-how-to-library__grid {
    grid-template-columns: 1fr;
  }
}

/*
 * The inset goes on Elementor's inner element, not on the container.
 *
 * Same reason as `np-case-study__content-wrap`: this class is on a boxed
 * container, and Elementor centres a `.e-con-inner` inside it at the container
 * width — so the max-width and the centring are already done, and the padding
 * has to be read from the inner element. On the outer one it insets the band
 * and leaves the 1200px column where it was, which is why the library's cards
 * ran 1200px wide where the design reads at 1120.
 *
 * The horizontal inset only. The band's own 64px and 96px are already being
 * applied to the outer container and work correctly there — repeating the whole
 * shorthand here added them a second time and pushed the page 160px longer.
 */
.np-how-to-library__section > .e-con-inner {
  padding-inline: 40px;
}

/*
 * The group label's spacing, which Elementor's container gap had inverted.
 *
 * The design gives the section heading 40px under it and the group label 20px
 * under that. Elementor spaces container children with a flex gap of its own,
 * and the build emits "Applications" as a bare Heading widget rather than the
 * `__header` element the rule above targets — so the heading lost its 40px and
 * kept only the 20px gap, while the label's own 20px stacked onto that same
 * gap and left 40px above the grid. Same total height, label in the wrong
 * place. Zero the gap on both containers and let the margins govern, as they
 * do in the source stylesheet.
 */
.np-how-to-library__section,
.np-how-to-library__category {
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  gap: 0;
}

/* The 40px the `__header` rule would have applied, carried on the widget. */
.np-how-to-library__section > .e-con-inner > .elementor-widget-heading {
  margin-bottom: 40px;
}