/* Campus Ängelholm — grundstilar
   Färger enligt Grafisk Profil. Layout enligt Design/Index.pdf. */

:root {
  --green: #96C120;
  --green-dark: #5E6D37;
  --green-light: #E0ECBC;
  --teal: #61848C;
  --black: #000000;
  --white: #FFFFFF;
  --grey-text: #C7D2D2;
  --green-mid: #7A972C;

  --font: "Roboto", Arial, sans-serif;

  --container-width: 1280px;
  --side-pad: 48px;
  --gap: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--side-pad);
  box-sizing: border-box;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
}

p { margin: 0 0 16px; }

/* Knappar */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 16px 32px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--green);
  color: var(--white);
  transition: background 0.15s ease;
}
.btn:hover { background: var(--green-dark); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--teal { background: var(--teal); }
.btn--teal:hover { background: var(--green-dark); }

.link-underline {
  font-weight: 700;
  font-size: 15px;
  text-decoration: underline;
}

.link-arrow {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Bildplatshållare — visar foto om satt via inline background-image, annars en gradient */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, var(--teal), var(--green-dark));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  text-align: center;
  padding: 8px;
  min-height: 200px;
}

.img-placeholder-artikel {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, var(--teal), var(--green-dark));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: rgba(255,255,255,0.85);
  margin-bottom: 20px;
  min-height: 500px;
  max-width: 400px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  transition: transform 0.25s ease;
}
.site-header.header--hidden {
  transform: translateY(-100%);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  padding-bottom: 24px;
}
.logo {
  display: flex;
  align-items: center;
}
.logo img { width: 350px; height: auto; }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding-top: 13px;
}
.main-nav a {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.main-nav a:hover { color: var(--green); }
.nav-divider {
  width: 1px;
  height: 20px;
  background: rgba(0,0,0,0.25);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--black);
  margin: 5px 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(360px, 42vw, 640px);
  display: flex;
  align-items: flex-end;
  color: var(--white);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__content {
  padding-top: 40px;
  padding-bottom: 40px;
}
.hero h1 {
  font-size: clamp(32px, 6vw, 80px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  max-width: 900px;
  margin: 0;
}
/* Variant: större rubrikstorlek för sidor som behöver det (t.ex. kategorisidor) */
.hero h1.hero-title--100 { font-size: clamp(36px, 7.5vw, 100px); }
/* Variant: lägre hero med centrerad rubrik (t.ex. underliggande sidor) */
.hero--sm {
  min-height: clamp(219px, 23.4375vw, 328px);
  align-items: center;
}
/* Variant: enfärgad bakgrund istället för foto (t.ex. Insikt-startsidan) */
.hero--brand { background: var(--green); }
.hero__tagline {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  color: var(--white);
  margin: 0;
}
.hero--sm .hero__content {
  width: 100%;
  text-align: center;
}
.hero--sm .hero h1,
.hero--sm h1 {
  margin: 0 auto;
}
.hero__subhead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  max-width: 700px;
  margin: 12px 0 0;
}
/* Litet grönt etikett-ord ovanför rubriken, t.ex. "YH-UTBILDNING" */
.hero__eyebrow {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.hero__eyebrow--lg { font-size: clamp(20px, 2.2vw, 28px); margin-bottom: 16px; }

/* ---------- Variant: delad hero — färgblock + foto sida vid sida ----------
   Återanvänds för flera typer av innehållssidor (t.ex. enskilda Insikt-event). */
.hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(360px, 40vw, 560px);
}
.hero--split .hero__content {
  background: var(--green);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: max(var(--side-pad), (100vw - var(--container-width)) / 2 + var(--side-pad));
  padding-right: var(--side-pad);
}
.hero--split .hero__media {
  background-size: cover;
  background-position: center;
}

/* ---------- CTA-rad (t.ex. under hero eller i sidfoten av en utbildningssida) ----------
   Samma bredd-låsning som hero-cards: helbred under idealbredden, låst/centrerad därutöver. */
.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}
/* Variant: vänsterboxen 50% bredare (3fr:1fr istället för 1fr:1fr) med dubbel textstorlek */
.cta-row--wide-left {
  grid-template-columns: 3fr 1fr;
  position: relative;
  padding: 5px;
  box-sizing: border-box;
  background: var(--white);
}
.cta-row--wide-left .cta-box--olive .cta-label,
.cta-row--wide-left .cta-box--olive p { font-size: 32px; }
/* Fyllnadsboxar som växer in från fönsterkanten när bredden går förbi idealbredden (1280px),
   samma trick som .hero-cards — fortsätter respektive box färg istället för att lämna ett tomt fält.
   Samma 5px vita ram/mellanrum som .hero-cards, med top/bottom instansat för att matcha paddingen. */
