/* =========================================================================
   LOGOSVET — Stylesheet
   Logopedická prax Dominika · logosvet.sk
   ========================================================================= */

/* ----- 1. DESIGN TOKENS -------------------------------------------------- */

:root {
  /* Neutrály */
  --color-bg: #FBFAF7;
  --color-surface: #FFFFFF;
  --color-wood: #D4B896;
  --color-wood-light: #F0E6D6;
  --color-text: #2C2C2E;
  --color-text-muted: #6B6B70;
  --color-border: #EDE8E0;

  /* Dúhové akcenty */
  --color-red: #E94B4B;
  --color-orange: #F4934E;
  --color-yellow: #F5C84E;
  --color-green: #7BC470;
  --color-turquoise: #4EC3D9;
  --color-blue: #4A8FE0;
  --color-blue-hover: #3B7DD8;
  /* Farba TEXTOVÝCH odkazov — tmavšia než značková modrá, aby spĺňala
     WCAG AA kontrast (4.5:1) pre bežný text. Značková --color-blue zostáva
     pre tlačidlá, ikony a dekoráciu, kde sa kontrast bežného textu nevyžaduje.
     #2A5F9E na bielej = 5.4:1 (AA), na #FBFAF7 = 5.1:1 (AA). */
  --color-link: #2A5F9E;
  --color-link-hover: #1F4A7D;
  --color-purple: #9B6DD8;
  --color-pink: #E94B8C;

  /* Pastelové (~12% varianty na bielej) */
  --pastel-red: #FCE4E4;
  --pastel-orange: #FDEADB;
  --pastel-yellow: #FDF4DC;
  --pastel-green: #E5F4E2;
  --pastel-turquoise: #DDF3F8;
  --pastel-blue: #DEEBFA;
  --pastel-purple: #ECE0F8;
  --pastel-pink: #FBE0EC;
  --pastel-teal: #D9F2EF;
  --pastel-indigo: #E4E6F6;
  --pastel-coral: #FFE3DE;
  --pastel-lime: #EEF6DC;
  --pastel-brown: #EFE8E4;
  --pastel-slate: #ECEFF1;
  --pastel-magenta: #F8DCEE;

  /* Typografia */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;

  /* Radius */
  --r-card: 16px;
  --r-button: 12px;
  --r-pill: 999px;
  --r-pdf: 8px;

  /* Shadows */
  --shadow-soft: 0 4px 20px rgba(44, 44, 46, 0.06);
  --shadow-hover: 0 8px 32px rgba(44, 44, 46, 0.10);
  --shadow-deep: 0 12px 40px rgba(44, 44, 46, 0.12);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 180ms var(--ease);
  --t-med: 250ms var(--ease);
  --t-slow: 400ms var(--ease);

  /* Layout */
  --max-width: 1200px;
  --max-content: 700px;
}

/* ----- 2. RESET & BASE --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 15% 8%, rgba(245, 200, 78, 0.04) 0%, transparent 25%),
    radial-gradient(circle at 85% 92%, rgba(74, 143, 224, 0.04) 0%, transparent 25%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden zabráni horizontálnemu pretečeniu.
     Bezpečné, lebo header je teraz position: fixed (nie sticky) — fixed sa
     drží viewportu, nie scroll containera, takže ho overflow nezničí. */
  overflow-x: hidden;
}

@media (max-width: 640px) {
  body { font-size: 16px; }
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--color-link-hover); }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul, ol { list-style: none; }

/* Focus state — prístupnosť */
:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  background: var(--color-blue);
  color: white;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-button);
  z-index: 1000;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--s-4); color: white; }

/* ----- 3. TYPOGRAFIA ----------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.25rem, 4.5vw + 0.5rem, 3.5rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

h3 {
  font-size: clamp(1.25rem, 1vw + 0.85rem, 1.5rem);
  line-height: 1.3;
}

p { color: var(--color-text); }

.lead {
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Hand-drawn underline pod kľúčovým slovom */
.handdrawn {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.handdrawn svg {
  position: absolute;
  left: -2%;
  bottom: -0.35em;
  width: 104%;
  height: 0.4em;
  pointer-events: none;
  overflow: visible;
}
.handdrawn svg path {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawLine 1.4s var(--ease) 0.3s forwards;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* ----- 4. LAYOUT --------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--s-8); }
}

section {
  padding: var(--s-16) 0;
}
@media (max-width: 768px) {
  section { padding: var(--s-12) 0; }
}

.section-head {
  text-align: center;
  margin-bottom: var(--s-12);
}
.section-head h2 { margin-bottom: var(--s-3); }
.section-head p { max-width: 580px; margin: 0 auto; color: var(--color-text-muted); }

/* ----- 5. HEADER --------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(251, 250, 247, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.site-header.scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 0 rgba(44, 44, 46, 0.02);
}

main {
  display: block;
  padding-top: 84px;
}
@media (max-width: 768px) {
  main { padding-top: 72px; }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.logo {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--t-fast);
}
.logo:hover { opacity: 0.82; }
.logo img {
  height: 52px;
  width: auto;
  display: block;
  /* Posun obrázka mierne kompenzuje hand-drawn descender "g" — opticky vystreduje */
  margin-bottom: -4px;
}

/* Tablet a mobil — menšie logo, kompaktnejší header */
@media (max-width: 768px) {
  .header-inner { height: 72px; }
  .logo img { height: 42px; }
}

/* Nav */
.site-nav { display: flex; align-items: center; gap: var(--s-2); }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.site-nav a {
  position: relative;
  display: inline-block;
  padding: var(--s-3) var(--s-4);
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: var(--r-button);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.site-nav a:hover { background-color: var(--color-wood-light); color: var(--color-text); }

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: 4px;
  height: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'><path d='M2 4 Q 12 1, 22 3.5 T 42 3 T 58 4' fill='none' stroke='%234A8FE0' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* IG ikona v navigácii — drobný separator, jemný farebný hover.
   Odlišuje sa od textových odkazov vlastným ikon-only štýlom. */
.nav-ig-item {
  margin-left: var(--s-2);
  padding-left: var(--s-3);
  border-left: 1px solid var(--color-border);
}
.nav-ig-item a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  color: var(--color-text-muted);
}
.nav-ig-item a:hover {
  color: var(--color-pink);
  background-color: transparent !important;
}
.nav-ig-icon {
  width: 22px;
  height: 22px;
  transition: transform var(--t-fast);
}
.nav-ig-item a:hover .nav-ig-icon {
  transform: scale(1.08);
}

/* Hamburger */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-button);
}
.menu-toggle:hover { background-color: var(--color-wood-light); }
.menu-toggle svg { width: 24px; height: 24px; stroke: var(--color-text); }

@media (max-width: 768px) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 0;
    top: 72px;
    background-color: var(--color-bg);
    /* Zabezpečíme nepriehľadnosť aj keď telo má pozadie s gradientom */
    background-image:
      linear-gradient(var(--color-bg), var(--color-bg)),
      radial-gradient(circle at 15% 8%, rgba(245, 200, 78, 0.04) 0%, transparent 25%),
      radial-gradient(circle at 85% 92%, rgba(74, 143, 224, 0.04) 0%, transparent 25%);
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--s-8) var(--s-6);
    transform: translateX(100%);
    transition: transform var(--t-med);
    visibility: hidden;
    z-index: 50;
  }
  .site-nav.open { transform: translateX(0); visibility: visible; }
  /* Keď je menu otvorené, header dostane plné off-white pozadie
     (namiesto svojho priehľadného s blur), aby menu pôsobilo jednoliato.
     Trieda .menu-open sa pridáva v script.js pri otvorení/zatvorení menu. */
  .site-header.menu-open {
    background-color: var(--color-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    width: 100%;
  }
  .site-nav li { width: 100%; }
  .site-nav a {
    display: block;
    width: 100%;
    padding: var(--s-4) var(--s-4);
    font-size: 1.25rem;
    font-family: var(--font-display);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }
  .site-nav a[aria-current="page"]::after {
    left: var(--s-4); right: auto; width: 32px;
  }

  /* IG na mobile — žiadny separator, plnošírkový riadok s ikonou + textom */
  .nav-ig-item {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    margin-top: var(--s-3);
  }
  .nav-ig-item a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: var(--s-4) var(--s-4) !important;
    gap: var(--s-3);
    color: var(--color-pink);
    font-size: 1.125rem;
    font-family: var(--font-display);
    font-weight: 500;
  }
  .nav-ig-item a::after {
    content: "Sledujte na Instagrame";
  }
  .nav-ig-icon {
    width: 24px;
    height: 24px;
  }
}

