/*
 * landing-page.css — Nulhype kursus-landingsside
 * Følger designguiden strengt:
 *   Typografi:  Manrope 600 (overskrifter), 300 (brødtekst)
 *   Farver:     #1A1A1A tekst/CTA · #F4EDE4 primær bg · #FF7A00 kun hover + mærkeord
 *               #EFE6DA sekundær bg · #999 grå
 *   Knapper:    #1A1A1A baggrund, hvid tekst, ingen border-radius, hover → #FF7A00
 *   Ikoner:     Phosphor duotone
 *   Ingen shadows, ingen border-radius på bokse
 */


/* ============================================================
   GLOBAL WRAPPER
============================================================ */
.lp-wrap {
  overflow-x: hidden;
}


/* ============================================================
   SEKTIONER
============================================================ */
.lp-section {
  padding: 80px 20px;
}

.lp-section--sand {
  background-color: var(--primary-background);
}

.lp-section--dark {
  background-color: var(--primary-text);
  color: #f9f9f9;
}

.lp-section--dark h1,
.lp-section--dark h2,
.lp-section--dark h3,
.lp-section--dark h4,
.lp-section--dark p,
.lp-section--dark li,
.lp-section--dark cite {
  color: #f9f9f9;
}

@media (min-width: 768px) {
  .lp-section {
    padding: 100px 40px;
  }
}


/* ============================================================
   CONTAINERE
============================================================ */
.lp-container {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.lp-container--narrow {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.lp-container--split {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .lp-container--split {
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
  }
}


/* ============================================================
   SEKTIONSOVERSKRIFTER
   Store overskrifter centreres med god luft (designguide)
============================================================ */
.lp-section-header {
  text-align: center;
  margin-bottom: 60px;
}

/* Lille etiket — majuskler bruges yderst sparsomt (designguide) */
.lp-section-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--medium-gray);
  margin-bottom: 0.75em;
  display: block;
}

/* Mærkeord i accent — bruges yderst sparsomt */
.lp-accent {
  color: var(--accent-color);
}

.lp-section-intro {
  font-size: 1.1rem;
  font-weight: 300;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}

.lp-divider {
  border: none;
  border-top: 1px solid rgba(249, 249, 249, 0.15);
  margin: 60px auto;
  width: 60%;
}


/* ============================================================
   KNAPPER
   Sort (#1A1A1A), hvid tekst, ingen border-radius (designguide).
   Hover → #FF7A00 baggrund, #1A1A1A tekst.
============================================================ */
.lp-btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 0;
  text-align: center;
}

.lp-btn--primary {
  background-color: var(--primary-text);
  color: #f9f9f9 !important;
}

.lp-btn--primary:hover {
  background-color: var(--accent-color);
  color: var(--primary-text) !important;
}

.lp-btn--outline {
  background-color: transparent;
  color: #f9f9f9 !important;
  border: 1px solid #f9f9f9;
}

.lp-btn--outline:hover {
  background-color: var(--accent-color);
  color: var(--primary-text) !important;
  border-color: var(--accent-color);
}

.lp-section:not(.lp-section--dark) .lp-btn--outline {
  color: var(--primary-text) !important;
  border-color: var(--primary-text);
}

.lp-section:not(.lp-section--dark) .lp-btn--outline:hover {
  background-color: var(--accent-color);
  color: var(--primary-text) !important;
  border-color: var(--accent-color);
}

.lp-btn--full {
  display: block;
  margin-top: 24px;
}


/* ============================================================
   HERO
============================================================ */
.lp-hero {
  padding: 60px 20px 80px;
}

.lp-hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
  background: var(--primary-background);
    padding: 30px;
}

@media (min-width: 768px) {
  .lp-hero {
    padding: 100px 40px;
  }

  .lp-hero__inner {
    flex-direction: row;
    align-items: center;
    gap: 80px;
  }

  .lp-hero__inner > .wp-block-group__inner-container,
  .lp-hero__inner.wp-block-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 80px;
    width: 100%;
  }

  .lp-hero__text { flex: 1 1 50%; }
  .lp-hero__mockup { flex: 1 1 45%; }

  .lp-hero__inner > .wp-block-group__inner-container > .wp-block-group,
  .lp-hero__inner.wp-block-group > .wp-block-group {
    flex: 1;
  }
}