.cta-row--wide-left::before,
.cta-row--wide-left::after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: calc((100vw - var(--container-width)) / 2 - 5px);
  pointer-events: none;
}
.cta-row--wide-left::before { left: calc((var(--container-width) - 100vw) / 2 + 5px); background: var(--green); }
.cta-row--wide-left::after { right: calc((var(--container-width) - 100vw) / 2 + 5px); background: var(--green); }

/* Variant: matchar bara innehållsbredden (för användning inuti en .container), inget helbred-läge */
.cta-row--content {
  max-width: 50%;
  margin: 0 auto;
}
/* Boxarna 50% lägre (padding upp/ner halverad) — textstorleken oförändrad */
.cta-row--content .cta-box {
  padding-top: 20px;
  padding-bottom: 20px;
}
.cta-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px var(--side-pad);
  color: var(--white);
}
.cta-box--olive { background: var(--green-dark); }
.cta-box--green { background: var(--green); }
a.cta-box { cursor: pointer; transition: background-color 0.15s ease; }
a.cta-box--green:hover { background: var(--green-dark); }
a.cta-box--olive:hover { background: #4a5a2c; }
.cta-box p { margin: 0; }
.cta-box .cta-label {
  font-weight: 700;
  text-transform: uppercase;
}
.cta-box--link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.cta-box--link:hover { background: var(--green-dark); }
.cta-box--link svg { width: 22px; height: 22px; flex-shrink: 0; }

/* Variant: vertikalt staplade CTA-boxar (t.ex. lyssna-länkar i ett Blogg-inlägg) */
.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* Kortraden — samma bredd/centrering som container, så den slutar växa vid "idealbredden"
   (1280px) istället för att flyta iväg bredare på stora skärmar. Under den bredden är den
   fortfarande helbred (kant i kant), exakt som container beter sig. */
.hero-cards {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5px;
  padding: 5px;
  box-sizing: border-box;
  background: var(--white);
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  position: relative;
}
/* Fyllnadsboxar som växer in från fönsterkanten när bredden går förbi idealbredden (1280px),
   istället för att lämna ett tomt vitt fält på sidorna. Samma 5px vita mellanrum som mellan
   de riktiga korten. Osynliga (bredd 0, klipps av webbläsaren) under idealbredden. */
.hero-cards::before,
.hero-cards::after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: calc((100vw - var(--container-width)) / 2 - 5px);
  background: var(--green);
  pointer-events: none;
}
.hero-cards::before { left: calc((var(--container-width) - 100vw) / 2 + 5px); }
.hero-cards::after { right: calc((var(--container-width) - 100vw) / 2 + 5px); }
/* Textens vänsterkant i den vänstra kolumnen låst till samma position som loggan/hero-rubriken
   (kompenserar för kortradens 5px vita ram). */
.hero-cards__stack .card,
.hero-cards--triple .card:first-child {
  padding-left: calc(var(--side-pad) - 5px);
}
.hero-cards__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
}
.card {
  background: var(--green);
  color: var(--white);
  padding: 40px var(--side-pad);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
.card:not(.card--insikt) {
  transition: background-color 0.15s ease;
}
.card:not(.card--insikt):hover {
  background-color: var(--green-dark);
}
.card h3 { margin-bottom: 16px; font-size: 40px; }
.card p { font-size: 15px; line-height: 1.5; margin-bottom: 0; }

/* Variant: tre lika stora boxar i hero-cards-raden, istället för 2+foto */
.hero-cards--triple { grid-template-columns: repeat(3, 1fr); }
/* Variant: centrerad text i korten, istället för vänsterställd */
.hero-cards--centered .card { align-items: center; text-align: center; }

.card--insikt {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}
.card--insikt .img-placeholder { position: absolute; inset: 0; align-items: flex-start; padding-top: 24px; }
.card--insikt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0) 60%);
}
.card--insikt .card__overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
}
.card--insikt .eyebrow {
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  display: block;
  margin-bottom: 12px;
}
.card--insikt p { max-width: 520px; }
.card--insikt .btn { margin-top: 16px; }