/* ----- 6. BUTTONS -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  border-radius: var(--r-button);
  transition: all var(--t-med);
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
}

.btn-primary {
  background-color: var(--color-blue);
  color: white;
}
.btn-primary:hover {
  background-color: var(--color-blue-hover);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-secondary {
  background-color: var(--color-wood-light);
  color: var(--color-text);
}
.btn-secondary:hover {
  background-color: var(--color-wood);
  color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.btn-outline {
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
}
.btn-outline:hover {
  border-color: var(--color-text);
  color: var(--color-text);
  transform: translateY(-2px);
}

.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--color-blue);
  font-weight: 500;
  font-size: 0.9375rem;
}
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ----- 7. HERO (s obrázkovým pozadím) ----------------------------------- */

.hero {
  position: relative;
  /* Pomer ~2.4:1 na desktope — blízko k 2:1 obrázku, takže ostane skoro celý vidno */
  min-height: clamp(560px, 70vh, 720px);
  padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 112px);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Pozadie — obrázok ako <img> aby sme mali plnú kontrolu nad opacity,
   object-fit a object-position. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Overlay — veľmi jemný krémový scrim presne tam, kde sa pohybuje text.
   Centrálny radial gradient zaisťuje čitateľnosť H1 a leadu, bez prekrytia
   bočných oblastí s veterníkom a rámom. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 50% 45%,
      rgba(251, 250, 247, 0.62) 0%,
      rgba(251, 250, 247, 0.20) 70%,
      transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  width: 100%;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  z-index: 2;
}

.hero-content h1 { margin-bottom: var(--s-4); }
.hero-content .lead {
  margin: 0 auto var(--s-8);
  max-width: 580px;
}

.hero-ctas {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
}

.hero .eyebrow {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* Slogan v hero — sedí na mieste eyebrow, ale má vlastný charakter:
   Inter italic (Manrope nemá italic), s ručne kreslenou vlnkou pred textom.
   Vlnka je brand-konzistentná s vlnkou pod slovom "reči" v H1 — 
   spolu tvoria značkový vizuálny jazyk. */
.hero-slogan {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 0.4vw + 0.85rem, 1.0625rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  color: var(--color-blue);
}
.hero-slogan svg {
  width: 28px;
  height: auto;
  flex-shrink: 0;
}
.hero-slogan svg path {
  stroke: var(--color-blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
}

/* Tablet / menšie laptopy: hero sa zužuje, posúvame object-position bližšie
   k veterníku aby ostal čisto vidno. */
@media (max-width: 1024px) {
  .hero-bg {
    object-position: 35% center;
  }
}

/* Mobil: hero má skoro portrait pomer, takže treba favorizovať veterník
   ako najdôležitejší brand element. Rám sa orežne na pravej strane —
   to je v poriadku, pretože veterník je vlajková loď značky. */
@media (max-width: 768px) {
  .hero {
    min-height: clamp(540px, 78vh, 680px);
    align-items: center;
    padding-top: clamp(40px, 8vw, 64px);
    padding-bottom: clamp(56px, 9vw, 96px);
  }
  .hero-bg {
    object-position: 22% bottom;
    opacity: 0.55;
  }
  .hero-overlay {
    background:
      radial-gradient(ellipse 90% 45% at 50% 45%,
        rgba(251, 250, 247, 0.85) 0%,
        rgba(251, 250, 247, 0.55) 55%,
        rgba(251, 250, 247, 0.20) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .handdrawn svg path { animation: none; stroke-dashoffset: 0; }
}

/* ----- 7.5 ACTION TILES (hero CTAs as cards) ---------------------------- */

.action-tiles {
  /* Posunúť vyššie tesne pod hero, aby naň pôsobili ako prirodzené pokračovanie */
  padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
  /* Negatívny okraj cez hero — karty mierne prekrývajú dolný okraj hero
     a vytvárajú vizuálny prechod */
  margin-top: clamp(-80px, -6vw, -40px);
  position: relative;
  z-index: 5;
}

.action-grid {
  display: flex;
  gap: var(--s-6);
}
.action-grid > * { flex: 1 1 0; min-width: 0; }

@media (max-width: 1024px) {
  .action-grid { flex-direction: column; gap: var(--s-6); }
  .action-grid > * + * { margin-top: var(--s-4); } /* fallback ak gap nepodporovaný */
}

.action-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--s-6), 2.5vw, var(--s-8));
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--color-text);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-med), box-shadow var(--t-med);
  overflow: hidden;
  min-height: 280px;
}
.action-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-deep);
  color: var(--color-text);
}
.action-tile:hover .action-icon { transform: scale(1.05) rotate(-3deg); }
.action-tile:hover .action-link svg { transform: translateX(6px); }

/* Pastelové dúhové pozadie + farebné ikony a šípky */
.action-tile-blue {
  background-color: var(--pastel-blue);
}
.action-tile-blue .action-icon,
.action-tile-blue .action-link { color: #2A5F9E; }

.action-tile-green {
  background-color: var(--pastel-green);
}
.action-tile-green .action-icon,
.action-tile-green .action-link { color: #3F7A38; }

.action-tile-pink {
  background-color: var(--pastel-pink);
}
.action-tile-pink .action-icon,
.action-tile-pink .action-link { color: #B53369; }

.action-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-4);
  transition: transform var(--t-med);
}
.action-icon svg { width: 100%; height: 100%; }

.action-tile h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.5vw + 0.5rem, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
  color: var(--color-text);
}

.action-tile p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: var(--s-6);
  flex: 1;
}

.action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  margin-top: auto;
}
.action-link svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t-fast);
}

/* Mobil: v stĺpci mali karty rôzny obsah, takže odkaz (margin-top:auto) končil
   pri každej inak ďaleko od spodku — najkratšia ("Viac o mne") mala najväčšiu
   medzeru, najdlhšia ("Pozrieť články") takmer žiadnu. Zjednotíme výšku kariet
   pevným min-height (drží aj najdlhší text na úzkych displejoch) a ikone dáme
   flex-shrink:0, aby sa flex kontajner nescvrkol. Pri rovnako vysokých kartách
   margin-top:auto ukotví odkaz k spodku identicky — rovnako ako na desktope. */
@media (max-width: 1024px) {
  .action-tile { min-height: 320px; }
  .action-icon { flex-shrink: 0; }
}
/* Najužšie telefóny (~320px): najdlhší text ("Pozrieť články") sa zalomí do
   viac riadkov a tesne prekročí 320px, takže tá karta by mala odkaz o pár px
   inde. Malé navýšenie min-height dá rezervu aj jej. */
@media (max-width: 360px) {
  .action-tile { min-height: 340px; }
}



.card-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

.article-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-med), box-shadow var(--t-med);
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  color: inherit;
}

