/* mojenovaprace.cz - splash microsite.
   Palette, typography and surfaces follow the MojeNováPráce Brand Book:
   green #16A34A, navy #272D3B, white; Inter only; flat colors, rounded
   cards, pill buttons - no gradients, no drop shadows.
   The page sits on a neutral grey per the splash design; white cards on
   light green did not give the cards enough separation. */

:root{
  --green:#16A34A;
  --green-dark:#15803D;
  --page:#F5F5F5;
  --green-tint:#F0FDF4;
  --navy:#272D3B;
  --white:#FFFFFF;

  /* Derived from the palette navy - lighter text and hairlines, no new hues. */
  --muted:rgba(39,45,59,.66);
  --faint:rgba(39,45,59,.52);
  --line:rgba(39,45,59,.10);
  --green-soft:rgba(22,163,74,.10);
}

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

html{-webkit-text-size-adjust:100%}

body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--page);
  color:var(--navy);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{letter-spacing:-.02em;line-height:1.2}

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

a{color:inherit}

.site{max-width:768px;margin:0 auto;padding:40px 16px 40px}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero{text-align:center;display:flex;flex-direction:column;align-items:center}
.logo{height:56px;width:auto;max-width:100%}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;padding:5px 14px;border-radius:999px;
  background:var(--green-soft);color:var(--green);
  font-size:14px;font-weight:600;
}
.badge svg{width:16px;height:16px;flex:none}

.hero h1{margin-top:20px;font-size:30px;font-weight:800}
.hero .lead{margin-top:16px;max-width:36rem;color:var(--muted)}

/* ── Cards ────────────────────────────────────────────────────────────── */

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
}

.section{margin-top:40px}
.section-title{text-align:center;font-size:20px;font-weight:800}

.grid{margin-top:20px;display:grid;gap:16px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* "Jak to bude fungovat" cards. Scoped to .feature so the stat cards in the
   sibling grid keep their own, larger type. */
.feature > svg{width:24px;height:24px;color:var(--green)}
.feature h3{margin-top:12px;font-size:16px;font-weight:700}
.feature p{margin-top:4px;font-size:14px;color:var(--muted)}

/* ── Signup ───────────────────────────────────────────────────────────── */

.signup{margin-top:32px}
.signup h2{font-size:18px;font-weight:700}
.signup > p{margin-top:4px;font-size:14px;color:var(--muted)}

.signup-form{margin-top:20px;display:flex;flex-direction:column;gap:12px}
@media(min-width:640px){
  .signup-form{flex-direction:row}
  .signup-form input[type=email]{flex:1}
}

/* No flex:1 in the stacked mobile layout: in a column flexbox its zero
   flex-basis overrides height, and iOS Safari collapsed the input to the
   height of its text. min-height guards the same collapse. */
.signup-form input[type=email]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:48px;min-height:48px;padding:0 16px;
  font:inherit;font-size:16px;color:var(--navy);
  background:var(--white);
  border:1px solid var(--line);border-radius:10px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.signup-form input[type=email]::placeholder{color:var(--faint)}
.signup-form input[type=email]:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}

.btn{
  height:48px;padding:0 32px;border:0;border-radius:999px;
  background:var(--green);color:var(--white);
  font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:background-color .15s;
}
.btn:hover{background:var(--green-dark)}
.btn:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:not-allowed}

.form-note{margin-top:12px;font-size:12px;color:var(--faint)}
.form-note a{text-decoration:underline}
.form-note a:hover{color:var(--green-dark)}