/* ---------- Textkolumner (t.ex. Beskrivning+fakta eller Behörighet+Kurser) ---------- */
.text-columns {
  padding: 72px 0;
}
.text-columns .container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
}
.text-columns.text-columns--even .container {
  grid-template-columns: 1fr 1fr;
}
.text-columns h2 { color: var(--green); font-size: clamp(22px, 2.4vw, 32px); }
.text-columns--top-border { border-top: 2px solid var(--green); }

/* Faktapanel, t.ex. "2 år / 400 YH poäng" med studieuppgifter */
.facts-panel dl { margin: 0 0 24px; }
.facts-panel dt { font-weight: 700; margin-top: 16px; }
.facts-panel dt:first-child { margin-top: 0; }
.facts-panel dd { margin: 0; }
.facts-panel .facts-note { margin-bottom: 24px; }
.facts-panel img { max-width: 220px; height: auto; margin-top: 8px; }
.facts-panel a { display: inline-block; margin-bottom: 24px; }

/* Föreläsarprofil, t.ex. under en Insikt-beskrivning */
.speaker__name { color: var(--green); font-size: 24px; margin-bottom: 4px; }
.speaker__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  margin-bottom: 16px;
}
.speaker__title a {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--black);
  border-radius: 4px;
  align-items: center;
  justify-content: center;
}
.speaker__title svg { width: 13px; height: 13px; }

/* Kurslista med punkter, t.ex. under "Kurser" */
.course-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.course-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
}
.course-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* ---------- Röster/citat från partnerföretag ---------- */
.testimonials {
  padding-top: 36px;
  padding-bottom: 26px;
}
.testimonials .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
}
.testimonial img {
  height: 32px;
  width: auto;
  margin-bottom: 16px;
}
.testimonial .testimonial-name {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-top: 8px;
}
.testimonial blockquote {
  margin: 0;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Kurslistning på vit bakgrund (samma course-grid/course-card som Utbildningar,
   men vänsterställd rubrik med linje istället för centrerad rubrik på tealbakgrund) ---------- */
.section-listing {
  background: var(--white);
  color: var(--black);
  padding: 64px 0;
}
.section-listing h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--black);
}
.section-listing .course-grid { margin-bottom: 0; }
.section-listing + .section-listing { padding-top: 0; }

/* ---------- Utbildningar ---------- */
.section-utbildningar {
  background: var(--teal);
  color: var(--white);
  padding: 80px 0;
}
.section-utbildningar h2 {
  text-align: center;
  font-size: clamp(28px, 3.4vw, 48px);
  margin-bottom: 48px;
}
/* Valfri 2-3-radig ingress under en rubrik — generell, återanvänds under flera olika rubriker.
   Lämnas tom om den inte behövs. */
.section-intro {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
}
.section-utbildningar .section-intro { margin-top: -24px; margin-bottom: 48px; }
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.course-card { display: block; cursor: pointer; }
.course-card-arkiv { display: block;}
.course-card .img-placeholder { min-height: 260px; border-radius: 0; }
.course-card__body { padding-top: 24px; }
.course-card h3 { font-size: 20px; margin-bottom: 10px; transition: text-decoration-color 0.15s ease; }
.course-card p { font-size: 15px; opacity: 0.92; margin-bottom: 14px; }
.course-card:hover h3 { text-decoration: underline; }
.section-utbildningar .center { text-align: center; }

