/* ==========================================================
   Neo-brutalism (clean), mobile-first, ONE-COLUMN ONLY
   - No 2-column layout on desktop
   - CTA zone as soft panel (no border / no shadow)
   - "Proč to dává smysl" is plain text (no card frame)
   - Button remains neo-brutal with animation hooks (JS adds effects)
   - 8pt-grid spacing discipline
   ========================================================== */

:root{
  /* Base */
  --bg: #fbf7ef;
  --text: #121212;
  --muted: #2a2a2a;

  /* Surfaces */
  --card: #ffffff;
  --panel: rgba(255,255,255,.55);

  /* Neo-brutal accents */
  --stroke: #111111;
  --accent: #ff3d7f;
  --accent2:#2d6bff;

  /* Shadows */
  --shadow: 8px 8px 0 var(--stroke);
  --shadow-sm: 5px 5px 0 var(--stroke);

  /* Radius */
  --radius: 16px;
  --radius-sm: 12px;

  /* Layout */
  --pad: 18px;
  --max: 980px;

  /* Type scale */
  --h1: clamp(1.8rem, 5.2vw, 3rem);
  --h2: clamp(1.15rem, 3.6vw, 1.6rem);
  --p:  clamp(1rem, 2.9vw, 1.05rem);
  --lh: 1.45;

  /* 8pt grid */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(45,107,255,0.10), transparent 45%),
    radial-gradient(circle at 92% 14%, rgba(255,61,127,0.10), transparent 45%),
    var(--bg);
  color: var(--text);
  font: 500 var(--p)/var(--lh) system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.2px;
}

/* Links (default) */
a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
a:hover{ opacity: 0.92; }
a:active{ transform: translateY(1px); }

a:focus-visible{
  outline: 3px solid var(--accent2);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Containers */
header, main, footer{
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 0 var(--pad);
}

header{
  padding-top: var(--s4);
  padding-bottom: var(--s2);
}

header h1{
  margin: 0 0 var(--s2) 0;
  font-size: var(--h1);
  line-height: 1.05;
  letter-spacing: -0.6px;
}

header p{
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
}

/* ONE COLUMN main */
main{
  padding-top: var(--s2);
  padding-bottom: var(--s4);
  display: block;
}

main > section{
  margin-top: var(--s2);
}

/* Default section style (card) */
section{
  background: var(--card);
  border: 3px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s2);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

section:hover{
  transform: translate(-1px,-1px);
  box-shadow: 10px 10px 0 var(--stroke);
}

section h2{
  margin: 0 0 var(--s2) 0;
  font-size: var(--h2);
  letter-spacing: -0.2px;
}

/* Lists */
ul{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
li{ margin: var(--s1) 0; }

/* --------------------------
   "Proč to dává smysl" (plain)
   Apply class="plain" to that section in HTML.
   -------------------------- */
section.plain{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  transform: none !important;
}
section.plain:hover{
  transform: none;
  box-shadow: none;
}

/* --------------------------
   CTA section (soft panel)
   Apply class="cta" to CTA section in HTML.
   No border, no shadow, soft panel background.
   -------------------------- */
section.cta{
  background: var(--panel);
  border: 0;
  box-shadow: none;
  border-radius: var(--radius);
  padding: var(--s2);
  transform: none !important;
}
section.cta:hover{
  transform: none;
  box-shadow: none;
}

/* CTA text blocks */
.cta-lead{
  margin: var(--s1) 0 var(--s2);
  max-width: 60ch;
  color: var(--muted);
}

.cta-note{
  margin: var(--s2) 0 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}

/* --------------------------
   CTA Button (neo-brutal)
   JS adds animation classes; CSS here ensures it already looks great.
   -------------------------- */
.cta-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  padding: 16px 18px;
  border: 3px solid var(--stroke);
  border-radius: 14px;
  background: var(--accent);
  color: #000;
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0,0,0);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  overflow: hidden;
  isolation: isolate;

  /* override default link underline */
  border-bottom: 3px solid var(--stroke);
}

.cta-btn:hover{
  filter: saturate(1.05) contrast(1.02);
}

.cta-btn:active{
  transform: translate3d(2px,2px,0);
  box-shadow: 0 0 0 var(--stroke);
}

.cta-btn:focus-visible{
  outline: 3px solid var(--accent2);
  outline-offset: 5px;
}

/* Small time badge */
.cta-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border: 2px solid var(--stroke);
  border-radius: 999px;
  background:#fff;
  box-shadow: 4px 4px 0 var(--stroke);
  font-size: .92rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Footer */
footer{
  padding-bottom: var(--s4);
}

footer small{
  display: block;
  color: var(--muted);
  background: rgba(255,255,255,0.6);
  border: 2px dashed var(--stroke);
  border-radius: var(--radius-sm);
  padding: var(--s2);
  max-width: 90ch;
}

/* Desktop: keep one column, just breathe more */
@media (min-width: 760px){
  header{
    padding-top: calc(var(--s4) + var(--s2));
  }

  section{
    padding: calc(var(--s2) + var(--s1));
  }

  section.cta{
    padding: calc(var(--s2) + var(--s1));
  }

  .cta-btn{
    width: auto;
    min-width: 340px;
  }
}

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  section, .cta-btn{
    transition: none;
  }
}

html, body{
  min-height: 100%;
}

body{
  min-height: 100vh;
  background-attachment: fixed;
}

/* ===== Footer: final, perfectly centered ===== */
footer{
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 0 var(--pad) var(--s4);
  display: flex;
  justify-content: center;     /* centers the footer box */
}

footer .footer-meta{
  display: block;
  width: min(860px, 100%);     /* stable nice width, never sticks left */
  margin: 0 auto;              /* critical: center the block */
  text-align: center;

  color: var(--muted);
  background: rgba(255,255,255,0.6);
  border: 2px dashed var(--stroke);
  border-radius: var(--radius-sm);
  padding: var(--s2);

  font-size: 0.95rem;
  line-height: 1.55;
  letter-spacing: 0.2px;
}

footer .footer-meta .sep{
  opacity: .55;
  padding: 0 6px;
  white-space: nowrap;
}

footer .footer-meta .footer-copy{
  font-weight: 800;
  opacity: .9;
  white-space: nowrap;         /* keeps © part intact */
}