/* ag-base.css — scoped to .ag-page so the global reset never touches Copenhagen header/footer */
/* ============================================================
   AG BASE
   Reset, layout helpers, typography scale, utility classes.
   Depends on ag-tokens.css
   ============================================================ */

/* ----------------------------------------------------------
   RESET / BOX MODEL
---------------------------------------------------------- */
.ag-page *, .ag-page *::before, .ag-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ag-page img, .ag-page video {
  max-width: 100%;
  height: auto;
  display: block;
}

.ag-page a {
  color: inherit;
  text-decoration: none;
}

.ag-page ul, .ag-page ol { list-style: none; }

.ag-page button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* ----------------------------------------------------------
   BODY / GLOBAL
---------------------------------------------------------- */
.ag-page {
  font-family: var(--ag-font-body);
  font-size: var(--ag-text-base);
  line-height: var(--ag-leading-normal);
  color: var(--ag-color-text);
  background: var(--ag-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ag-page h1 {
  font-family: var(--ag-font-heading);
  font-weight: var(--ag-weight-semibold);
  line-height: var(--ag-leading-tight);
  letter-spacing: -0.035em;
  color: var(--ag-color-heading);
}

.ag-page h2, .ag-page h3 {
  font-family: var(--ag-font-heading);
  font-weight: var(--ag-weight-bold);
  line-height: var(--ag-leading-tight);
  letter-spacing: -0.025em;
  color: var(--ag-color-heading);
}

.ag-page h4, .ag-page h5, .ag-page h6 {
  font-family: var(--ag-font-heading);
  font-weight: var(--ag-weight-semibold);
  line-height: var(--ag-leading-tight);
  color: var(--ag-color-heading);
}

/* ----------------------------------------------------------
   LAYOUT — CONTAINER
---------------------------------------------------------- */
.ag-page .ag-container {
  max-width: var(--ag-container);
  margin-inline: auto;
  padding-inline: var(--ag-gutter);
}

.ag-page .ag-container--wide {
  max-width: var(--ag-container-wide);
  margin-inline: auto;
  padding-inline: var(--ag-gutter);
}

.ag-page .ag-container--narrow {
  max-width: var(--ag-container-narrow);
  margin-inline: auto;
  padding-inline: var(--ag-gutter);
}

/* ----------------------------------------------------------
   LAYOUT — SECTION
---------------------------------------------------------- */
.ag-page .ag-section {
  position: relative;
  width: 100%;
  padding-block: var(--ag-section-py);
  background: var(--ag-color-bg);
}

.ag-page .ag-section--alt {
  background: var(--ag-color-bg-alt);
}

.ag-page .ag-section--dark {
  background: var(--ag-color-bg-dark);
  color: #ffffff;
}

.ag-page .ag-section--green {
  background: linear-gradient(135deg, #1B4332 0%, #2D6A4F 100%);
  color: #ffffff;
}

.ag-page .ag-section--compact {
  padding-block: 3.5rem; /* Tighter padding for stats/trust bars — default 6rem */
}

/* Section padding modifiers */
.ag-page .ag-pt-none { padding-top: 0 !important; }
.ag-page .ag-pt-sm { padding-top: var(--ag-space-10) !important; }
.ag-page .ag-pt-md { padding-top: var(--ag-section-py) !important; }
.ag-page .ag-pt-lg { padding-top: calc(var(--ag-section-py) * 1.5) !important; }

.ag-page .ag-pb-none { padding-bottom: 0 !important; }
.ag-page .ag-pb-sm { padding-bottom: var(--ag-space-10) !important; }
.ag-page .ag-pb-md { padding-bottom: var(--ag-section-py) !important; }
.ag-page .ag-pb-lg { padding-bottom: calc(var(--ag-section-py) * 1.5) !important; }

/* ----------------------------------------------------------
   LAYOUT — SECTION HEADER
   Reusable centered or left-aligned header block
---------------------------------------------------------- */
.ag-page .ag-section-header {
  margin-bottom: var(--ag-space-12);
}

.ag-page .ag-section-header--center {
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  margin-bottom: var(--ag-space-12);
}

.ag-page .ag-section-header__eyebrow {
  display: block;
  margin-bottom: var(--ag-space-4);
}

.ag-page .ag-section-header__title {
  font-family: var(--ag-font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--ag-weight-bold);
  letter-spacing: -0.025em;
  line-height: var(--ag-leading-tight);
  color: var(--ag-color-heading);
  margin-bottom: var(--ag-space-4);
}

.ag-page .ag-section-header__lead {
  font-size: var(--ag-text-md);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-color-text-muted);
  max-width: 54ch;
}

.ag-page .ag-section-header--center .ag-section-header__lead {
  margin-inline: auto;
}

/* ----------------------------------------------------------
   SECTION HEADING + LEAD
   Shorthand classes used directly on h2/div inside modules.
   More prominent than ag-section-header__title.
---------------------------------------------------------- */
.ag-page .ag-section-heading {
  font-family: var(--ag-font-heading);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  font-weight: var(--ag-weight-bold);
  letter-spacing: -0.03em;
  line-height: var(--ag-leading-tight);
  color: var(--ag-color-heading);
  margin-top: var(--ag-space-4);
  margin-bottom: var(--ag-space-5);
}

.ag-page .ag-section-lead {
  font-size: clamp(1rem, 1.25vw + 0.25rem, 1.125rem);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-color-text-muted);
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--ag-space-8);
}

