/* ================================================
   JUSTERBARE VÆRDIER, ret her for at ændre layout
   ================================================

   OVERSKRIFTER (matcher traening.css sitewide)
   H1 hero:         clamp(2rem, 4vw, 3.4rem) — aldrig større end H2 -> --h1-size
   H2 sektioner:    clamp(2rem, 4vw, 3.4rem)             -> --h2-size
   H3 kort titler:  1.4rem (FØR/UNDER/EFTER- og modul-kort) -> --h3-size
                    (proces-trin bruger 1.22rem og styres ikke af denne
                    variabel, se de enkelte regler)

   AFSTAND MELLEM SEKTIONER
   Lodret afstand mellem store sektioner:  3rem     -> --gap-sections
   Lodret afstand mellem kort og afsnit:   1.6rem   -> --gap-content

   AFSTAND INDEN I BOKSE OG KORT
   Padding i store sektions bokse:         1.6rem–3.2rem (varierer pr. boks,
                                            se hero-copy, quote-feature og
                                            skanderborg-card nedenfor)
   Padding i små citat og modul kort:      1.55rem  -> --padding-card
                                            (fase-kort bruger 1.4rem, proces-
                                            trin bruger 1.45rem)
   Gap mellem kort i et grid:              1.25rem  -> --gap-cards
                                            (FØR/UNDER/EFTER-grid bruger 1rem)

   BILLEDE
   Maks bredde på billeder:                100% af boksens bredde (fluidt,
                                            ingen fast px-maksimum)
   Border radius på billeder:              1.4rem   -> --image-radius

   ================================================ */

:root {
  --h1-size: clamp(2rem, 4vw, 3.4rem);
  --h2-size: clamp(2rem, 4vw, 3.4rem);
  --h3-size: 1.4rem;
  --gap-sections: 2rem;
  --gap-content: 1.6rem;
  --padding-card: 1.55rem;
  --gap-cards: 1.25rem;
  --image-radius: 1.4rem;
}

/* Sidebaggrund og grundlæggende layout */
html,
body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(63, 122, 255, 0.18), transparent 28rem),
    radial-gradient(circle at 85% 18%, rgba(0, 199, 167, 0.14), transparent 24rem),
    radial-gradient(circle at 50% 65%, rgba(26, 72, 122, 0.16), transparent 34rem),
    linear-gradient(180deg, #031a2a 0%, #05253a 50%, #031a2a 100%);
  color: #f4f8fc;
}

.network-page {
  min-height: 100vh;
  background: transparent;
  color: #f4f8fc;
}

.network-page main,
.network-page section,
.network-page .container {
  background: transparent;
}

.network-main {
  position: relative;
  overflow: hidden;
  padding: var(--page-top) 0 5rem;
}

.network-main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 211, 120, 0.08), transparent 18rem),
    radial-gradient(circle at 100% 45%, rgba(75, 168, 255, 0.14), transparent 18rem);
  opacity: 0.9;
}

.network-wrap {
  position: relative;
  z-index: 1;
}

/* Hero: kicker + H1 + undertekst */
.network-hero {
  min-height: 0;
  padding: 0 0 1rem;
}

.network-hero-stack {
  display: grid;
  gap: 0;
}

.network-hero-copy-card,
.network-hero-image-card {
  overflow: hidden;
  border: 1px solid rgba(101, 177, 235, 0.24);
  background: linear-gradient(135deg, rgba(16, 58, 95, 0.94), rgba(5, 43, 71, 0.96));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.network-hero-copy-card {
  border-radius: var(--image-radius);
}

.network-hero-image-card {
  border-radius: var(--image-radius);
}

.network-hero-copy {
  padding: clamp(2rem, 4vw, 3.2rem);
}

.network-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  color: #dcecf8;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.network-kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #87d3ff, rgba(135, 211, 255, 0.12));
}

