/* ============================================
   EKVALITA EDUCATION — Overrides & additions
   Base styles inherited from ../css/style.css
   ============================================ */

.section-divider-line { display: block; width: 100%; max-width: var(--inner-max); height: auto; margin: 0 auto; }

/* ── Education-specific variable overrides ── */
:root {
  --sec-pad:   3rem 2rem;
  --inner-max: 880px;
  --cream:     #f7f6ff;
  --illus-h:   160px;
  --feature-h: clamp(200px, 26vw, 320px); /* the larger illustrations on the material subpages */  /* all illustrative images render at exactly this height; */
                       /* low enough that no image hits the column width first */
}

/* main CSS offsets via `body > header { padding-top: 64px }` — no extra body rule needed */

/* ── Logo img: hidden while hero wordmark is visible, revealed on scroll ── */
.logo-img {
  height: 40px;
  width: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
body.logo-visible .logo-img,
.site-nav.hamburger-open .logo-img {
  opacity: 1;
  pointer-events: auto;
}

/* ── Desktop nav only ──────────────────────────────────────────────────────
   These must stay behind a min-width query. base.css carries the mobile nav
   inside @media (max-width: 960px), but this file loads second and the
   selectors have equal specificity, so anything unscoped here beats it: an
   82px gap between items, links locked to 72px tall and 8rem wide, and a nav
   that could not grow to fit the open menu. That is what made the hamburger
   menu fall apart on phones. Below 961px, base.css governs and the nav
   behaves exactly like the business site. */
@media (min-width: 961px) {
  /* Taller than base.css's 64px to fit the 40px logo */
  .site-nav { height: 72px; }
  body > header { padding-top: 72px; }

  /* Nav tabs: spread evenly, fixed min-width so lang-change can't shift columns */
  .nav-links { gap: calc(2rem + 50px); }
  .nav-links > li {
    display: flex;
    align-items: stretch;
  }
  .nav-links > li > a {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    height: 72px;
    min-width: 8rem;
    color: var(--ink);
    line-height: 1;
  }
  .nav-links > li > a:hover { color: var(--blue-dk); }
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
  background: var(--cream);
  min-height: 460px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: auto;
  padding: 4rem 2rem 3rem;
}
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 520px;
}
.hero-edu-logo {
  height: 88px;
  width: auto;
  margin: 0 auto 1.5rem;
}
.hero-pencil {
  position: absolute;
  top: calc(50% + 200px);
  transform: translateY(-50%);
  height: 150%;
  width: auto;
  pointer-events: none;
}
.hero-pencil--left  { left:  calc(-2% + 100px); }
.hero-pencil--right { right: calc(-2% + 100px); }

/* Outline layer: fade in → hold → fade out */
.hero-pencil-outline {
  animation: outlineAppear 3.5s ease-out both;
}
.hero-pencil--left.hero-pencil-outline {
  animation-name: outlineAppearLeft;
}
/* Colour layer: hidden until crossfade starts */
.hero-pencil-color {
  animation: colorFillIn 3.5s ease-out both;
}
/* Right pencil pair starts 0.4 s later */
.hero-pencil--right.hero-pencil-outline,
.hero-pencil--right.hero-pencil-color {
  animation-delay: 0.4s;
}

