/**
 * Nexo Page Kit - Responsive Helper.
 *
 * Classes utilitárias passivas para layouts responsivos do Page Kit.
 * Este arquivo não altera seções existentes sozinho; só atua quando
 * uma seção usa as classes nexo-pk-responsive-*.
 *
 * @package NexoBase
 */

.nexo-pk-responsive,
.nexo-pk-responsive *,
.nexo-pk-responsive *::before,
.nexo-pk-responsive *::after {
  box-sizing: border-box;
}

.nexo-pk-responsive {
  width: 100%;
  max-width: 100%;
}

.nexo-pk-responsive--fluid {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .nexo-pk-responsive--fluid {
    overflow-x: hidden;
  }
}

.nexo-pk-responsive-container {
  width: var(
    --nexo-pk-responsive-container-fluid-width,
    min(calc(100% - 40px), 1360px)
  );
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-block: var(
    --nexo-pk-responsive-container-fluid-padding-y,
    clamp(40px, 5vw, 64px)
  );
  padding-inline: var(
    --nexo-pk-responsive-container-fluid-padding-x,
    clamp(20px, 3vw, 24px)
  );
}

.nexo-pk-responsive-container--full {
  width: 100%;
  max-width: 100%;
}

.nexo-pk-responsive-container--boxed {
  width: var(
    --nexo-pk-responsive-container-fluid-width,
    min(calc(100% - 40px), 1360px)
  );
}

.nexo-pk-responsive-grid {
  display: grid;
  grid-template-columns: repeat(
    var(--nexo-pk-responsive-grid-columns-desktop, 4),
    minmax(0, 1fr)
  );
  column-gap: var(
    --nexo-pk-responsive-grid-fluid-gap-column,
    var(--nexo-pk-responsive-grid-gap-column, 32px)
  );
  row-gap: var(
    --nexo-pk-responsive-grid-fluid-gap-row,
    var(--nexo-pk-responsive-grid-gap-row, 32px)
  );
  align-items: var(--nexo-pk-responsive-grid-align-items, stretch);
  justify-items: var(--nexo-pk-responsive-grid-justify-items, stretch);
  width: 100%;
  max-width: 100%;
}

.nexo-pk-responsive-grid > * {
  min-width: 0;
}

.nexo-pk-responsive--stack .nexo-pk-responsive-grid {
  grid-template-columns: 1fr;
}

.nexo-pk-show-below-1360,
.nexo-pk-show-below-1200,
.nexo-pk-show-below-1024,
.nexo-pk-show-below-640 {
  display: none !important;
}

@media (max-width: 1360px) {
  .nexo-pk-show-below-1360 {
    display: block !important;
  }

  .nexo-pk-show-below-1360.nexo-pk-responsive-grid {
    display: grid !important;
  }

  .nexo-pk-hide-below-1360 {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  .nexo-pk-show-below-1200 {
    display: block !important;
  }

  .nexo-pk-show-below-1200.nexo-pk-responsive-grid {
    display: grid !important;
  }

  .nexo-pk-hide-below-1200 {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .nexo-pk-show-below-1024 {
    display: block !important;
  }

  .nexo-pk-show-below-1024.nexo-pk-responsive-grid {
    display: grid !important;
  }

  .nexo-pk-hide-below-1024 {
    display: none !important;
  }

  .nexo-pk-responsive-grid {
    grid-template-columns: repeat(
      var(--nexo-pk-responsive-grid-columns-tablet, 2),
      minmax(0, 1fr)
    );
  }
}

@media (max-width: 640px) {
  .nexo-pk-show-below-640 {
    display: block !important;
  }

  .nexo-pk-show-below-640.nexo-pk-responsive-grid {
    display: grid !important;
  }

  .nexo-pk-hide-below-640 {
    display: none !important;
  }

  .nexo-pk-responsive-container {
    width: 100%;
    padding-inline: var(--nexo-pk-responsive-container-padding-x-min, 20px);
  }

  .nexo-pk-responsive-grid {
    grid-template-columns: repeat(
      var(--nexo-pk-responsive-grid-columns-mobile, 1),
      minmax(0, 1fr)
    );
  }
}