.network-hero-copy h1 {
  margin: 0 0 1rem;
  max-width: 58rem;
  font-size: var(--h1-size);
  line-height: 0.94;
  letter-spacing: -0.06em;
  color: #ffffff;
}

.network-hero-subtitle {
  margin: 0 0 1.2rem;
  max-width: 58rem;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.25;
  font-weight: 800;
  color: #f2f7fb;
}

.network-hero-text {
  max-width: 64rem;
  columns: 2;
  column-gap: 2.5rem;
}

.network-hero-text p {
  margin: 0 0 0.75rem;
  break-inside: avoid;
  color: rgba(238, 245, 250, 0.92);
  font-size: 1.04rem;
  line-height: 1.68;
}

.network-hero-text p:last-child {
  margin-bottom: 0;
}

.network-hero-intro {
  margin: 0 0 1.4rem;
  color: rgba(238, 245, 250, 0.82);
  font-size: 1.04rem;
  line-height: 1.68;
}

/* FØR, UNDER, EFTER kort (genbruges også i Erhverv Skanderborg-sektionen) */
.network-phase-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.network-phase-grid::before {
  content: "";
  position: absolute;
  top: 1.9rem;
  left: 16.67%;
  right: 16.67%;
  height: 1px;
  background: rgba(135, 211, 255, 0.22);
  z-index: 0;
  pointer-events: none;
}

.network-phase-card {
  position: relative;
  z-index: 1;
  border-radius: 1.15rem;
  border: 1px solid rgba(98, 172, 229, 0.18);
  background: linear-gradient(145deg, rgba(12, 53, 87, 0.88), rgba(5, 39, 64, 0.94));
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.18);
  padding: 1.4rem;
}

.network-phase-label {
  display: inline-block;
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #87d3ff;
}

.network-phase-icon {
  margin-bottom: 0.65rem;
  color: #b9daef;
  line-height: 1;
}

.network-phase-card h3 {
  margin: 0 0 0.55rem;
  font-size: var(--h3-size);
  line-height: 1.25;
  color: #ffffff;
}

.network-phase-card p {
  margin: 0;
  color: rgba(232, 241, 247, 0.82);
  font-size: 0.97rem;
  line-height: 1.68;
}

.network-hero-image-card {
  background: #061c2d;
}

.network-hero-image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
  background: #061c2d;
}

/* Sektion-wrapper til FØR/UNDER/EFTER-kortene, når de står alene som egen sektion */
.network-phase-section {
  padding: 1rem 0 1rem;
}

/* Sektion-wrapper til billedet af netværksmødet */
.network-image-section {
  padding: 0;
}

/* Generisk sektion-wrapper (bruges af "Netværk, der kan mærkes"-sektionen) */
.network-section {
  padding: 2rem 0 0.5rem;
}

/* Fælles overskrift-stil: kicker + H2 + intro-tekst, bruges af flere sektioner */
.network-section-header {
  margin-bottom: 1.5rem;
}

.network-section-header .network-kicker {
  margin-bottom: 0.8rem;
}

.network-section-header h2 {
  margin: 0 0 0.9rem;
  font-size: var(--h2-size);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.network-section-header p {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.72;
  color: rgba(231, 241, 247, 0.82);
}

/* "Netværk, der kan mærkes i arbejdet bagefter" sektionens tre kort */
.network-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cards);
  margin-top: var(--gap-content);
}

.network-card {
  border-radius: 1.15rem;
  border: 1px solid rgba(98, 172, 229, 0.18);
  background: linear-gradient(145deg, rgba(12, 53, 87, 0.88), rgba(5, 39, 64, 0.94));
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.18);
  padding: var(--padding-card);
}

.network-card h3 {
  margin: 0 0 0.8rem;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #ffffff;
}

.network-card p {
  margin: 0;
  color: rgba(232, 241, 247, 0.84);
  line-height: 1.72;
  font-size: 1rem;
}