.article-thumb {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.article-thumb svg { width: 56%; height: 56%; }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-body { padding: var(--s-6); flex: 1; display: flex; flex-direction: column; }
.article-body h3 { margin: var(--s-3) 0; }
.article-body p { color: var(--color-text-muted); margin-bottom: var(--s-4); flex: 1; }

.pill {
  display: inline-block;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  background-color: var(--color-wood-light);
  color: var(--color-text);
  align-self: flex-start;
}
.pill-blue { background-color: var(--pastel-blue); color: #2A5F9E; }
.pill-green { background-color: var(--pastel-green); color: #3F7A38; }
.pill-orange { background-color: var(--pastel-orange); color: #B45F1F; }
.pill-purple { background-color: var(--pastel-purple); color: #5E3D9C; }
.pill-pink { background-color: var(--pastel-pink); color: #B53369; }
.pill-turquoise { background-color: var(--pastel-turquoise); color: #1E7A8E; }
.pill-yellow { background-color: var(--pastel-yellow); color: #8C6510; }
.pill-red { background-color: var(--pastel-red); color: #B53030; }
.pill-teal { background-color: var(--pastel-teal); color: #1A7A6E; }
.pill-indigo { background-color: var(--pastel-indigo); color: #3B469B; }
.pill-coral { background-color: var(--pastel-coral); color: #C24A3C; }
.pill-lime { background-color: var(--pastel-lime); color: #5E7D24; }
.pill-brown { background-color: var(--pastel-brown); color: #6D584F; }
.pill-slate { background-color: var(--pastel-slate); color: #455A64; }
.pill-magenta { background-color: var(--pastel-magenta); color: #A12E72; }

.meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: auto;
}
.meta .dot { width: 3px; height: 3px; border-radius: 50%; background-color: var(--color-text-muted); }

.center-link { text-align: center; margin-top: var(--s-8); }

/* ----- 9. CATEGORY TILES ------------------------------------------------- */

.cat-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: 1fr; }
}

.cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-8);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med);
  min-height: 220px;
}
.cat-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  color: inherit;
}
.cat-tile:hover .cat-icon { transform: rotate(-8deg) scale(1.06); }

.cat-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-4);
  transition: transform var(--t-med);
}
.cat-tile h3 { margin-bottom: var(--s-2); }
.cat-tile p { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: var(--s-4); }

.cat-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Category background variants */
.cat-red { background-color: var(--pastel-red); }
.cat-orange { background-color: var(--pastel-orange); }
.cat-yellow { background-color: var(--pastel-yellow); }
.cat-green { background-color: var(--pastel-green); }
.cat-turquoise { background-color: var(--pastel-turquoise); }
.cat-blue { background-color: var(--pastel-blue); }
.cat-purple { background-color: var(--pastel-purple); }
.cat-pink { background-color: var(--pastel-pink); }
.cat-teal { background-color: var(--pastel-teal); }
.cat-indigo { background-color: var(--pastel-indigo); }
.cat-coral { background-color: var(--pastel-coral); }
.cat-lime { background-color: var(--pastel-lime); }
.cat-brown { background-color: var(--pastel-brown); }
.cat-slate { background-color: var(--pastel-slate); }
.cat-magenta { background-color: var(--pastel-magenta); }

/* ----- 10. VALUES SECTION ----------------------------------------------- */

.values-grid {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
  .values-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

.value-item {
  text-align: center;
  padding: var(--s-6);
}
.value-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.value-item h3 { margin-bottom: var(--s-2); }
.value-item p { color: var(--color-text-muted); max-width: 320px; margin: 0 auto; }

/* ----- 11. DOMINIKA TEASER ---------------------------------------------- */

.teaser {
  background-color: var(--color-wood-light);
  border-radius: var(--r-card);
  padding: clamp(var(--s-8), 4vw, var(--s-16));
  position: relative;
  overflow: hidden;
}
.teaser-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--s-12);
  align-items: center;
}
@media (max-width: 768px) {
  .teaser-grid { grid-template-columns: 1fr; gap: var(--s-6); text-align: center; }
  .teaser-portrait { margin: 0 auto; }
}

.teaser-portrait {
  position: relative;
  width: 280px;
  height: 280px;
}
.teaser-portrait .portrait-blob {
  position: absolute;
  inset: -10%;
  background: conic-gradient(from 0deg,
    rgba(245, 200, 78, 0.4),
    rgba(123, 196, 112, 0.4),
    rgba(78, 195, 217, 0.4),
    rgba(155, 109, 216, 0.4),
    rgba(233, 75, 140, 0.4),
    rgba(245, 200, 78, 0.4));
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.7;
  z-index: 0;
  animation: slowSpin 60s linear infinite;
}
@keyframes slowSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .teaser-portrait .portrait-blob { animation: none; } }

.teaser-portrait .portrait-image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
  box-shadow: var(--shadow-soft);
}
.teaser-portrait .portrait-image svg { width: 75%; height: auto; }
.teaser-portrait .portrait-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.teaser-content h2 { margin-bottom: var(--s-4); }
.teaser-content p { margin-bottom: var(--s-6); color: var(--color-text); }

/* ----- 12. BREADCRUMB --------------------------------------------------- */

.breadcrumb {
  /* Iba vertikálny padding — horizontálny zdedíme z .container, aby breadcrumb
     "dýchal" rovnako ako ostatný obsah na strane. */
  padding-top: var(--s-6);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-blue); }
.breadcrumb .sep { color: var(--color-border); margin: 0 var(--s-1); }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* ----- 13. PAGE HERO (sub-pages) ---------------------------------------- */

.page-hero {
  padding: var(--s-12) 0 var(--s-8);
  text-align: left;
  max-width: 760px;
}
.page-hero h1 { margin-bottom: var(--s-4); }
.page-hero .lead { color: var(--color-text-muted); }

/* ----- 14. FILTER TAGS -------------------------------------------------- */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-4);
}

.filter-tag {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  background-color: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  transition: all var(--t-fast);
  cursor: pointer;
}
.filter-tag:hover { border-color: var(--color-text); }
.filter-tag.active {
  background-color: var(--color-blue);
  color: white;
  border-color: var(--color-blue);
}

/* ----- 15. CATEGORY DETAIL HERO ---------------------------------------- */

.cat-hero {
  border-radius: var(--r-card);
  padding: clamp(var(--s-8), 4vw, var(--s-16));
  margin: var(--s-6) 0 var(--s-12);
  position: relative;
  overflow: hidden;
}
.cat-hero-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-6);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  .cat-hero-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
.cat-hero-icon { width: 100px; height: 100px; }
.cat-hero-content h1 { margin-bottom: var(--s-3); }
.cat-hero-content p { color: var(--color-text); max-width: 540px; }

.cat-hero .watercolor-corner {
  position: absolute;
  width: 360px;
  height: 360px;
  right: -100px;
  top: -100px;
  filter: blur(60px);
  opacity: 0.4;
  border-radius: 50%;
  z-index: 0;
}

/* ----- 16. PDF CARDS --------------------------------------------------- */

.pdf-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border-radius: var(--r-card);
  padding: var(--s-6);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.pdf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.pdf-preview {
  position: relative;
  aspect-ratio: 1 / 1.414; /* A4 */
  background-color: white;
  border-radius: var(--r-pdf);
  box-shadow: 0 2px 8px rgba(44, 44, 46, 0.10), 0 0 0 1px rgba(44, 44, 46, 0.03) inset;
  overflow: hidden;
  margin-bottom: var(--s-4);
}
.pdf-preview-content {
  padding: 14% 12%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pdf-preview-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.75rem, 1.5vw, 0.95rem);
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 8%;
}
.pdf-lines { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8%; }
.pdf-lines span {
  height: 4px;
  background-color: var(--color-border);
  border-radius: 2px;
}
.pdf-lines span:nth-child(1) { width: 100%; }
.pdf-lines span:nth-child(2) { width: 92%; }
.pdf-lines span:nth-child(3) { width: 88%; }
.pdf-lines span:nth-child(4) { width: 95%; }
.pdf-lines span:nth-child(5) { width: 60%; }
.pdf-decor {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex: 1;
  min-height: 0;
}
.pdf-decor svg { max-width: 60%; max-height: 80px; }

.pdf-info { flex: 1; }
.pdf-info h3 { font-size: 1.125rem; margin-bottom: var(--s-2); }
.pdf-info p { font-size: 0.9375rem; color: var(--color-text-muted); margin-bottom: var(--s-3); }
.pdf-meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: var(--s-4);
}
.pdf-card .btn { margin-top: auto; }

