/* Ηλεκτρισμός και μαγνητισμός — Α΄ Γυμνασίου, v19 */
.electricity-magnetism-page{
  --em-violet:#6654d2;
  --em-violet-dark:#42349c;
  --em-green:#2d9275;
  --em-pink:#d75d76;
  --em-pale:#f2efff;
  --em-mint:#e8f6f1;
  --em-danger:#b33a4b;
}
.em-lesson-hero{
  background:
    radial-gradient(circle at 83% 17%,rgba(104,87,217,.18) 0,transparent 31%),
    radial-gradient(circle at 76% 82%,rgba(45,146,117,.14) 0,transparent 30%),
    linear-gradient(135deg,#fff 0,#fbfaff 55%,#f4fbf8 100%);
}
.em-lesson-hero .lesson-hero-copy h1 em{color:var(--em-violet)}
.em-lesson-hero .reading-audience span{background:#eeeaff;color:var(--em-violet-dark)}
.em-lesson-visual{
  position:relative;
  height:450px;
  overflow:hidden;
  border-radius:220px 220px 24px 24px;
  background:linear-gradient(145deg,#eae5ff,#dff5ed);
  box-shadow:0 26px 60px rgba(54,43,126,.22);
}
.em-lesson-visual svg{display:block;width:100%;height:100%}
.em-lesson-visual>strong{
  position:absolute;left:34px;bottom:27px;
  color:#30266f;font:600 13px/1.5 Commissioner,Arial,sans-serif;
}
.em-lesson-visual .em-wire{fill:none;stroke:#17233b;stroke-width:4}
.em-lesson-visual .em-battery{stroke:#17233b;stroke-linecap:butt}
.em-lesson-visual .em-battery-long{stroke-width:5}
.em-lesson-visual .em-battery-short{stroke-width:4}
.em-lesson-visual .em-node{fill:#17233b}
.em-lesson-visual .em-current,.em-lesson-visual .em-motion{fill:none;stroke:var(--em-pink);stroke-width:4}
.em-lesson-visual .em-machine{fill:#fff;stroke:#17233b;stroke-width:4}
.em-lesson-visual .em-coil,.em-lesson-visual .em-coil-small{fill:none;stroke:url(#emGlow);stroke-width:12;stroke-linecap:round}
.em-lesson-visual .em-axis{stroke:#17233b;stroke-width:4}
.em-lesson-visual .em-magnet{fill:#fff;stroke:#17233b;stroke-width:4}
.em-lesson-visual text{font:700 13px Commissioner,Arial,sans-serif;fill:#17233b;letter-spacing:.08em}
.em-lesson-visual .em-pole{font-size:11px}
.em-syllabus{border-color:#dcd5fb;background:linear-gradient(145deg,#fbfaff,#eeebff)}
.em-syllabus>span,.electricity-magnetism-page .reading-kicker{color:var(--em-violet)}
.em-syllabus-grid{grid-template-columns:repeat(3,1fr)}
.em-syllabus-grid b{color:var(--em-violet)}
.em-concept{border-left-color:var(--em-violet)}
.em-circuit-comparison{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px -35px;
}
.em-circuit-comparison article{
  padding:22px;border:1px solid #ded9f4;border-radius:14px;background:linear-gradient(145deg,#fff,#f8f6ff);
}
.em-circuit-comparison article.danger{border-color:#f0c7ce;background:linear-gradient(145deg,#fff,#fff1f3)}
.em-circuit-comparison article>span{
  display:block;color:var(--em-violet);font-size:10px;font-weight:700;letter-spacing:.13em
}
.em-circuit-comparison article.danger>span{color:var(--em-danger)}
.em-circuit-comparison svg{width:100%;height:180px;margin:8px 0}
.em-circuit-comparison svg path,.em-circuit-comparison svg line,.em-circuit-comparison svg circle{
  fill:none;stroke:#17233b;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter
}
.em-circuit-comparison svg .battery-long{stroke-width:5}
.em-circuit-comparison svg .battery-short{stroke-width:4}
.em-circuit-comparison svg circle{fill:#fff}
.em-circuit-comparison svg .bulb-filament{stroke-width:3}
.em-circuit-comparison svg .danger-path{stroke:var(--em-danger);stroke-width:5}
.em-circuit-comparison svg .heat{stroke:var(--em-pink);stroke-width:4}
.em-circuit-comparison article p{margin:0;font-size:12px}
.em-danger-list{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0
}
.em-danger-list span{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-radius:9px;background:#fff2f4;font:600 12px Commissioner,Arial,sans-serif
}
.em-danger-list b{color:var(--em-danger);font:600 18px Literata,Georgia,serif}
.em-safety-card{background:linear-gradient(135deg,#8d3141,#c85769)}
.em-safety-card strong{font-size:clamp(22px,3vw,34px);line-height:1.25}
.em-warning{
  display:grid;grid-template-columns:62px 1fr;gap:18px;align-items:start;
  margin:28px 0;padding:24px;border:1px solid #efc3ca;border-radius:13px;background:#fff5f6
}
.em-warning>span{
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--em-danger);color:#fff;font:700 30px Literata,Georgia,serif
}
.em-warning strong{display:block;margin-bottom:6px}
.em-warning p{margin:0}
.em-observation{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  margin:28px 0;padding:24px;border-radius:14px;background:#17233b;color:#fff;text-align:center
}
.em-observation article{display:flex;flex-direction:column;gap:4px}
.em-observation span{color:#bdb4ff;font-size:9px;font-weight:700;letter-spacing:.12em}
.em-observation strong{font:600 22px Literata,Georgia,serif}
.em-observation p{margin:0;color:#c3cbd8;font-size:11px}
.em-observation i{font-style:normal;color:#64c1a4;font-size:26px}
.em-process{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px -45px
}
.em-process article{
  padding:22px 17px;border:1px solid #dcd6f5;border-radius:12px;background:linear-gradient(145deg,#fff,#f6f3ff)
}
.em-process b{display:block;color:var(--em-violet);font:600 24px Literata,Georgia,serif}
.em-process strong{display:block;margin:8px 0;font-size:13px;line-height:1.35}
.em-process p{margin:0;font-size:10.5px}
.em-energy-card.motor{background:linear-gradient(135deg,#493aab,#745edc)}
.em-energy-card.generator{background:linear-gradient(135deg,#1f6b58,#3fa486)}
.em-energy-card strong{font-size:clamp(22px,3vw,36px);line-height:1.25}
.em-examples{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.em-examples span{
  padding:9px 13px;border-radius:999px;background:#eeebff;color:var(--em-violet-dark);
  font-size:11px;font-weight:650
}
.em-optional{
  margin:42px -34px;padding:34px;border:1px dashed #b6a9ed;border-radius:16px;
  background:linear-gradient(145deg,#fbfaff,#f1edff)
}
.em-lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}
.em-lab-grid article{padding:18px;border-radius:10px;background:#fff}
.em-lab-grid span{color:var(--em-violet);font-size:9px;font-weight:750;letter-spacing:.12em}
.em-lab-grid p{margin:7px 0 0;font-size:12px}
.em-magnet-sequence{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px -35px
}
.em-magnet-sequence article{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:19px;border:1px solid #d9eae4;border-radius:12px;background:#f6fcfa;text-align:center
}
.em-magnet-sequence article>span,.em-magnet-sequence article>strong{grid-column:1/-1}
.em-magnet-sequence article>span{color:var(--em-green);font-size:9px;font-weight:750;letter-spacing:.12em}
.em-magnet-sequence article>strong{margin-top:5px;font-size:11px}
.mini-magnet{
  padding:9px 6px;border:2px solid #17233b;border-radius:4px;
  background:linear-gradient(90deg,#d96270 0 50%,#6b7fce 50%);color:#fff;font-size:9px;font-weight:700
}
.mini-coil{width:42px;height:54px;border:5px double var(--em-green);border-radius:50%}
.em-magnet-sequence i{font-style:normal;color:var(--em-pink);font-size:21px}
.em-subheading{margin-top:48px!important;font-size:32px!important}
.em-dynamo{
  display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;
  margin:30px 0;padding:26px;border-radius:14px;background:linear-gradient(135deg,#e8f6f1,#f7fffc)
}
.em-dynamo span{color:var(--em-green);font-size:9px;font-weight:750;letter-spacing:.12em}
.em-dynamo h3{margin:7px 0}
.em-dynamo p{margin:0}
.em-wheel{
  position:relative;width:126px;height:126px;border:7px solid #17233b;border-radius:50%
}
.em-wheel:after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);border-radius:50%;background:var(--em-green)}
.em-wheel i{position:absolute;left:50%;top:50%;width:4px;height:53px;background:#17233b;transform-origin:2px 0}
.em-wheel i:nth-child(1){transform:rotate(0deg)}
.em-wheel i:nth-child(2){transform:rotate(60deg)}
.em-wheel i:nth-child(3){transform:rotate(120deg)}
.em-wheel i:nth-child(4){transform:rotate(180deg)}
.em-wheel i:nth-child(5){transform:rotate(240deg)}
.em-wheel i:nth-child(6){transform:rotate(300deg)}
.em-comparison-table{
  display:grid;margin:28px 0;border:1px solid #d9dfe8;border-radius:12px;overflow:hidden
}
.em-comparison-table>div{display:grid;grid-template-columns:1fr 1fr}
.em-comparison-table>div+div{border-top:1px solid #d9dfe8}
.em-comparison-table b,.em-comparison-table span{padding:15px 18px}
.em-comparison-table b{background:#17233b;color:#fff;font-size:13px}
.em-comparison-table b+ b{border-left:1px solid rgba(255,255,255,.2)}
.em-comparison-table span{background:#fff;font-size:12px}
.em-comparison-table span+span{border-left:1px solid #d9dfe8}
.em-misconceptions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0}
.em-misconceptions article{padding:20px;border-radius:11px;background:#fff4f6;border:1px solid #f1d1d6}
.em-misconceptions span{display:block;color:var(--em-danger);font-weight:700;font-size:12px;line-height:1.4}
.em-misconceptions p{margin:8px 0 0;font-size:11px}
.em-practice article>span{color:var(--em-violet)}
.em-quiz summary:after{color:var(--em-violet)}
.em-quiz details[open] summary{background:#eeebff}
.em-ending{background:linear-gradient(135deg,#17233b,#4d3aa8 62%,#237a63)}
@media(max-width:1050px){
  .em-lesson-visual{max-width:650px;width:100%}
  .em-process{margin:30px 0;grid-template-columns:1fr 1fr}
  .em-circuit-comparison,.em-magnet-sequence{margin:28px 0}
}
@media(max-width:760px){
  .em-lesson-visual{height:340px;border-radius:145px 145px 16px 16px}
  .em-lesson-visual>strong{left:26px;bottom:18px;font-size:10px}
  .em-syllabus-grid,.em-circuit-comparison,.em-danger-list,.em-observation,
  .em-process,.em-lab-grid,.em-magnet-sequence,.em-misconceptions{grid-template-columns:1fr}
  .em-observation i{transform:rotate(90deg)}
  .em-warning{grid-template-columns:1fr}
  .em-warning>span{width:46px;height:46px}
  .em-optional{margin:34px 0;padding:24px 18px}
  .em-magnet-sequence article{grid-template-columns:1fr auto 1fr}
  .em-dynamo{grid-template-columns:1fr}
  .em-comparison-table{overflow-x:auto}
  .em-comparison-table>div{min-width:520px}
}
@media(max-width:520px){
  .em-process{grid-template-columns:1fr}
  .em-lesson-visual svg{transform:scale(.93)}
}