/* Block Grid layout — implements the umb-block-grid CSS-variable model the built-in render views emit
   (Views/Partials/blockgrid/items.cshtml + area.cshtml), so multi-column blocks (columnSpan 4/6/12)
   lay out as a responsive 12-column grid without depending on Bootstrap's grid.
   Added during the v8→v17 Grid→Block Grid migration of content pages. */

.umb-block-grid__layout-container {
  display: grid;
  grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.umb-block-grid > .umb-block-grid__layout-container {
  gap: 0;
}

.umb-block-grid__layout-item {
  grid-column: span min(var(--umb-block-grid--item-column-span, 12), var(--umb-block-grid--grid-columns, 12));
  min-width: 0;
}

/* nested areas (block-in-block) reuse the same model */
.umb-block-grid__area-container {
  display: grid;
  grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), minmax(0, 1fr));
  gap: 1.5rem;
}
.umb-block-grid__area {
  grid-column: span min(var(--umb-block-grid--area-column-span, 12), var(--umb-block-grid--grid-columns, 12));
  min-width: 0;
}

/* stack to a single column on small screens, matching the old responsive grid behaviour */
@media (max-width: 767.98px) {
  .umb-block-grid__layout-item,
  .umb-block-grid__area {
    grid-column: 1 / -1;
  }
}

/* the styled inner wrapper for blocks that carried legacy area background/padding */
.grid-block-content > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Per-device visibility — driven by the "Responsiv visning" checkbox list
   (Skjul på mobil / nettbrett / PC) on section & module settings, emitted by
   items.cshtml. Tiers: mobil <768, nettbrett 768–991, PC ≥992 (Bootstrap md/lg).
   The 992px boundary reproduces the original NBBL v8 grid data-responsive
   small-only/large-only behaviour 1:1 (see handover/return doc).
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hide-tablet { display: none !important; }
}
@media (min-width: 992px) {
  .hide-desktop { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Section (Seksjon) layout — width / padding / background / alignment from the
   "Seksjon innstillinger" settings element type (sectionBlock.cshtml).
   --------------------------------------------------------------------------- */
.ps-section { position: relative; background-size: cover; background-position: center; padding-top: 3rem; padding-bottom: 3rem; }
.ps-section .ps-section--narrow,
.ps-section.ps-section--narrow { max-width: 720px; margin-inline: auto; }
.ps-section.text-invert { color: #fff; }
.ps-section .no-grid > .umb-block-grid__area > .umb-block-grid__layout-container { display: block; }

/* Padding scale (slider 0–5). 1/2/3 reproduce the legacy small/medium/large
   (15/25/40px); 4/5 are extra steps. Vertical = ps-py-*, horizontal = ps-px-*. */
.ps-py-1 { padding-top: 15px; padding-bottom: 15px; }
.ps-py-2 { padding-top: 25px; padding-bottom: 25px; }
.ps-py-3 { padding-top: 40px; padding-bottom: 40px; }
.ps-py-4 { padding-top: 60px; padding-bottom: 60px; }
.ps-py-5 { padding-top: 80px; padding-bottom: 80px; }
.ps-px-1 { padding-left: 15px; padding-right: 15px; }
.ps-px-2 { padding-left: 25px; padding-right: 25px; }
.ps-px-3 { padding-left: 40px; padding-right: 40px; }
.ps-px-4 { padding-left: 60px; padding-right: 60px; }
.ps-px-5 { padding-left: 80px; padding-right: 80px; }
/* Legacy parity: medium/large vertical padding collapses to 15px below lg. */
@media (max-width: 991.98px) {
  .ps-py-2, .ps-py-3, .ps-py-4, .ps-py-5 { padding-top: 15px; padding-bottom: 15px; }
}

/* Reverse module order on mobile (mobileReverse) */
@media (max-width: 991.98px) {
  .ps-section.reverse-mobile .umb-block-grid__area > .umb-block-grid__layout-container {
    display: flex; flex-direction: column-reverse;
  }
}

/* ---------------------------------------------------------------------------
   Collection module (Kolleksjon) - a module holding other modules in its
   "collection" area, from "Kolleksjon innstillinger" (moduleCollectionBlock.cshtml).
   Every rule is scoped to the collection's OWN grid (the > chain), so settings on
   one collection never leak into a collection or section nested inside it.
   --------------------------------------------------------------------------- */
.ps-collection { position: relative; height: 100%; }
.ps-collection.text-invert { color: #fff; }
.ps-collection > .ps-collection__inner > .umb-block-grid__area-container { display: block; }
.ps-collection--no-gap > .ps-collection__inner > .umb-block-grid__area-container > .umb-block-grid__area > .umb-block-grid__layout-container { gap: 0; }
.ps-collection--align-start > .ps-collection__inner > .umb-block-grid__area-container > .umb-block-grid__area > .umb-block-grid__layout-container { align-items: start; }
.ps-collection--align-center > .ps-collection__inner > .umb-block-grid__area-container > .umb-block-grid__area > .umb-block-grid__layout-container { align-items: center; }
.ps-collection--align-end > .ps-collection__inner > .umb-block-grid__area-container > .umb-block-grid__area > .umb-block-grid__layout-container { align-items: end; }
.ps-collection--align-stretch > .ps-collection__inner > .umb-block-grid__area-container > .umb-block-grid__area > .umb-block-grid__layout-container { align-items: stretch; }
@media (max-width: 991.98px) {
  .ps-collection.reverse-mobile > .ps-collection__inner > .umb-block-grid__area-container > .umb-block-grid__area > .umb-block-grid__layout-container {
    display: flex; flex-direction: column-reverse;
  }
}