/* ============================================================
   MISTPRO — styly homepage (zdroj pravdy: reference/design-kit.md v1.1
   + mockup reference/mistpro-index.html)
   ============================================================ */

/* ===== HERO (kompaktní; --surface + denní aurora — jediné místo aurory na světlé ploše) ===== */
.hero {
  background: var(--surface);
  background-image:
    radial-gradient(ellipse 50% 90% at 92% 0%, rgba(0, 113, 227, 0.08), transparent 60%),
    radial-gradient(ellipse 45% 80% at 5% 100%, rgba(41, 151, 255, 0.06), transparent 55%);
  border-bottom: 1px solid var(--hairline);
}
.hero-inner {
  padding: var(--sp-6) 0;
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
}
.hero h1 {
  font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.15;
}
.hero-sub {
  color: var(--text-muted);
  margin: var(--sp-3) 0 var(--sp-4);
  max-width: 480px;
}
.hero-promo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; font-weight: 600;
  margin-bottom: var(--sp-3);
}
.hero-promo .promo-word { color: var(--sale); } /* --sale jen pro slovo AKCE a % */
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero-deals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hero-deals .card-title { font-size: 13px; }
@media (min-width: 768px) {
  .hero-inner { grid-template-columns: 1.2fr 1fr; align-items: center; }
  .hero-deals { gap: var(--sp-4); }
}

/* ===== BENTO KATEGORIE ===== */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.bento-tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 120px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bento-tile:hover { text-decoration: none; }
@media (hover: hover) {
  .bento-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
}
.bento-emoji {
  font-size: 34px; line-height: 1;
  margin-bottom: auto;
}
.bento-tile h3 { font-size: var(--fs-h3); font-weight: 600; margin-top: var(--sp-3); }
.bento-tile p { font-size: var(--fs-meta); color: var(--text-muted); }
/* „od X Kč" v --text-muted dle kitu §4B (není to sleva ani CTA) */
.bento-tile .bento-price { font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bento-extra { font-size: 13px; color: var(--text-muted); margin-top: var(--sp-4); }
@media (min-width: 480px) { .bento { gap: var(--sp-3); } }
/* Mobil (2 sloupce): 9. dlaždice by zůstala sama v řádku → dostane plnou šířku. */
@media (max-width: 767px) { .bento-tile-mwide { grid-column: span 2; } }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
  .bento-tile-wide { grid-column: span 2; }
}

/* ===== TRUST SEKCE ===== */
.trust-section { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.trust-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.trust-ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--hairline);
  display: grid; place-items: center; color: var(--accent);
}
.trust-item h3 { font-size: 15px; font-weight: 600; }
.trust-item p { font-size: 13px; color: var(--text-muted); }

/* ===== NEWSLETTER (dle mockupu mistpro-index.html) ===== */
.newsletter-box {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  text-align: center;
}
.newsletter-box h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; }
.newsletter-box > p { color: var(--text-muted); margin: var(--sp-2) 0 var(--sp-4); }
.nl-form {
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: 440px; margin: 0 auto;
}
.nl-form input[type="email"] {
  height: 48px; padding: 0 var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--bg); font: inherit; font-size: 14px;
  color: var(--text); width: 100%;
}
.nl-form input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.nl-note { font-size: var(--fs-meta); color: var(--text-muted); margin-top: var(--sp-3); }
.nl-success { font-size: 14px; font-weight: 600; margin-top: var(--sp-3); }
@media (min-width: 480px) {
  .nl-form { flex-direction: row; }
  .nl-form input[type="email"] { flex: 1; }
}

/* ===== DESKTOP TYPO ===== */
@media (min-width: 1100px) {
  .hero h1 { font-size: 44px; }
}