.form-msg{margin-top:12px;font-size:14px;font-weight:600}
.form-msg.is-success{color:var(--green-dark)}
.form-msg.is-error{color:#B91C1C}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Stats ────────────────────────────────────────────────────────────── */

.stat{text-align:center}
.stat-value{
  font-size:30px;font-weight:800;color:var(--green);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.stat-label{margin-top:4px;font-size:14px;color:var(--muted)}

/* ── Founder ──────────────────────────────────────────────────────────── */

.founder{margin-top:32px}
.founder h2{font-size:20px;font-weight:800}
.founder-body{margin-top:20px;display:flex;flex-direction:column;gap:20px}
@media(min-width:640px){.founder-body{flex-direction:row}}
.founder-photo{width:96px;height:96px;border-radius:999px;object-fit:cover;flex:none}
.founder h3{font-size:18px;font-weight:700}
.founder-role{font-size:14px;color:var(--muted)}
.founder-quote{margin-top:12px;font-size:14px;color:var(--muted)}
.founder-links{
  margin-top:16px;display:flex;flex-wrap:wrap;
  gap:8px 20px;font-size:14px;font-weight:600;color:var(--green);
}
.founder-links a{text-decoration:underline;text-underline-offset:2px}
.founder-links a:hover{color:var(--green-dark)}

/* ── Legal page (zásady ochrany osobních údajů) ───────────────────────── */

.legal-header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.legal-logo{height:32px;width:auto}
.legal-back{font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap}
.legal-back:hover{color:var(--green-dark)}

.legal{margin-top:32px;font-size:15px;line-height:1.75}
.legal h1{font-size:28px;font-weight:800}
.legal h2{margin-top:36px;font-size:19px;font-weight:700}
.legal h3{margin-top:20px;font-size:15px;font-weight:600;color:var(--green-dark)}
.legal p,.legal ul,.legal .legal-box{margin-top:10px}
.legal ul{padding-left:22px}
.legal li+li{margin-top:4px}
.legal a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--green-dark)}
.legal hr{margin:36px 0 0;border:0;border-top:1px solid var(--line)}
.legal-date{font-size:13px;color:var(--faint)}
.legal-lead{font-size:17px;color:var(--muted)}
.legal-box{padding:16px 20px;border-radius:10px;background:var(--green-tint)}
.legal-sign{font-size:14px;color:var(--muted)}

@media(min-width:640px){.legal h1{font-size:34px}}

/* ── Blog (clanky.mojenovaprace.cz) ───────────────────────────────────── */
/* Article typography lives in /assets/article.css (shared with the internal preview). */

.blog-nav{font-size:14px;font-weight:600;color:var(--green);text-decoration:none;white-space:nowrap}
.blog-nav:hover{color:var(--green-dark);text-decoration:underline}

.blog{margin-top:32px}
.blog-intro h1{font-size:28px;font-weight:800}
.blog-lead{margin-top:8px;color:var(--muted)}
.blog-intro + *{margin-top:24px}
.blog-empty{color:var(--muted)}

.card.blog-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.blog-card-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.blog-card-body{padding:20px}
.blog-card-title{margin-top:4px;font-size:18px;font-weight:700}
.blog-card-title a{text-decoration:none}
.blog-card-title a:hover{color:var(--green-dark);text-decoration:underline}
.blog-card-perex{margin-top:8px;font-size:14px;color:var(--muted)}
.blog-hero .blog-card-body{padding:24px}
.blog-hero .blog-card-title{font-size:24px;font-weight:800}
.blog-hero .blog-card-perex{font-size:16px}

.blog-grid{margin-top:16px;display:grid;gap:16px}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.article-meta{font-size:13px;color:var(--faint)}
.tag-list{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.tag-chip{
  display:inline-block;padding:3px 12px;border-radius:999px;
  background:var(--green-soft);color:var(--green-dark);
  font-size:13px;font-weight:600;text-decoration:none;
}
.tag-chip:hover{background:var(--green);color:var(--white)}

.blog-article .article-title{font-size:28px;font-weight:800}
.blog-article .article-meta{margin-top:12px}
.article-cover{margin:24px 0 0}
.article-cover img{width:100%;border-radius:10px}
.article-perex{margin-top:24px;font-size:18px;font-weight:500;line-height:1.6}

.cta{margin-top:32px;text-align:center}
.cta h2{font-size:18px;font-weight:700}
.cta p{margin-top:4px;font-size:14px;color:var(--muted)}
.cta .btn{margin-top:20px;display:inline-flex;align-items:center;text-decoration:none}

.blog-related{margin-top:40px}
.blog-back{margin-top:32px;font-size:14px;font-weight:600}
.blog-back a{color:var(--green);text-decoration:none}
.blog-back a:hover{color:var(--green-dark);text-decoration:underline}

.blog-gone h1{font-size:24px;font-weight:800}
.blog-gone p{margin-top:8px;color:var(--muted)}

@media(min-width:640px){
  .blog-intro h1,.blog-article .article-title{font-size:34px}
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer{
  margin-top:40px;padding-top:24px;
  border-top:1px solid var(--line);
  text-align:center;font-size:14px;
}
.site-footer .footer-brand{font-weight:600}
.site-footer p+p{margin-top:4px;color:var(--muted)}
.site-footer a:hover{color:var(--green);text-decoration:underline}

@media(min-width:640px){
  .site{padding:64px 16px 64px}
  .hero h1{font-size:36px}
  .card{padding:32px}
  .grid .card{padding:20px}
}