/* ----- 17. ARTICLE DETAIL ---------------------------------------------- */

.article-hero {
  max-width: 820px;
  padding: var(--s-8) 0 var(--s-6);
}
.article-hero .pill { margin-bottom: var(--s-4); }
.article-hero h1 { margin-bottom: var(--s-6); }
.article-hero .meta { font-size: 0.9375rem; }

.article-featured {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 7;
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-12);
  overflow: hidden;
  position: relative;
}
.article-featured svg { width: 35%; height: auto; max-height: 60%; }

.article-content {
  max-width: var(--max-content);
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.8;
}
.article-content p { margin-bottom: var(--s-6); }
.article-content h2 {
  margin-top: var(--s-12);
  margin-bottom: var(--s-4);
  font-size: 1.75rem;
}
.article-content h3 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
}
.article-content ul {
  list-style: none;
  margin-bottom: var(--s-8);
}
.article-content ul li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-3);
}
.article-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  background-color: var(--color-blue);
  border-radius: 50%;
}
/* Číslovaný zoznam — vráť viditeľné čísla (globálny reset ich vypol) */
.article-content ol {
  list-style: decimal;
  margin-bottom: var(--s-8);
  padding-left: var(--s-8);
}
.article-content ol li {
  margin-bottom: var(--s-3);
  padding-left: var(--s-2);
}

.pull-quote {
  position: relative;
  margin: var(--s-12) 0;
  padding: var(--s-8);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  border-radius: var(--r-card);
  background: radial-gradient(circle at 20% 20%, rgba(78, 195, 217, 0.18), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(155, 109, 216, 0.16), transparent 60%),
              rgba(255, 255, 255, 0.5);
  text-align: center;
  overflow: hidden;
}
.pull-quote::before {
  content: "“";
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-blue);
  display: block;
  margin-bottom: var(--s-2);
  height: 0.4em;
  overflow: visible;
}

.tip-box {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-6);
  margin: var(--s-8) 0;
  background-color: var(--pastel-yellow);
  border-radius: var(--r-card);
  border-left: 4px solid var(--color-yellow);
}
.tip-box-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.tip-box-content strong { display: block; margin-bottom: var(--s-1); font-weight: 600; }
.tip-box-content p { margin-bottom: 0; font-size: 1rem; }

.article-related {
  background-color: var(--color-wood-light);
  padding: var(--s-16) 0;
  margin-top: var(--s-16);
}
@media (max-width: 768px) { .article-related { padding: var(--s-12) 0; } }

.author-card {
  max-width: var(--max-content);
  margin: var(--s-16) auto 0;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-6);
  background-color: var(--color-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 640px) {
  .author-card {
    grid-template-columns: 96px 1fr;
    gap: var(--s-4);
  }
  .author-card .btn { grid-column: 1 / -1; }
}
.author-portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: var(--pastel-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.author-portrait svg { width: 70%; }
.author-card h4 { font-family: var(--font-display); font-size: 1.125rem; margin-bottom: 4px; }
.author-card p { color: var(--color-text-muted); font-size: 0.9375rem; margin: 0; }

/* ----- 18. O MNE -------------------------------------------------------- */

.about-hero {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--s-12);
  align-items: center;
  padding: var(--s-12) 0;
}
@media (max-width: 768px) {
  .about-hero { grid-template-columns: 1fr; gap: var(--s-8); }
}

.about-portrait {
  position: relative;
  width: 360px;
  height: 360px;
  max-width: 100%;
}
@media (max-width: 768px) { .about-portrait { width: 280px; height: 280px; margin: 0 auto; } }

.about-portrait .portrait-blob {
  position: absolute;
  inset: -8%;
  background: conic-gradient(from 45deg,
    rgba(233, 75, 75, 0.35),
    rgba(244, 147, 78, 0.35),
    rgba(245, 200, 78, 0.35),
    rgba(123, 196, 112, 0.35),
    rgba(78, 195, 217, 0.35),
    rgba(74, 143, 224, 0.35),
    rgba(155, 109, 216, 0.35),
    rgba(233, 75, 140, 0.35),
    rgba(233, 75, 75, 0.35));
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.6;
  z-index: 0;
}
.about-portrait .portrait-image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
  box-shadow: var(--shadow-deep);
}
.about-portrait .portrait-image svg { width: 75%; }
.about-portrait .portrait-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Odrážkový zoznam oblastí na stránke O mne — globálny reset (ul { list-style:none })
   značky vypína, tu ich vraciame v dizajne webu (modrá guľôčka ako v článkoch). */
.about-areas {
  list-style: none;
  margin-bottom: var(--s-6);
}
.about-areas li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-2);
}
.about-areas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background-color: var(--color-blue);
  border-radius: 50%;
}

.about-hero-content .eyebrow { margin-bottom: var(--s-3); }
.about-hero-content h1 { margin-bottom: var(--s-3); }
.about-hero-content .subtitle {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-bottom: var(--s-6);
}

/* Story section */
.about-story {
  max-width: var(--max-content);
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.about-story p { margin-bottom: var(--s-4); color: var(--color-text); }

/* Timeline */
.timeline {
  max-width: var(--max-content);
  margin: 0 auto;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background-color: var(--color-border);
}
.timeline-item {
  position: relative;
  padding-left: 56px;
  padding-bottom: var(--s-8);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-blue);
  border: 4px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-blue);
}
.timeline-item .year {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-blue);
  font-size: 0.9375rem;
  margin-bottom: 4px;
}
.timeline-item h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.timeline-item p { color: var(--color-text-muted); font-size: 0.9375rem; margin: 0; }

/* Ochrana údajov — sekčné nadpisy sú sémanticky h2 (správne poradie h1→h2),
   vizuálne však ostávajú v pôvodnej h3 mierke právneho textu (vrátane
   letter-spacingu bez zúženia, presne ako mal h3). */
/* Ochrana údajov — textový stĺpec centrovaný rovnako ako telo článku
   (rovnaký vzor ako .article-content: obmedzená šírka + auto okraje). */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
}
.legal-content h2 {
  font-size: clamp(1.25rem, 1vw + 0.85rem, 1.5rem);
  line-height: 1.3;
  letter-spacing: normal;
}
.legal-content ul {
  list-style: none;
  margin-bottom: 1.25rem;
}
.legal-content ul li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-2);
  line-height: 1.75;
}
.legal-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background-color: var(--color-blue);
  border-radius: 50%;
}

/* Kontaktný blok na stránke O mne — karta v dizajnovej reči webu
   (rovnaké tokeny ako .audience-card, bez hover efektu — nie je to odkaz). */
.contact-box {
  background-color: var(--color-surface);
  border-radius: var(--r-card);
  padding: var(--s-8);
  box-shadow: var(--shadow-soft);
  max-width: 640px;
  margin: 0 auto;
}
.contact-box p { margin: 0; }
.contact-icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-4);
  display: block;
}

/* "Pre koho som tu" cards */
.audience-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) { .audience-grid { grid-template-columns: 1fr; } }

.audience-card {
  background-color: var(--color-surface);
  border-radius: var(--r-card);
  padding: var(--s-8);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.audience-card .audience-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-4);
}
.audience-card h3 { font-size: 1.25rem; margin-bottom: var(--s-2); }
.audience-card p { color: var(--color-text-muted); font-size: 0.9375rem; margin: 0; }

/* ----- 18.5 INSTAGRAM SECTION ------------------------------------------ */

.ig-section {
  padding: clamp(48px, 6vw, 80px) 0;
}

.ig-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(var(--s-6), 4vw, var(--s-12));
  align-items: center;
  padding: clamp(var(--s-8), 4vw, var(--s-12));
  border-radius: var(--r-card);
  /* Tlmený IG-inšpirovaný gradient (žltá → ružová → fialová), ale stišený
     pridaním vrstvy off-white. Vďaka tomu sa neudusíme v farbách. */
  background:
    linear-gradient(135deg, rgba(251, 250, 247, 0.65), rgba(251, 250, 247, 0.45)),
    linear-gradient(135deg, var(--pastel-yellow) 0%, var(--pastel-pink) 50%, var(--pastel-purple) 100%);
  position: relative;
  overflow: hidden;
}

