/* ===== BASE ===== */
html { font-size: 16px; -webkit-text-size-adjust: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 1rem;
overflow-x: hidden;
min-width: 280px;
}
body, main, .max-w-3xl, .max-w-4xl { max-width: 100%; }
.font-serif, h1, h2 { font-family: 'Playfair Display', Georgia, serif; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }
/* ===== ARTICLE PROSE ===== */
.prose-article { word-wrap: break-word; overflow-wrap: break-word; }
.prose-article p { color: #4b5563; line-height: 1.85; margin-bottom: 1.25em; font-size: 1rem; }
.prose-article ul { list-style: none; padding: 0; margin: 1em 0; }
.prose-article ul li { position: relative; padding-left: 1.5em; margin-bottom: 0.6em; color: #4b5563; font-size: 0.95rem; }
.prose-article ul li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: #0d9488; }
/* ===== TYPE CARDS ===== */
.type-card { border: 1px solid #e5e7eb; padding: 24px; background: #fff; }
.type-badge {
display: inline-block; padding: 4px 14px;
font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
background: #f0fdfa; color: #0d9488; border: 1px solid #99f6e4; margin-bottom: 12px;
}
.type-badge-blue { background: #eff6ff; color: #2563eb; border-color: #93c5fd; }
.type-badge-rose { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
/* ===== ORIGIN CARDS ===== */
.origin-card { border: 1px solid #e5e7eb; padding: 24px; background: #fff; }
/* ===== PRODUCT MINI CARDS ===== */
.product-card-mini {
display: flex; align-items: center; gap: 12px;
padding: 12px; border: 1px solid #e5e7eb; background: #fafafa;
transition: border-color 0.2s, background 0.2s;
}
.product-card-mini:hover { border-color: #0d9488; background: #f0fdfa; }
.product-img-mini { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
/* ===== FORM CARDS ===== */
.form-card { border: 1px solid #e5e7eb; padding: 20px; background: #fff; }
.form-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* ===== CALLOUT ===== */
.callout {
border-left: 3px solid #0d9488; padding: 20px 24px;
background: #f0fdfa;
}
/* ===== QUIZ ===== */
.quiz-wrapper {
border: 1px solid #e5e7eb;
padding: 32px;
background: #fff;
}
.quiz-progress { height: 4px; background: #e5e7eb; margin-bottom: 8px; overflow: hidden; }
.quiz-progress-bar { height: 100%; background: #0d9488; transition: width 0.4s ease; }
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.quiz-options { display: grid; gap: 10px; }
.quiz-option { cursor: pointer; display: block; }
.quiz-option input { display: none; }
.quiz-option-content {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; border: 1px solid #e5e7eb; background: #fafafa;
transition: all 0.2s;
font-size: 0.95rem; color: #374151;
}
.quiz-option-content:hover { border-color: #99f6e4; background: #f0fdfa; }
.quiz-option input:checked + .quiz-option-content {
border-color: #0d9488; background: #f0fdfa;
box-shadow: inset 0 0 0 1px #0d9488;
}
.quiz-option-icon { font-size: 1.25rem; width: 28px; text-align: center; }
.quiz-nav-btn {
padding: 10px 24px; font-size: 14px; font-weight: 600;
border: 1px solid #d1d5db; background: #fff; color: #374151;
cursor: pointer; transition: all 0.2s;
}
.quiz-nav-btn:hover { background: #f3f4f6; }
.quiz-nav-btn-primary { background: #0d9488; color: #fff; border-color: #0d9488; }
.quiz-nav-btn-primary:hover { background: #0f766e; }
/* Quiz result */
.quiz-result-block { animation: fadeIn 0.4s ease; }
.result-product-card {
display: flex; gap: 20px; padding: 24px;
border: 1px solid #e5e7eb; background: #fafafa;
align-items: flex-start; transition: border-color 0.2s;
}
.result-product-card:hover { border-color: #0d9488; }
.result-product-img { width: 120px; height: 120px; object-fit: contain; flex-shrink: 0; }
/* ===== MOBILE ===== */
@media (max-width: 640px) {
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
main { padding-left: 1rem; padding-right: 1rem; padding-top: 1.5rem; padding-bottom: 2rem; }
header .max-w-4xl { padding-left: 1rem; padding-right: 1rem; }
header a.font-serif { font-size: 1.125rem; }
footer { padding-left: 1rem; padding-right: 1rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
/* Obsah / TOC */
nav.mb-14 { padding: 1rem !important; margin-bottom: 2rem !important; }
nav.mb-14 ol { padding-left: 0.25rem; }
/* Cards */
.type-card, .origin-card, .form-card { padding: 1rem; }
.type-card h3, .origin-card h3 { font-size: 1.125rem; }
.product-card-mini { padding: 0.75rem; min-height: 72px; }
.product-card-mini .font-semibold { word-break: break-word; }
.product-img-mini { width: 56px; height: 56px; }
/* Callout */
.callout { padding: 1rem 1rem 1rem 1.25rem; margin-left: 0; margin-right: 0; }
/* Quiz */
.quiz-wrapper { padding: 1.25rem; }
.quiz-option-content {
padding: 1rem 1.25rem;
min-height: 48px;
align-items: center;
}
.quiz-nav-btn {
padding: 12px 20px;
min-height: 48px;
min-width: 120px;
}
.quiz-result-block .result-product-card { flex-direction: column; align-items: center; text-align: center; padding: 1.25rem; }
.result-product-img { width: 100px; height: 100px; }
/* Section spacing */
section { margin-bottom: 2.5rem !important; }
.mb-16 { margin-bottom: 2.5rem !important; }
h2.font-serif { font-size: 1.5rem; line-height: 1.3; margin-bottom: 1rem; }
.prose-article p { margin-bottom: 1em; }
/* Footer */
footer nav { gap: 0.75rem; }
footer .text-xs { line-height: 1.5; word-break: break-word; }
}
/* Very small screens */
@media (max-width: 380px) {
.product-card-mini { flex-direction: column; align-items: flex-start; text-align: left; }
}