/* Sentrert tekst-header: lead og richtext-innhold sentreres */
.ag-page .ag-text-center .ag-section-lead, .ag-page .ag-section-header.ag-text-center .ag-section-lead {
  text-align: center;
}

/* Badge sitting above a heading gets a small bottom gap */
.ag-page .ag-section-header .ag-badge, .ag-page .ag-showcase__copy .ag-badge {
  margin-bottom: var(--ag-space-3);
  display: inline-block;
}

/* ----------------------------------------------------------
   TYPOGRAPHY UTILITIES
---------------------------------------------------------- */
/* Signature accent — cream underline on light backgrounds.
   Dark sections and dark hero modules restore gradient fill. */
.ag-page .ag-gradient-text, .ag-page .ag-text-gradient, .ag-page .text-gradient {
  background: none;
  -webkit-text-fill-color: unset;
  color: inherit;
  display: inline;
  text-decoration: underline;
  text-decoration-color: var(--ag-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* On dark backgrounds: restore gradient fill — cream reads poorly on dark */
.ag-page .ag-section--dark .ag-gradient-text, .ag-page .ag-section--dark .ag-text-gradient, .ag-page .ag-section--dark .text-gradient, .ag-page--dark .ag-gradient-text, .ag-page--dark .ag-text-gradient, .ag-page--dark .text-gradient, .ag-page .ag-hiw-hero .ag-gradient-text, .ag-page .ag-hiw-hero .ag-text-gradient, .ag-page .ag-hiw-hero .text-gradient, .ag-page .ag-hero-cinematic .ag-gradient-text, .ag-page .ag-hero-cinematic .ag-text-gradient, .ag-page .ag-hero-cinematic .text-gradient {
  background: var(--ag-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

.ag-page .ag-text-muted { color: var(--ag-color-text-muted); }
.ag-page .ag-text-center { text-align: center; }
.ag-page .ag-text-left { text-align: left; }

/* ----------------------------------------------------------
   SPACING UTILITIES
---------------------------------------------------------- */
.ag-page .ag-mb-2 { margin-bottom: var(--ag-space-2) !important; }
.ag-page .ag-mb-4 { margin-bottom: var(--ag-space-4) !important; }
.ag-page .ag-mb-6 { margin-bottom: var(--ag-space-6) !important; }
.ag-page .ag-mb-8 { margin-bottom: var(--ag-space-8) !important; }
.ag-page .ag-mb-10 { margin-bottom: var(--ag-space-10) !important; }
.ag-page .ag-mb-12 { margin-bottom: var(--ag-space-12) !important; }

.ag-page .ag-mt-4 { margin-top: var(--ag-space-4) !important; }
.ag-page .ag-mt-6 { margin-top: var(--ag-space-6) !important; }
.ag-page .ag-mt-8 { margin-top: var(--ag-space-8) !important; }

/* ----------------------------------------------------------
   GRID UTILITIES
---------------------------------------------------------- */
.ag-page .ag-grid {
  display: grid;
  gap: var(--ag-space-6);
}

.ag-page .ag-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ag-page .ag-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ag-page .ag-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .ag-page .ag-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ag-page .ag-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

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

/* Flex helpers */
.ag-page .ag-flex { display: flex; }
.ag-page .ag-flex-center { display: flex; align-items: center; justify-content: center; }
.ag-page .ag-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ag-page .ag-flex-wrap { flex-wrap: wrap; }
.ag-page .ag-gap-2 { gap: var(--ag-space-2); }
.ag-page .ag-gap-3 { gap: var(--ag-space-3); }
.ag-page .ag-gap-4 { gap: var(--ag-space-4); }
.ag-page .ag-gap-6 { gap: var(--ag-space-6); }

/* ----------------------------------------------------------
   REVEAL ANIMATIONS
   Triggered by IntersectionObserver adding .is-visible
---------------------------------------------------------- */
.ag-page .ag-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--ag-transition-spring),
    transform var(--ag-transition-spring);
}

.ag-page .ag-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ag-page .ag-reveal-scale {
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.ag-page .ag-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.ag-page .ag-stagger-1 { transition-delay: 0.06s; }
.ag-page .ag-stagger-2 { transition-delay: 0.12s; }
.ag-page .ag-stagger-3 { transition-delay: 0.18s; }
.ag-page .ag-stagger-4 { transition-delay: 0.24s; }
.ag-page .ag-stagger-5 { transition-delay: 0.30s; }
.ag-page .ag-stagger-6 { transition-delay: 0.36s; }

/* ----------------------------------------------------------
   LUCIDE ICON SIZES
   Works with <i data-lucide="name" class="ag-icon-*">
---------------------------------------------------------- */
.ag-page [data-lucide] {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.ag-page .ag-icon-xs { width: var(--ag-icon-xs);  height: var(--ag-icon-xs); }
.ag-page .ag-icon-sm { width: var(--ag-icon-sm);  height: var(--ag-icon-sm); }
.ag-page .ag-icon-md { width: var(--ag-icon-md);  height: var(--ag-icon-md); }
.ag-page .ag-icon-lg { width: var(--ag-icon-lg);  height: var(--ag-icon-lg); }
.ag-page .ag-icon-xl { width: var(--ag-icon-xl);  height: var(--ag-icon-xl); }