.lp-hero__kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--medium-gray);
  margin-bottom: 1rem;
  display: block;
}

.lp-hero__headline {
  font-size: 2.4rem;
  line-height: 1.15;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .lp-hero__headline { font-size: 3.2rem; }
}

.lp-hero__sub {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 2rem;
  max-width: 500px;
}

.lp-hero__nudge {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--medium-gray);
  margin-top: 12px;
}


/* ============================================================
   PROBLEM / KONSEKVENS / LØSNING
============================================================ */
.lp-pks {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 768px) {
  .lp-pks {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
}

.lp-pks__block {
  flex: 1;
  padding: 0 32px;
}

.lp-pks__block:first-child { padding-left: 0; }

@media (max-width: 767px) {
  .lp-pks__block { padding: 0; }
}

.lp-pks__arrow {
  font-size: 1.5rem;
  color: var(--medium-gray);
  align-self: center;
  display: none;
  padding: 0 8px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .lp-pks__arrow { display: block; }
}

.lp-pks__icon {
  display: block;
  margin-bottom: 16px;
  width: 36px;
  height: 36px;
}

.lp-pks__icon img {
  width: 36px;
  height: 36px;
  filter: invert(1);
}

.lp-pks__block h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #f9f9f9;
  margin-bottom: 12px;
}

.lp-pks__block p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(249, 249, 249, 0.75);
}

.lp-pks__block--solution h3 {
  color: var(--accent-color);
}


/* ============================================================
   REDSKABER / FEATURE-GRID
============================================================ */
.lp-tools-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

@media (min-width: 600px) {
  .lp-tools-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .lp-tools-grid { grid-template-columns: repeat(3, 1fr); }
}

.lp-tool-card {
  background-color: var(--primary-background);
  padding: 28px 24px;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.lp-tool-card:hover {
  background-color: #e9dfd3;
}

.lp-tool-icon {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
}

.lp-tool-icon img {
  width: 36px;
  height: 36px;
}

.lp-tool-card strong {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--primary-text);
}

.lp-tool-card p {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.8;
  margin: 0;
  color: var(--primary-text);
}


/* ============================================================
   SPLIT LAYOUT
============================================================ */
.lp-split__text { flex: 1; }

.lp-split__text h2 { margin-bottom: 1rem; }

.lp-split__text p {
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.lp-split__visual {
  flex: 1;
  width: 100%;
}

.lp-split__img {
  width: 100%;
  display: block;
}


/* ============================================================
   BONUSSER
============================================================ */
.lp-bonuses {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 768px) {
  .lp-bonuses { flex-direction: row; }
}

.lp-bonus {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--primary-background);
}

.lp-bonus__badge {
  background-color: var(--primary-text);
  color: #f9f9f9;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 20px;
}

.lp-bonus__body { padding: 28px 24px; }

.lp-bonus__body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.lp-bonus__body p {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 12px;
}

.lp-bonus__value {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--medium-gray);
}

.lp-bonus__value strong {
  font-weight: 600;
  color: var(--primary-text);
}


/* ============================================================
   UNDERVISER
============================================================ */
.lp-instructor {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 60px;
}

@media (min-width: 768px) {
  .lp-instructor {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
  }
}

.lp-instructor__photo { flex-shrink: 0; }

/* Kvadratisk — ingen border-radius (temaets skarpe stil) */
.lp-instructor__img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  display: block;
}

.lp-instructor__img-placeholder {
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  font-weight: 300;
}

.lp-instructor__bio h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #f9f9f9;
}

.lp-instructor__bio p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(249, 249, 249, 0.8);
  margin-bottom: 1rem;
}


/* ============================================================
   TESTIMONIALS — efterligner .wp-block-pullquote fra style.css
============================================================ */
.lp-testimonials {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .lp-testimonials {
    flex-direction: row;
    align-items: stretch;
  }
}