.network-card ul {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  color: rgba(232, 241, 247, 0.84);
  line-height: 1.72;
}

.network-card li + li {
  margin-top: 0.3rem;
}

/* Business Djursland citat boks */
.network-recommendations {
  padding: var(--gap-sections) 0 0.5rem;
}

.network-quote-feature {
  margin: 1.5rem 0 0;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: 1.4rem;
  background: linear-gradient(135deg, #73c7ff, #eefaff);
  box-shadow: 0 24px 70px rgba(115, 199, 255, 0.28);
}

.network-quote-feature blockquote {
  margin: 0;
}

.network-quote-feature blockquote p {
  margin: 0 0 1rem;
  max-width: 60rem;
  color: #031521;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.network-quote-feature blockquote p:last-child {
  margin-bottom: 0;
}

/* Footer-linje i citat-boksen: Ole Svit-attribution + "Læs hele casen"-knap */
.network-quote-feature-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
}

.network-quote-feature figcaption {
  display: block;
  color: rgba(3, 21, 33, 0.78);
  font-weight: 800;
}

/* Deltager citat grid (Palle Mikkelsen, Dorthe Kidmose, Brit Løth Bager), inde i den lyseblå Business Djursland-boks */
.network-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cards);
  margin-top: 1.5rem;
  align-items: stretch;
}

.network-quote-card {
  min-height: 100%;
  padding: var(--padding-card);
  border-radius: 1.15rem;
  border: 1px solid rgba(3, 21, 33, 0.12);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 30px rgba(3, 21, 33, 0.10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.network-quote-card-text {
  flex: 1 1 auto;
}

.network-quote-card p {
  margin: 0;
  color: #031521;
  font-size: 1.04rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.network-quote-card strong {
  display: block;
  margin-top: 1rem;
  color: rgba(3, 21, 33, 0.78);
  font-weight: 800;
}

.network-quote-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0 1.6rem;
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, #9edcff, #d6f1ff);
  color: #062239;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0 35px rgba(135, 211, 255, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.network-quote-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 45px rgba(135, 211, 255, 0.28);
}

@media (prefers-reduced-motion: no-preference) {
  .network-quote-link {
    animation: network-quote-link-pulse 3s ease-in-out infinite;
  }

  .network-quote-link:hover {
    animation: none;
  }

  @keyframes network-quote-link-pulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 0 35px rgba(135, 211, 255, 0.22);
    }
    50% {
      transform: scale(1.04);
      box-shadow: 0 0 50px rgba(135, 211, 255, 0.4);
    }
  }
}

/* Erhverv Skanderborg wow sektion: animeret gradient-kant + glow */
.network-skanderborg {
  padding: var(--gap-sections) 0 2rem;
}

@property --skb-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.network-skanderborg-wrap {
  position: relative;
  border-radius: calc(1.5rem + 2px);
  box-shadow:
    0 0 28px rgba(95, 184, 255, 0.20),
    0 0 64px rgba(155, 119, 255, 0.14),
    0 30px 90px rgba(0, 0, 0, 0.34);
}

.network-skanderborg-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(1.5rem + 2px);
  background: conic-gradient(
    from var(--skb-angle),
    #5fb8ff,
    #9b77ff,
    #d16fff,
    #ff6bb3,
    #5fb8ff
  );
  z-index: 0;
}

.network-skanderborg-card {
  position: relative;
  z-index: 1;
  border-radius: 1.5rem;
  padding: clamp(1.8rem, 3.4vw, 3rem);
  background:
    radial-gradient(circle at 15% 0%, rgba(95, 184, 255, 0.14), transparent 42%),
    linear-gradient(160deg, rgba(22, 74, 116, 0.94), rgba(9, 50, 80, 0.97));
}