/* ---------- Bild/text-sektioner ---------- */
.split-section {
  padding: 50px 0;
}
.split-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.split-section.reverse .container {
  direction: rtl;
}
.split-section.reverse .container > * { direction: ltr; }
.split-section .img-placeholder { min-height: 450px; border-radius: 0; }
/* Vattenstämpel-variant: logga centrerad ovanpå fotot */
.img-placeholder--watermark img {
  width: 45%;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.split-section .container > div:not(.img-placeholder) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.split-section h2 { font-size: clamp(28px, 3.4vw, 48px); color: var(--green); }

/* ---------- Insikt banner (delad layout — färgblock + foto, som en "selected Insikt"-hero) ---------- */
.insikt-banner {
   border-top: 5px solid var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(360px, 40vw, 460px);
  color: var(--white);
  background: var(--green);
}
.insikt-banner__content {
  background: var(--green);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-left: max(var(--side-pad), (100vw - var(--container-width)) / 2 + var(--side-pad));
  padding-right: var(--side-pad);
}
.insikt-banner__media {
  background-size: cover;
  background-position: center;
}
.insikt-banner .eyebrow-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.insikt-banner .eyebrow {
  font-size: 36px;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1;
}
.insikt-banner .eyebrow-num {
  font-size: 36px;
  font-weight: 300;
}
.insikt-banner h2 {
  font-size: clamp(28px, 3.4vw, 48px);
  color: var(--white);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 16px;
}
.insikt-banner p { font-size: 15px; margin-bottom: 50px; }

.insikt-banner .btn,
.split-bleed--green-light .btn {
  background: var(--green-dark);
}

.insikt-banner .btn,
.split-bleed--green-light .btn {
  background: var(--green-dark);
}
.insikt-banner .btn:hover,
.split-bleed--green-light .btn:hover {
  background: var(--green-mid);
}

/* ---------- Stort textband ---------- */
.text-banner {
  background: var(--white);
  padding: 96px 0;
  text-align: center;
}
.text-banner h2 {
  font-size: clamp(32px, 6vw, 80px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 32px;
}
.text-banner h2 .teal { color: var(--teal); }
.text-banner h2 .grey { color: var(--grey-text); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--teal);
  border-top: 5px solid var(--white);
  color: var(--white);
  padding: 72px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.8fr;
  gap: var(--gap);
}
.footer-address { margin-top: 40px; }
.footer-address p { font-size: 14px; line-height: 1.3; margin-bottom: 2px; }
.footer-address .email { display: inline-block; margin-top: 8px; text-decoration: underline; font-size: 14px; }
.footer-logo img { width: 230px; height: auto; }

.footer-group { margin-bottom: 28px; line-height: 1; }
.footer-group:last-child { margin-bottom: 0; }
.footer-grid h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--white);
  margin-top: 0;
  margin-bottom: 12px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 6px; font-size: 14px; }
.footer-grid li a:hover { text-decoration: underline; }

.footer-social {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.social-icons { display: flex; align-items: center; gap: 14px; }
.social-icons img { display: block; height: 40px; width: auto; }
.social-icons a.icon-instagram img { height: 40px; }

.kronosalen-badge {
  background: var(--white);
  width: 175px;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  margin-top: 32px;
  margin-bottom: -72px;
}
.kronosalen-badge img { width: 130px; height: auto; margin: 0 auto; }

/* ---------- Centrerad ingress-text (t.ex. direkt under en .hero--sm) ----------
   Knappen är valfri — lämnas tom i CMS visas ingen knapp. */
.intro-text { padding: 64px 0; text-align: center; }
.intro-text p {
  max-width: 760px;
  margin: 0 auto 24px;
  font-size: 18px;
  line-height: 1.6;
}
.intro-text p:last-of-type { margin-bottom: 0; }
.intro-text .btn { margin-top: 8px; }

/* ---------- Samarbetspartners: rubrik + ingress + en eller flera partners i rad ---------- */
.partners { padding: 96px 0; }
.partners > .container { text-align: center; }
.partners h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 900;
  margin-bottom: 16px;
}
.partners .section-intro { color: var(--black); }
.partners__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 64px;
  margin-top: 48px;
}
.partners__item { flex: 0 1 340px; text-align: center; }
.partners__item img {
  width: 220px;
  height: 120px;
  max-width: 100%;
  object-fit: scale-down;
  object-position: center;
  margin: 0 auto 24px;
}
}
.partners__item p { margin-bottom: 24px; }
/* ---------- Personallistning (foto + namn + titel + text + kontaktikoner, per person) ---------- */
.people { padding: 96px 0; }
.people h2 { font-size: clamp(28px, 3.4vw, 48px); color: var(--green); margin-bottom: 48px; text-align: center; }
.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 40px;
}
.people-grid__item { text-align: center; }
.people-grid__item .img-placeholder { aspect-ratio: 1 / 1.05; min-height: 0; border-radius: 0; }
.people-grid__item h3 { color: var(--green); font-size: 24px; margin: 24px 0 4px; }
.people-grid__item .role { display: block; margin-bottom: 16px; }
.people-grid__item p { font-size: 15px; margin-bottom: 16px; }
.people-grid__item .contact-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.people-grid__item .contact-icons__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.people-grid__item .contact-icons a {
  display: inline-flex;
  color: var(--black);
}
.people-grid__item .contact-icons svg { width: 22px; height: 22px; }
.people-grid__item .contact-icons img { height: 22px; width: auto; }
.people-grid__item .contact-icons .contact-phone { font-size: 14px; white-space: nowrap; }

