/*
 * mit-frie layout objects
 *
 * Container, grid-utilities, dnd-section-padding-baseline.
 * Modul-spcefik styling hører IKKE hjemme her — den lever i Component's inline <style>.
 */

/* ─── Container ──────────────────────────────────────────────── */
.container,
.dnd-section > .row-fluid,
.content-wrapper {
  max-width: var(--frie-container-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--frie-container-gutter, 24px);
}

/* ─── DnD section-padding ────────────────────────────────────── */
.dnd-section {
  padding-block: var(--frie-space-6, 32px);
  padding-inline: var(--frie-container-gutter, 24px);
}

/* Første sektion får ikke top-padding (hero touches header) */
main .dnd-section.row-depth-1.row-number-1 {
  padding-top: 0;
}

@media (max-width: 960px) {
  .dnd-section {
    padding-block: var(--frie-space-5, 24px);
    padding-inline: 16px;
  }
  .container,
  .content-wrapper {
    padding-inline: 16px;
  }
}

/* ─── Grid-utilities ────────────────────────────────────────── */
.frie-grid {
  display: grid;
  gap: var(--frie-space-5, 24px);
}

.frie-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frie-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.frie-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.frie-grid--2-1 { grid-template-columns: 2fr 1fr; }
.frie-grid--1-2 { grid-template-columns: 1fr 2fr; }

@media (max-width: 960px) {
  .frie-grid--2,
  .frie-grid--3,
  .frie-grid--4,
  .frie-grid--2-1,
  .frie-grid--1-2 {
    grid-template-columns: 1fr;
  }
}

/* ─── Flex-utilities ────────────────────────────────────────── */
.frie-stack {
  display: flex;
  flex-direction: column;
  gap: var(--frie-space-4, 16px);
}

.frie-row {
  display: flex;
  gap: var(--frie-space-4, 16px);
  align-items: center;
}

.frie-row--between {
  justify-content: space-between;
}

/* ─── Spacing-utilities ─────────────────────────────────────── */
.frie-mt-4 { margin-top: var(--frie-space-4, 16px); }
.frie-mt-5 { margin-top: var(--frie-space-5, 24px); }
.frie-mt-6 { margin-top: var(--frie-space-6, 32px); }
.frie-mb-4 { margin-bottom: var(--frie-space-4, 16px); }
.frie-mb-5 { margin-bottom: var(--frie-space-5, 24px); }
.frie-mb-6 { margin-bottom: var(--frie-space-6, 32px); }

/* ─── App-shell layout ──────────────────────────────────────── */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  display: block;
  width: 100%;
}

/* Hold plads under fixed header */
.app-main {
  padding-top: var(--frie-header-height, 80px);
}

@media (max-width: 960px) {
  .app-main {
    padding-top: var(--frie-header-mobile-height, 64px);
  }
}