/* Animationer, kun når brugeren ikke har slået bevægelse fra */
@media (prefers-reduced-motion: no-preference) {
  .network-skanderborg-wrap::before {
    animation: skb-border-spin 6.8s ease-in-out infinite;
  }

  @keyframes skb-border-spin {
    to { --skb-angle: 360deg; }
  }

  .network-skanderborg-wrap {
    animation: skb-glow-pulse 6.8s ease-in-out infinite alternate;
  }

  @keyframes skb-glow-pulse {
    from {
      box-shadow:
        0 0 24px rgba(95, 184, 255, 0.16),
        0 0 54px rgba(155, 119, 255, 0.10),
        0 30px 90px rgba(0, 0, 0, 0.34);
    }
    to {
      box-shadow:
        0 0 38px rgba(95, 184, 255, 0.28),
        0 0 78px rgba(209, 111, 255, 0.22),
        0 30px 90px rgba(0, 0, 0, 0.34);
    }
  }
}

.network-skanderborg-card .network-phase-card {
  transition: transform 380ms ease, box-shadow 380ms ease, border-color 380ms ease;
}

.network-skanderborg-card .network-phase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(147, 210, 255, 0.4);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.22),
    0 0 32px rgba(135, 211, 255, 0.22);
}

.network-skanderborg-link {
  display: inline-flex;
  margin-top: 1.5rem;
  color: #d6efff;
  font-weight: 800;
  text-decoration: none;
}

.network-skanderborg-link:hover {
  text-decoration: underline;
}

/* "Sådan griber vi netværket an" proces-trin */
.network-process {
  padding: var(--gap-sections) 0 0.5rem;
}

.network-process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.network-step {
  border-radius: 1.15rem;
  border: 1px solid rgba(98, 172, 229, 0.18);
  background: linear-gradient(145deg, rgba(12, 53, 87, 0.88), rgba(5, 39, 64, 0.94));
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.18);
  padding: 1.45rem;
}

.network-step h3 {
  margin: 0 0 0.7rem;
  font-size: 1.22rem;
  color: #ffffff;
}

.network-step p {
  margin: 0;
  color: rgba(232, 241, 247, 0.82);
  line-height: 1.7;
}

/* Afsluttende CTA-boks: "Book en afklaring" */
.network-final-cta {
  padding: var(--gap-sections) 0 0;
}

.network-final-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.8rem;
  align-items: center;
  border-radius: 1.2rem;
  border: 1px solid rgba(98, 172, 229, 0.18);
  background: linear-gradient(145deg, rgba(12, 53, 87, 0.88), rgba(5, 39, 64, 0.94));
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.18);
  padding: 1.7rem 1.8rem;
}

.network-final-cta-card h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #ffffff;
}

.network-final-cta-card p {
  margin: 0;
  max-width: 42rem;
  color: rgba(232, 241, 247, 0.82);
  line-height: 1.7;
}

.network-primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21rem;
  min-height: 3.6rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, #9edcff, #d6f1ff);
  color: #062239;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0 35px rgba(135, 211, 255, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.network-primary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 45px rgba(135, 211, 255, 0.28);
}

/* Responsive tilpasninger */
@media (max-width: 900px) {
  .network-card-grid,
  .network-process-grid,
  .network-final-cta-card,
  .network-phase-grid,
  .network-quote-grid {
    grid-template-columns: 1fr;
  }

  .network-phase-grid::before {
    display: none;
  }

  .network-hero-copy {
    padding: 2rem 1.5rem;
  }

  .network-hero-text {
    columns: 1;
  }

  .network-final-cta-card {
    padding: 1.5rem;
  }

  .network-primary-cta {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .network-main {
    padding: 7.5rem 0 4rem;
  }

  .network-hero-copy h1,
  .network-section-header h2 {
    word-break: break-word;
  }

  .network-primary-cta {
    font-size: 0.95rem;
    padding: 0 1.1rem;
  }

  .network-hero-image-card img {
    aspect-ratio: 1.35 / 1;
  }
}