/* ==========================================================
   SCHULSPANISCH.DE – SPANISCH MIT MUSIK: EDUKI-MATERIAL
   Offener, zentrierter Abschnitt unter „Über das Video“ auf den
   Schüler-Musikseiten unter /hoerverstehen/musik/.

   Gestaltung angelehnt an die Materialpräsentation der
   Vokabelseiten („Für Lehrkräfte“: Eyebrow, große Überschrift,
   großes Cover mit weichem Schatten) – ohne Carousel, ohne Kasten.

   Eigenes Präfix: mx-eduki – keine globalen Selektoren.
   Farben über die --sg-* Tokens aus grammar-exercises-master_neu.css;
   der Dark Mode folgt damit @media (prefers-color-scheme: dark).
   ========================================================== */


/* ----------------------------------------------------------
   ABSCHNITT
   ---------------------------------------------------------- */

.mx-eduki {
  padding: 40px 0 72px;
  background: var(--sg-bg);
  text-align: center;
}


/* ----------------------------------------------------------
   KOPF: Eyebrow, Überschrift, Unterzeile
   ---------------------------------------------------------- */

.mx-eduki__eyebrow {
  margin: 0 0 12px;

  color: var(--sg-blue);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mx-eduki__heading {
  margin: 0;

  color: var(--sg-text);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.mx-eduki__intro {
  max-width: 520px;
  margin: 12px auto 0;

  color: var(--sg-muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.45;
}


/* ----------------------------------------------------------
   MATERIAL (Cover + Text = ein Link)
   ---------------------------------------------------------- */

.mx-eduki__item {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: min(100%, 460px);
  margin: 40px auto 0;

  color: var(--sg-text);
  text-decoration: none;

  border-radius: 12px;
}

.mx-eduki__item:focus-visible {
  outline: 2px solid var(--sg-blue);
  outline-offset: 8px;
}

.mx-eduki__cover {
  display: block;

  width: 200px;
  height: auto;

  background: #ffffff;
  border-radius: 6px;

  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 12px 32px rgba(15, 23, 42, 0.10);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.mx-eduki__title {
  margin: 26px 0 0;

  color: var(--sg-text);
  font-size: 1.12rem;
  font-weight: 680;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.mx-eduki__desc {
  display: block;
  margin: 8px 0 0;

  color: var(--sg-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.mx-eduki__link {
  display: inline-block;
  margin-top: 14px;

  color: #ef554b;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.3;
}


/* Hover nur auf Geräten mit echter Maus */

@media (hover: hover) and (pointer: fine) {

  .mx-eduki__item:hover .mx-eduki__cover {
    transform: translateY(-3px);
    box-shadow:
      0 2px 4px rgba(15, 23, 42, 0.07),
      0 18px 40px rgba(15, 23, 42, 0.13);
  }

  .mx-eduki__item:hover .mx-eduki__link {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

}


/* ----------------------------------------------------------
   DARK MODE
   ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

  /* Grundfarbe des Seitenhintergrunds im Dark Mode
     (body in /navigation/menu.css: #0f141a), damit der Abschnitt
     nahtlos an Seitenränder und Footer anschließt. */
  .mx-eduki {
    background: #0f141a;
  }

  .mx-eduki__cover {
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.35),
      0 14px 36px rgba(0, 0, 0, 0.45);
  }

  .mx-eduki__link {
    color: #f06a61;
  }

}

@media (prefers-color-scheme: dark) and (hover: hover) and (pointer: fine) {

  .mx-eduki__item:hover .mx-eduki__cover {
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.4),
      0 20px 44px rgba(0, 0, 0, 0.5);
  }

}


/* ----------------------------------------------------------
   MOBIL (gleicher Umbruchpunkt wie hoerverstehen.css)
   ---------------------------------------------------------- */

@media (max-width: 600px) {

  .mx-eduki {
    padding: 28px 0 56px;
  }

  .mx-eduki__item {
    margin-top: 32px;
  }

  .mx-eduki__cover {
    width: 180px;
  }

  .mx-eduki__title {
    margin-top: 22px;
    font-size: 1.06rem;
  }

  .mx-eduki__desc {
    font-size: 0.92rem;
  }

}