/*
 * HerbaPORTA — public.css
 * Veřejná marketingová vrstva (úvodní landing, 404). Načítá se jen mimo aplikaci.
 * Vychází z prototypu 01-public-landing.html.
 */

.hbs-public-nav { background: var(--hbs-surface); border-bottom: 1px solid var(--hbs-border); padding: var(--hbs-space-3) var(--hbs-space-6); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: var(--hbs-z-sticky); }
.hbs-public-nav__brand { display: flex; align-items: center; gap: var(--hbs-space-2); font-weight: var(--hbs-font-semibold); color: var(--hbs-text); font-size: var(--hbs-text-lg); text-decoration: none; }
.hbs-public-nav__brand:hover { text-decoration: none; }
.hbs-public-nav__brand img { width: 26px; height: 26px; }
.hbs-public-nav__actions { display: flex; gap: var(--hbs-space-3); align-items: center; }

.hbs-btn--lg { height: 48px; padding: 0 var(--hbs-space-6); font-size: var(--hbs-text-base); }

/* Hero */
.hbs-hero { padding: var(--hbs-space-16) var(--hbs-space-4); background: linear-gradient(180deg, var(--hbs-accent-50) 0%, var(--hbs-bg) 100%); text-align: center; }
@media (min-width: 768px) { .hbs-hero { padding: var(--hbs-space-20) var(--hbs-space-6); } }
.hbs-hero__container { max-width: 800px; margin: 0 auto; }
.hbs-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--hbs-space-2); padding: var(--hbs-space-1) var(--hbs-space-3); background: var(--hbs-surface); border: 1px solid var(--hbs-accent-100); border-radius: var(--hbs-radius-full); margin-bottom: var(--hbs-space-5); color: var(--hbs-accent-700); font-size: var(--hbs-text-xs); font-weight: var(--hbs-font-medium); }
.hbs-hero__eyebrow i { width: 14px; height: 14px; }
.hbs-hero__title { font-size: clamp(28px, 5vw, 48px); font-weight: var(--hbs-font-semibold); line-height: var(--hbs-leading-tight); letter-spacing: var(--hbs-tracking-tight); margin: 0 0 var(--hbs-space-5); }
.hbs-hero__lead { font-size: var(--hbs-text-lg); color: var(--hbs-text-secondary); margin: 0 auto var(--hbs-space-8); max-width: 600px; }
.hbs-hero__cta { display: inline-flex; gap: var(--hbs-space-2); flex-wrap: wrap; justify-content: center; }

/* Features */
.hbs-features { padding: var(--hbs-space-16) var(--hbs-space-4); max-width: 1100px; margin: 0 auto; }
@media (min-width: 768px) { .hbs-features { padding: var(--hbs-space-16) var(--hbs-space-6); } }
.hbs-features__title { text-align: center; font-size: var(--hbs-text-2xl); font-weight: var(--hbs-font-semibold); letter-spacing: var(--hbs-tracking-tight); margin: 0 0 var(--hbs-space-12); }
.hbs-features__grid { display: grid; grid-template-columns: 1fr; gap: var(--hbs-space-5); }
@media (min-width: 768px) { .hbs-features__grid { grid-template-columns: repeat(3, 1fr); } }
.hbs-feature-card { background: var(--hbs-surface); border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius-md); padding: var(--hbs-space-6); }
.hbs-feature-card__icon { width: 40px; height: 40px; border-radius: var(--hbs-radius-md); background: var(--hbs-accent-50); color: var(--hbs-accent-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--hbs-space-4); }
.hbs-feature-card__icon i { width: 20px; height: 20px; }
.hbs-feature-card__title { font-size: var(--hbs-text-lg); font-weight: var(--hbs-font-semibold); margin: 0 0 var(--hbs-space-2); }
.hbs-feature-card__body { color: var(--hbs-text-secondary); margin: 0; font-size: var(--hbs-text-sm); }

/* Numbers strip */
.hbs-numbers { padding: var(--hbs-space-12) var(--hbs-space-4); background: var(--hbs-surface-alt); border-top: 1px solid var(--hbs-border); border-bottom: 1px solid var(--hbs-border); }
.hbs-numbers__grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hbs-space-5); text-align: center; }
@media (min-width: 768px) { .hbs-numbers__grid { grid-template-columns: repeat(4, 1fr); } }
.hbs-numbers__value { font-size: var(--hbs-text-3xl); font-weight: var(--hbs-font-semibold); color: var(--hbs-accent-700); margin: 0; }
.hbs-numbers__label { font-size: var(--hbs-text-sm); color: var(--hbs-text-secondary); margin: var(--hbs-space-1) 0 0; }

/* CTA */
.hbs-cta-section { padding: var(--hbs-space-16) var(--hbs-space-4); text-align: center; max-width: 720px; margin: 0 auto; }
.hbs-cta-section__title { font-size: var(--hbs-text-2xl); font-weight: var(--hbs-font-semibold); margin: 0 0 var(--hbs-space-3); }
.hbs-cta-section__body { color: var(--hbs-text-secondary); margin: 0 0 var(--hbs-space-6); }

/* Public footer */
.hbs-public-footer { padding: var(--hbs-space-8) var(--hbs-space-6); border-top: 1px solid var(--hbs-border); background: var(--hbs-surface); color: var(--hbs-text-muted); font-size: var(--hbs-text-sm); }
.hbs-public-footer__inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; gap: var(--hbs-space-4); flex-wrap: wrap; align-items: center; }
.hbs-public-footer__brand { display: flex; align-items: center; gap: var(--hbs-space-2); font-weight: var(--hbs-font-semibold); color: var(--hbs-text); }
.hbs-public-footer__brand img { width: 22px; height: 22px; }