/* ---------- Styrelse: rubrik + kort (namn + text, ingen bild) på tealbakgrund ---------- */
.board { background: var(--teal); color: var(--white); padding: 96px 0; }
.board h2 {
  text-align: center;
  font-size: clamp(28px, 3.4vw, 48px);
  margin-bottom: 48px;
}
.board__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.board__card {
  background: var(--white);
  color: var(--black);
  padding: 40px;
  text-align: center;
}
.board__card h3 { color: var(--green); font-size: 24px; margin-bottom: 12px; }
.board__card p { margin: 0; }

/* ---------- Insikt-intro: större ingresstext vänster, fakta höger ---------- */
.insikt-intro { padding: 96px 0; }
.insikt-intro .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.insikt-intro__lead { font-size: 22px; line-height: 1.6; }
.insikt-intro__facts .fact { margin-bottom: 24px; }
.insikt-intro__facts .fact:last-child { margin-bottom: 0; }
.insikt-intro__facts h3 { font-size: 16px; margin-bottom: 4px; }
.insikt-intro__facts p { margin-bottom: 0; }

/* ---------- Kommande: lista av event (bild + nummer/datum + rubrik + text) ---------- */
.events { padding: 64px 0 32px; }
.events h2 {
  text-align: center;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--black);
}
.event .eyebrow-row { display: block; margin-bottom: 24px; }
.event__number,
.event__date {
  display: block;
  color: var(--green);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
}
.event__number { font-size: clamp(22px, 2.6vw, 32px); }
.event__date { font-size: clamp(26px, 3vw, 36px); }
.event h3 {
  font-size: clamp(24px, 2.4vw, 34px);
  margin-bottom: 16px;
  transition: text-decoration-color 0.15s ease;
}
.event h3 a { text-decoration: none; }
.event h3 a:hover { text-decoration: underline; }