@keyframes outlineAppearLeft {
  0%   { opacity: 0; }
  60%  { opacity: 1; }  /* long fade-in: 60% of 3.5s = 2.1s */
  72%  { opacity: 1; }
  88%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes outlineAppear {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  45%  { opacity: 1; }
  68%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes colorFillIn {
  0%   { opacity: 0; }
  45%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Rainbow underline goes last — after right pencil (0.7s + 3.5s = 4.2s) is fully coloured */
.edu-underline {
  clip-path: inset(0% 100% 0% 0%);
  animation: underlineReveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 3s;
}

@keyframes underlineReveal {
  to { clip-path: inset(0% 0% 0% 0%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pencil-outline { display: none; }
  .hero-pencil-color   { animation: none; opacity: 1; }
  .edu-underline       { animation: none; clip-path: none; }
}

@media (max-width: 700px) {
  .hero { min-height: 360px; padding: 3rem 1.25rem 2.5rem; }

  /* Keep the decoration inside the hero. The pencils are measured from the
     hero's centre and hang far below it, and because they are absolutely
     positioned they paint over the static section underneath — which is what
     hid the "Behöver din skola hjälp" heading on phones. */
  .hero { overflow: hidden; }

  /* Flank the text rather than cross it. At this height each pencil is about
     70px wide, so the two leave the middle of the screen clear. */
  .hero-pencil {
    top: 50%;
    height: 80%;
    opacity: 0.3;
    z-index: 0;            /* .hero-inner is z-index 1, so text stays on top */
  }
  .hero-pencil--left  { left:  -4%; }
  .hero-pencil--right { right: -4%; }

  /* The colour layer's crossfade ends at opacity 1, and an animated value beats
     a normal declaration, so the opacity above only applies once the animation
     stops. Same approach as the reduced-motion block above. */
  .hero-pencil-outline { display: none; }
  .hero-pencil-color   { animation: none; }
}

@media (max-width: 960px) {
  /* The wordmark is 4.75:1, so at 40px it is 190px wide. Together with the
     language switcher and the menu button that overflowed a phone's nav bar:
     EN was pushed off the right edge and the button wrapped onto a second row
     on the left. At 28px it is 133px and the three fit on one row, with the
     button on the right as on the business site. */
  .logo-img { height: 28px; }
}

/* Correct mega panel top offset for 72px nav (base.css assumes 64px) */
.nav-mega { padding-top: calc(72px - 0.75rem); }

/* ── Mega-menu: 3 dropdown tabs — strict widths keep columns under their tabs ── */
.nav-mega-col:first-child { width: var(--mega-col1-w, 12rem); }
.nav-mega-col:nth-child(2) { width: var(--mega-col2-w, 10rem); }

/* ════════════════════════════════════════
   SHARED INNER CONTAINER
════════════════════════════════════════ */
.inner {
  max-width: var(--inner-max);
  margin: 0 auto;
}

/* ════════════════════════════════════════
   SHARED SECTION BLOCK (cream bg + standard padding)
════════════════════════════════════════ */
.aktuellt-section,
.team-section,
.utbildningar-section,
.contact-section,
.content-section,
.team-bio-section,
.themes-section,
.yhteys-section,
.page-cta {
  padding: var(--sec-pad);
  background: var(--cream);
}

/* ════════════════════════════════════════
   SHARED SECTION HEADING (centred h2)
════════════════════════════════════════ */
.aktuellt-section h2,
.themes-section h2 { text-align: center; margin-bottom: 2.5rem; }
.team-bio-section h2,
.yhteys-section h2 { text-align: center; margin-bottom: 2rem; }
.utbildningar-section h2 { text-align: center; margin-bottom: 0.5rem; }

/* ════════════════════════════════════════
   SHARED LEAD PARAGRAPH (centred-column body copy)
════════════════════════════════════════ */
.intro-section p,
.team-section p,
.content-section p,
.page-hero .page-lead,
.nh-hero p, .nh-hero div p {
  max-width: 600px;
  color: var(--ink);
  line-height: 1.8;
}
.intro-section p,
.content-section p { margin: 0 auto 1rem; }
.page-hero .page-lead { margin: 0 auto; text-align: left; }
.team-section p { margin: 0 auto 0.85rem; text-align: left; }
/* Left, like .page-hero .page-lead and .team-section — the logo above stays
   centred on its own margin:auto. */
.nh-hero p, .nh-hero div p { margin: 0 auto 0.85rem; text-align: left; }

/* ════════════════════════════════════════
   SHARED ILLUSTRATION IMAGE BOX
   One height for every illustrative image (news, course and project
   rows) so they line up across the site. Nya horisonter theme icons
   are deliberately excluded — those are square icons, not illustrations.
════════════════════════════════════════ */
.news-card-img,
.course-card-img,
.material-card-img,
.project-row-img {
  width: 100%;
  height: var(--illus-h);
  border-radius: 8px;
  margin-bottom: 1rem;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.news-card-img img,
.course-card-img img,
.material-card-img img,
.project-row-img img {
  max-width: 100%;
  max-height: var(--illus-h);
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
.material-card-img { border-radius: 6px; margin-bottom: 0.75rem; }
.project-row-img { margin-bottom: 0; }

/* ════════════════════════════════════════
   SHARED CARD TITLE (small bold blue label + years suffix)
════════════════════════════════════════ */
.material-card h3,
.theme-card h3,
.project-row-text h3,
.page-hero .page-lead--kicker p {
  font-size: 1rem;
  font-weight: 700;
  color: #833b48;
}
.material-card h3 { margin-bottom: 0.4rem; }
.theme-card h3   { margin-bottom: 0.5rem; }
.project-row-text h3 { font-size: 1.05rem; margin-bottom: 0.6rem; text-align: left; }
.page-hero .page-lead--kicker p {
  font-family: var(--font-display);
  line-height: 1.6;
  color: var(--blue); /* kicker is a lead paragraph, not a heading — stays blue */
}
.material-card h3 .card-years,
.project-row-text h3 .card-years {
  font-weight: 500;
  color: var(--ink);
  opacity: 0.6;
}

/* ════════════════════════════════════════
   INTRO
════════════════════════════════════════ */
.intro-section {
  padding: 4rem 2rem;
  background: var(--cream);
}
.intro-section h2 {
  color: #833b48;
  font-weight: 800;
  text-align: left;
  max-width: 600px;
  margin: 0 auto 1.75rem;
}
/* ════════════════════════════════════════
   AKTUELLT — NEWS CARDS
════════════════════════════════════════ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.news-card { display: flex; flex-direction: column; }
.news-card-img--placeholder { background: rgba(50, 63, 136, 0.08); }
.news-card-img--nya-horisonter { background: linear-gradient(135deg, #fbbb8c 0%, #9bc3d0 100%); }
.news-card h3 { margin-bottom: 0.5rem; }
.news-card p { font-size: 0.92rem; color: var(--ink); line-height: 1.7; }

@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ════════════════════════════════════════
   TEAM
════════════════════════════════════════ */
.team-section {
  text-align: center;
}
.team-edu-logo {
  height: 32px;
  width: auto;
  margin: 0 auto 1.5rem;
}
.team-section h2 { margin-bottom: 1.25rem; }

/* ════════════════════════════════════════
   UTBILDNINGAR — COURSE PACKAGES
════════════════════════════════════════ */
.utbildningar-subtitle {
  text-align: center;
  font-weight: 600;
  color: #833b48;
  text-decoration: underline;
  text-decoration-color: var(--peach);
  margin-bottom: 2.5rem;
  font-size: 1rem;
}
.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.course-card { display: flex; flex-direction: column; }
.course-card-img--placeholder { background: rgba(50, 63, 136, 0.08); }
.course-card h3 { margin-bottom: 0.5rem; }
.course-card p {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 0.75rem;
}
.course-card a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--peach);
  align-self: flex-start;
}
.course-card a:hover { text-decoration-color: var(--ink); }

.newsletter-wrap {
  text-align: center;
  margin-top: 3rem;
}

@media (max-width: 900px) {
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .courses-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   CONTACT
════════════════════════════════════════ */
.contact-section {
  text-align: center;
}
.contact-icon { margin-bottom: 1.25rem; }
.contact-icon svg,
.contact-icon img { display: block; margin: 0 auto; }
.contact-section h2 { margin-bottom: 0.5rem; }
.contact-section a {
  font-weight: 600;
  font-size: 1.05rem;
}

/* ════════════════════════════════════════
   PAGE HERO (inner pages)
════════════════════════════════════════ */
.page-hero {
  background: var(--cream);
  padding: 5rem 2rem 3rem;
  text-align: center;
  position: relative; z-index: 1;
}
.page-hero h1 { margin-bottom: 1rem; }
.page-hero h3 {
  text-align: left;
  color: var(--blue);
  font-size: 1.35rem;
  font-weight: 700;
  max-width: 600px;
  margin: 0.5rem auto 0;
  line-height: 1.4;
}
.masc-hero-img { width: 100%; max-width: 600px; margin: 0 auto 2rem; display: block; }

/* ════════════════════════════════════════
   CONTENT SECTION (generic)
════════════════════════════════════════ */
.content-section h2 {
  color: #833b48;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.content-section h2.intro-heading { max-width: 600px; margin: 0 auto 1.25rem; }
.content-section h2.heading-center { color: #833b48; text-align: center; }

/* ════════════════════════════════════════
   TWO-COLUMN (book + text)
════════════════════════════════════════ */
.two-col {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
  max-width: var(--inner-max);
  margin: 0 auto 3rem;
}
.two-col--reverse { grid-template-columns: 1fr 280px; }
/* Wide logo (e.g. Nya horisonter, ~3:1) — 280px makes it tiny, so give it room
   and drop the book-cover shadow, which looks wrong on a logo. */
.two-col--logo { grid-template-columns: 440px 1fr; }
.two-col--logo .two-col-img img { box-shadow: none; border-radius: 0; }
.two-col--reverse .two-col-img { order: 2; }
/* Feature illustrations run from 0.71 to 1.50 in aspect ratio, so at width:100%
   the tall ones towered over the wide ones. They share a height now and keep
   their own proportions — nothing is cropped. */
.two-col-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--feature-h);
}
.two-col-img img {
  max-height: var(--feature-h);
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  object-fit: contain;
}

/* Back to the material page — sits level with the page title, top right, and
   sticks under the nav so it stays reachable all the way down. It lives at the
   top of <main> rather than inside the hero: a sticky element only sticks
   while its own parent is on screen, and the hero scrolls away. The strip
   itself ignores the pointer so it cannot block anything behind it. */
.back-link-section {
  /* fixed, not sticky: body carries overflow-y: clip to stop the orbs
     extending the page, and a clipped ancestor switches sticky off. */
  position: fixed;
  top: calc(72px + 0.75rem);
  left: 0;
  right: 0;
  z-index: 40;
  padding: 0 2rem;
  pointer-events: none;
}
.back-link-section .inner {
  /* Out at the window edge, not the 880px text column, so the text scrolling
     underneath never runs beneath the pill. */
  max-width: none;
  margin: 0;
  text-align: right;
}
.back-link {
  pointer-events: auto;
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--blue);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.back-link::before { content: "‹ "; }
.back-link:hover { color: var(--blue-dk); text-decoration: underline; text-decoration-color: var(--peach); }

@media (max-width: 960px) {
  /* the bar is shorter once the desktop 72px rule stops applying */
  /* On a phone the text column is the full width, so a pinned pill would sit
     on top of the words. Here it rides in the flow at the top of the page
     instead: never covering anything, still the first thing above the title. */
  .back-link-section {
    position: static;
    padding: 1rem 1.25rem 0;
  }
}
.two-col-text h2 { color: #833b48; font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; }
.two-col-text p { color: var(--ink); line-height: 1.8; margin-bottom: 1rem; }
.two-col-text a.download-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--peach);
}
@media (max-width: 700px) {
  .two-col, .two-col--reverse { grid-template-columns: 1fr; }
  .two-col--reverse .two-col-img { order: 0; }
}

/* ════════════════════════════════════════
   MATERIAL GRID (Alla material page)
════════════════════════════════════════ */
.material-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.material-card { display: flex; flex-direction: column; }
.material-card p { font-size: 0.88rem; color: var(--ink); line-height: 1.7; flex: 1; margin-bottom: 0.5rem; }
.material-card a { font-size: 0.85rem; font-weight: 600; color: var(--blue); text-decoration: underline; text-decoration-color: var(--peach); }
@media (max-width: 900px) { .material-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .material-grid { grid-template-columns: 1fr; } }
.material-grid--two { grid-template-columns: repeat(2, 1fr) !important; }
.material-card-img--aland { background: #003f8a; }

/* ════════════════════════════════════════
   PROJECT ROWS (projekt page — one project per horizontal row)
════════════════════════════════════════ */
.project-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.project-row:first-child { padding-top: 0; }
.project-row:last-child { border-bottom: none; padding-bottom: 0; }
.project-row-img--placeholder {
  width: 100%; aspect-ratio: 4/3; border-radius: 3px;
  background: var(--cream);
}
.project-row-text p { font-size: 0.92rem; line-height: 1.8; color: var(--ink); margin-bottom: 0.85rem; text-align: left; max-width: none; }
.project-row-text p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .project-row { grid-template-columns: 1fr; gap: 1.25rem; }
  .project-row-img { max-width: 220px; margin: 0 auto; }
}

/* ════════════════════════════════════════
   TEAM (team page — uses main site .team-member layout via base.css)
════════════════════════════════════════ */

/* ════════════════════════════════════════
   THEME CARDS (Nya horisonter)
════════════════════════════════════════ */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
  max-width: var(--inner-max);
  margin: 0 auto;
}
.theme-card { text-align: left; }
.theme-card-icon {
  margin: 0 0 1rem;
}
.theme-card-icon img { width: 160px; height: 160px; object-fit: contain; display: block; }
.theme-card-text { }
.theme-card p { font-size: 0.88rem; color: var(--ink); line-height: 1.7; }
.theme-card .target { font-size: 0.82rem; color: var(--ink); font-weight: 600; margin-top: 0.5rem; }
@media (max-width: 768px) { .themes-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .themes-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════
   NYA HORISONTER HERO
════════════════════════════════════════ */
.nh-hero {
  background: var(--cream);
  padding: 5rem 2rem 3rem;
  text-align: center;
}
/* The list asks for this logo to be bigger on the project page. It scales with
   the viewport so it does not overflow a phone, where 140px would be too wide. */
.nh-hero-logo { height: clamp(110px, 22vw, 240px); width: auto; max-width: 100%; margin: 0 auto 2rem; }

/* ════════════════════════════════════════
   YHTEYS NETWORK CARD
════════════════════════════════════════ */
.yhteys-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 700px;
  margin: 0 auto;
}
.yhteys-brand { text-align: center; }
.yhteys-brand-text {
  display: block;
  font-size: 2.8rem;
  font-weight: 900;
  color: #ff7400;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.yhteys-wave { width: 100%; height: 30px; display: block; }
.yhteys-card p { color: var(--ink); line-height: 1.8; margin-bottom: 1rem; }
@media (max-width: 560px) { .yhteys-card { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════
   CLOSING CTA (inner pages)
════════════════════════════════════════ */
.page-cta {
  text-align: center;
}
.page-cta h2 { color: #833b48; font-size: 1.5rem; margin-bottom: 1rem; }
.page-cta .contact-icon { margin-bottom: 1.25rem; }
.page-cta .contact-icon svg { display: block; margin: 0 auto; }
.page-cta a.email-link { font-weight: 700; font-size: 1.1rem; color: var(--blue); }

/* ════════════════════════════════════════
   MINI TEAM GRID (3 headshots — Nya horisonter)
════════════════════════════════════════ */
.mini-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  justify-content: center;
  gap: 2rem;
  max-width: var(--inner-max);
  margin: 2rem auto 0;
  text-align: center;
}
.mini-team-card img {
  width: 200px; height: 220px;
  border-radius: 4px;
  object-fit: cover;
  object-position: top;
  margin: 0 auto 0.75rem;
  display: block;
}
.mini-team-card strong { display: block; font-weight: 700; color: var(--blue); margin-bottom: 0.25rem; }
.mini-team-card .role { font-size: 0.85rem; color: var(--ink); margin-bottom: 0.5rem; line-height: 1.5; }
.mini-team-card a { font-size: 0.85rem; color: var(--blue); display: block; }
@media (max-width: 640px) { .mini-team-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer-edu-logo {
  height: 28px;
  width: auto;
}

/* ════════════════════════════════════════
   RESPONSIVE NAV
   Deliberately empty. base.css already carries the mobile nav, identical to the
   business site. An older block here repeated it differently below 700px and,
   because this file loads second, won the cascade: it gave .nav-links order 3,
   the same as .nav-toggle, so the open menu rendered before the button instead
   of under it, and it put 1.25rem of padding back on .site-nav on top of the
   item margins, pushing the hamburger twice as far from the edge as on the
   business site.
════════════════════════════════════════ */