.ig-card-icon {
  width: clamp(80px, 9vw, 120px);
  height: clamp(80px, 9vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20%;
  color: var(--color-pink);
  flex-shrink: 0;
}
.ig-card-icon svg { width: 60%; height: 60%; }

.ig-card-content .eyebrow {
  color: var(--color-pink);
}

.ig-card-content h2 {
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  margin: var(--s-2) 0 var(--s-3);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ig-card-content p {
  color: var(--color-text-muted);
  margin-bottom: var(--s-6);
  max-width: 580px;
}

.btn.ig-cta {
  background-color: var(--color-pink);
}
.btn.ig-cta:hover {
  background-color: var(--color-purple);
}

@media (max-width: 768px) {
  .ig-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ig-card-icon {
    margin: 0 auto;
  }
  .ig-card-content p {
    margin-left: auto;
    margin-right: auto;
  }
  .btn.ig-cta {
    /* CTA s dlhým handle sa nezmestí na úzkom mobile. Necháme ho zalomiť. */
    white-space: normal;
    word-break: break-word;
    padding-left: var(--s-4);
    padding-right: var(--s-4);
  }
}

/* Kontakt variácia IG karty (step48): farebný rámik ostáva, obsah = centrovaná
   hlavička + dve voľby vedľa seba (IG ružová vľavo, e-mail modrá vpravo).
   Kotva #kontakt má offset kvôli fixnému headeru (84px + rezerva). */
.ig-card--contact { display: block; text-align: center; }
.ig-card--contact .ig-card-content { margin-bottom: var(--s-8); }
.ig-card--contact .ig-card-content h2 { margin-bottom: 0; }
.ig-card--contact .ig-card-content p {
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--s-3);
  margin-bottom: 0;
}
.contact-duo {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(var(--s-8), 8vw, var(--s-12));
  flex-wrap: wrap;
}
.contact-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.ig-card--contact .ig-card-icon { margin: 0; }
.contact-icon-mail { color: var(--color-blue); }
#kontakt { scroll-margin-top: 100px; }

/* Odborná spolupráca (O mne, step49): rovnaký farebný rámik ako Kontakt,
   dlaždice sú širšie biele boxy pre wordmark logá partnerov. */
.partner-tile {
  width: clamp(190px, 26vw, 250px);
  height: clamp(92px, 12vw, 116px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 20px;
}
.partner-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* ----- 20. DETSKÝ ČASOVAČ (step50) -------------------------------------- */
/* Témy ciferníka: premenné na koreni aplikácie, prepínané triedou theme-*. */
#tmr-app {
  --tmr-main:  #E8B04A;
  --tmr-soft:  #F6D06B;
  --tmr-dark:  #B9862F;
  --tmr-bg:    #FDF8EC;
  --tmr-track: #F1E4C4;
}
#tmr-app.theme-motyl  { --tmr-main:#E85D9A; --tmr-soft:#F6A5C9; --tmr-dark:#B23A72; --tmr-bg:#FDF1F7; --tmr-track:#F3D9E7; }
#tmr-app.theme-raketa { --tmr-main:#4A8FE0; --tmr-soft:#9CC4F2; --tmr-dark:#2F6FBF; --tmr-bg:#F0F6FD; --tmr-track:#D9E7F7; }
#tmr-app.theme-slnko  { --tmr-main:#E8B04A; --tmr-soft:#F6D06B; --tmr-dark:#B9862F; --tmr-bg:#FDF8EC; --tmr-track:#F1E4C4; }

/* --- panel Nastavenie --- */
#tmr-setup .tmr-intro {
  max-width: 560px;
  margin: 26px auto 0;
  text-align: center;
  color: var(--color-text-muted, #7A716A);
}
#tmr-setup { max-width: 820px; margin-left: auto; margin-right: auto; }
#tmr-setup .section-head { text-align: center; }
.tmr-group { margin-top: 42px; text-align: center; }
.tmr-group-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #7A716A);
  margin-bottom: 16px;
}
.tmr-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.tmr-opt {
  border: 2px solid #E4DCD1;
  background: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast, 0.15s), background-color var(--t-fast, 0.15s), transform var(--t-fast, 0.15s);
}
.tmr-opt:hover { border-color: #C9BFB0; transform: translateY(-1px); }
.tmr-opt.is-active {
  border-color: #E85D9A;
  background: #FDF1F7;
}
.tmr-opt-theme, .tmr-opt-chk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  border-radius: 18px;
  padding: 16px 22px 14px;
  min-width: 112px;
}
.tmr-opt-theme svg, .tmr-opt-chk svg { width: 50px; height: 50px; display: block; }
.tmr-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.tmr-custom[hidden] { display: none; }
.tmr-custom label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--color-text-muted, #7A716A);
}
.tmr-custom input {
  width: 4.4rem;
  padding: 8px 10px;
  border: 2px solid #E4DCD1;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  text-align: center;
  background: #fff;
}
.tmr-custom input:focus { outline: none; border-color: #E85D9A; }
.tmr-colon { font-weight: 800; }
.tmr-hint { font-size: 0.85rem; color: var(--color-text-muted, #7A716A); }
.tmr-start-wrap { text-align: center; margin: 52px 0 18px; }
.tmr-start { font-size: 1.08rem; padding: 15px 34px; }

/* --- panel Časovač --- */
#tmr-run { text-align: center; }
.tmr-chkrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 26px auto 88px;        /* rad je POD ciferníkom, dvojnásobné odsadenie zdola */
  width: fit-content;            /* rámik obopne len samotné odškrtávače */
  max-width: 100%;
  padding: 14px 22px;
  border: 2px solid var(--tmr-track);
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.55);
}
/* voľba „Žiadne" → rad je prázdny, nech po sebe nenechá medzeru */
.tmr-chkrow:empty { display: none; margin: 0; }
.tmr-chk {
  position: relative;
  width: clamp(52px, 12vw, 72px);
  height: clamp(52px, 12vw, 72px);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.tmr-chk-off, .tmr-chk-on {
  position: absolute;
  inset: 0;
  display: block;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.tmr-chk svg { width: 100%; height: 100%; display: block; }
.tmr-chk .tmr-chk-on  { opacity: 0; transform: scale(0.55); }
.tmr-chk.is-done .tmr-chk-on  { opacity: 1; transform: scale(1); }
.tmr-chk.is-done .tmr-chk-off { opacity: 0; transform: scale(0.7); }
.tmr-chk-balon .tmr-chk.is-done .tmr-chk-off { transform: scale(1.45); }
.tmr-chk:active { transform: scale(0.94); }

/* úzke displeje: menšie vnútorné odsadenie rámika, nech sa 5 odmien zmestí do radu */
@media (max-width: 480px) {
  .tmr-chkrow { padding: 12px 12px; gap: 10px; }
}
.tmr-dialwrap {
  position: relative;
  width: clamp(240px, 70vw, 420px);
  margin: 0 auto;
}
#tmr-dial { width: 100%; height: auto; display: block; }
#tmr-time {
  font-family: inherit;
  font-size: 64px;
  font-weight: 800;
  fill: var(--color-text, #2F2A26);
}
#tmr-app.is-done #tmr-time { fill: #5CA86B; }
#tmr-ring { transition: stroke-dashoffset 0.12s linear; }
.tmr-deco { display: none; opacity: 0.95; }
#tmr-app.theme-motyl  .tmr-deco-motyl  { display: block; }
#tmr-app.theme-raketa .tmr-deco-raketa { display: block; }
#tmr-app.theme-slnko  .tmr-deco-slnko  { display: block; }
#tmr-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.tmr-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.tmr-big { font-size: 1.05rem; padding: 14px 28px; }
.tmr-ghost {
  border: 2px solid #E4DCD1;
  background: #fff;
  color: inherit;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast, 0.15s);
}
.tmr-ghost:hover { border-color: #C9BFB0; }
.tmr-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #E4DCD1;
  border-radius: 50%;
  background: #fff;
  color: var(--color-text, #2F2A26);
  cursor: pointer;
  transition: border-color var(--t-fast, 0.15s), color var(--t-fast, 0.15s);
}
.tmr-icon:hover { border-color: #C9BFB0; }
.tmr-icon .ic-off { display: none; }
.tmr-icon.is-muted .ic-on  { display: none; }
.tmr-icon.is-muted .ic-off { display: inline; }
.tmr-icon.is-muted { color: #B9502F; border-color: #E8C4B4; }
.tmr-back { margin-top: 26px; }
.tmr-back a {
  font-size: 0.92rem;
  color: var(--color-text-muted, #7A716A);
}
.tmr-back a:hover { color: var(--color-link-hover, #B23A72); }

/* konfety pri odškrtnutí a v cieli */
.tmr-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  animation: tmrFly 0.65s ease-out forwards;
}
.tmr-particle-big {
  width: 12px;
  height: 12px;
  animation-duration: 1.15s;
}
@keyframes tmrFly {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.35); opacity: 0; }
}

/* prstenec s gradientom podľa témy + cestujúci maskot na jeho špičke */
#tmr-app.theme-motyl  #tmr-ring { stroke: url(#tmr-grad-motyl); }
#tmr-app.theme-raketa #tmr-ring { stroke: url(#tmr-grad-raketa); }
#tmr-app.theme-slnko  #tmr-ring { stroke: url(#tmr-grad-slnko); }
.tmr-m { display: none; }
#tmr-app.theme-motyl  .tmr-m-motyl,
#tmr-app.theme-raketa .tmr-m-raketa,
#tmr-app.theme-slnko  .tmr-m-slnko { display: block; }

/* jemný život v scénach — všetko vypnuteľné cez reduced-motion */
.tmr-wingL, .tmr-wingR, .tmr-flame, .tmr-rays, .tmr-rays2, .tmr-twinkle, .tmr-drift {
  transform-box: fill-box;
}
.tmr-wingL { transform-origin: 100% 50%; animation: tmrFlapL 0.85s ease-in-out infinite alternate; }
.tmr-wingR { transform-origin: 0% 50%;  animation: tmrFlapR 0.85s ease-in-out infinite alternate; }
@keyframes tmrFlapL { from { transform: rotate(7deg); }  to { transform: rotate(-24deg); } }
@keyframes tmrFlapR { from { transform: rotate(-7deg); } to { transform: rotate(24deg); } }
.tmr-flame { transform-origin: 50% 0%; animation: tmrFlame 0.34s ease-in-out infinite alternate; }
@keyframes tmrFlame { from { transform: scaleY(0.8); } to { transform: scaleY(1.18); } }
.tmr-rays  { transform-origin: 50% 50%; animation: tmrSpin 90s linear infinite; }
.tmr-rays2 { transform-origin: 50% 50%; animation: tmrSpin 22s linear infinite; }
@keyframes tmrSpin { to { transform: rotate(360deg); } }
.tmr-twinkle { animation: tmrTwinkle 2.4s ease-in-out infinite alternate; }
.tmr-twinkle.d2 { animation-delay: 0.8s; }
.tmr-twinkle.d3 { animation-delay: 1.5s; }
@keyframes tmrTwinkle { from { opacity: 0.4; } to { opacity: 1; } }
.tmr-drift { animation: tmrDriftY 5.5s ease-in-out infinite alternate; }
.tmr-drift.d2 { animation-delay: 2.2s; }
@keyframes tmrDriftY { from { transform: translateY(0); } to { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) {
  .tmr-wingL, .tmr-wingR, .tmr-flame, .tmr-rays, .tmr-rays2, .tmr-twinkle, .tmr-drift { animation: none; }
}

/* --- akvarelové ilustrácie (step53) --- */
.tmr-opt-img { width: 52px; height: 52px; object-fit: contain; display: block; }
.tmr-chk img.tmr-chk-img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* balón a ohryzok sú vysoké a úzke — dorovnaj optickú veľkosť */
.tmr-chk img.tmr-pic-balon { transform: scale(1.06); }
.tmr-chk .tmr-chk-on img { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.07)); }
/* maskoti: motýlik sa hojdá, slniečko sa pomaly točí (raketa rotuje z JS po dráhe) */
.tmr-bob, .tmr-slowspin { transform-box: fill-box; transform-origin: 50% 50%; }
.tmr-bob { animation: tmrBob 2.6s ease-in-out infinite alternate; }
@keyframes tmrBob {
  from { transform: translateY(-2px) rotate(-6deg); }
  to   { transform: translateY(2px) rotate(6deg); }
}
.tmr-slowspin { animation: tmrSpin 26s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .tmr-bob, .tmr-slowspin { animation: none; }
}

/* celá obrazovka: čisté pozadie, ciferník v strede */
#tmr-run:fullscreen {
  background: var(--color-bg, #FAF6F0);
  padding: 6vh 20px 4vh;
  overflow: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tmr-chk-off, .tmr-chk-on { transition: opacity 0.15s ease; transform: none !important; }
  .tmr-particle { animation: none; opacity: 0; }
  .tmr-opt, .tmr-opt:hover { transform: none; }
}

/* --- promo karta na domovskej stránke --- */
.timer-promo { position: relative; z-index: 6; padding: 26px 0 clamp(32px, 3.5vw, 48px); } /* nad action-tiles (z-index 5, negatívny margin) */
.timer-promo-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  border-radius: 22px;
  background: linear-gradient(120deg, #FDF8EC 0%, #F0F6FD 100%);
  box-shadow: 0 10px 30px rgba(60, 45, 30, 0.07);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-med, 0.25s), box-shadow var(--t-med, 0.25s);
}
.timer-promo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(60, 45, 30, 0.10);
  color: inherit;
}
.timer-promo-dial { width: 44px; height: 58px; flex-shrink: 0; }
.timer-promo-dial img { width: 100%; height: 100%; object-fit: contain; display: block; }
.timer-promo-text { display: flex; flex-direction: column; gap: 3px; }
.timer-promo-text strong { font-size: 1.06rem; }
.timer-promo-text span { font-size: 0.95rem; color: var(--color-text-muted, #7A716A); }
.timer-promo-card .btn { margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {
  .timer-promo-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .timer-promo-card .btn { margin-left: 0; align-self: stretch; text-align: center; }
}

/* ----- 19. FOOTER ------------------------------------------------------- */

.site-footer {
  position: relative;
  background-color: var(--color-wood-light);
  padding: var(--s-16) 0 var(--s-6);
  margin-top: var(--s-16);
  overflow: hidden;
}
.site-footer .watercolor-1 {
  position: absolute;
  width: 320px; height: 320px;
  top: -120px; left: 10%;
  background: radial-gradient(circle, rgba(123, 196, 112, 0.4) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.5;
  pointer-events: none;
}
.site-footer .watercolor-2 {
  position: absolute;
  width: 280px; height: 280px;
  bottom: -100px; right: 5%;
  background: radial-gradient(circle, rgba(74, 143, 224, 0.4) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.4;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--s-6); }
}

.footer-brand .logo { margin-bottom: var(--s-3); }
.footer-brand .logo img { height: 64px; margin-bottom: 0; }
.footer-brand p { color: var(--color-text-muted); font-size: 0.9375rem; max-width: 280px; }

/* Footer slogan — krátka brand signature s vlnovkou, ladí s hero sloganom.
   Posolstvo "Reč, ktorá dáva zmysel" sa zopakuje na konci stránky a uzavrie
   tak brandové orámovanie (hore aj dole). */
.footer-brand .footer-slogan {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  font-style: italic;
  color: var(--color-blue);
  max-width: none;
}
.footer-brand .footer-slogan svg {
  width: 28px;
  height: auto;
  flex-shrink: 0;
}
.footer-brand .footer-slogan svg path {
  stroke: var(--color-blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
}

.footer-nav h2,
.footer-contact h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--s-3);
  color: var(--color-text);
}
.footer-nav ul { display: flex; flex-direction: column; gap: var(--s-2); }
.footer-nav a { color: var(--color-text); font-size: 0.9375rem; }
.footer-nav a:hover { color: var(--color-blue); }

.footer-contact a {
  display: inline-block;
  color: var(--color-text);
  font-size: 0.9375rem;
  margin-bottom: var(--s-3);
}
.footer-contact a:hover { color: var(--color-blue); }

.social-links { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.social-links a:hover {
  transform: translateY(-2px);
  background-color: var(--color-blue);
  color: white;
}
.social-links svg { width: 20px; height: 20px; }

.footer-bottom {
  position: relative;
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(44, 44, 46, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.footer-bottom a { color: var(--color-text-muted); }
.footer-bottom a:hover { color: var(--color-blue); }

/* ----- 20. UTILITY ------------------------------------------------------ */

.text-center { text-align: center; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mt-12 { margin-top: var(--s-12); }
.mt-16 { margin-top: var(--s-16); }

/* ---- Featured (odporúčané) — odznak na kartách ---- */
.featured-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;   /* nech sa zmestí na text, nie na celú šírku (ako .pill) */
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #B8860B;
  background-color: var(--pastel-yellow);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

/* ============================================================
   ADMIN — prihlásenie a administrácia (Krok 7)
   ============================================================ */
.admin-login-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.admin-login-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--color-wood-light, #e8e0d4);
  border-radius: var(--r-lg, 16px);
  padding: 2rem;
  box-shadow: var(--shadow-soft, 0 4px 20px rgba(0,0,0,0.05));
}
.admin-login-card h1 { margin: 0 0 4px; font-size: 1.5rem; }
.admin-login-sub { color: var(--color-text-muted, #777); margin: 0 0 1.5rem; font-size: 0.9rem; }

.admin-form label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 4px; }
.admin-form input[type="text"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form textarea,
.admin-form select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-wood-light, #ddd);
  border-radius: var(--r-md, 8px);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
}
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
  outline: 2px solid var(--color-blue, #4A8FE0);
  outline-offset: 1px;
  border-color: transparent;
}
.admin-error {
  background: #fdeaea;
  color: #b00020;
  border: 1px solid #f5c6cb;
  border-radius: var(--r-md, 8px);
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* Admin shell (nástenka a ďalšie admin stránky) */
.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--color-wood-light, #e8e0d4);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-topbar nav { display: flex; gap: 1.25rem; }
.admin-topbar nav a { color: var(--color-text, #333); text-decoration: none; font-size: 0.9rem; }
.admin-topbar nav a:hover { text-decoration: underline; }
.admin-body { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
/* Stránka editora potrebuje viac šírky (zdroj + náhľad 760px vedľa seba) */
.admin-body-wide { max-width: 1640px; }
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.admin-card {
  background: #fff;
  border: 1px solid var(--color-wood-light, #e8e0d4);
  border-radius: var(--r-lg, 16px);
  padding: 1.5rem;
}
.admin-card h3 { margin: 0 0 0.5rem; }
.admin-card p { color: var(--color-text-muted, #777); font-size: 0.9rem; margin: 0; }
.admin-card-muted { opacity: 0.65; }

/* Admin — logo */
.admin-login-logo { text-align: center; margin-bottom: 1.25rem; }
.admin-login-logo img { height: 48px; width: auto; }
.admin-topbar-brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.admin-topbar-brand img { height: 36px; width: auto; display: block; }
.admin-topbar-brand span { color: var(--color-text-muted, #777); font-size: 0.9rem; }

/* ============================================================
   ADMIN — zoznam, formulár, editor (Krok 7C)
   ============================================================ */
.admin-page-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }
.admin-trash-link { color: var(--color-text-muted,#777); font-size:0.9rem; }
.admin-flash { background:#e7f6ec; border:1px solid #b7e0c4; color:#1c6b3a; padding:0.7rem 1rem; border-radius:8px; margin-bottom:1.25rem; }
.admin-card-link { text-decoration:none; color:inherit; transition: box-shadow .15s, transform .15s; }
.admin-card-link:hover { box-shadow: var(--shadow-md,0 6px 20px rgba(0,0,0,0.08)); transform: translateY(-2px); }

/* Tabuľka */
.admin-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--color-wood-light,#e8e0d4); border-radius:12px; overflow:hidden; }
.admin-table th, .admin-table td { text-align:left; padding:0.75rem 1rem; border-bottom:1px solid var(--color-wood-light,#eee); }
.admin-table th { background:#faf7f2; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--color-text-muted,#888); }
.admin-table tr:last-child td { border-bottom:none; }
/* Triediteľné hlavičky (Články, Materiály): kurzor + indikátor smeru. */
.admin-table th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.admin-table th.sortable::after { content:'↕'; margin-left:0.35rem; opacity:0.35; font-size:0.85em; }
.admin-table th.sortable.sort-asc::after { content:'▲'; opacity:0.85; }
.admin-table th.sortable.sort-desc::after { content:'▼'; opacity:0.85; }
.admin-table th.sortable:hover { color:var(--color-text,#333); }
.admin-actions { display:flex; gap:0.5rem; align-items:center; white-space:nowrap; }

.badge { display:inline-block; font-size:0.75rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.badge-green { background:var(--pastel-green,#d8f0d4); color:#3f7a38; }
.badge-grey { background:#eceae6; color:#777; }
.badge-yellow { background:var(--pastel-yellow,#fbeec2); color:#b8860b; }

.btn-sm { display:inline-block; font-size:0.85rem; padding:0.35rem 0.7rem; border-radius:6px; border:1px solid var(--color-wood-light,#ddd); background:#fff; color:var(--color-text,#333); text-decoration:none; cursor:pointer; }
.btn-sm:hover { background:#f5f2ed; }
.btn-sm-danger { color:#b00020; border-color:#f0c4c9; }
.btn-sm-danger:hover { background:#fdeaea; }
.btn.btn-sm { font-size:0.85rem; padding:0.4rem 0.9rem; }

/* Formulár — riadky, checkbox/radio */
.admin-form-row { display:flex; gap:1.25rem; align-items:center; margin:0.5rem 0 1rem; flex-wrap:wrap; }
.admin-check, .admin-radio { display:inline-flex; align-items:center; gap:0.4rem; font-weight:normal; margin:0; }
.admin-form-actions { display:flex; gap:0.75rem; align-items:center; margin-top:1.5rem; }

/* Markdown editor + náhľad */
.md-toolbar { display:flex; gap:0.35rem; flex-wrap:wrap; margin-bottom:0.4rem; }
.md-toolbar button { font-size:0.8rem; padding:0.3rem 0.6rem; border:1px solid var(--color-wood-light,#ddd); background:#fff; border-radius:6px; cursor:pointer; }
.md-toolbar button:hover { background:#f5f2ed; }
.md-editor-wrap { display:grid; grid-template-columns: 1fr 760px; gap:1.5rem; align-items:start; }
.md-source { width:100%; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:0.95rem; line-height:1.7; resize:vertical; min-height:560px; box-sizing:border-box; }
.md-preview { border:1px solid var(--color-wood-light,#e8e0d4); border-radius:8px; padding:1.5rem 2rem; background: var(--color-bg,#FBFAF7); overflow-y:auto; max-height:680px; width:760px; box-sizing:border-box; }
.md-preview h2 { margin-top:1rem; }
.md-hint { font-size:0.8rem; color:var(--color-text-muted,#888); margin:0.4rem 0 1rem; }
/* Varovanie v náhľade: neznámy :::material slug (admin-only, na web sa nedostane) */
.md-warn { border:1px solid #E8C98A; border-left:4px solid #D99B2B; border-radius:8px; background:#FDF7EA; padding:0.9rem 1.1rem; margin:1.2rem 0; }
.md-warn-title { display:block; color:#8A5A12; font-size:0.98rem; }
.md-warn-text { font-size:0.9rem; color:#6B563A; margin-top:0.35rem; }
.md-warn-hint { font-size:0.9rem; color:#6B563A; margin-top:0.45rem; }
.md-warn code { background:#F3E5C6; border-radius:4px; padding:0.05rem 0.35rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:0.88em; }
.md-warn-foot { font-size:0.78rem; color:#9C8A6B; margin-top:0.5rem; }
@media (max-width:1500px){
  .md-editor-wrap{ grid-template-columns:1fr; }
  .md-preview{ width:100%; max-width:760px; }
}

/* Titulný obrázok — náhľad */
.admin-cover-current { margin:0.5rem 0 1rem; }
.admin-cover-current img { max-width:240px; border-radius:8px; display:block; margin-bottom:0.4rem; }
.admin-remove-cover { font-weight:normal; font-size:0.85rem; display:inline-flex; gap:0.35rem; align-items:center; }

/* Pokročilé */
.admin-advanced { margin:1.25rem 0; border:1px solid var(--color-wood-light,#e8e0d4); border-radius:8px; padding:0.5rem 1rem; background:#faf8f4; }
.admin-advanced summary { cursor:pointer; font-weight:600; padding:0.4rem 0; }
.admin-advanced-body { padding-top:0.75rem; }

/* Admin — drobné doladenie (oprava hover, rozloženie hlavičky zoznamu) */
.admin-page-head-actions { display:flex; gap:0.75rem; align-items:center; }
/* Istota čitateľnosti hoveru pre malé tlačidlá v admine */
.btn-sm:hover { background:#efe9e0; color:#2c2c2e; }
.btn-sm-danger:hover { background:#fdeaea; color:#b00020; }
/* Primárne tlačidlo v admin tabuľke — pri hoveri zostáva biely text na modrej */
.admin-shell .btn-primary:hover { color:#fff; }


/* Admin — info o aktuálnom PDF v materiáli */
.admin-pdf-current { font-size:0.9rem; margin:0.25rem 0 0.5rem; padding:0.5rem 0.75rem; background:#f4f1ea; border-radius:6px; }

/* ===== Admin — výber ikony a farby kategórie (7E) ===== */
.icon-picker { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:0.6rem; margin:0.25rem 0 1rem; }
.picker-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:0.3rem; padding:0.7rem 0.4rem; border:2px solid #e3ddd2; border-radius:10px; cursor:pointer; background:#fff; transition:border-color .12s, background .12s; }
.picker-tile input { position:absolute; opacity:0; pointer-events:none; }
.picker-tile .picker-icon { color:#8a8170; display:flex; }
.picker-tile .cat-icon { width:40px; height:40px; }
.picker-tile .picker-name { font-size:0.72rem; color:var(--color-text-muted); }
.picker-tile:hover { border-color:#c8bfae; }
.picker-tile:has(input:checked) { border-color:var(--color-blue,#4A8FE0); background:#eef5ff; }
.picker-tile:has(input:checked) .picker-icon { color:var(--color-blue,#4A8FE0); }

.color-picker { display:flex; flex-wrap:wrap; gap:0.6rem; margin:0.25rem 0 1rem; }
.swatch-tile { position:relative; cursor:pointer; }
.swatch-tile input { position:absolute; opacity:0; pointer-events:none; }
.swatch-dot { display:block; width:34px; height:34px; border-radius:50%; border:3px solid transparent; box-shadow:0 0 0 2px #e3ddd2; transition:box-shadow .12s; }
.swatch-tile:hover .swatch-dot { box-shadow:0 0 0 2px #c8bfae; }
.swatch-tile:has(input:checked) .swatch-dot { border-color:#fff; box-shadow:0 0 0 3px #444; }

/* Odhlasovacie tlačidlo v admin topbare — vyzerá ako odkaz (logout je POST) */
.admin-logout-form { display: inline; margin: 0; }
.admin-logout-btn {
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer; text-decoration: none;
}
.admin-logout-btn:hover { text-decoration: underline; }

/* Obrázok v článku + voliteľný popis pod ním */
.article-image {
  margin: var(--s-6) 0;
}
.article-image-caption {
  margin-top: var(--s-2);
  text-align: left;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Rámik "Materiál na stiahnutie" (:::material slug ... :::) */
.material-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-6);
  margin: var(--s-8) 0;
  background-color: var(--pastel-turquoise);
  border-radius: var(--r-card);
  border-left: 4px solid var(--color-turquoise);
}
.material-box-icon { width: 32px; height: 32px; flex-shrink: 0; color: #176B7D; }
.material-box-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.material-box-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #176B7D;
}
.material-box-title { font-size: 1.125rem; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.material-box-info { color: var(--color-text-muted); }
.material-box-info p { margin-bottom: 0; }
.material-box-meta { font-size: 0.85rem; color: var(--color-text-muted); }
.material-box-btn {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-6);
  background-color: #176B7D; color: #fff;
  border-radius: var(--r-button);
  font-weight: 600; text-decoration: none;
  transition: background-color 0.15s ease;
}
.material-box-btn:hover { background-color: #115463; color: #fff; }

/* Fotka materiálu na karte (zoznam) — vyplní A4 rámik karty */
.pdf-preview-photo { background: #f3f3f3; }
.pdf-preview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdf-preview-photo a { display: block; width: 100%; height: 100%; }

/* ===== Admin — stredná navigácia pása (sekcie, pilulky) + tlmená utilita ===== */
.admin-topbar .admin-nav-main { gap: 0.4rem; }
.admin-topbar .admin-nav-main a {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  color: var(--color-text, #333);
  font-size: 0.92rem;
  transition: background 0.12s, color 0.12s;
}
.admin-topbar .admin-nav-main a:hover { background: var(--pastel-turquoise); text-decoration: none; }
.admin-topbar .admin-nav-main a.is-active { background: #176B7D; color: #fff; font-weight: 600; }
.admin-topbar .admin-nav-main a.is-active:hover { background: #115463; color: #fff; }
.admin-topbar .admin-nav-util { gap: 1.1rem; }
.admin-topbar .admin-nav-util a,
.admin-topbar .admin-nav-util .admin-logout-btn { color: var(--color-text-muted, #777); font-size: 0.88rem; }

/* ===== Admin — vizuálne oddelené boxy pre nahrávanie súborov ===== */
.upload-box {
  border: 1px solid var(--color-wood-light, #e0d8c8);
  border-radius: 10px;
  padding: 0.85rem 1.1rem 1rem;
  margin: 0 0 1rem;
  background: #faf8f3;
}
.upload-box > label { display: block; font-weight: 600; margin-bottom: 0.55rem; }
.upload-box input[type="file"] { margin-bottom: 0; }
.upload-box .md-hint { margin: 0.5rem 0 0; }
.upload-box .admin-cover-current { margin-bottom: 0.6rem; }

/* ===== O mne — ilustračný diagram Rodič–Dieťa–Logopéd + oblasti ===== */
.about-diagram { text-align: center; margin: 2rem auto 2.25rem; }
.about-diagram img { max-width: 360px; width: 100%; height: auto; margin-inline: auto; }
.about-diagram figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.about-areas { margin: 0.4rem 0 1rem; padding-left: 1.3rem; }
.about-areas li { margin: 0.25rem 0; }

/* ============================================================
   QR generátor (admin) — krok 84
   ============================================================ */
.qr-preview {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* Kanvas má vlastný pixelový rozmer (aj 2048) — bez tohto by pretiekol. */
#qr-canvas {
  max-width: 320px;
  width: 100%;
  height: auto;
  border: 1px solid var(--border, #dcdcdc);
  border-radius: 8px;
  background: #fff;
}
#qr-canvas[width="0"] { display: none; }
#qr-info { margin: 0; font-size: 0.9rem; }