/* ============================================
   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;
}

/* 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;
}

/* ── Nav height: taller to fit 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: 600px) {
  .hero { min-height: 360px; padding: 3rem 1.25rem 2.5rem; }
  .hero-pencil { height: 110%; opacity: 0.5; }
}

/* 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; }
.nh-hero p, .nh-hero div p { margin: 0 auto 0.85rem; text-align: center; }

/* ════════════════════════════════════════
   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 {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.news-card-img img { max-width: 100%; max-height: 180px; width: auto; height: auto; object-fit: contain; display: block; }
.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 {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.course-card-img img { max-width: 100%; max-height: 200px; width: auto; height: auto; object-fit: contain; display: block; }
.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; }
.two-col--reverse .two-col-img { order: 2; }
.two-col-img img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); object-fit: contain; }
.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-img {
  width: 100%;
  height: 200px;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.material-card-img img {
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.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--ncu { background: linear-gradient(135deg, #1a6b9a 0%, #5ba4c7 100%); }
.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 { display: flex; align-items: center; justify-content: center; }
.project-row-img img { max-width: 100%; height: auto; display: block; }
.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;
}
.nh-hero-logo { height: 80px; width: auto; 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
════════════════════════════════════════ */
@media (max-width: 700px) {
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: var(--cream);
    padding: 0.75rem 2rem 1.25rem;
    order: 3;
  }
  .nav-links.open { display: flex; }
  .nav-links > li > a { height: auto; line-height: 2.2; padding: 0; min-width: 0; }
  .site-nav { flex-wrap: wrap; height: auto; padding: 0.75rem 1.25rem; }
  .lang-switcher { order: 2; margin-left: auto; }
}