/* Veřejný portál Magic Hub — doplňky k em2026.css (design webu eshopmagic.cz).
   Jen komponenty, které web nemá: dlaždice doplňků, detail doplňku, kroky,
   formulář /start/, hlášky. Tokeny a základní komponenty bere z em2026.css. */

.em-page { min-height: 100vh; }
/* dekorativní záře nesmí roztáhnout stránku do šířky (mobil) */
.em-shell { overflow-x: clip; }
.em-page svg.icon { flex-shrink: 0; }

/* rozložení */
.portal-hero { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.portal-hero .em-badge-row { margin-bottom: 28px; }
.portal-glow--purple { top: -60px; left: -40px; width: 480px; height: 400px; background: radial-gradient(closest-side, rgba(109, 40, 217, 0.2), rgba(109, 40, 217, 0)); }
.portal-glow--yellow { top: -40px; right: -40px; width: 420px; height: 360px; background: radial-gradient(closest-side, rgba(255, 216, 77, 0.34), rgba(255, 216, 77, 0)); }
.portal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.portal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.portal-head { margin-bottom: 40px; }
.portal-head .em-lead { margin: 16px 0 0; }

/* hero — karta se seznamem hlavních služeb */
.portal-mock-row { color: var(--em-ink); font-size: 16px; font-weight: 600; }
.portal-mock-row .portal-mock-sub { display: block; font-size: 14px; font-weight: 400; color: var(--em-text-3); margin-top: 2px; }
.portal-mock-list { display: grid; gap: 10px; }
.em-hero-media .em-float-num { font-size: 24px; }
.em-hero-media .em-float--dark { left: -24px; bottom: -32px; }

/* karty hlavních služeb */
.portal-feature { display: flex; flex-direction: column; color: inherit; }
.portal-feature .em-checklist { margin-bottom: 24px; }
.portal-feature .em-btn { margin-top: auto; align-self: flex-start; }
.portal-icon .icon { width: 20px; height: 20px; }

/* dlaždice všech doplňků */
.portal-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.portal-tile { display: flex; flex-direction: column; padding: 28px; color: inherit; }
.portal-tile:hover { color: inherit; }
.portal-tile .em-card-text { flex: 1; }
.portal-tile .em-tag-row { margin-top: 4px; }

/* fialový pruh „Jak to funguje" */
.portal-slab-grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.portal-slab-grid .em-h2 { margin-bottom: 20px; }
.portal-flow { background: var(--em-white); border-radius: var(--em-r-md); padding: 28px; display: grid; gap: 8px; box-shadow: 0 24px 50px rgba(22, 19, 30, 0.2); }
.portal-flow .em-flow-step { color: var(--em-ink); }
.portal-flow p { margin: 10px 0 0; font-size: 14px; color: var(--em-text-3); }

/* tmavá závěrečná výzva */
.portal-cta-grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.portal-cta-grid .em-h2 { margin-bottom: 20px; }
.portal-cta-links { display: grid; gap: 12px; }

/* detail doplňku */
.portal-detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.portal-detail-main { display: grid; gap: 20px; }
.portal-aside { position: sticky; top: 96px; display: grid; gap: 16px; }
.portal-aside .em-btn { justify-content: center; }
.portal-aside .em-icon-square, .portal-aside .em-card-title { margin-bottom: 0; }
.portal-aside .em-form-note { text-align: center; }
.portal-back { display: inline-flex; margin-bottom: 24px; font-weight: 600; }
.portal-prose { font-size: 17px; line-height: 1.65; color: var(--em-text-2); }
.portal-prose :is(h2, h3) { color: var(--em-ink); font-size: 21px; letter-spacing: -0.02em; margin: 28px 0 10px; }
.portal-prose :is(p, ul, ol) { margin: 0 0 14px; }
.portal-prose > :first-child { margin-top: 0; }
.portal-prose > :last-child { margin-bottom: 0; }
.portal-prose code { background: var(--em-bg); border-radius: 6px; padding: 1px 6px; font-size: 0.92em; }

/* formulář /start/ */
.portal-form-wrap { max-width: 640px; }
.portal-form .em-btn { justify-content: center; }
.portal-field-error { margin: 0; font-size: 14px; color: #B42318; font-weight: 500; }

/* hlášky */
.portal-messages { padding-top: 24px; display: grid; gap: 10px; }
.portal-message { border-radius: var(--em-r-chip); padding: 14px 20px; background: var(--em-white); box-shadow: var(--em-shadow-card); font-weight: 500; }
.portal-message--success { background: var(--em-green-tint); color: var(--em-green-tint-text); box-shadow: none; }
.portal-message--error { background: #FDECEC; color: #B42318; box-shadow: none; }
.portal-message--info, .portal-message--warning { background: var(--em-yellow-tint); color: var(--em-yellow-tint-text); box-shadow: none; }

.em-shell > .em-section:last-of-type { padding-bottom: 24px; }

@media (max-width: 1080px) {
  .portal-hero, .portal-slab-grid, .portal-cta-grid, .portal-detail { grid-template-columns: 1fr; gap: 32px; }
  .portal-grid-3 { grid-template-columns: 1fr 1fr; }
  .portal-aside { position: static; }
}
@media (max-width: 700px) {
  .em-section-head { grid-template-columns: 1fr; gap: 16px; }
  .portal-grid-3, .portal-grid-2 { grid-template-columns: 1fr; }
  .portal-tile { padding: 24px; }
}