/* =========================================================
   Mobilní učebna KONEKT-ED – základní komponenty
   Vyžaduje tokens.css
   ========================================================= */

/* ---------- Základ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
}
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: var(--lh-head);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-link); text-underline-offset: 3px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* ---------- Typografické styly z brožury ---------- */

/* Dvouřádkový titulek: 1. řádek Bold, 2. řádek Regular, verzálky, široké proložení */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
.display b, .display strong { display: block; font-weight: 700; }
.display span { display: block; font-weight: 400; }

/* Štítek / perex verzálkami – „CÍLOVÁ SKUPINA: 5.–8. ROČNÍK ZŠ“ */
.caps {
  font-family: var(--font-display);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.lead { font-size: var(--fs-lead); line-height: 1.6; }

/* ---------- Tlačítka (pilulka) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 48px;
  padding: .8em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--sun-400); color: var(--lav-800); }
.btn--primary:hover { background: var(--sun-500); box-shadow: 0 6px 0 var(--sun-600); }

.btn--secondary { background: var(--lav-700); color: var(--white); }
.btn--secondary:hover { background: var(--lav-800); }

.btn--outline { background: transparent; color: var(--lav-700); border-color: currentColor; }
.btn--outline:hover { background: var(--lav-100); }

.btn--on-dark { background: transparent; color: var(--white); border-color: rgb(255 255 255 / .7); }
.btn--on-dark:hover { background: rgb(255 255 255 / .12); border-color: var(--white); }

.btn--warm { background: var(--orange-500); color: var(--lav-900); }
.btn--warm:hover { background: var(--orange-600); }

/* ---------- Štítky ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .85em;
  border-radius: var(--radius-pill);
  background: var(--lav-100);
  color: var(--lav-800);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
}
.tag--sun { background: var(--sun-200); color: var(--lav-900); }
.tag--mint { background: #DDF3E8; color: #1F5E44; }
.tag--violet { background: #EEE6FF; color: #5A2DC2; }

/* ---------- Kruhová fotka s lemem (podpis stylu) ---------- */
.photo-ring {
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 var(--ring-inner) var(--white),
              0 0 0 calc(var(--ring-inner) + var(--ring-outer)) var(--sun-400);
  margin: calc(var(--ring-inner) + var(--ring-outer));
}
.photo-ring--orange {   /* na žluté ploše */
  box-shadow: 0 0 0 var(--ring-inner) var(--white),
              0 0 0 calc(var(--ring-inner) + var(--ring-outer)) var(--orange-500);
}
.photo-dot {          /* malé kruhové fotky u bodů výhod */
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--white);
}

/* Zaoblená fotka – galerie a karty (Letní program) */
.photo-round { border-radius: var(--radius-l); object-fit: cover; }

/* ---------- Dekorace ---------- */
.dots {               /* tečkový rastr */
  --dot: var(--lav-800);
  --dot-gap: 34px;
  background-image: radial-gradient(circle, var(--dot) 0 6px, transparent 6.5px);
  background-size: var(--dot-gap) var(--dot-gap);
}
.dots--soft { --dot: rgb(78 78 129 / .35); }

/* ---------- Karta aktivity ---------- */
.activity-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.activity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.activity-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--lav-500); }
.activity-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.activity-card:hover .activity-card__media img { transform: scale(1.04); }
.activity-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.activity-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.15;
  font-size: 1.375rem;
  color: var(--lav-800);
  margin: 0;
}
.activity-card__title b { font-weight: 700; }
.activity-card__title span { font-weight: 400; }
.activity-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }

/* ---------- Kroky 1–2–3 ---------- */
.steps { display: grid; gap: var(--space-5); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { text-align: center; padding: var(--space-5); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--sun-400);
  color: var(--lav-800);
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.5rem;
}
.step h4 { text-transform: uppercase; color: var(--lav-700); letter-spacing: .03em; }

/* ---------- Rámeček se záhlavím v lince (Letní program) ---------- */
.frame {
  position: relative;
  border: 2px solid var(--lav-300);
  border-radius: var(--radius-l);
  padding: var(--space-7) var(--space-5) var(--space-5);
}
.frame > .frame__title {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg);
  padding: 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lav-700);
  font-size: var(--fs-h3);
  white-space: nowrap;
  margin: 0;
}

/* ---------- Pruh povinné publicity ---------- */
.publicity {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  padding-block: var(--space-6);
}
.publicity__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-7); }
.publicity__logos img { height: 56px; width: auto; }
/* Interreg: šířka nápisu + znaku EU min. 300 px (desktop) / 240 px (mobil) = obrázek 484 / 387 px */
.publicity__logos .publicity__interreg { height: auto; width: 484px; max-width: 100%; }
.publicity__text { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}