/* Kaleta - shared site styles for all layouts: photo gallery, photo viewer, video, sharing, outline, FAQ, editing on the site.
 * Colors come from the site identity (--ka-akcent). Everything is in the „spolecne“ layer – the layout (layer „sablona“) always overrides it, regardless of specificity. */

@layer tokeny, spolecne, sablona, stavitel, tridy, prvky;

@layer spolecne {

/* ---------- text for screen readers only  ---------- */
.ka-jen-ctecka { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- photo gallery in the text ---------- */
figure.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 1.8em 0; }
figure.galerie img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; border-radius: 2px; }
figure.galerie img:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 600px) { figure.galerie img:first-child { grid-column: auto; grid-row: auto; } } /* on a phone a large first photo would leave holes in the grid */
figure.galerie figcaption { grid-column: 1 / -1; }
.text figure:not(.galerie) img { cursor: zoom-in; }

/* ---------- photo viewer ---------- */
.ka-prohlizecka { position: fixed; inset: 0; z-index: 9000; grid-template-rows: minmax(0, 1fr) auto; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 10 12 / 0.96); color: #fff; }
.ka-prohlizecka[open] { display: grid; }
.ka-prohlizecka::backdrop { background: #000; }
.ka-prohlizecka img { align-self: center; justify-self: center; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.ka-prohlizecka p { margin: 0; padding: 10px 70px 16px; min-height: 22px; text-align: center; font: 14px/1.4 system-ui, sans-serif; color: #d6d6da; }
.ka-prohlizecka button { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; font: 24px/1 system-ui, sans-serif; cursor: pointer; }
.ka-prohlizecka button:hover, .ka-prohlizecka button:focus-visible { background: var(--ka-akcent, #1f4fe0); outline: none; }
.ka-prohlizecka [data-zavrit] { top: 14px; inset-inline-end: 14px; }
.ka-prohlizecka [data-krok="-1"] { inset-inline-start: 14px; top: 50%; translate: 0 -50%; }
.ka-prohlizecka [data-krok="1"] { inset-inline-end: 14px; top: 50%; translate: 0 -50%; }
.ka-prohlizecka [hidden] { display: none; }

/* ---------- buttons ---------- */
.ka-formular button, .ka-tl { display: inline-block; justify-self: start; padding: 10px 18px; border: 1px solid var(--ka-akcent, #1f4fe0); border-radius: 4px; background: var(--ka-akcent, #1f4fe0); color: #fff; font: 600 15px/1.2 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.ka-formular button.ka-tl-vedlejsi, .ka-tl.ka-tl-vedlejsi { background: transparent; color: inherit; border-color: rgb(128 128 128 / 0.6); }
.text a.ka-tl, a.ka-tl { color: #fff; text-decoration: none; }
.text a.ka-tl-vedlejsi, a.ka-tl-vedlejsi { color: inherit; }


/* ---------- editing a page or news item right on the site (only for signed-in users) ---------- */
.ka-upravit-zde { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 60; padding: 10px 16px; border-radius: 999px; background: #14171F; color: #fff; font: 600 14px/1.2 system-ui, sans-serif; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.ka-upravit-zde:hover { background: var(--ka-akcent, #1f4fe0); color: #fff; }
.ka-upravit-text { max-width: 860px; margin: 0 auto; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.ka-upravit-text label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; opacity: 0.7; }
.ka-upravit-text p { margin: 0 0 18px; }
.ka-upravit-titulek { width: 100%; padding: 10px 12px; border: 1px solid rgba(128, 128, 128, 0.45); border-radius: 8px; background: transparent; color: inherit; font: 700 26px/1.2 inherit; }
.ka-upravit-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; }
.ka-upravit-lista .ka-tl-vedlejsi { border: 1px solid currentColor; background: transparent; color: inherit; opacity: 0.85; }
.ka-upravit-lista .ka-tl-vedlejsi:hover { opacity: 1; }
.ka-upravit-vse { margin-inline-start: auto; color: inherit; font-size: 13px; opacity: 0.8; }
.ka-upravit-hlaska { padding: 10px 14px; border-radius: 8px; background: #FEF3F2; color: #B42318; font-size: 15px; }
.ka-ui, .ka-ui * { box-sizing: border-box; }

/* ---------- audio and video player ---------- */
.ka-medium { margin: 0 0 1.6em; aspect-ratio: 16 / 9; background: #111; border-radius: 4px; overflow: hidden; }
.ka-medium video, .ka-medium iframe { display: block; width: 100%; height: 100%; border: 0; }
.ka-medium-zvuk { aspect-ratio: auto; background: none; }
.ka-medium-zvuk audio { display: block; width: 100%; }
.ka-medium-spustit { display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; height: 100%; min-height: 120px; border: 0; background: #111; color: #fff; font: 600 17px/1.3 system-ui, sans-serif; cursor: pointer; }
/* the play triangle points right in every language (a media convention), so its optical nudge stays physical */
.ka-medium-spustit span { display: grid; place-items: center; width: 64px; height: 64px; padding-left: 5px; border-radius: 50%; background: var(--ka-akcent, #1f4fe0); font-size: 26px; }
.ka-medium-spustit small { font-weight: 400; font-size: 12px; opacity: 0.65; }

/* ---------- text outline ---------- */
.ka-osnova { margin: 0 0 1.8em; padding: 16px 20px; border-inline-start: 4px solid var(--ka-akcent, #1f4fe0); background: rgb(128 128 128 / 0.08); font: 15px/1.5 system-ui, sans-serif; }
.ka-osnova strong { display: block; margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.ka-osnova ol { margin: 0; padding-inline-start: 20px; }
.ka-osnova li { margin: 3px 0; }
.text h2[id] { scroll-margin-top: 80px; }

/* ---------- sharing a news item ---------- */
.ka-sdileni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2em 0 1em; font: 600 13px/1 system-ui, sans-serif; }
.ka-sdileni span { margin-inline-end: 4px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.65; }
.ka-sdileni a, .ka-sdileni button, .text .ka-sdileni a { padding: 8px 12px; border: 1px solid rgb(128 128 128 / 0.45); border-radius: 99px; background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.ka-sdileni a:hover, .ka-sdileni button:hover, .text .ka-sdileni a:hover { border-color: var(--ka-akcent, #1f4fe0); color: var(--ka-akcent, #1f4fe0); }
.ka-sdileni [hidden] { display: none; }

/* ---------- author bio ---------- */
.ka-autor { display: flex; gap: 16px; align-items: flex-start; margin: 2em 0; padding: 18px 0; border-top: 1px solid rgb(128 128 128 / 0.35); border-bottom: 1px solid rgb(128 128 128 / 0.35); font: 15px/1.5 system-ui, sans-serif; }
.ka-autor img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.ka-autor-jmeno, .text a.ka-autor-jmeno { display: block; font-weight: 700; font-size: 17px; color: inherit; text-decoration: none; }
.ka-autor span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.ka-autor p { margin: 6px 0 0; }

/* ---------- tables in the text (text pages and the Text element in the builder) ---------- */
.text table, .ka-text table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font: 15px/1.45 system-ui, sans-serif; display: block; overflow-x: auto; }
.text th, .text td, .ka-text th, .ka-text td { padding: 8px 12px; border-bottom: 1px solid rgb(128 128 128 / 0.35); text-align: start; vertical-align: top; }
.text thead th, .ka-text thead th { border-bottom: 2px solid currentColor; font-weight: 700; }
.text tbody th, .ka-text tbody th { font-weight: 600; min-width: 8em; }

/* ---------- code samples and embedded content in the text (:where = zero specificity, the layout can override them) ---------- */
:where(.text, .ka-text) pre { overflow-x: auto; padding: 14px 16px; background: rgb(128 128 128 / 0.12); font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
:where(.text, .ka-text) :not(pre) > code { padding: 1px 5px; background: rgb(128 128 128 / 0.14); font-size: 0.9em; overflow-wrap: anywhere; }
:where(.text, .ka-text, .perex) :is(iframe, video, embed, object) { max-width: 100%; }
:where(.text, .perex) { overflow-wrap: break-word; }

/* visible focus for keyboard navigation - shared by all layouts, a layout may override it */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ka-akcent, #1f4fe0); outline-offset: 2px; }
/* images in the text */
:where(.text figure img) { width: 100%; }
:where(.text figcaption) { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--text-slaby, inherit); }
:where(.text hr) { clear: both; border: 0; border-top: 1px solid var(--linka, rgb(128 128 128 / 0.35)); margin: 2em 0; }
:where(.faq) { margin-top: 36px; }
:where(.faq h2) { font-size: 22px; }
:where(.faq details) { border-top: 1px solid rgb(127 127 127 / 0.35); padding: 12px 0; }
:where(.faq summary) { font-weight: 700; cursor: pointer; }
:where(.faq details p) { margin: 8px 0 0; }
:where(.clanek-foto) { margin-inline: 0; }
:where(.clanek-popisek) { margin-top: 8px; font: 13px/1.45 system-ui, sans-serif; opacity: 0.75; }
:where(.clanek-foto-autor) { white-space: nowrap; opacity: 0.85; }

/* ---------- print ---------- */
@media print {
	.hlavicka, .paticka, nav, form, .ka-sdileni, .ka-osnova, .ka-medium-spustit, .cookies-lista, .cookies-znovu, .ka-upravit-zde { display: none !important; }
	body { background: #fff !important; color: #000 !important; font-size: 11.5pt; }
	.text a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 85%; word-break: break-all; }
	img, figure, .ka-autor { break-inside: avoid; }
}

/* ---------- dark mode: shared elements (by device, or chosen by the site or the visitor) ---------- */
@media (prefers-color-scheme: dark) {
	:root[data-tmavy]:not([data-tema="svetly"]) .cookies-lista { background: #1D1D1D; color: #ECECEC; border-color: #3A3A3A; }
	:root[data-tmavy]:not([data-tema="svetly"]) .cookies-lista a, :root[data-tmavy]:not([data-tema="svetly"]) .cookies-tlacitka .cookies-odkaz { color: #ECECEC; }
	:root[data-tmavy]:not([data-tema="svetly"]) img:not(:is(.logo, .ka-logo) img) { filter: brightness(0.92); } /* dim photos, not the logo */
	:root[data-tmavy]:not([data-tema="svetly"]) :is(.ka-sdileni a:hover, .ka-sdileni button:hover) { color: color-mix(in srgb, var(--ka-akcent, #1f4fe0) 55%, #FFFFFF); }
	:root[data-tmavy]:not([data-tema="svetly"]) .ka-upravit-zde { border: 1px solid rgb(255 255 255 / 0.25); }
}
:root[data-tmavy][data-tema="tmavy"] .cookies-lista { background: #1D1D1D; color: #ECECEC; border-color: #3A3A3A; }
:root[data-tmavy][data-tema="tmavy"] .cookies-lista a, :root[data-tmavy][data-tema="tmavy"] .cookies-tlacitka .cookies-odkaz { color: #ECECEC; }
:root[data-tmavy][data-tema="tmavy"] img:not(:is(.logo, .ka-logo) img) { filter: brightness(0.92); } /* dim photos, not the logo */
:root[data-tmavy][data-tema="tmavy"] :is(.ka-sdileni a:hover, .ka-sdileni button:hover) { color: color-mix(in srgb, var(--ka-akcent, #1f4fe0) 55%, #FFFFFF); }
:root[data-tmavy][data-tema="tmavy"] .ka-upravit-zde { border: 1px solid rgb(255 255 255 / 0.25); }
}

/* The language switcher is a system element: layer stavitel, so the layout's menu rules (nav ul, nav a) do not override it;
   the site's shared classes (layer tridy) can adjust it further. */
@layer stavitel {
	/* ---------- language switcher (design system tokens: colors, radii, site font) ---------- */
	.ka-jazyky { display: inline-flex; gap: 2px; margin-inline-start: var(--ka-mezera-s, 12px); padding: 3px; border: 1px solid var(--ka-barva-linka); border-radius: var(--ka-zaobleni-plne, 999px); font-size: 0.8125rem; font-weight: 600; line-height: 1; letter-spacing: 0.04em; vertical-align: middle; }
	.ka-jazyky a { display: block; min-width: 2.25em; padding: 0.45em 0.6em; border-radius: var(--ka-zaobleni-plne, 999px); color: inherit; text-align: center; text-decoration: none; }
	.ka-jazyky a:hover { background: var(--ka-barva-plocha); }
	.ka-jazyky a[aria-current] { background: var(--ka-barva-primarni); color: var(--ka-barva-na-primarni); }
	.ka-jazyky a:focus-visible, .ka-jazyky-vyber a:focus-visible, .ka-jazyky-tl:focus-visible { outline: 3px solid var(--ka-barva-sekundarni); outline-offset: 2px; }
	.ka-jazyky-vyber { display: inline-block; position: relative; margin-inline-start: var(--ka-mezera-s, 12px); vertical-align: middle; }
	.ka-jazyky-tl { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.5em 0.8em; border: 1px solid var(--ka-barva-linka); border-radius: var(--ka-zaobleni-plne, 999px); background: none; color: inherit; font: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1; cursor: pointer; }
	.ka-jazyky-tl:hover { background: var(--ka-barva-plocha); }
	.ka-jazyky-tl svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
	.ka-jazyky-vyber [popover]:popover-open { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
	.ka-jazyky-vyber [popover] { position: fixed; inset: auto; top: anchor(bottom); right: anchor(right); margin: 6px 0 0; min-width: 13rem; max-height: min(70vh, 28rem); overflow-y: auto; padding: var(--ka-mezera-2xs, 4px); border: 1px solid var(--ka-barva-linka); border-radius: var(--ka-zaobleni, 8px); background: var(--ka-barva-pozadi); color: var(--ka-barva-text); box-shadow: var(--ka-stin-m); list-style: none; }
	.ka-jazyky-vyber [popover] a { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 0.55em 0.75em; border-radius: calc(var(--ka-zaobleni, 8px) / 1.5); color: inherit; text-decoration: none; }
	.ka-jazyky-vyber [popover] a:hover { background: var(--ka-barva-plocha); }
	.ka-jazyky-vyber [popover] a[aria-current] { background: var(--ka-barva-primarni-jemna); color: var(--ka-barva-primarni); font-weight: 600; }
	.ka-jazyky-vyber [popover] small { color: var(--ka-barva-tlumeny); font-size: 0.75em; letter-spacing: 0.06em; }
	@supports not (top: anchor(bottom)) { .ka-jazyky-vyber [popover] { top: 4.5rem; right: max(1rem, (100vw - var(--ka-sirka, 72rem)) / 2); } }
	/* the Language switcher element in the footer: the menu above the button, aligned to its left edge */
	.ka-jazyky-vyber--nahoru [popover] { top: auto; bottom: anchor(top); right: auto; left: anchor(left); margin: 0 0 6px; }
	@supports not (top: anchor(bottom)) { .ka-jazyky-vyber--nahoru [popover] { top: auto; bottom: 4.5rem; left: 1rem; right: auto; } }
	/* a right-to-left page: the menu hangs from the other edge of its button (anchor() has no logical side for a fixed popover) */
	:root[dir="rtl"] .ka-jazyky-vyber [popover] { right: auto; left: anchor(left); }
	:root[dir="rtl"] .ka-jazyky-vyber--nahoru [popover] { left: auto; right: anchor(right); }
	@supports not (top: anchor(bottom)) {
		:root[dir="rtl"] .ka-jazyky-vyber [popover] { right: auto; left: max(1rem, (100vw - var(--ka-sirka, 72rem)) / 2); }
		:root[dir="rtl"] .ka-jazyky-vyber--nahoru [popover] { left: auto; right: 1rem; }
	}
	.ka-jazyky-prvek { margin-inline-start: 0; } /* a standalone element: needs no spacing from the menu */
	.ka-jazyky-sipka { stroke-width: 2; opacity: 0.7; }
	.ka-jazyky-vyber--nahoru .ka-jazyky-sipka { rotate: 180deg; }
	/* color scheme switcher (light / dark / by device) – the same menu as languages, the items are buttons */
	.ka-tema-tl { padding: 0.5em 0.6em; }
	.ka-tema-ikona { display: none; }
	.ka-tema:is([data-volba="auto"], :not([data-volba])) .ka-tema-ikona--auto, .ka-tema[data-volba="svetly"] .ka-tema-ikona--svetly, .ka-tema[data-volba="tmavy"] .ka-tema-ikona--tmavy { display: block; }
	.ka-jazyky-vyber svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; flex: none; }
	.ka-jazyky-vyber [popover] button { display: flex; align-items: center; gap: 0.6em; width: 100%; padding: 0.55em 0.75em; border: 0; border-radius: calc(var(--ka-zaobleni, 8px) / 1.5); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
	.ka-jazyky-vyber [popover] button:hover { background: var(--ka-barva-plocha); }
	.ka-jazyky-vyber [popover] button[aria-pressed="true"] { background: var(--ka-barva-primarni-jemna); color: var(--ka-barva-primarni); font-weight: 600; }
	.ka-jazyky-vyber [popover] button:focus-visible { outline: 3px solid var(--ka-barva-sekundarni); outline-offset: 2px; }
	.ka-jazyky + .ka-tema, .ka-jazyky-vyber + .ka-tema { margin-inline-start: var(--ka-mezera-2xs, 6px); }
	@media (max-width: 767px) {
		/* in the expanded menu on a phone, languages directly as a row of options, without another pop-up menu */
		:is(.ka-nav-menu, .navigace) .ka-jazyky, :is(.ka-nav-menu, .navigace) .ka-jazyky-vyber { align-self: flex-start; margin: var(--ka-mezera-s, 12px) 0 0; }
		:is(.ka-nav-menu, .navigace) .ka-jazyky-tl { display: none; }
		:is(.ka-nav-menu, .navigace) .ka-jazyky-vyber [popover] { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--ka-mezera-2xs, 4px); position: static; inset: auto; min-width: 0; max-height: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; overflow: visible; }
		:is(.ka-nav-menu, .navigace) .ka-jazyky-vyber [popover] :is(a, button) { width: auto; gap: 0.4em; padding: 0.45em 0.7em; border: 1px solid var(--ka-barva-linka); border-radius: var(--ka-zaobleni-plne, 999px); }
		:is(.ka-nav-menu, .navigace) .ka-tema { margin-inline-start: 0; }
	}
}

/* ---------- popups (Builder\Popups, triggers in image/web.js): colors and shapes from the site's design system ---------- */
@layer stavitel {
	.ka-popup { box-sizing: border-box; max-height: calc(100dvh - 2rem); overflow: auto; margin: auto; padding: var(--ka-mezera-xl, 2.5rem) var(--ka-mezera-l, 2rem) var(--ka-mezera-l, 2rem); border: 0; border-radius: var(--ka-zaobleni, 12px); background: var(--ka-barva-pozadi, #fff); color: var(--ka-barva-text, #111); box-shadow: var(--ka-stin-l, 0 24px 60px rgb(0 0 0 / 0.25)); }
	.ka-popup:popover-open, .ka-popup--editor { display: block; }
	.ka-popup::backdrop { background: rgb(0 0 0 / 0.45); }
	.ka-popup-obsah.stavba { min-height: 0; } /* .stavba has a minimum content height on a page – not in a popup */
	.ka-popup-obsah > * + * { margin-block-start: var(--ka-mezera-m, 1rem); }
	.ka-popup--okno { inset: 0; width: min(36rem, calc(100vw - 2rem)); }
	.ka-popup--cela { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; display: none; }
	.ka-popup--cela:popover-open { display: grid; place-items: center; }
	.ka-popup--cela > .ka-popup-obsah { width: min(48rem, 100%); }
	.ka-popup--panel { inset-block: auto 1rem; inset-inline: auto 1rem; width: min(24rem, calc(100vw - 2rem)); margin: 0; padding: var(--ka-mezera-l, 2rem) var(--ka-mezera-m, 1.25rem) var(--ka-mezera-m, 1.25rem); }
	.ka-popup--panel::backdrop, .ka-popup--lista-nahore::backdrop, .ka-popup--lista-dole::backdrop { background: none; }
	.ka-popup--lista-nahore, .ka-popup--lista-dole { inset: 0 0 auto; width: 100vw; max-width: none; margin: 0; padding: 0.75rem 3.5rem; border-radius: 0; box-shadow: var(--ka-stin-m, 0 8px 24px rgb(0 0 0 / 0.15)); background: var(--ka-barva-primarni, #111); color: var(--ka-barva-na-primarni, #fff); text-align: center; }
	.ka-popup--lista-dole { inset: auto 0 0; }
	.ka-popup--lista-nahore .ka-popup-obsah, .ka-popup--lista-dole .ka-popup-obsah { --ka-barva-text: var(--ka-barva-na-primarni, #fff); --ka-barva-primarni: var(--ka-barva-na-primarni, #fff); }
	.ka-popup-zavrit { position: absolute; top: 0.5rem; inset-inline-end: 0.5rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font: 1.5rem/1 system-ui, sans-serif; cursor: pointer; }
	.ka-popup-zavrit:hover { background: color-mix(in oklch, currentColor 10%, transparent); }
	.ka-popup-zavrit:focus-visible { outline: 3px solid var(--ka-barva-sekundarni, currentColor); outline-offset: 2px; }
	/* the heading the script moves focus to after opening, for screen readers (tabindex="-1"), has no outline – it cannot be operated */
	.ka-popup [tabindex="-1"]:focus { outline: none; }
	.ka-popup--lista-nahore .ka-popup-zavrit, .ka-popup--lista-dole .ka-popup-zavrit { top: 50%; translate: 0 -50%; }
	@media (prefers-reduced-motion: no-preference) {
		.ka-popup:popover-open { animation: ka-popup-objevit 0.2s ease-out; }
		.ka-popup--panel:popover-open { animation-name: ka-popup-vyjet; }
		.ka-popup--lista-nahore:popover-open { animation-name: ka-popup-shora; }
		.ka-popup--lista-dole:popover-open { animation-name: ka-popup-zdola; }
	}
	@keyframes ka-popup-objevit { from { opacity: 0; scale: 0.96; } }
	@keyframes ka-popup-vyjet { from { opacity: 0; translate: 0 1.5rem; } }
	@keyframes ka-popup-shora { from { translate: 0 -100%; } }
	@keyframes ka-popup-zdola { from { translate: 0 100%; } }
	/* builder canvas: the popup sits in the page so it can be edited */
	.ka-popup-platno { display: grid; place-items: center; min-height: 60vh; padding: var(--ka-mezera-xl, 2.5rem) var(--ka-mezera-m, 1rem); background: color-mix(in oklch, var(--ka-barva-text, #111) 6%, transparent); }
	.ka-popup--editor { position: relative; inset: auto; margin: 0 auto; outline: 2px dashed var(--ka-barva-linka, #ccc); outline-offset: 4px; }
	.ka-popup--editor.ka-popup--cela { width: 100%; height: auto; min-height: 60vh; }
}

/* ---------- AnMai custom styles ---------- */
#products { scroll-margin-top: 6rem; }

/* ===== AnMai 阿里云版式重构 (2026-11-11) —— 版式对标 aliyun.com，主色安脉蓝 ===== */
.am-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* 顶部活动条（阿里云首页式） */
.am-topbar { background: #1e88c7; color: #fff; font-size: 13px; }
.am-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.am-topbar-tag { background: rgba(255,255,255,.18); border-radius: 3px; padding: 1px 7px; font-weight: 700; font-size: 11px; letter-spacing: .05em; }
.am-topbar a { color: #fff; text-decoration: none; font-weight: 500; margin-left: auto; }
.am-topbar a:hover { text-decoration: underline; }

/* Hero：居中、大标题、双按钮、下方 4 张活动小卡（阿里云首屏式） */
.am-hero { text-align: center; padding: 64px 24px 48px; background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%); }
.am-hero-badge { display: inline-block; color: #1e88c7; background: rgba(30,136,199,.08); border: 1px solid rgba(30,136,199,.25); font-weight: 600; font-size: 13px; padding: 4px 14px; border-radius: 999px; margin-bottom: 20px; }
.am-hero h1 { font-size: 44px; font-weight: 700; color: #0f172a; line-height: 1.25; margin: 0 0 18px; letter-spacing: -0.02em; }
.am-sub { font-size: 17px; color: #64748b; max-width: 640px; margin: 0 auto 30px; line-height: 1.7; }
.am-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.am-btn { display: inline-block; padding: 11px 28px; border-radius: 4px; font-size: 15px; font-weight: 500; text-decoration: none; transition: all .2s; }
.am-btn-p { background: #1e88c7; color: #fff !important; }
.am-btn-p:hover { background: #1670a8; box-shadow: 0 4px 12px rgba(30,136,199,.3); }
.am-btn-s { color: #1e88c7 !important; background: #fff; border: 1px solid #bcd9ee; }
.am-btn-s:hover { border-color: #1e88c7; background: #f0f7ff; }
.am-promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; margin: 44px auto 0; text-align: left; }
.am-promo { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 18px 20px; text-decoration: none; transition: all .2s; }
.am-promo:hover { border-color: #1e88c7; box-shadow: 0 6px 18px rgba(30,136,199,.12); transform: translateY(-2px); }
.am-promo b { display: block; color: #0f172a; font-size: 15px; margin-bottom: 6px; }
.am-promo span:not(.am-ico) { display: block; color: #64748b; font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.am-promo em { color: #1e88c7; font-size: 13px; font-style: normal; font-weight: 500; }

/* 分区：左标题 + 右侧「更多→」（阿里云内容分区头式） */
.am-section { padding: 56px 0; }
.am-section-bg { background: #f7fafd; }
.am-head { margin-bottom: 28px; }
.am-head h2, .am-head-row h2 { font-size: 28px; font-weight: 700; color: #0f172a; margin: 0 0 8px; }
.am-head p { font-size: 15px; color: #64748b; margin: 0; }
.am-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.am-head-row h2 { margin: 0; }
.am-more { color: #1e88c7 !important; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.am-more:hover { text-decoration: underline; }

/* 卡片矩阵（白底细边、hover 主色阴影） */
.am-grid-2, .am-grid-3, .am-grid-4 { display: grid; gap: 20px; }
.am-grid-2 { grid-template-columns: repeat(2, 1fr); }
.am-grid-3 { grid-template-columns: repeat(3, 1fr); }
.am-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.am-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 22px; transition: all .2s; }
.am-card:hover { border-color: #1e88c7; box-shadow: 0 6px 20px rgba(30,136,199,.12); transform: translateY(-2px); }
.am-card h3 { font-size: 16px; font-weight: 600; color: #0f172a; margin: 0 0 10px; }
.am-card p { font-size: 14px; color: #64748b; line-height: 1.65; margin: 0 0 12px; }
.am-card a { color: #1e88c7 !important; text-decoration: none; font-weight: 500; font-size: 14px; }
.am-card a:hover { text-decoration: underline; }
.am-card-bg { background: #f8fbfe; }
.am-metric { font-size: 13px; font-weight: 600; color: #1e88c7; }
.am-grid-4 .am-card { padding: 18px; }
.am-grid-4 .am-card h3 { font-size: 15px; }
.am-grid-4 .am-card p { font-size: 13px; margin-bottom: 0; }
.am-card-role h3 { font-size: 18px; }
.am-pain b, .am-abil b { color: #0f172a; }

/* 数据带：深色底反白（阿里云「全球基础设施」带式） */
.am-stats { background: #0b1d33; padding: 44px 0; }
.am-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.am-stat b { display: block; font-size: 36px; font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 8px; }
.am-stat span { font-size: 14px; color: #9fb3c8; }

/* CTA 带 */
.am-cta { text-align: center; padding: 52px 24px; background: linear-gradient(135deg, #f0f7ff 0%, #e8f3fc 100%); }
.am-cta h2 { font-size: 26px; font-weight: 700; color: #0f172a; margin: 0 0 10px; }
.am-cta p { font-size: 15px; color: #64748b; margin: 0 0 24px; }
.am-cta-inline { margin-top: 36px; padding: 36px 24px; border-radius: 8px; }

/* 子页页头（浅色渐变小 Hero） */
.am-page-hero { text-align: center; padding: 56px 24px 40px; background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%); }
.am-page-hero h1 { font-size: 36px; font-weight: 700; color: #0f172a; margin: 0 0 12px; }
.am-page-hero p { font-size: 16px; color: #64748b; max-width: 620px; margin: 0 auto; line-height: 1.7; }

/* 联系页信息卡 + 表单白卡 */
.am-contact-grid { padding: 8px 0 0; }
.am-info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
main .stavba form, .am-form, form.ka-formular { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 28px; max-width: 720px; margin: 0 auto; }

/* Mega 页脚（阿里云底部多列式） */
.am-footer { background: #0b1d33; color: #c7d5e3; padding: 48px 0 24px; font-size: 14px; }
.am-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 32px; }
.am-footer h4 { color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 14px; }
.am-footer a { display: block; color: #9fb3c8 !important; text-decoration: none; margin-bottom: 9px; }
.am-footer a:hover { color: #fff !important; }
.am-brand b { display: block; color: #fff; font-size: 18px; margin-bottom: 10px; }
.am-brand p { line-height: 1.7; color: #9fb3c8; margin: 0; }
.am-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 36px; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #7f95ab; font-size: 13px; }

/* 隐私政策等长文页 */
.am-prose { max-width: 820px; }
.am-prose h3 { font-size: 18px; color: #0f172a; margin: 26px 0 10px; }
.am-prose p { font-size: 15px; color: #475569; line-height: 1.8; margin: 0 0 10px; }

@media (max-width: 900px) {
  .am-hero h1 { font-size: 34px; }
  .am-promo-grid, .am-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .am-grid-3 { grid-template-columns: 1fr; }
  .am-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .am-footer-grid { grid-template-columns: 1fr 1fr; }
  .am-info-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .am-promo-grid, .am-grid-2, .am-grid-4 { grid-template-columns: 1fr; }
  .am-footer-grid { grid-template-columns: 1fr; }
  .am-topbar-inner { justify-content: center; text-align: center; }
  .am-topbar a { margin-left: 0; }
}
/* ===== AnMai 内容增强包 R2 (2026-11-11) ===== */
.am-rich p { margin-bottom: 12px; }
.am-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.am-card-title { font-size: 16px; font-weight: 600; color: #0f172a; }
.am-ico { width: 34px; height: 34px; border-radius: 8px; background: rgba(30,136,199,.09); color: #1e88c7; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.am-ico svg { width: 18px; height: 18px; }
.am-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.am-tag { font-size: 12px; color: #1e88c7; background: rgba(30,136,199,.07); border-radius: 3px; padding: 2px 8px; }
.am-card-foot { border-top: 1px dashed #e2e8f0; margin-top: 12px; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.am-card-foot a { color: #1e88c7 !important; text-decoration: none; font-size: 13px; font-weight: 500; }
.am-card-foot a:hover { text-decoration: underline; }
.am-mini { display: flex; gap: 12px; align-items: flex-start; }
.am-mini h3 { margin: 2px 0 6px; }
.am-mini p { margin: 0; }

/* Hero 装饰 */
.am-deco { position: relative; overflow: hidden; }
.am-hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none; }
.am-hero-glow.g1 { width: 420px; height: 420px; background: radial-gradient(circle, #3fb0e5 0%, transparent 70%); top: -160px; left: -80px; }
.am-hero-glow.g2 { width: 380px; height: 380px; background: radial-gradient(circle, #9fd4f5 0%, transparent 70%); top: -120px; right: -60px; }
.am-hero, .am-cta, .am-stats, .am-page-hero { position: relative; }
.am-hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, rgba(30,136,199,.18) 62%); }
.am-hero-trust { margin-top: 22px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: #64748b; }
.am-hero-trust span { white-space: nowrap; }
.am-stats .am-hero-glow { opacity: .12; }
.am-cta { background: linear-gradient(135deg, #eaf5fd 0%, #dbeefb 55%, #cfe7f8 100%); }
.am-page-hero { background: linear-gradient(180deg, #eef7fe 0%, #ffffff 100%); }
.am-promo-ico { width: 42px; height: 42px; border-radius: 10px; background: rgba(30,136,199,.10); color: #1e88c7; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; line-height: 0; font-size: 0; }
.am-promo-ico svg { display: block; width: 22px; height: 22px; stroke-width: 2; margin: auto; }

/* 对比带 */
.am-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; }
.am-vs-col { background: #fff; border-radius: 10px; padding: 26px; border: 1px solid #e2e8f0; }
.am-vs-col h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 16px; }
.am-vs-old h3 { color: #94a3b8; } .am-vs-old .ico-x { background: #f1f5f9; color: #94a3b8; }
.am-vs-new { border-color: rgba(30,136,199,.45); box-shadow: 0 8px 24px rgba(30,136,199,.10); }
.am-vs-new h3 { color: #1e88c7; } .am-vs-new .ico-check { background: rgba(30,136,199,.1); color: #1e88c7; }
.am-vs-col ul { list-style: none; margin: 0; padding: 0; }
.am-vs-col li { font-size: 14px; line-height: 1.6; color: #64748b; padding: 7px 0 7px 2px; border-bottom: 1px dashed #eef2f6; }
.am-vs-col li:last-child { border-bottom: 0; }
.am-vs-new li { color: #334155; }
.am-vs-mid { align-self: center; font-weight: 800; color: #cbd5e1; font-size: 20px; }

/* 实施路径 */
.am-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: stretch; }
.am-step { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; position: relative; transition: all .2s; }
.am-step:hover { border-color: #1e88c7; box-shadow: 0 6px 18px rgba(30,136,199,.12); }
.am-step-no { display: block; font-size: 22px; font-weight: 800; color: rgba(30,136,199,.22); margin-bottom: 6px; }
.am-step h3 { font-size: 16px; margin: 0 0 8px; color: #0f172a; }
.am-step p { font-size: 13px; color: #64748b; margin: 0; line-height: 1.6; }
.am-arrow { align-self: center; color: #1e88c7; font-size: 20px; font-weight: 700; }

/* 角色大卡（解决方案页） */
.am-role2 { padding: 26px; }
.am-role-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.am-role-no { color: rgba(30,136,199,.25); font-size: 20px; font-weight: 800; margin-left: auto; }
.am-role-head h3 { font-size: 18px; margin: 0; color: #0f172a; }
.am-pain, .am-abil { font-size: 14px; line-height: 1.7; margin: 0 0 10px; color: #64748b; }
.am-abil { color: #334155; }
.am-chip { display: inline-block; font-size: 12px; border-radius: 3px; padding: 1px 7px; margin-right: 8px; vertical-align: 1px; font-weight: 600; }
.am-chip-x { background: #f1f5f9; color: #94a3b8; }
.am-chip-v { background: rgba(30,136,199,.1); color: #1e88c7; }

/* 徽章墙 */
.am-badge-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.am-badge-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; color: #64748b; line-height: 1.5; }
.am-badge-item .am-ico { width: 42px; height: 42px; border-radius: 50%; }
.am-badge-item .am-ico svg { width: 22px; height: 22px; }

/* FAQ（details 无 JS 折叠） */
.am-faq-wrap { max-width: 820px; margin: 0 auto; }
.am-faq { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0; margin-bottom: 12px; }
.am-faq summary { cursor: pointer; list-style: none; padding: 16px 20px; font-size: 15px; font-weight: 600; color: #0f172a; position: relative; padding-right: 40px; }
.am-faq summary::-webkit-details-marker { display: none; }
.am-faq summary::after { content: "+"; position: absolute; right: 20px; top: 14px; color: #1e88c7; font-size: 18px; font-weight: 400; }
.am-faq[open] summary::after { content: "−"; }
.am-faq[open] summary { border-bottom: 1px dashed #e2e8f0; }
.am-faq-a { padding: 14px 20px; font-size: 14px; color: #64748b; line-height: 1.75; }

/* 时间线（关于页） */
.am-timeline { border-left: 2px solid rgba(30,136,199,.25); margin-left: 8px; padding-left: 24px; display: grid; gap: 18px; }
.am-tl-item { position: relative; }
.am-tl-item::before { content: ""; position: absolute; left: -31px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #1e88c7; box-shadow: 0 0 0 4px rgba(30,136,199,.15); }
.am-tl-item b { display: block; color: #0f172a; font-size: 15px; margin-bottom: 4px; }
.am-tl-item span { font-size: 14px; color: #64748b; line-height: 1.6; }

@media (max-width: 900px) {
  .am-versus { grid-template-columns: 1fr; } .am-vs-mid { display: none; }
  .am-steps { grid-template-columns: 1fr; } .am-arrow { display: none; }
  .am-badge-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .am-badge-wall { grid-template-columns: repeat(2, 1fr); }
  .am-hero-trust { gap: 10px; }
}/* Kaleta - shared site styles for all layouts: photo gallery, photo viewer, video, sharing, outline, FAQ, editing on the site.
 * Colors come from the site identity (--ka-akcent). Everything is in the „spolecne“ layer – the layout (layer „sablona“) always overrides it, regardless of specificity. */

@layer tokeny, spolecne, sablona, stavitel, tridy, prvky;

@layer spolecne {

/* ---------- text for screen readers only  ---------- */
.ka-jen-ctecka { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- photo gallery in the text ---------- */
figure.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 1.8em 0; }
figure.galerie img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; border-radius: 2px; }
figure.galerie img:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 600px) { figure.galerie img:first-child { grid-column: auto; grid-row: auto; } } /* on a phone a large first photo would leave holes in the grid */
figure.galerie figcaption { grid-column: 1 / -1; }
.text figure:not(.galerie) img { cursor: zoom-in; }

/* ---------- photo viewer ---------- */
.ka-prohlizecka { position: fixed; inset: 0; z-index: 9000; grid-template-rows: minmax(0, 1fr) auto; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 10 12 / 0.96); color: #fff; }
.ka-prohlizecka[open] { display: grid; }
.ka-prohlizecka::backdrop { background: #000; }
.ka-prohlizecka img { align-self: center; justify-self: center; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.ka-prohlizecka p { margin: 0; padding: 10px 70px 16px; min-height: 22px; text-align: center; font: 14px/1.4 system-ui, sans-serif; color: #d6d6da; }
.ka-prohlizecka button { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; font: 24px/1 system-ui, sans-serif; cursor: pointer; }
.ka-prohlizecka button:hover, .ka-prohlizecka button:focus-visible { background: var(--ka-akcent, #1f4fe0); outline: none; }
.ka-prohlizecka [data-zavrit] { top: 14px; inset-inline-end: 14px; }
.ka-prohlizecka [data-krok="-1"] { inset-inline-start: 14px; top: 50%; translate: 0 -50%; }
.ka-prohlizecka [data-krok="1"] { inset-inline-end: 14px; top: 50%; translate: 0 -50%; }
.ka-prohlizecka [hidden] { display: none; }

/* ---------- buttons ---------- */
.ka-formular button, .ka-tl { display: inline-block; justify-self: start; padding: 10px 18px; border: 1px solid var(--ka-akcent, #1f4fe0); border-radius: 4px; background: var(--ka-akcent, #1f4fe0); color: #fff; font: 600 15px/1.2 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.ka-formular button.ka-tl-vedlejsi, .ka-tl.ka-tl-vedlejsi { background: transparent; color: inherit; border-color: rgb(128 128 128 / 0.6); }
.text a.ka-tl, a.ka-tl { color: #fff; text-decoration: none; }
.text a.ka-tl-vedlejsi, a.ka-tl-vedlejsi { color: inherit; }


/* ---------- editing a page or news item right on the site (only for signed-in users) ---------- */
.ka-upravit-zde { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 60; padding: 10px 16px; border-radius: 999px; background: #14171F; color: #fff; font: 600 14px/1.2 system-ui, sans-serif; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.ka-upravit-zde:hover { background: var(--ka-akcent, #1f4fe0); color: #fff; }
.ka-upravit-text { max-width: 860px; margin: 0 auto; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.ka-upravit-text label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; opacity: 0.7; }
.ka-upravit-text p { margin: 0 0 18px; }
.ka-upravit-titulek { width: 100%; padding: 10px 12px; border: 1px solid rgba(128, 128, 128, 0.45); border-radius: 8px; background: transparent; color: inherit; font: 700 26px/1.2 inherit; }
.ka-upravit-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; }
.ka-upravit-lista .ka-tl-vedlejsi { border: 1px solid currentColor; background: transparent; color: inherit; opacity: 0.85; }
.ka-upravit-lista .ka-tl-vedlejsi:hover { opacity: 1; }
.ka-upravit-vse { margin-inline-start: auto; color: inherit; font-size: 13px; opacity: 0.8; }
.ka-upravit-hlaska { padding: 10px 14px; border-radius: 8px; background: #FEF3F2; color: #B42318; font-size: 15px; }
.ka-ui, .ka-ui * { box-sizing: border-box; }

/* ---------- audio and video player ---------- */
.ka-medium { margin: 0 0 1.6em; aspect-ratio: 16 / 9; background: #111; border-radius: 4px; overflow: hidden; }
.ka-medium video, .ka-medium iframe { display: block; width: 100%; height: 100%; border: 0; }
.ka-medium-zvuk { aspect-ratio: auto; background: none; }
.ka-medium-zvuk audio { display: block; width: 100%; }
.ka-medium-spustit { display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; height: 100%; min-height: 120px; border: 0; background: #111; color: #fff; font: 600 17px/1.3 system-ui, sans-serif; cursor: pointer; }
/* the play triangle points right in every language (a media convention), so its optical nudge stays physical */
.ka-medium-spustit span { display: grid; place-items: center; width: 64px; height: 64px; padding-left: 5px; border-radius: 50%; background: var(--ka-akcent, #1f4fe0); font-size: 26px; }
.ka-medium-spustit small { font-weight: 400; font-size: 12px; opacity: 0.65; }

/* ---------- text outline ---------- */
.ka-osnova { margin: 0 0 1.8em; padding: 16px 20px; border-inline-start: 4px solid var(--ka-akcent, #1f4fe0); background: rgb(128 128 128 / 0.08); font: 15px/1.5 system-ui, sans-serif; }
.ka-osnova strong { display: block; margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.ka-osnova ol { margin: 0; padding-inline-start: 20px; }
.ka-osnova li { margin: 3px 0; }
.text h2[id] { scroll-margin-top: 80px; }

/* ---------- sharing a news item ---------- */
.ka-sdileni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2em 0 1em; font: 600 13px/1 system-ui, sans-serif; }
.ka-sdileni span { margin-inline-end: 4px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.65; }
.ka-sdileni a, .ka-sdileni button, .text .ka-sdileni a { padding: 8px 12px; border: 1px solid rgb(128 128 128 / 0.45); border-radius: 99px; background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.ka-sdileni a:hover, .ka-sdileni button:hover, .text .ka-sdileni a:hover { border-color: var(--ka-akcent, #1f4fe0); color: var(--ka-akcent, #1f4fe0); }
.ka-sdileni [hidden] { display: none; }

/* ---------- author bio ---------- */
.ka-autor { display: flex; gap: 16px; align-items: flex-start; margin: 2em 0; padding: 18px 0; border-top: 1px solid rgb(128 128 128 / 0.35); border-bottom: 1px solid rgb(128 128 128 / 0.35); font: 15px/1.5 system-ui, sans-serif; }
.ka-autor img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.ka-autor-jmeno, .text a.ka-autor-jmeno { display: block; font-weight: 700; font-size: 17px; color: inherit; text-decoration: none; }
.ka-autor span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.ka-autor p { margin: 6px 0 0; }

/* ---------- tables in the text (text pages and the Text element in the builder) ---------- */
.text table, .ka-text table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font: 15px/1.45 system-ui, sans-serif; display: block; overflow-x: auto; }
.text th, .text td, .ka-text th, .ka-text td { padding: 8px 12px; border-bottom: 1px solid rgb(128 128 128 / 0.35); text-align: start; vertical-align: top; }
.text thead th, .ka-text thead th { border-bottom: 2px solid currentColor; font-weight: 700; }
.text tbody th, .ka-text tbody th { font-weight: 600; min-width: 8em; }

/* ---------- code samples and embedded content in the text (:where = zero specificity, the layout can override them) ---------- */
:where(.text, .ka-text) pre { overflow-x: auto; padding: 14px 16px; background: rgb(128 128 128 / 0.12); font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
:where(.text, .ka-text) :not(pre) > code { padding: 1px 5px; background: rgb(128 128 128 / 0.14); font-size: 0.9em; overflow-wrap: anywhere; }
:where(.text, .ka-text, .perex) :is(iframe, video, embed, object) { max-width: 100%; }
:where(.text, .perex) { overflow-wrap: break-word; }

/* visible focus for keyboard navigation - shared by all layouts, a layout may override it */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ka-akcent, #1f4fe0); outline-offset: 2px; }
/* images in the text */
:where(.text figure img) { width: 100%; }
:where(.text figcaption) { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--text-slaby, inherit); }
:where(.text hr) { clear: both; border: 0; border-top: 1px solid var(--linka, rgb(128 128 128 / 0.35)); margin: 2em 0; }
:where(.faq) { margin-top: 36px; }
:where(.faq h2) { font-size: 22px; }
:where(.faq details) { border-top: 1px solid rgb(127 127 127 / 0.35); padding: 12px 0; }
:where(.faq summary) { font-weight: 700; cursor: pointer; }
:where(.faq details p) { margin: 8px 0 0; }
:where(.clanek-foto) { margin-inline: 0; }
:where(.clanek-popisek) { margin-top: 8px; font: 13px/1.45 system-ui, sans-serif; opacity: 0.75; }
:where(.clanek-foto-autor) { white-space: nowrap; opacity: 0.85; }

/* ---------- print ---------- */
@media print {
	.hlavicka, .paticka, nav, form, .ka-sdileni, .ka-osnova, .ka-medium-spustit, .cookies-lista, .cookies-znovu, .ka-upravit-zde { display: none !important; }
	body { background: #fff !important; color: #000 !important; font-size: 11.5pt; }
	.text a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 85%; word-break: break-all; }
	img, figure, .ka-autor { break-inside: avoid; }
}

/* ---------- dark mode: shared elements (by device, or chosen by the site or the visitor) ---------- */
@media (prefers-color-scheme: dark) {
	:root[data-tmavy]:not([data-tema="svetly"]) .cookies-lista { background: #1D1D1D; color: #ECECEC; border-color: #3A3A3A; }
	:root[data-tmavy]:not([data-tema="svetly"]) .cookies-lista a, :root[data-tmavy]:not([data-tema="svetly"]) .cookies-tlacitka .cookies-odkaz { color: #ECECEC; }
	:root[data-tmavy]:not([data-tema="svetly"]) img:not(:is(.logo, .ka-logo) img) { filter: brightness(0.92); } /* dim photos, not the logo */
	:root[data-tmavy]:not([data-tema="svetly"]) :is(.ka-sdileni a:hover, .ka-sdileni button:hover) { color: color-mix(in srgb, var(--ka-akcent, #1f4fe0) 55%, #FFFFFF); }
	:root[data-tmavy]:not([data-tema="svetly"]) .ka-upravit-zde { border: 1px solid rgb(255 255 255 / 0.25); }
}
:root[data-tmavy][data-tema="tmavy"] .cookies-lista { background: #1D1D1D; color: #ECECEC; border-color: #3A3A3A; }
:root[data-tmavy][data-tema="tmavy"] .cookies-lista a, :root[data-tmavy][data-tema="tmavy"] .cookies-tlacitka .cookies-odkaz { color: #ECECEC; }
:root[data-tmavy][data-tema="tmavy"] img:not(:is(.logo, .ka-logo) img) { filter: brightness(0.92); } /* dim photos, not the logo */
:root[data-tmavy][data-tema="tmavy"] :is(.ka-sdileni a:hover, .ka-sdileni button:hover) { color: color-mix(in srgb, var(--ka-akcent, #1f4fe0) 55%, #FFFFFF); }
:root[data-tmavy][data-tema="tmavy"] .ka-upravit-zde { border: 1px solid rgb(255 255 255 / 0.25); }
}

/* The language switcher is a system element: layer stavitel, so the layout's menu rules (nav ul, nav a) do not override it;
   the site's shared classes (layer tridy) can adjust it further. */
@layer stavitel {
	/* ---------- language switcher (design system tokens: colors, radii, site font) ---------- */
	.ka-jazyky { display: inline-flex; gap: 2px; margin-inline-start: var(--ka-mezera-s, 12px); padding: 3px; border: 1px solid var(--ka-barva-linka); border-radius: var(--ka-zaobleni-plne, 999px); font-size: 0.8125rem; font-weight: 600; line-height: 1; letter-spacing: 0.04em; vertical-align: middle; }
	.ka-jazyky a { display: block; min-width: 2.25em; padding: 0.45em 0.6em; border-radius: var(--ka-zaobleni-plne, 999px); color: inherit; text-align: center; text-decoration: none; }
	.ka-jazyky a:hover { background: var(--ka-barva-plocha); }
	.ka-jazyky a[aria-current] { background: var(--ka-barva-primarni); color: var(--ka-barva-na-primarni); }
	.ka-jazyky a:focus-visible, .ka-jazyky-vyber a:focus-visible, .ka-jazyky-tl:focus-visible { outline: 3px solid var(--ka-barva-sekundarni); outline-offset: 2px; }
	.ka-jazyky-vyber { display: inline-block; position: relative; margin-inline-start: var(--ka-mezera-s, 12px); vertical-align: middle; }
	.ka-jazyky-tl { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.5em 0.8em; border: 1px solid var(--ka-barva-linka); border-radius: var(--ka-zaobleni-plne, 999px); background: none; color: inherit; font: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1; cursor: pointer; }
	.ka-jazyky-tl:hover { background: var(--ka-barva-plocha); }
	.ka-jazyky-tl svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
	.ka-jazyky-vyber [popover]:popover-open { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
	.ka-jazyky-vyber [popover] { position: fixed; inset: auto; top: anchor(bottom); right: anchor(right); margin: 6px 0 0; min-width: 13rem; max-height: min(70vh, 28rem); overflow-y: auto; padding: var(--ka-mezera-2xs, 4px); border: 1px solid var(--ka-barva-linka); border-radius: var(--ka-zaobleni, 8px); background: var(--ka-barva-pozadi); color: var(--ka-barva-text); box-shadow: var(--ka-stin-m); list-style: none; }
	.ka-jazyky-vyber [popover] a { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 0.55em 0.75em; border-radius: calc(var(--ka-zaobleni, 8px) / 1.5); color: inherit; text-decoration: none; }
	.ka-jazyky-vyber [popover] a:hover { background: var(--ka-barva-plocha); }
	.ka-jazyky-vyber [popover] a[aria-current] { background: var(--ka-barva-primarni-jemna); color: var(--ka-barva-primarni); font-weight: 600; }
	.ka-jazyky-vyber [popover] small { color: var(--ka-barva-tlumeny); font-size: 0.75em; letter-spacing: 0.06em; }
	@supports not (top: anchor(bottom)) { .ka-jazyky-vyber [popover] { top: 4.5rem; right: max(1rem, (100vw - var(--ka-sirka, 72rem)) / 2); } }
	/* the Language switcher element in the footer: the menu above the button, aligned to its left edge */
	.ka-jazyky-vyber--nahoru [popover] { top: auto; bottom: anchor(top); right: auto; left: anchor(left); margin: 0 0 6px; }
	@supports not (top: anchor(bottom)) { .ka-jazyky-vyber--nahoru [popover] { top: auto; bottom: 4.5rem; left: 1rem; right: auto; } }
	/* a right-to-left page: the menu hangs from the other edge of its button (anchor() has no logical side for a fixed popover) */
	:root[dir="rtl"] .ka-jazyky-vyber [popover] { right: auto; left: anchor(left); }
	:root[dir="rtl"] .ka-jazyky-vyber--nahoru [popover] { left: auto; right: anchor(right); }
	@supports not (top: anchor(bottom)) {
		:root[dir="rtl"] .ka-jazyky-vyber [popover] { right: auto; left: max(1rem, (100vw - var(--ka-sirka, 72rem)) / 2); }
		:root[dir="rtl"] .ka-jazyky-vyber--nahoru [popover] { left: auto; right: 1rem; }
	}
	.ka-jazyky-prvek { margin-inline-start: 0; } /* a standalone element: needs no spacing from the menu */
	.ka-jazyky-sipka { stroke-width: 2; opacity: 0.7; }
	.ka-jazyky-vyber--nahoru .ka-jazyky-sipka { rotate: 180deg; }
	/* color scheme switcher (light / dark / by device) – the same menu as languages, the items are buttons */
	.ka-tema-tl { padding: 0.5em 0.6em; }
	.ka-tema-ikona { display: none; }
	.ka-tema:is([data-volba="auto"], :not([data-volba])) .ka-tema-ikona--auto, .ka-tema[data-volba="svetly"] .ka-tema-ikona--svetly, .ka-tema[data-volba="tmavy"] .ka-tema-ikona--tmavy { display: block; }
	.ka-jazyky-vyber svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; flex: none; }
	.ka-jazyky-vyber [popover] button { display: flex; align-items: center; gap: 0.6em; width: 100%; padding: 0.55em 0.75em; border: 0; border-radius: calc(var(--ka-zaobleni, 8px) / 1.5); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
	.ka-jazyky-vyber [popover] button:hover { background: var(--ka-barva-plocha); }
	.ka-jazyky-vyber [popover] button[aria-pressed="true"] { background: var(--ka-barva-primarni-jemna); color: var(--ka-barva-primarni); font-weight: 600; }
	.ka-jazyky-vyber [popover] button:focus-visible { outline: 3px solid var(--ka-barva-sekundarni); outline-offset: 2px; }
	.ka-jazyky + .ka-tema, .ka-jazyky-vyber + .ka-tema { margin-inline-start: var(--ka-mezera-2xs, 6px); }
	@media (max-width: 767px) {
		/* in the expanded menu on a phone, languages directly as a row of options, without another pop-up menu */
		:is(.ka-nav-menu, .navigace) .ka-jazyky, :is(.ka-nav-menu, .navigace) .ka-jazyky-vyber { align-self: flex-start; margin: var(--ka-mezera-s, 12px) 0 0; }
		:is(.ka-nav-menu, .navigace) .ka-jazyky-tl { display: none; }
		:is(.ka-nav-menu, .navigace) .ka-jazyky-vyber [popover] { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--ka-mezera-2xs, 4px); position: static; inset: auto; min-width: 0; max-height: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; overflow: visible; }
		:is(.ka-nav-menu, .navigace) .ka-jazyky-vyber [popover] :is(a, button) { width: auto; gap: 0.4em; padding: 0.45em 0.7em; border: 1px solid var(--ka-barva-linka); border-radius: var(--ka-zaobleni-plne, 999px); }
		:is(.ka-nav-menu, .navigace) .ka-tema { margin-inline-start: 0; }
	}
}

/* ---------- popups (Builder\Popups, triggers in image/web.js): colors and shapes from the site's design system ---------- */
@layer stavitel {
	.ka-popup { box-sizing: border-box; max-height: calc(100dvh - 2rem); overflow: auto; margin: auto; padding: var(--ka-mezera-xl, 2.5rem) var(--ka-mezera-l, 2rem) var(--ka-mezera-l, 2rem); border: 0; border-radius: var(--ka-zaobleni, 12px); background: var(--ka-barva-pozadi, #fff); color: var(--ka-barva-text, #111); box-shadow: var(--ka-stin-l, 0 24px 60px rgb(0 0 0 / 0.25)); }
	.ka-popup:popover-open, .ka-popup--editor { display: block; }
	.ka-popup::backdrop { background: rgb(0 0 0 / 0.45); }
	.ka-popup-obsah.stavba { min-height: 0; } /* .stavba has a minimum content height on a page – not in a popup */
	.ka-popup-obsah > * + * { margin-block-start: var(--ka-mezera-m, 1rem); }
	.ka-popup--okno { inset: 0; width: min(36rem, calc(100vw - 2rem)); }
	.ka-popup--cela { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; display: none; }
	.ka-popup--cela:popover-open { display: grid; place-items: center; }
	.ka-popup--cela > .ka-popup-obsah { width: min(48rem, 100%); }
	.ka-popup--panel { inset-block: auto 1rem; inset-inline: auto 1rem; width: min(24rem, calc(100vw - 2rem)); margin: 0; padding: var(--ka-mezera-l, 2rem) var(--ka-mezera-m, 1.25rem) var(--ka-mezera-m, 1.25rem); }
	.ka-popup--panel::backdrop, .ka-popup--lista-nahore::backdrop, .ka-popup--lista-dole::backdrop { background: none; }
	.ka-popup--lista-nahore, .ka-popup--lista-dole { inset: 0 0 auto; width: 100vw; max-width: none; margin: 0; padding: 0.75rem 3.5rem; border-radius: 0; box-shadow: var(--ka-stin-m, 0 8px 24px rgb(0 0 0 / 0.15)); background: var(--ka-barva-primarni, #111); color: var(--ka-barva-na-primarni, #fff); text-align: center; }
	.ka-popup--lista-dole { inset: auto 0 0; }
	.ka-popup--lista-nahore .ka-popup-obsah, .ka-popup--lista-dole .ka-popup-obsah { --ka-barva-text: var(--ka-barva-na-primarni, #fff); --ka-barva-primarni: var(--ka-barva-na-primarni, #fff); }
	.ka-popup-zavrit { position: absolute; top: 0.5rem; inset-inline-end: 0.5rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font: 1.5rem/1 system-ui, sans-serif; cursor: pointer; }
	.ka-popup-zavrit:hover { background: color-mix(in oklch, currentColor 10%, transparent); }
	.ka-popup-zavrit:focus-visible { outline: 3px solid var(--ka-barva-sekundarni, currentColor); outline-offset: 2px; }
	/* the heading the script moves focus to after opening, for screen readers (tabindex="-1"), has no outline – it cannot be operated */
	.ka-popup [tabindex="-1"]:focus { outline: none; }
	.ka-popup--lista-nahore .ka-popup-zavrit, .ka-popup--lista-dole .ka-popup-zavrit { top: 50%; translate: 0 -50%; }
	@media (prefers-reduced-motion: no-preference) {
		.ka-popup:popover-open { animation: ka-popup-objevit 0.2s ease-out; }
		.ka-popup--panel:popover-open { animation-name: ka-popup-vyjet; }
		.ka-popup--lista-nahore:popover-open { animation-name: ka-popup-shora; }
		.ka-popup--lista-dole:popover-open { animation-name: ka-popup-zdola; }
	}
	@keyframes ka-popup-objevit { from { opacity: 0; scale: 0.96; } }
	@keyframes ka-popup-vyjet { from { opacity: 0; translate: 0 1.5rem; } }
	@keyframes ka-popup-shora { from { translate: 0 -100%; } }
	@keyframes ka-popup-zdola { from { translate: 0 100%; } }
	/* builder canvas: the popup sits in the page so it can be edited */
	.ka-popup-platno { display: grid; place-items: center; min-height: 60vh; padding: var(--ka-mezera-xl, 2.5rem) var(--ka-mezera-m, 1rem); background: color-mix(in oklch, var(--ka-barva-text, #111) 6%, transparent); }
	.ka-popup--editor { position: relative; inset: auto; margin: 0 auto; outline: 2px dashed var(--ka-barva-linka, #ccc); outline-offset: 4px; }
	.ka-popup--editor.ka-popup--cela { width: 100%; height: auto; min-height: 60vh; }
}

/* ---------- AnMai custom styles ---------- */
#products { scroll-margin-top: 6rem; }

/* ===== AnMai 阿里云版式重构 (2026-11-11) —— 版式对标 aliyun.com，主色安脉蓝 ===== */
.am-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* 顶部活动条（阿里云首页式） */
.am-topbar { background: #1e88c7; color: #fff; font-size: 13px; }
.am-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.am-topbar-tag { background: rgba(255,255,255,.18); border-radius: 3px; padding: 1px 7px; font-weight: 700; font-size: 11px; letter-spacing: .05em; }
.am-topbar a { color: #fff; text-decoration: none; font-weight: 500; margin-left: auto; }
.am-topbar a:hover { text-decoration: underline; }

/* Hero：居中、大标题、双按钮、下方 4 张活动小卡（阿里云首屏式） */
.am-hero { text-align: center; padding: 64px 24px 48px; background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%); }
.am-hero-badge { display: inline-block; color: #1e88c7; background: rgba(30,136,199,.08); border: 1px solid rgba(30,136,199,.25); font-weight: 600; font-size: 13px; padding: 4px 14px; border-radius: 999px; margin-bottom: 20px; }
.am-hero h1 { font-size: 44px; font-weight: 700; color: #0f172a; line-height: 1.25; margin: 0 0 18px; letter-spacing: -0.02em; }
.am-sub { font-size: 17px; color: #64748b; max-width: 640px; margin: 0 auto 30px; line-height: 1.7; }
.am-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.am-btn { display: inline-block; padding: 11px 28px; border-radius: 4px; font-size: 15px; font-weight: 500; text-decoration: none; transition: all .2s; }
.am-btn-p { background: #1e88c7; color: #fff !important; }
.am-btn-p:hover { background: #1670a8; box-shadow: 0 4px 12px rgba(30,136,199,.3); }
.am-btn-s { color: #1e88c7 !important; background: #fff; border: 1px solid #bcd9ee; }
.am-btn-s:hover { border-color: #1e88c7; background: #f0f7ff; }
.am-promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; margin: 44px auto 0; text-align: left; }
.am-promo { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 18px 20px; text-decoration: none; transition: all .2s; }
.am-promo:hover { border-color: #1e88c7; box-shadow: 0 6px 18px rgba(30,136,199,.12); transform: translateY(-2px); }
.am-promo b { display: block; color: #0f172a; font-size: 15px; margin-bottom: 6px; }
.am-promo span:not(.am-ico) { display: block; color: #64748b; font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.am-promo em { color: #1e88c7; font-size: 13px; font-style: normal; font-weight: 500; }

/* 分区：左标题 + 右侧「更多→」（阿里云内容分区头式） */
.am-section { padding: 56px 0; }
.am-section-bg { background: #f7fafd; }
.am-head { margin-bottom: 28px; }
.am-head h2, .am-head-row h2 { font-size: 28px; font-weight: 700; color: #0f172a; margin: 0 0 8px; }
.am-head p { font-size: 15px; color: #64748b; margin: 0; }
.am-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.am-head-row h2 { margin: 0; }
.am-more { color: #1e88c7 !important; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.am-more:hover { text-decoration: underline; }

/* 卡片矩阵（白底细边、hover 主色阴影） */
.am-grid-2, .am-grid-3, .am-grid-4 { display: grid; gap: 20px; }
.am-grid-2 { grid-template-columns: repeat(2, 1fr); }
.am-grid-3 { grid-template-columns: repeat(3, 1fr); }
.am-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.am-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 22px; transition: all .2s; }
.am-card:hover { border-color: #1e88c7; box-shadow: 0 6px 20px rgba(30,136,199,.12); transform: translateY(-2px); }
.am-card h3 { font-size: 16px; font-weight: 600; color: #0f172a; margin: 0 0 10px; }
.am-card p { font-size: 14px; color: #64748b; line-height: 1.65; margin: 0 0 12px; }
.am-card a { color: #1e88c7 !important; text-decoration: none; font-weight: 500; font-size: 14px; }
.am-card a:hover { text-decoration: underline; }
.am-card-bg { background: #f8fbfe; }
.am-metric { font-size: 13px; font-weight: 600; color: #1e88c7; }
.am-grid-4 .am-card { padding: 18px; }
.am-grid-4 .am-card h3 { font-size: 15px; }
.am-grid-4 .am-card p { font-size: 13px; margin-bottom: 0; }
.am-card-role h3 { font-size: 18px; }
.am-pain b, .am-abil b { color: #0f172a; }

/* 数据带：深色底反白（阿里云「全球基础设施」带式） */
.am-stats { background: #0b1d33; padding: 44px 0; }
.am-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.am-stat b { display: block; font-size: 36px; font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 8px; }
.am-stat span { font-size: 14px; color: #9fb3c8; }

/* CTA 带 */
.am-cta { text-align: center; padding: 52px 24px; background: linear-gradient(135deg, #f0f7ff 0%, #e8f3fc 100%); }
.am-cta h2 { font-size: 26px; font-weight: 700; color: #0f172a; margin: 0 0 10px; }
.am-cta p { font-size: 15px; color: #64748b; margin: 0 0 24px; }
.am-cta-inline { margin-top: 36px; padding: 36px 24px; border-radius: 8px; }

/* 子页页头（浅色渐变小 Hero） */
.am-page-hero { text-align: center; padding: 56px 24px 40px; background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%); }
.am-page-hero h1 { font-size: 36px; font-weight: 700; color: #0f172a; margin: 0 0 12px; }
.am-page-hero p { font-size: 16px; color: #64748b; max-width: 620px; margin: 0 auto; line-height: 1.7; }

/* 联系页信息卡 + 表单白卡 */
.am-contact-grid { padding: 8px 0 0; }
.am-info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
main .stavba form, .am-form, form.ka-formular { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 28px; max-width: 720px; margin: 0 auto; }

/* Mega 页脚（阿里云底部多列式） */
.am-footer { background: #0b1d33; color: #c7d5e3; padding: 48px 0 24px; font-size: 14px; }
.am-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 32px; }
.am-footer h4 { color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 14px; }
.am-footer a { display: block; color: #9fb3c8 !important; text-decoration: none; margin-bottom: 9px; }
.am-footer a:hover { color: #fff !important; }
.am-brand b { display: block; color: #fff; font-size: 18px; margin-bottom: 10px; }
.am-brand p { line-height: 1.7; color: #9fb3c8; margin: 0; }
.am-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 36px; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #7f95ab; font-size: 13px; }

/* 隐私政策等长文页 */
.am-prose { max-width: 820px; }
.am-prose h3 { font-size: 18px; color: #0f172a; margin: 26px 0 10px; }
.am-prose p { font-size: 15px; color: #475569; line-height: 1.8; margin: 0 0 10px; }

@media (max-width: 900px) {
  .am-hero h1 { font-size: 34px; }
  .am-promo-grid, .am-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .am-grid-3 { grid-template-columns: 1fr; }
  .am-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .am-footer-grid { grid-template-columns: 1fr 1fr; }
  .am-info-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .am-promo-grid, .am-grid-2, .am-grid-4 { grid-template-columns: 1fr; }
  .am-footer-grid { grid-template-columns: 1fr; }
  .am-topbar-inner { justify-content: center; text-align: center; }
  .am-topbar a { margin-left: 0; }
}
/* ===== AnMai 内容增强包 R2 (2026-11-11) ===== */
.am-rich p { margin-bottom: 12px; }
.am-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.am-card-title { font-size: 16px; font-weight: 600; color: #0f172a; }
.am-ico { width: 34px; height: 34px; border-radius: 8px; background: rgba(30,136,199,.09); color: #1e88c7; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.am-ico svg { width: 18px; height: 18px; }
.am-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.am-tag { font-size: 12px; color: #1e88c7; background: rgba(30,136,199,.07); border-radius: 3px; padding: 2px 8px; }
.am-card-foot { border-top: 1px dashed #e2e8f0; margin-top: 12px; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.am-card-foot a { color: #1e88c7 !important; text-decoration: none; font-size: 13px; font-weight: 500; }
.am-card-foot a:hover { text-decoration: underline; }
.am-mini { display: flex; gap: 12px; align-items: flex-start; }
.am-mini h3 { margin: 2px 0 6px; }
.am-mini p { margin: 0; }

/* Hero 装饰 */
.am-deco { position: relative; overflow: hidden; }
.am-hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none; }
.am-hero-glow.g1 { width: 420px; height: 420px; background: radial-gradient(circle, #3fb0e5 0%, transparent 70%); top: -160px; left: -80px; }
.am-hero-glow.g2 { width: 380px; height: 380px; background: radial-gradient(circle, #9fd4f5 0%, transparent 70%); top: -120px; right: -60px; }
.am-hero, .am-cta, .am-stats, .am-page-hero { position: relative; }
.am-hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, rgba(30,136,199,.18) 62%); }
.am-hero-trust { margin-top: 22px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: #64748b; }
.am-hero-trust span { white-space: nowrap; }
.am-stats .am-hero-glow { opacity: .12; }
.am-cta { background: linear-gradient(135deg, #eaf5fd 0%, #dbeefb 55%, #cfe7f8 100%); }
.am-page-hero { background: linear-gradient(180deg, #eef7fe 0%, #ffffff 100%); }
.am-promo-ico { width: 42px; height: 42px; border-radius: 10px; background: rgba(30,136,199,.10); color: #1e88c7; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; line-height: 0; font-size: 0; }
.am-promo-ico svg { display: block; width: 22px; height: 22px; stroke-width: 2; margin: auto; }

/* 对比带 */
.am-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; }
.am-vs-col { background: #fff; border-radius: 10px; padding: 26px; border: 1px solid #e2e8f0; }
.am-vs-col h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 16px; }
.am-vs-old h3 { color: #94a3b8; } .am-vs-old .ico-x { background: #f1f5f9; color: #94a3b8; }
.am-vs-new { border-color: rgba(30,136,199,.45); box-shadow: 0 8px 24px rgba(30,136,199,.10); }
.am-vs-new h3 { color: #1e88c7; } .am-vs-new .ico-check { background: rgba(30,136,199,.1); color: #1e88c7; }
.am-vs-col ul { list-style: none; margin: 0; padding: 0; }
.am-vs-col li { font-size: 14px; line-height: 1.6; color: #64748b; padding: 7px 0 7px 2px; border-bottom: 1px dashed #eef2f6; }
.am-vs-col li:last-child { border-bottom: 0; }
.am-vs-new li { color: #334155; }
.am-vs-mid { align-self: center; font-weight: 800; color: #cbd5e1; font-size: 20px; }

/* 实施路径 */
.am-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: stretch; }
.am-step { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; position: relative; transition: all .2s; }
.am-step:hover { border-color: #1e88c7; box-shadow: 0 6px 18px rgba(30,136,199,.12); }
.am-step-no { display: block; font-size: 22px; font-weight: 800; color: rgba(30,136,199,.22); margin-bottom: 6px; }
.am-step h3 { font-size: 16px; margin: 0 0 8px; color: #0f172a; }
.am-step p { font-size: 13px; color: #64748b; margin: 0; line-height: 1.6; }
.am-arrow { align-self: center; color: #1e88c7; font-size: 20px; font-weight: 700; }

/* 角色大卡（解决方案页） */
.am-role2 { padding: 26px; }
.am-role-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.am-role-no { color: rgba(30,136,199,.25); font-size: 20px; font-weight: 800; margin-left: auto; }
.am-role-head h3 { font-size: 18px; margin: 0; color: #0f172a; }
.am-pain, .am-abil { font-size: 14px; line-height: 1.7; margin: 0 0 10px; color: #64748b; }
.am-abil { color: #334155; }
.am-chip { display: inline-block; font-size: 12px; border-radius: 3px; padding: 1px 7px; margin-right: 8px; vertical-align: 1px; font-weight: 600; }
.am-chip-x { background: #f1f5f9; color: #94a3b8; }
.am-chip-v { background: rgba(30,136,199,.1); color: #1e88c7; }

/* 徽章墙 */
.am-badge-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.am-badge-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; color: #64748b; line-height: 1.5; }
.am-badge-item .am-ico { width: 42px; height: 42px; border-radius: 50%; }
.am-badge-item .am-ico svg { width: 22px; height: 22px; }

/* FAQ（details 无 JS 折叠） */
.am-faq-wrap { max-width: 820px; margin: 0 auto; }
.am-faq { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0; margin-bottom: 12px; }
.am-faq summary { cursor: pointer; list-style: none; padding: 16px 20px; font-size: 15px; font-weight: 600; color: #0f172a; position: relative; padding-right: 40px; }
.am-faq summary::-webkit-details-marker { display: none; }
.am-faq summary::after { content: "+"; position: absolute; right: 20px; top: 14px; color: #1e88c7; font-size: 18px; font-weight: 400; }
.am-faq[open] summary::after { content: "−"; }
.am-faq[open] summary { border-bottom: 1px dashed #e2e8f0; }
.am-faq-a { padding: 14px 20px; font-size: 14px; color: #64748b; line-height: 1.75; }

/* 时间线（关于页） */
.am-timeline { border-left: 2px solid rgba(30,136,199,.25); margin-left: 8px; padding-left: 24px; display: grid; gap: 18px; }
.am-tl-item { position: relative; }
.am-tl-item::before { content: ""; position: absolute; left: -31px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #1e88c7; box-shadow: 0 0 0 4px rgba(30,136,199,.15); }
.am-tl-item b { display: block; color: #0f172a; font-size: 15px; margin-bottom: 4px; }
.am-tl-item span { font-size: 14px; color: #64748b; line-height: 1.6; }

@media (max-width: 900px) {
  .am-versus { grid-template-columns: 1fr; } .am-vs-mid { display: none; }
  .am-steps { grid-template-columns: 1fr; } .am-arrow { display: none; }
  .am-badge-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .am-badge-wall { grid-template-columns: repeat(2, 1fr); }
  .am-hero-trust { gap: 10px; }
}
/* ===== AnMai R3 增强 (2026-11-11)：滚动条/驾驶舱模拟/选型矩阵/动效 ===== */

/* Hero 网格底纹 */
.am-hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(30,136,199,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(30,136,199,.05) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%); pointer-events: none; }

/* 场景关键词无缝滚动条 */
.am-marquee { margin-top: 40px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.am-marquee-track { display: flex; gap: 14px; width: max-content; animation: am-marq 36s linear infinite; }
.am-marquee:hover .am-marquee-track { animation-play-state: paused; }
.am-marquee-track span { font-size: 13px; color: #47607d; background: #fff; border: 1px solid #dbe7f2; border-radius: 999px; padding: 6px 16px; white-space: nowrap; }
@keyframes am-marq { to { transform: translateX(-50%); } }

/* 三端一体化 + 驾驶舱模拟屏 */
.am-triple { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; }
.am-triple-copy { display: grid; gap: 16px; }
.am-twin { background: #0b1d33; border-radius: 14px; padding: 14px; box-shadow: 0 24px 60px rgba(11,29,51,.35); position: sticky; top: 90px; }
.am-twin-label { font-size: 11px; color: #5f7893; text-align: right; margin: 0 2px 8px; }
.am-dash { background: #101f36; border-radius: 10px; overflow: hidden; border: 1px solid #1d3552; }
.am-dash-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #0d1a2c; border-bottom: 1px solid #1d3552; }
.am-dash-top b { color: #cfe3f5; font-size: 12px; font-weight: 500; margin-left: 8px; }
.am-dot { width: 9px; height: 9px; border-radius: 50%; }
.am-dot.d { background: #ff6b5e; } .am-dot.d2 { background: #f7bd51; } .am-dot.d3 { background: #45c96b; }
.am-dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.am-dkpi { background: #14243c; border: 1px solid #1f3a5c; border-radius: 8px; padding: 12px; }
.am-dkpi span { display: block; font-size: 11px; color: #7c96b1; margin-bottom: 6px; }
.am-dkpi b { font-size: 20px; color: #e8f2fb; font-variant-numeric: tabular-nums; }
.am-dkpi i { font-style: normal; font-size: 11px; margin-left: 6px; }
.am-dkpi i.up { color: #45c96b; } .am-dkpi i.down { color: #ff8d7e; }
.am-dkpi.warn { border-color: rgba(255,141,126,.5); animation: am-breathe 2.4s ease-in-out infinite; }
@keyframes am-breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(255,141,126,.25); } 50% { box-shadow: 0 0 0 5px rgba(255,141,126,.12); } }
.am-dash-chart { padding: 8px 14px 4px; }
.am-bars { display: flex; align-items: flex-end; gap: 8px; height: 92px; }
.am-bars b { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #3fb0e5, #1e6fa8); }
.am-bars b.hot { background: linear-gradient(180deg, #ff8d7e, #c2564a); }
.am-bars-x { display: flex; gap: 8px; }
.am-bars-x span { flex: 1; text-align: center; font-size: 10px; color: #5f7893; }
.am-dash-list { padding: 10px 14px 14px; display: grid; gap: 8px; }
.am-drow { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #b9cfe4; background: #0f1e33; border-radius: 6px; padding: 9px 12px; }
.am-drow em { margin-left: auto; font-style: normal; color: #7c96b1; font-size: 11px; white-space: nowrap; }
.am-lv { font-size: 10px; font-weight: 700; border-radius: 3px; padding: 2px 7px; }
.am-lv.l1 { background: rgba(255,109,94,.18); color: #ff8d7e; }
.am-lv.l2 { background: rgba(247,189,81,.16); color: #f7bd51; }
.am-lv.lok { background: rgba(69,201,107,.15); color: #45c96b; }

/* 步骤卡周期标签 */
.am-step-when { position: absolute; top: 14px; right: 14px; font-size: 11px; color: #1e88c7; background: rgba(30,136,199,.08); border-radius: 999px; padding: 2px 10px; }

/* 选型矩阵 / 覆盖热力表 */
.am-cm-wrap { overflow-x: auto; }
table.am-cm { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; font-size: 14px; }
.am-cm th { background: #f7fafd; color: #0f172a; font-weight: 600; padding: 13px 14px; text-align: left; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.am-cm td { padding: 12px 14px; border-bottom: 1px dashed #eef2f6; color: #64748b; }
.am-cm tr:last-child td { border-bottom: 0; }
.am-cm .am-cm-feat { color: #334155; font-weight: 500; }
.am-cm .am-cm-no { color: #94a3b8; }
.am-cm .am-cm-yes { color: #1e88c7; font-weight: 600; background: rgba(30,136,199,.05); }
.am-cm th.am-cm-anmai { color: #1e88c7; background: rgba(30,136,199,.08); }
.am-cm-note { font-size: 12px; color: #94a3b8; margin-top: 14px; }
table.am-heat td { text-align: center; font-size: 15px; }
table.am-heat .am-cm-role { text-align: left; font-weight: 600; color: #334155; white-space: nowrap; }
table.am-heat td.am-lv3 { color: #1e88c7; background: rgba(30,136,199,.14); }
table.am-heat td.am-lv2 { color: #1e88c7; background: rgba(30,136,199,.07); }
table.am-heat td.am-lv1 { color: #94a3b8; }
table.am-heat td.am-lv0 { color: #d7e1ea; }

/* KPI 数据带迷你柱 */
.am-stats-spark { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 34px; margin-top: 26px; opacity: .8; }
.am-stats-spark span { width: 22px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(63,176,229,.9), rgba(30,111,168,.5)); }

/* 技术架构分层带 */
.am-arch { display: grid; gap: 12px; }
.am-arch-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 18px; }
.am-arch-name { flex: 0 0 68px; color: #0f172a; font-size: 14px; }
.am-arch-pipe { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; color: #64748b; }
.am-arch-chip { font-size: 13px; color: #334155; background: #f7fafd; border: 1px solid #e6eef5; border-radius: 5px; padding: 4px 10px; }

/* 选型速查卡 */
.am-quiz { display: flex; gap: 14px; align-items: flex-start; }
.am-quiz b { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #1e88c7; background: rgba(30,136,199,.08); border-radius: 6px; padding: 6px 9px; margin-top: 2px; }
.am-quiz p { margin: 0; color: #334155; font-size: 14px; line-height: 1.7; }

/* 入场动画（无 JS：默认态即可见内容，动画仅首次载入播放） */
.am-reveal { animation: am-rise .7s cubic-bezier(.2,.7,.3,1) both; }
@keyframes am-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .am-triple { grid-template-columns: 1fr; }
  .am-twin { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .am-reveal, .am-marquee-track, .am-dkpi.warn { animation: none; }
}
/* ===== AnMai R4 增强 (2026-11-11)：手机模拟屏/闭环流程带/导航CTA ===== */

/* 导航右侧 CTA */
.am-head-cta { display: flex; gap: 12px; align-items: center; }
.am-head-cta a.am-cta-btn { background: #1e88c7; color: #fff !important; padding: 7px 18px; border-radius: 4px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all .2s; white-space: nowrap; }
.am-head-cta a.am-cta-btn:hover { background: #1670a8; box-shadow: 0 3px 10px rgba(30,136,199,.3); }
.am-head-cta a.am-cta-tel { color: #1e88c7 !important; font-size: 12px; text-decoration: none; white-space: nowrap; font-weight: 600; }
.am-head-cta a.am-cta-tel:hover { text-decoration: underline; }

/* 手机模拟屏 */
.am-triple-rev { grid-template-columns: 1.1fr 1fr; }
.am-twin-phone { position: static; background: transparent; box-shadow: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
.am-twin-phone .am-twin-label { align-self: center; margin-bottom: 14px; color: #94a3b8; }
.am-phone { width: 320px; background: #0d1a2c; border: 2px solid #23426b; border-radius: 30px; padding: 16px 14px 18px; box-shadow: 0 30px 70px rgba(11,29,51,.35), 0 0 0 8px rgba(30,136,199,.05); position: relative; }
.am-phone-notch { width: 96px; height: 9px; border-radius: 5px; background: #1d3552; margin: 0 auto 14px; }
.am-phone-state { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: #f7bd51; background: #14243c; border: 1px solid #2a4a72; border-radius: 7px; padding: 7px 10px; margin-bottom: 12px; }
.am-phone-state span:last-child { color: #7c96b1; }
.am-phone-card { background: #14243c; border: 1px solid #1f3a5c; border-radius: 12px; padding: 14px; }
.am-phone-row b { display: block; color: #e8f2fb; font-size: 14px; margin-bottom: 4px; }
.am-phone-row > span { display: block; color: #7c96b1; font-size: 11px; margin-bottom: 12px; }
.am-phone-checks { display: grid; gap: 7px; font-size: 12px; }
.am-phone-checks .on { color: #45c96b; }
.am-phone-checks .bad { color: #ff8d7e; background: rgba(255,109,94,.08); border: 1px dashed rgba(255,141,126,.45); border-radius: 6px; padding: 6px 8px; }
.am-phone-tabs { display: flex; justify-content: space-between; margin-top: 14px; }
.am-phone-tabs b { font-size: 11px; font-weight: 500; color: #7c96b1; padding: 5px 9px; border-radius: 7px; }
.am-phone-tabs b.a { color: #fff; background: #1e88c7; }

/* 缺陷闭环六步流程带 */
.am-loop { display: flex; align-items: stretch; gap: 4px; }
.am-loop-step { flex: 1; text-align: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 10px 16px; transition: all .2s; }
.am-loop-step:hover { border-color: #1e88c7; box-shadow: 0 6px 18px rgba(30,136,199,.14); transform: translateY(-2px); }
.am-loop-step b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #1e88c7; color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 10px; box-shadow: 0 0 0 5px rgba(30,136,199,.12); }
.am-loop-step h3 { font-size: 15px; color: #0f172a; margin: 0 0 6px; }
.am-loop-step p { font-size: 12px; color: #64748b; line-height: 1.6; margin: 0; }
.am-loop-gap { display: flex; align-items: center; color: #1e88c7; font-weight: 700; font-size: 16px; padding: 0 2px; }
.am-loop-note { margin-top: 18px; text-align: center; font-size: 13px; color: #1e88c7; background: rgba(30,136,199,.06); border: 1px dashed rgba(30,136,199,.35); border-radius: 8px; padding: 10px; }

/* 卡片图标 hover 微动效 */
.am-ico { transition: transform .2s; }
.am-card:hover .am-ico, .am-loop-step:hover b { transform: scale(1.1); }

@media (max-width: 900px) {
  .am-triple-rev { grid-template-columns: 1fr; }
  .am-phone { margin: 0 auto; }
  .am-loop { flex-wrap: wrap; }
  .am-loop-step { flex: 1 1 30%; }
  .am-loop-gap { display: none; }
}
@media (max-width: 768px) {
  .am-head-cta { display: none; }
}
/* ===== AnMai R6 增强 (2026-11-11)：行业带/反馈卡/全站质感打磨 ===== */

/* 分区标题装饰竖条 + 渐变大标题 */
.am-head h2, .am-head-row h2 { position: relative; padding-left: 16px; }
.am-head h2::before, .am-head-row h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; border-radius: 3px; background: linear-gradient(180deg, #3fb0e5, #1e88c7); }
.am-head p, .am-head-row p { padding-left: 16px; }
.am-hero h1 { background: linear-gradient(120deg, #0f172a 30%, #12557f 75%, #1e88c7 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #0f172a; }

/* 主按钮扫光 */
.am-btn-p { position: relative; overflow: hidden; }
.am-btn-p::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); }
.am-btn-p:hover::after { animation: am-shine .8s ease; }
@keyframes am-shine { to { left: 130%; } }

/* 顶部活动条渐变升级 */
.am-topbar { background: linear-gradient(90deg, #1670a8 0%, #1e88c7 45%, #2f9fdc 100%); }

/* 行业卡 */
.am-ind { text-align: center; padding: 26px 18px; }
.am-ind .am-ind-ico { display: inline-flex; }
.am-ind .am-ico { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 12px; }
.am-ind .am-ico svg { width: 24px; height: 24px; }
.am-ind h3 { font-size: 16px; margin: 0 0 8px; color: #0f172a; }
.am-ind p { font-size: 13px; margin: 0; color: #64748b; line-height: 1.65; }
.am-ind-foot { margin-top: 18px; text-align: center; font-size: 13px; color: #94a3b8; }

/* 反馈卡 */
.am-voice { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: #fff; }
.am-stars { color: #f7a600; font-size: 14px; letter-spacing: 2px; }
.am-q { font-size: 14.5px; line-height: 1.8; color: #334155; margin: 0; flex: 1; }
.am-voice-who { display: flex; align-items: center; gap: 10px; border-top: 1px dashed #e2e8f0; padding-top: 14px; }
.am-voice-who b { font-size: 13px; color: #64748b; font-weight: 500; }
.am-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #3fb0e5, #1e6fa8); color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* CTA / 数据带 渐变升级 */
.am-cta { background: linear-gradient(135deg, #e8f4fd 0%, #d6ebfa 50%, #c3e0f6 100%); }
.am-stats { background: linear-gradient(135deg, #0b1d33 0%, #123356 100%); }
.am-footer { background: linear-gradient(180deg, #0b1d33 0%, #081527 100%); }

/* 表格行 hover */
.am-cm tbody tr { transition: background .15s; }
.am-cm tbody tr:hover { background: #f5faff; }

/* 页脚链接微动效 */
.am-footer a { transition: all .15s; }
.am-footer a:hover { transform: translateX(3px); }

/* 顶部滚动条美化（页面级） */
.am-cm-wrap::-webkit-scrollbar { height: 8px; }
.am-cm-wrap::-webkit-scrollbar-thumb { background: #c7d9e8; border-radius: 4px; }
.am-cm-wrap::-webkit-scrollbar-thumb:hover { background: #1e88c7; }

/* 卡片区横向节奏：网格内卡片高度对齐 */
.am-grid-3 > .am-card, .am-grid-2 > .am-card, .am-grid-4 > .am-card { display: flex; flex-direction: column; }
.am-grid-3 > .am-card > p:last-child, .am-grid-4 > .am-card > p { flex: 0 0 auto; }
.am-role2 .am-tags, .am-rich .am-tags { margin-top: auto; }

@media (prefers-reduced-motion: reduce) { .am-btn-p:hover::after { animation: none; } }
/* ===== AnMai R7 动效 (2026-11-11)：滚动驱动入场/进度条/微交互 ===== */

/* 平滑滚动 + sticky 头部锚点偏移 */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* 顶部滚动进度条：默认不可见（scaleX 0），支持 view()/scroll() 时才驱动显现 */
.am-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: 0 50%; z-index: 99999; pointer-events: none;
  background: linear-gradient(90deg, #1670a8, #1e88c7 50%, #3fb0e5); }

/* 柱状图入场生长（载入兜底：一次性 stagger） */
.am-bars b, .am-stats-spark span { transform-origin: bottom; animation: am-grow .9s cubic-bezier(.2,.7,.3,1) both; }
.am-bars b:nth-child(2), .am-stats-spark span:nth-child(2) { animation-delay: .07s; }
.am-bars b:nth-child(3), .am-stats-spark span:nth-child(3) { animation-delay: .14s; }
.am-bars b:nth-child(4), .am-stats-spark span:nth-child(4) { animation-delay: .21s; }
.am-bars b:nth-child(5), .am-stats-spark span:nth-child(5) { animation-delay: .28s; }
.am-bars b:nth-child(6), .am-stats-spark span:nth-child(6) { animation-delay: .35s; }
.am-bars b:nth-child(7), .am-stats-spark span:nth-child(7) { animation-delay: .42s; }
.am-stats-spark span:nth-child(8) { animation-delay: .49s; }
@keyframes am-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Hero 光斑缓慢漂移 */
.am-hero-glow.g1 { animation: am-drift1 14s ease-in-out infinite alternate; }
.am-hero-glow.g2 { animation: am-drift2 17s ease-in-out infinite alternate; }
@keyframes am-drift1 { to { transform: translate(70px, 40px) scale(1.15); } }
@keyframes am-drift2 { to { transform: translate(-60px, 30px) scale(.9); } }

/* 手机模拟屏轻微浮动 */
.am-phone { animation: am-float 6.5s ease-in-out infinite alternate; }
@keyframes am-float { to { transform: translateY(-9px); } }

/* 微交互：按压回弹、卡片标题变色、箭头滑移 */
.am-btn { transition: transform .12s, background .2s, border-color .2s, box-shadow .2s; }
.am-btn:active { transform: scale(.96); }
.am-card h3, .am-card-title { transition: color .2s; }
.am-card:hover h3, .am-card:hover .am-card-title { color: #1e88c7; }
.am-card-foot a, .am-more, .am-voice-who { transition: transform .15s, color .15s; }
.am-card-foot a:hover, .am-more:hover { transform: translateX(4px); }
.am-badge-item { transition: transform .2s, border-color .2s, box-shadow .2s; }
.am-badge-item:hover { transform: translateY(-3px); border-color: #1e88c7; box-shadow: 0 6px 18px rgba(30,136,199,.12); }
.am-faq summary { transition: color .15s; }
.am-faq summary:hover { color: #1e88c7; }
.am-faq[open] { box-shadow: 0 6px 20px rgba(30,136,199,.10); border-color: rgba(30,136,199,.4); }

/* 滚动驱动入场（Chrome/Edge 115+）：滚到哪、播到哪；不支持则沿用载入动画 */
@supports (animation-timeline: view()) {
  .am-reveal { animation: am-rise linear both; animation-timeline: view(block); animation-range: entry 0% entry 85%; }
  .am-bars b, .am-stats-spark span { animation: am-grow linear both; animation-timeline: view(block); animation-range: entry 20% cover 40%; }
  .am-progress { transform: none; animation: am-prog linear both; animation-timeline: scroll(root block); }
  @keyframes am-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .am-reveal, .am-bars b, .am-stats-spark span, .am-hero-glow, .am-phone, .am-progress { animation: none !important; }
  .am-bars b, .am-stats-spark span { transform: none !important; }
  .am-progress { display: none; }
  .am-marquee-track { animation: none; }
}
/* ===== AnMai R7b (2026-11-11)：错峰入场与模拟屏滑入（补 R7 缺失项） ===== */
@supports (animation-timeline: view()) {
  /* 网格卡片按列错峰：越靠后 range 越收紧，形成瀑布式入场 */
  .am-grid-2 > .am-card, .am-grid-3 > .am-card, .am-grid-4 > .am-card,
  .am-badge-wall .am-badge-item, .am-versus .am-vs-col {
    animation: am-rise linear both; animation-duration: auto; animation-timeline: view(block); }
  .am-grid-2 > .am-card, .am-grid-3 > :nth-child(3n+1), .am-grid-4 > :nth-child(4n+1), .am-badge-wall :nth-child(4n+1) { animation-range: entry 8% cover 32%; }
  .am-grid-3 > :nth-child(3n+2), .am-grid-4 > :nth-child(4n+2), .am-badge-wall :nth-child(4n+2) { animation-range: entry 14% cover 36%; }
  .am-grid-3 > :nth-child(3n+3), .am-grid-4 > :nth-child(4n+3), .am-badge-wall :nth-child(4n+3) { animation-range: entry 20% cover 40%; }
  .am-grid-4 > :nth-child(4n+4), .am-badge-wall :nth-child(4n+4) { animation-range: entry 26% cover 44%; }
  .am-grid-2 > .am-card:nth-child(2) { animation-range: entry 16% cover 38%; }

  /* 步骤带 / 流程带逐个入场 */
  .am-steps .am-step, .am-loop .am-loop-step, .am-arch-row {
    animation: am-rise linear both; animation-duration: auto; animation-timeline: view(block);
    animation-range: entry 12% cover 36%; }

  /* 驾驶舱模拟屏右滑入、手机模拟屏（外层容器）左滑入，与内部浮动动画分属不同元素不冲突 */
  .am-triple .am-twin:not(.am-twin-phone) { animation: am-slide-r linear both; animation-duration: auto;
    animation-timeline: view(block); animation-range: entry 0% cover 34%; }
  .am-triple-rev .am-twin-phone { animation: am-slide-l linear both; animation-duration: auto;
    animation-timeline: view(block); animation-range: entry 0% cover 34%; }
  @keyframes am-slide-r { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
  @keyframes am-slide-l { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .am-grid-2 > .am-card, .am-grid-3 > .am-card, .am-grid-4 > .am-card, .am-badge-wall .am-badge-item,
  .am-versus .am-vs-col, .am-steps .am-step, .am-loop .am-loop-step, .am-arch-row,
  .am-triple .am-twin, .am-triple-rev .am-twin-phone { animation: none !important; }
}
/* ===== AnMai R8 (2026-11-11)：图标放大与视觉增强 ===== */
/* 核心卡片图标：容器 48px → SVG 26px，背景加深，描边加粗 */
.am-card .am-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(30,136,199,.12);
  color: #1e88c7;
}
.am-card .am-ico svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}
/* mini 卡片图标：容器 40px → SVG 22px */
.am-card.am-mini .am-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.am-card.am-mini .am-ico svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}
/* industry 卡片图标保持圆形但放大 */
.am-card.am-ind .am-ind-ico .am-ico {
  width: 48px;
  height: 48px;
}
.am-card.am-ind .am-ind-ico .am-ico svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}
/* badge 墙图标同步放大 */
.am-badge-item .am-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.am-badge-item .am-ico svg {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}
/* voice 卡片星级放大 */
.am-stars { font-size: 18px; letter-spacing: 2px; color: #f59e0b; margin-bottom: 10px; }
/* card-top 间距适配大图标 */
.am-card-top { gap: 14px; margin-bottom: 14px; }
.am-card-title { font-size: 17px; }

/* ===== AnMai R9 (2026-11-11)：promo 图标统一为 SVG 风格 ===== */
.am-promo-ico {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(30,136,199,.10);
  color: #1e88c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex: 0 0 auto;
  font-size: 0;
  transition: transform .2s, background .2s;
}
.am-promo:hover .am-promo-ico {
  background: rgba(30,136,199,.18);
  transform: scale(1.08);
}
.am-promo-ico svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

/* ===== AnMai R10 (2026-11-11)：修复 am-reveal 发白/遮罩问题 ===== */
/* 问题：animation-fill-mode:both + scroll-driven timeline 导致未滚入视口的元素 opacity:0 */
/* 修复：覆盖为正常可见状态，仅在真正支持且需要时才用 scroll-driven */
.am-reveal {
  animation: am-rise .7s cubic-bezier(.2,.7,.3,1) forwards !important;
  opacity: 1 !important;
  transform: none !important;
}
/* 对支持 scroll-driven 的浏览器，保留滚动效果但确保初始可见 */
@supports (animation-timeline: view()) {
  .am-reveal {
    animation: am-rise linear both !important;
    animation-timeline: view(block) !important;
    animation-range: entry 0% entry 40% !important;
  }
  /* versus 卡片不再单独绑定 scroll timeline，避免双重动画冲突 */
  .am-versus .am-vs-col {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* grid 卡片错峰入场缩短 range，避免长时间不可见 */
  .am-grid-2 > .am-card, .am-grid-3 > .am-card, .am-grid-4 > .am-card,
  .am-badge-wall .am-badge-item {
    animation-range: entry 0% entry 30% !important;
  }
}

/* R12: promo 图标尺寸微调 */
.am-promo .am-ico { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 10px; }
.am-promo .am-ico svg { width: 20px; height: 20px; }

/* ========== News List & Detail – Alibaba Cloud Style ========== */
@layer prvky {

/* --- News List Page Header --- */
.vypis-hlavicka {
    margin-bottom: 36px;
    padding-top: 48px;
    text-align: center;
}
.vypis-hlavicka h1 {
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.vypis-hlavicka h1::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #1e88c7;
    border-radius: 2px;
    margin: 0 auto 20px;
}

/* --- News Grid --- */
.novinky-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 24px;
    margin-bottom: 56px;
}

/* --- News Card --- */
.novinka-karta {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all .25s ease;
    padding: 0;
}
.novinka-karta:hover {
    border-color: #1e88c7;
    box-shadow: 0 8px 24px rgba(30,136,199,.12);
    transform: translateY(-3px);
}
.novinka-karta > :not(.novinka-karta-obrazek) {
    padding-inline: 24px;
}

/* Card image */
.novinka-karta-obrazek img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Card meta info */
.novinka-info {
    margin: 20px 0 8px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.novinka-info time {
    font-variant-numeric: tabular-nums;
}
.novinka-info a {
    color: #1e88c7 !important;
    text-decoration: none;
    font-weight: 500;
}
.novinka-info a:hover {
    text-decoration: underline;
}

/* Card title */
.novinka-karta h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px;
}
.novinka-karta h2 a {
    color: #0f172a !important;
    text-decoration: none;
    transition: color .2s;
}
.novinka-karta h2 a:hover {
    color: #1e88c7 !important;
}

/* Card excerpt */
.novinka-karta .perex {
    font-size: 14px;
    color: #64748b;
    line-height: 1.65;
    margin-bottom: 20px;
}
.novinka-karta .perex p:last-child { margin-bottom: 0; }

/* Container query for wider cards */
@container (min-width: 34rem) {
    .novinka-karta h2 { font-size: 20px; }
}

/* --- News Detail Page --- */
.novinka {
    max-width: none;
    margin-inline: 0;
    padding: 48px 0 64px;
}
/* Readable line width for article body (container is full am-wrap width, content constrained) */
.novinka .novinka-header,
.novinka .perex,
.novinka .text,
.novinka .novinka-stitky,
.novinka .novinka-obrazek {
    max-width: 960px;
    margin-inline: auto;
}

.novinka header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}
.novinka .novinka-info {
    margin: 0 0 16px;
    font-size: 14px;
}
.novinka h1 {
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 0;
}
.novinka .perex {
    font-size: 18px;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 32px;
    padding: 20px 24px;
    background: #f7fafd;
    border-left: 3px solid #1e88c7;
    border-radius: 0 8px 8px 0;
}
.novinka .text {
    font-size: 16px;
    line-height: 1.8;
    color: #334155;
}
.novinka .text p { margin-bottom: 1.4em; }
.novinka .text h2 {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 2em 0 0.6em;
}
.novinka .text h3 {
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
    margin: 1.6em 0 0.5em;
}
.novinka .text a {
    color: #1e88c7 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.novinka .text a:hover {
    text-decoration-thickness: 2px;
}
.novinka .text blockquote {
    margin: 1.6em 0;
    padding: 16px 24px;
    border-left: 3px solid #1e88c7;
    background: #f7fafd;
    border-radius: 0 8px 8px 0;
    color: #475569;
    font-style: italic;
}
.novinka .text img {
    border-radius: 8px;
    margin: 1.6em 0;
}
.novinka .text figure {
    margin: 2em 0;
}
.novinka .text figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: #94a3b8;
    text-align: center;
}

/* Featured image in detail */
.novinka-obrazek {
    margin: 0 0 32px;
    border-radius: 8px;
    overflow: hidden;
}
.novinka-obrazek img {
    width: 100%;
    border-radius: 8px;
}

/* Tags */
.novinka-stitky {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}
.novinka-stitky a {
    padding: 4px 14px;
    border-radius: 999px;
    background: #f0f7ff;
    color: #1e88c7 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
}
.novinka-stitky a:hover {
    background: #1e88c7;
    color: #fff !important;
}

/* Related news */
.souvisejici {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #e2e8f0;
}
.souvisejici h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
}
.souvisejici ul {
    list-style: none;
    padding: 0;
}
.souvisejici li {
    margin-bottom: 12px;
}
.souvisejici a {
    color: #1e88c7 !important;
    text-decoration: none;
    font-weight: 500;
}
.souvisejici a:hover {
    text-decoration: underline;
}



/* Updated timestamp */
.novinka-aktualizovano {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 8px;
}

/* Pagination */
.vypis-stranky {
    max-width: 1200px;
    margin: 0 auto 56px;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.vypis-stranky a, .vypis-stranky span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #334155;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s;
}
.vypis-stranky a:hover {
    border-color: #1e88c7;
    color: #1e88c7;
    background: #f0f7ff;
}
.vypis-stranky .aktivni, .vypis-stranky strong {
    background: #1e88c7;
    border-color: #1e88c7;
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .vypis-hlavicka {
    margin-bottom: 36px;
    padding-top: 48px;
    text-align: center;
}
    .vypis-hlavicka h1 { font-size: 26px; }
    .novinky-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 24px;
    margin-bottom: 56px;
}
    .novinka { padding: 32px 16px 48px; }
    .novinka h1 { font-size: 24px; }
    .novinka .perex { font-size: 16px; padding: 16px 18px; }
}
}

/* ========== News Enhancements – Breadcrumb, Reading Time, CTA, Back-to-Top ========== */
@layer prvky {

/* --- List Page Subtitle --- */
.vypis-popis {
    font-size: 16px;
    color: #64748b;
    margin: 0 auto;
    max-width: 560px;
    line-height: 1.6;
}

/* --- Search Box (Alibaba Cloud style) --- */
.am-search {
    display: flex;
    gap: 0;
    max-width: 480px;
    margin: 24px auto 0;
}
.am-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border: 1px solid #d0d5dd;
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}
.am-search input:focus {
    border-color: #1e88c7;
    box-shadow: 0 0 0 3px rgba(30,136,199,.1);
}
.am-search button {
    padding: 10px 20px;
    border: 1px solid #1e88c7;
    border-radius: 0 6px 6px 0;
    background: #1e88c7;
    color: #fff;
    font: 500 14px/1 inherit;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.am-search button:hover { background: #1670a8; }
.vypis-vysledek {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: #64748b;
}

/* --- Empty State --- */
.am-empty {
    text-align: center;
    padding: 64px 24px;
    color: #94a3b8;
}
.am-empty svg { margin-bottom: 16px; }
.am-empty p { font-size: 16px; margin: 0; }

/* --- Card Body Wrapper --- */
.novinka-karta-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 24px 24px;
}
.novinka-karta > :not(.novinka-karta-obrazek):not(.novinka-karta-body) {
    padding-inline: 24px;
}

/* --- Separator Dot --- */
.novinka-sep {
    color: #cbd5e1;
    user-select: none;
}

/* --- Reading Time Badge --- */
.novinka-read-time {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* --- Read More CTA --- */
.novinka-cta {
    display: inline-block;
    margin-top: auto;
    padding-top: 12px;
    color: #1e88c7 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color .2s;
}
.novinka-cta:hover {
    color: #1670a8 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Breadcrumb --- */
.am-breadcrumb {
    padding-top: 20px;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.5;
}
.am-breadcrumb a {
    color: #64748b !important;
    text-decoration: none;
    transition: color .2s;
}
.am-breadcrumb a:hover { color: #1e88c7 !important; }
.am-breadcrumb [aria-current] {
    color: #334155;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
    display: inline-block;
    vertical-align: bottom;
}
.am-breadcrumb-sep {
    margin: 0 6px;
    color: #cbd5e1;
}

/* --- Detail Header Enhancement --- */
.novinka-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}
.novinka-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
}
.novinka-meta time { font-variant-numeric: tabular-nums; }
.novinka-meta a { color: #1e88c7 !important; text-decoration: none; font-weight: 500; }
.novinka-meta a:hover { text-decoration: underline; }
.novinka-author { font-weight: 500; color: #475569; }

/* --- Tags with Label --- */
.novinka-stitky-label {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
    margin-right: 4px;
}

/* --- Related News Grid --- */
.souvisejici-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 16px;
    margin-top: 16px;
}
.souvisejici-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    transition: all .2s;
}
.souvisejici-card:hover {
    border-color: #1e88c7;
    box-shadow: 0 4px 12px rgba(30,136,199,.1);
    transform: translateY(-1px);
}
.souvisejici-date {
    font-size: 12px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.souvisejici-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
}
.souvisejici-card:hover .souvisejici-title { color: #1e88c7; }

/* --- Back to Top Button --- */
.am-back-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1e88c7;
    color: #fff !important;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(30,136,199,.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .2s, background .2s;
    transform: translateY(8px);
}
.am-back-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.am-back-top:hover {
    background: #1670a8;
    transform: translateY(-2px);
}

/* --- Pagination Enhancement --- */
.strankovani {
    margin-bottom: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.strankovani a, .strankovani span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #334155;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s;
}
.strankovani a:hover {
    border-color: #1e88c7;
    color: #1e88c7;
    background: #f0f7ff;
}
.strankovani [aria-current] {
    background: #f0f7ff;
    border-color: #bcd9ee;
    color: #1e88c7;
    font-weight: 600;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .am-breadcrumb {
    padding-top: 20px;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.5;
}
    .am-breadcrumb [aria-current] { max-width: 160px; }
    .novinka-meta { font-size: 13px; }
    .am-back-top { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 18px; }
    .souvisejici-grid { grid-template-columns: 1fr; }
    .am-search {
    display: flex;
    gap: 0;
    max-width: 480px;
    margin: 24px auto 0;
}
}
}

/* ========== News List – Blog-style Cards ========== */
@layer prvky {

/* News card as link: reset anchor defaults, keep card styling */
a.am-news-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.am-news-card:hover {
    border-color: #1e88c7;
    box-shadow: 0 6px 20px rgba(30,136,199,.12);
    transform: translateY(-2px);
}
a.am-news-card .am-card-title {
    transition: color .2s;
}
a.am-news-card:hover .am-card-title {
    color: #1e88c7;
}
a.am-news-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 12px;
    flex: 1;
}
a.am-news-card .am-tags {
    margin-top: auto;
}

/* Hero search box (centered, white bg) */
.am-search-hero {
    display: flex;
    gap: 0;
    max-width: 480px;
    margin: 24px auto 0;
}
.am-search-hero input {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: 1px solid #d0d5dd;
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color .2s;
}
.am-search-hero input:focus {
    border-color: #1e88c7;
    box-shadow: 0 0 0 3px rgba(30,136,199,.12);
}
.am-search-hero button {
    padding: 12px 24px;
    border: 1px solid #1e88c7;
    border-radius: 0 6px 6px 0;
    background: #1e88c7;
    color: #fff;
    font: 600 15px/1 inherit;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.am-search-hero button:hover { background: #1670a8; }

/* Responsive: 2 cols on tablet, 1 on mobile */
@media (max-width: 900px) {
    .am-news-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .am-news-grid { grid-template-columns: 1fr !important; }
    .am-search-hero { max-width: 100%; }
}
}


/* ========== Header Navigation Button Position ========== */
@layer prvky {

/* Desktop: ensure nav-tl stays hidden, CTA visible */
@media (min-width: 769px) {
    .ka-nav-tl { display: none !important; }
    .am-head-cta { display: flex !important; }
}

/* Mobile: hamburger button pinned to right edge */
@media (max-width: 768px) {
    /* Header inner flex container */
    #s-ff9c148 {
        gap: 8px;
    }

    /* Logo: prevent shrinking */
    .ka-logo {
        flex-shrink: 0;
        height: 2.25rem;
    }
    .ka-logo img {
        height: 100%;
        width: auto;
    }

    /* Nav wrapper: push to right */
    .ka-nav {
        margin-inline-start: auto;
        flex-shrink: 0;
    }

    /* Hamburger button: consistent size and position */
    .ka-nav-tl {
        width: 2.5rem !important;
        height: 2.5rem !important;
        border-radius: 6px !important;
        border: 1px solid #d0d5dd !important;
        background: #fff !important;
    }
    .ka-nav-tl span,
    .ka-nav-tl span::before,
    .ka-nav-tl span::after {
        width: 1rem !important;
        height: 2px !important;
    }
    .ka-nav-tl span::before { top: -5px !important; }
    .ka-nav-tl span::after { top: 5px !important; }

    /* Hide CTA on mobile */
    .am-head-cta { display: none !important; }

    /* Mobile menu panel styling */
    .ka-nav-menu[popover] {
        inset: 3.5rem var(--ka-mezera-m) auto !important;
        max-height: calc(100dvh - 4.5rem) !important;
        border-radius: 8px !important;
    }
    .ka-nav-menu[popover] ul {
        flex-direction: column !important;
        gap: 2px !important;
    }
    .ka-nav-menu[popover] a {
        padding: 10px 14px !important;
        font-size: 15px !important;
        border-radius: 6px !important;
    }
}

/* Small mobile */
@media (max-width: 400px) {
    .ka-logo { height: 2rem; }
    .ka-nav-tl {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    .ka-nav-tl span,
    .ka-nav-tl span::before,
    .ka-nav-tl span::after {
        width: 0.9rem !important;
    }
}
}