.lp-testimonial {
  flex: 1;
  padding: 28px 24px 28px 32px;
  margin: 0;
  box-sizing: border-box;
  border-left: 2px solid rgba(249, 249, 249, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

.lp-testimonial p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  font-style: normal;
  color: rgba(249, 249, 249, 0.85);
  margin-bottom: 16px;
}

.lp-testimonial cite {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(249, 249, 249, 0.45);
  font-style: normal;
  display: block;
}


/* ============================================================
   PRISKORT
============================================================ */
/* ============================================================
   PRISKORT — ét fremhævet kort med optional rabatpris
   
   Gutenberg-struktur:
   
   Gruppe [CSS: lp-price-card]
     ├─ Afsnit [CSS: lp-price-card__badge]   → fx "EARLY BIRD"
     ├─ Overskrift H3                         → kursusnavn
     ├─ Afsnit [CSS: lp-price-card__sub]     → kort beskrivelse
     ├─ Gruppe [CSS: lp-price-card__price]
     │    ├─ Afsnit [CSS: lp-price-was]      → fx "3.495 kr." (kun ved rabat)
     │    ├─ Afsnit [CSS: lp-price-amount]   → fx "2.495"
     │    ├─ Afsnit [CSS: lp-price-currency] → "kr."
     │    └─ Afsnit [CSS: lp-price-vat]      → "+ moms"
     ├─ Liste [CSS: list-checkmarks]         → hvad der er med
     └─ Knap [CSS: lp-btn lp-btn--primary lp-btn--full]
============================================================ */
 
/* Wrapper — centeret, begrænset bredde så kortet ikke strækker sig fuldt ud */
.lp-pricing {
  max-width: 480px;
  margin: 0 auto;
}
 
/* Selve kortet */
.lp-price-card {
  background: var(--primary-text);
  padding: 48px 40px;
  box-sizing: border-box;
  position: relative;
  color: #f9f9f9;
}
 
.lp-price-card h3,
.lp-price-card p,
.lp-price-card li {
  color: #f9f9f9;
}
 
.lp-price-card ul.list-checkmarks li {
  color: rgba(249, 249, 249, 0.85);
}
 
.lp-price-card ul.list-checkmarks li::before {
  filter: invert(1);
}
 
/* Badge øverst — fx "EARLY BIRD" eller "BEGRÆNSET ANTAL PLADSER" */
.lp-price-card__badge {
  display: inline-block;
  background: var(--accent-color);           /* accent er ok her — det er en highlight */
  color: var(--primary-text);
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 14px;
  margin-bottom: 24px;
}
 
.lp-price-card__header h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #f9f9f9;
}
 
.lp-price-card__sub {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(249, 249, 249, 0.6);
  margin-bottom: 0;
}
 
/* Prisblok */
.lp-price-card__price {
  margin: 28px 0;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
 
/* Normalprisen der er streget over — vises kun ved rabat */
.lp-price-was {
  font-family: 'Manrope', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(249, 249, 249, 0.4);
  text-decoration: line-through;
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: 2px;
  margin: 0;
  /* Fjern denne blok fra Gutenberg hvis der ikke er rabat */
}
 
/* Den aktuelle pris */
.lp-price-amount {
  font-family: 'Manrope', sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: #f9f9f9;
  margin: 0;
}
 
/* "kr." ved siden af prisen */
.lp-price-currency {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  color: rgba(249, 249, 249, 0.7);
  margin: 0;
}
 
/* "+ moms" under prisen */
.lp-price-vat {
  width: 100%;               /* skubbes ned på egen linje */
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(249, 249, 249, 0.45);
  margin: 4px 0 0;
}
 
.lp-price-card ul.list-checkmarks {
  margin-bottom: 0;
}


/* ============================================================
   PLACEHOLDERS
============================================================ */
.lp-forloeb-placeholder,
.lp-form-placeholder {
  background: var(--secondary-background);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  padding: 40px;
  text-align: center;
  color: var(--medium-gray);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.8;
}

.lp-forloeb-placeholder {
  margin-top: 60px;
}



@media (min-width: 768px) {
  .lp-container--split > .wp-block-group__inner-container,
  .lp-container--split.wp-block-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
  }

  .lp-container--split > .wp-block-group__inner-container > .wp-block-group,
  .lp-container--split.wp-block-group > .wp-block-group {
    flex: 1;
  }
}

@media (min-width: 768px) {
  .lp-instructor > .wp-block-group__inner-container,
  .lp-instructor.wp-block-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
  }

  .lp-instructor > .wp-block-group__inner-container > .wp-block-group,
  .lp-instructor.wp-block-group > .wp-block-group {
    flex: 1;
  }
}