/* ---------- Media banner (helbred bild med centrerat innehåll ovanpå) ---------- */
.media-banner {
    border-top: 5px solid var(--white);
  position: relative;
  min-height: clamp(320px, 40vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-banner__overlay {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--side-pad);
  text-align: center;
  color: var(--black);
}
/* Variant: vit text för mörkare/blandade foton, med en mörk gradient för läsbarhet */
.media-banner--dark { color: var(--white); }
.media-banner--dark .media-banner__overlay { color: var(--white); }
.media-banner--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.media-banner__overlay h2 {
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.media-banner__overlay p { margin-bottom: 24px; }

/* ---------- Två oberoende kolumner (bild + rubrik + text + knapp i varje) ---------- */
.content-columns { padding: 96px 0; }
.content-columns__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.content-columns__item .img-placeholder { min-height: 280px; border-radius: 0; margin-bottom: 32px; }
.content-columns__item h2 { font-size: clamp(24px, 2.4vw, 34px); color: var(--green); margin-bottom: 16px; }
.content-columns__item p { margin-bottom: 24px; }

/* ---------- Responsivt ---------- */
@media (max-width: 900px) {
  .hero-cards { grid-template-columns: 1fr; }
  .hero--split { grid-template-columns: 1fr; min-height: 0; }
  .hero--split .hero__media { min-height: 260px; }
  .insikt-banner { grid-template-columns: 1fr; min-height: 0; }
  .insikt-banner__media { min-height: 260px; }
  .hero-cards__stack { grid-template-rows: none; }
  .course-grid { grid-template-columns: 1fr; }
  .content-columns__grid { grid-template-columns: 1fr; gap: 48px; }
  .people-grid { grid-template-columns: 1fr; gap: 48px; }
  .board__grid { grid-template-columns: 1fr; }
  .split-section .container { grid-template-columns: 1fr; gap: 32px; }
  .split-section.reverse .container { direction: ltr; }
  .split-section .container > *:first-child { order: -1; }
  .split-section .img-placeholder { width: 100%; min-height: 0; aspect-ratio: 4 / 3; }
  .cta-row { grid-template-columns: 1fr; }
  .text-columns .container,
  .text-columns.text-columns--even .container { grid-template-columns: 1fr; gap: 40px; }
  .insikt-intro .container { grid-template-columns: 1fr; gap: 40px; }
  .testimonials .container { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-social { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; height: auto; margin-top: 16px; }
  .kronosalen-badge { margin-top: 0; }
}

@media (max-width: 700px) {
  :root { --side-pad: 24px; }
  .logo img { width: 245px; }
  .card { padding-top: 20px; padding-bottom: 20px; }
  .card h3 { font-size: 20px; }
  .hero__subhead { font-size: 14px; margin-top: 16px; }
  .cta-row--wide-left .cta-box--olive .cta-label,
  .cta-row--wide-left .cta-box--olive p { font-size: 16px; line-height: 1.3; }
  .main-nav { display: none; }
  .main-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 16px 24px 24px;
  }
  .main-nav.is-open ul { flex-direction: column; align-items: flex-start; gap: 16px; }
  .main-nav.is-open .nav-divider { display: none; }
  .nav-toggle { display: block; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-logo img { margin: 0 auto; }
  .social-icons { justify-content: center; }
  .kronosalen-badge { width: 140px; padding: 16px; }
  .kronosalen-badge img { width: 104px; }
}

/* ---------- Scrollreveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-group .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Split-bleed (bakgrundsfärgad sektion med bild som går ut i fönsterkanten) ----------
   Färgvariant väljs med .split-bleed--teal eller .split-bleed--green-light (fler kan läggas till
   i EE som ett urval av fördefinierade färger). .split-bleed--reverse speglar layouten så bilden
   sitter till vänster istället för höger. Textens innerkant är alltid låst till samma position
   som loggan/container-innehållet, oavsett fönsterbredd — samma princip som hero-cards. */
.split-bleed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
.split-bleed--teal { background: var(--teal); color: var(--white); }
.split-bleed--teal h2 { color: var(--white); }
.split-bleed--green-light { background: var(--green); color: var(--white); }
.split-bleed--green-light h2 { color: var(--white); }

.split-bleed__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 64px;
  padding-bottom: 64px;
  padding-left: max(var(--side-pad), (100vw - var(--container-width)) / 2 + var(--side-pad));
  padding-right: var(--side-pad);
}
.split-bleed__text h2 { font-size: clamp(28px, 3.4vw, 48px); margin-bottom: 16px; }
.split-bleed__text p { margin-bottom: 24px; }

.split-bleed__media {
  background-size: cover;
  background-position: center;
}

.split-bleed--reverse .split-bleed__text {
  order: 2;
  padding-left: var(--side-pad);
  padding-right: max(var(--side-pad), (100vw - var(--container-width)) / 2 + var(--side-pad));
}
.split-bleed--reverse .split-bleed__media { order: 1; }

@media (max-width: 900px) {
  .split-bleed { grid-template-columns: 1fr; min-height: 0; }
  .split-bleed__media { order: -1; aspect-ratio: 4 / 3; }
  .split-bleed--reverse .split-bleed__text { order: 2; padding-left: var(--side-pad); padding-right: var(--side-pad); }
  .split-bleed__text { padding-left: var(--side-pad); padding-right: var(--side-pad); padding-top: 40px; padding-bottom: 40px; }
}