/* =========================================================
   Entangle Base — mapping native blocks onto the design + small blocks
   ========================================================= */

/* ---- Sticky header: on the template-part wrapper (spans the full page height) ---- */
.site-header-slot {
	position: sticky;
	top: 0;
	z-index: 50;
}
/* don't slip under the admin bar when an admin is logged in */
.admin-bar .site-header-slot { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header-slot { top: 46px; }
}
/* inner .site-header no longer needs to be sticky (the slot handles it) */
.site-header { position: static; }

/* ---- Header: custom logo (core) as .brand ---- */
.site-header .custom-logo-link,
.site-header .brand { display: inline-flex; align-items: center; }
.site-header .custom-logo,
.site-header .brand img { height: var(--logo-h); width: auto; transition: height 220ms ease; }
.site-header.is-stuck .custom-logo,
.site-header.is-stuck .brand img { height: var(--logo-h-stuck); }

/* ---- Header: classic menu (wp_nav_menu) as .nav / .nav__link ---- */
.site-header .nav__list {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.4vw, 40px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-header .nav__list li { margin: 0; }
.site-header .nav__list a {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--color-brand);
	position: relative;
	padding-block: 6px;
	display: inline-block;
}
.site-header .nav__lang { font-size: 1.0625rem; }
.site-header .nav__list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--color-brand);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s var(--ease-emphasized);
}
.site-header .nav__list a:hover::after,
.site-header .nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* mobile overlay menu (wp_nav_menu) */
.menu-overlay__list { list-style: none; margin: 0; padding: 0; }
.menu-overlay__list li { margin: 0; }

/* ---- Footer: vertical rhythm of sections ----
   Sections follow one another (separated by a rule) — we remove block gaps (blockGap)
   between group blocks and unify the vertical paddings. */
.site-footer > .footer-cta,
.site-footer > .footer-social,
.site-footer > .footer-colophon { margin-block: 0 !important; }

.footer-cta { padding-block: clamp(64px, 7vw, 104px) clamp(48px, 5vw, 80px) !important; }
.footer-social { padding-block: 24px !important; }
.footer-colophon { padding-block: 28px !important; }

@media (max-width: 768px) {
	.footer-cta { padding-block: clamp(48px, 9vw, 72px) clamp(32px, 6vw, 48px) !important; }
	.footer-social { padding-block: 20px !important; }
	.footer-colophon { padding-block: 24px !important; }
}

/* ---- Footer: Social links (core) — white icons, subtle translucent background ----
   !important overrides the core/social-links block styles (incl. inline colors
   from theme.json), which have their own specificity. Legitimate override, do not remove. */
.footer-social__inner { align-items: center !important; }
.footer-social__label { margin: 0 !important; align-self: center; }
.footer-social .wp-block-social-links {
	gap: 12px;
	margin: 0;
	padding: 0;
	align-items: center;
}
/* circular background only slightly translucent (not the whole icon) */
.footer-social .wp-block-social-link,
.footer-social li.wp-block-social-link {
	background: rgba(255, 255, 255, 0.10) !important;
	border-radius: var(--radius-full) !important;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	transition: background .2s ease, transform .2s ease;
}
.footer-social .wp-block-social-link a,
.footer-social .wp-block-social-link-anchor {
	color: var(--color-on-brand) !important;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* the icon itself fully white (opaque) */
.footer-social .wp-block-social-link svg {
	width: 18px;
	height: 18px;
	fill: var(--color-on-brand) !important;
	color: var(--color-on-brand) !important;
	opacity: 1 !important;
}
.footer-social .wp-block-social-link:hover {
	background: #fff !important;
	transform: translateY(-1px);
}
.footer-social .wp-block-social-link:hover svg { fill: var(--color-brand) !important; color: var(--color-brand) !important; }

/* ---- entangle/cards — neutral default skin ----
   The generic card set: settings-driven (grid/carousel, columns, icon size,
   hover) via wrapper modifiers + CSS vars from render.php. This is the
   framework default a child may refine (mesto keeps a brand skin) — kept
   token-only so a rebrand recolors it. ---- */
.wp-block-entangle-cards { --card-icon-size: 54px; }
.wp-block-entangle-cards .card__icon { width: var(--card-icon-size, 54px); height: var(--card-icon-size, 54px); margin-bottom: 16px; object-fit: contain; }

.cards--grid { display: grid; gap: var(--grid-gap); }
.cards--cols-1 { grid-template-columns: 1fr; }
.cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .cards--cols-3, .cards--cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards--grid { grid-template-columns: 1fr; } }

.cards--carousel { position: relative; display: block; }
.cards--carousel .cards__track { display: flex; gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.cards--carousel .cards__track::-webkit-scrollbar { display: none; }
.cards--carousel .card { flex: 0 0 max(240px, calc((min(100vw, var(--container)) - 2 * var(--gutter) - (var(--cards-cols, 3) - 1) * var(--grid-gap)) / var(--cards-cols, 3))); scroll-snap-align: start; }
.cards--carousel .arrow-group { display: flex; justify-content: flex-end; gap: 12px; margin: 0 0 18px; }

.wp-block-entangle-cards .card { display: flex; flex-direction: column; background: var(--color-card); border: 1px solid var(--color-rule); border-radius: var(--radius); padding: 26px 24px; transition: transform .16s ease, border-color .16s ease; }
.wp-block-entangle-cards a.card { text-decoration: none; color: inherit; }
.wp-block-entangle-cards .card__tag { display: block; font-family: var(--font-sans); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 14px; }
.wp-block-entangle-cards .card__title { display: block; font-family: var(--font-serif); font-weight: 400; line-height: 1.14; letter-spacing: -.01em; margin: 0 0 10px; }
.wp-block-entangle-cards .card__meta { margin: 0 0 12px; font-family: var(--font-sans); font-size: .8125rem; letter-spacing: .01em; color: var(--color-ink-soft); }
.wp-block-entangle-cards .card__text { margin: 0; color: var(--color-ink-soft); }
.wp-block-entangle-cards .card__take { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--color-rule); line-height: 1.35; font-size: .9375rem; }
.wp-block-entangle-cards .card__take b { font-family: var(--font-sans); font-weight: 700; color: var(--color-ink); }
.wp-block-entangle-cards .card__take b::after { content: ": "; }
.wp-block-entangle-cards .card__take span { font-family: var(--font-sans); color: var(--color-ink-soft); }
.wp-block-entangle-cards .card__more { margin-top: 12px; align-self: flex-start; font-weight: 400; color: var(--color-brand-deep); border-bottom: 1px solid var(--color-brand-deep); }
.cards--hover-lift .card:hover { transform: translateY(-3px); }
.cards--hover-lift-brand .card:hover { transform: translateY(-3px); border-color: var(--color-brand); }
.cards--hover-lift-brand .card:hover .card__more { color: var(--color-brand); border-color: var(--color-brand); }

/* ---- Material Symbols icons ---- */
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ---- entangle/logo-carousel — marquee of partner logos ---- */
.wp-block-entangle-logo-carousel .logo-carousel__marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wp-block-entangle-logo-carousel .logo-carousel__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: entangle-marquee var(--marquee-duration, 30s) linear infinite;
}
.wp-block-entangle-logo-carousel .logo-carousel__marquee:hover .logo-carousel__track { animation-play-state: paused; }
.wp-block-entangle-logo-carousel .logo-carousel__dup { display: contents; }
/* Spacing as margin (not gap) → both halves equally wide, translateX(-50%) fits seamlessly. */
.wp-block-entangle-logo-carousel .partner-logo { display: inline-flex; align-items: center; margin-inline-end: clamp(40px, 6vw, 96px); }
.wp-block-entangle-logo-carousel .partner-logo img {
	height: calc(var(--logo-h, 40px) * var(--logo-scale, 1));
	width: auto;
	display: block;
}
@keyframes entangle-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-entangle-logo-carousel .logo-carousel__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
	.wp-block-entangle-logo-carousel .logo-carousel__dup { display: none; }
}
/* editor: static preview of logos */
.wp-block-entangle-logo-carousel .logo-carousel__track--static { flex-wrap: wrap; width: auto; animation: none; }
.wp-block-entangle-logo-carousel .partner-logo { position: relative; }
.wp-block-entangle-logo-carousel .partner-logo__remove {
	position: absolute; top: -8px; right: -8px;
	width: 18px; height: 18px; border-radius: var(--radius-full);
	border: 0; background: var(--color-brand); color: var(--color-on-brand); cursor: pointer;
	font-size: 0.75rem; line-height: 1; display: none;
}
.wp-block-entangle-logo-carousel .partner-logo:hover .partner-logo__remove { display: block; }

/* ---- Editor: page title indentation (gutter like content) ---- */
.editor-styles-wrapper .editor-post-title,
.editor-styles-wrapper .wp-block-post-title,
.edit-post-visual-editor__post-title-wrapper .editor-post-title__input {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	box-sizing: border-box;
}


/* =========================================================
   Project detail (single-projekt) — 2-column hero + centered content
   ========================================================= */
.project-hero,
.post-hero { padding-block: clamp(10px, 1.3vw, 22px) clamp(20px, 3vw, 40px); }
.project-hero__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 0;
	align-items: center;
}
.project-hero__text { align-self: center; grid-column: 1 / 3; padding-right: clamp(24px, 3vw, 56px); }
.project-hero__media { grid-column: 3 / 4; }
@media (min-width: 1500px) {
	.project-hero__grid { grid-template-columns: repeat(4, 1fr); }
	.project-hero__text { grid-column: 1 / 3; }
	.project-hero__media { grid-column: 3 / 5; }
}
.project-hero__cat {
	display: block;
	font-size: clamp(0.8125rem, 1vw, 0.875rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-brand);
	margin: 0 0 clamp(22px, 2.6vw, 32px);
}
.project-hero__cat a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color .15s ease;
}
.project-hero__cat a:hover { color: var(--color-brand-deep); }
.project-hero__title { margin: 0; }
.project-hero__lead {
	margin: clamp(16px, 2vw, 24px) 0 0;
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--color-ink);
	max-width: 48ch;
}
.project-hero__media { margin: 0; }
.project-hero__media img,
.project-hero__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-media);
	aspect-ratio: 6 / 4;
}
/* Status „Probíhající" in green, „Dokončený" in dark gray */
.project-status--probihajici { color: var(--color-status-running); }
.project-status--dokonceny { color: var(--color-status-done); }

.project-body { padding-block: clamp(40px, 5vw, 72px) clamp(64px, 9vw, 128px); }
/* Mask the background grid (.entangle-vgrid) under the centered post content
   (blog, projekt, nabídka) — a page-bg strip behind the content column, full
   section height incl. padding; raster lines outside the strip stay visible.
   Same principle as entangle/side-section.
   z-index: 0 makes the section a stacking context, so the z:-1 pseudos sit
   above the section's own background but below the text. */
.project-body { position: relative; z-index: 0; }
.project-body::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
	width: min(860px, calc(100% - 2 * var(--gutter, 40px)));
	background: var(--color-bg);
	z-index: -1;
}
/* outer raster lines redrawn on top of the strip (relevant once the strip
   spans the full content width on smaller screens) */
.project-body::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--gutter, 40px);
	right: var(--gutter, 40px);
	border-left: 1px solid var(--color-rule);
	border-right: 1px solid var(--color-rule);
	z-index: -1;
	pointer-events: none;
}
@media (max-width: 600px) {
	/* the background grid is hidden below 600px — hide the redrawn lines too */
	.project-body::after { display: none; }
}
/* „Příklady projektů" in the service detail — tighten spacing below the text */
.project-body:has( + .project-examples ) { padding-bottom: clamp(24px, 3vw, 48px); }


.project-body .wp-block-post-content > * { margin-block: clamp(18px, 2vw, 28px); }

@media (max-width: 880px) {
	/* full-width section + image right below the header (overrides the design-system spacing);
	   the gutter is returned only to the text, so the image aligns with the screen edge without 100vw/scrollbar */
	.project-hero { padding-top: 0 !important; padding-inline: 0 !important; border-bottom: 1px solid var(--color-rule); }
	.project-hero__grid { grid-template-columns: 1fr; row-gap: clamp(24px, 5vw, 36px); }
	.project-hero__text { grid-column: auto; padding-inline: var(--gutter); }
	.project-hero__media { grid-column: auto; order: -1; }
	.project-hero__cat { font-size: 0.75rem; margin-bottom: 16px; }
}

/* =========================================================
   Article detail (single) — title + date, photo as a band
   precisely aligned to the vertical background grid (below the title)
   ========================================================= */
.post-hero__date {
	display: block;
	font-size: clamp(0.8125rem, 1vw, 0.875rem);
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--color-brand);
	margin: 0 0 clamp(18px, 2.2vw, 26px);
}
.post-hero__head { margin: 0; }
.post-hero__title { margin: 0; }
/* Photo in a grid matching the background; band = inner columns (on 4 columns, 2nd–4th) */
.post-hero__media {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 0;
	margin-top: clamp(28px, 3.6vw, 52px);
}
.post-hero__media .post-hero__img { margin: 0; grid-column: 2 / 3; }
.post-hero__media .post-hero__img img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: var(--radius-media);
	aspect-ratio: 16 / 9;
}
@media (min-width: 1500px) {
	.post-hero__media { grid-template-columns: repeat(4, 1fr); }
	.post-hero__media .post-hero__img { grid-column: 2 / 4; }
}
@media (max-width: 1024px) {
	.post-hero__media { grid-template-columns: repeat(2, 1fr); }
	.post-hero__media .post-hero__img { grid-column: 1 / -1; }
}

/* ---- Uniform vertical rhythm of subpages (page-no-title) ----
   The same spacing between all sections and above the footer. Spacing is handled solely
   by symmetric section padding; block gaps (blockGap) are zeroed out so they
   don't add up. Above the footer, the main content's padding adds the same spacing. */
.page-template-page-no-title { --entangle-sec-y: var(--wp--preset--spacing--70); }
/* Default rhythm (sections handle paddings) — WITHOUT !important, so it can be overridden
   by a custom block spacing in the editor (the inline style then wins). */
.page-template-page-no-title .wp-block-post-content > * { margin-block: 0; }
.page-template-page-no-title .page-hero {
	padding-block: var(--wp--preset--spacing--80) var(--entangle-sec-y);
}
.page-template-page-no-title .service,
.page-template-page-no-title .projects,
.page-template-page-no-title .blog,
.page-template-page-no-title .team,
.page-template-page-no-title .testimonials,
.page-template-page-no-title .pub-section,
.page-template-page-no-title .about-section,
.page-template-page-no-title .page-section {
	padding-block: var(--entangle-sec-y);
}
.page-template-page-no-title .site-main { padding-bottom: var(--entangle-sec-y); }

/* ---- Uniform vertical rhythm of the homepage (.home) — same as subpages ---- */
.home { --entangle-sec-y: var(--wp--preset--spacing--70); }
.home .wp-block-post-content > * { margin-block: 0; }
.home .hero { --hero-air: var(--wp--preset--spacing--80); }
.home .stats,
.home .logo-carousel,
.home .projects,
.home .service,
.home .testimonials,
.home .blog,
.home .team {
	padding-block: var(--entangle-sec-y);
}
.home .site-main { padding-bottom: var(--entangle-sec-y); }

/* ---- Spacing above the footer — uniform, same as the footer's top spacing ----
   The last content block doesn't add its own bottom spacing (otherwise it would double);
   the uniform spacing is provided by the main content's padding-bottom = the footer's padding-top.
   Can be disabled with the .entangle-flush-footer class (on <body> via page settings,
   or on .site-main in the template) — then the last block aligns with the footer. */
:root { --entangle-footer-space: clamp(64px, 7vw, 104px); }
@media (max-width: 768px) { :root { --entangle-footer-space: clamp(48px, 9vw, 72px); } }

.site-main { padding-bottom: var(--entangle-footer-space) !important; }
.footer-cta { padding-top: var(--entangle-footer-space) !important; }
.site-main > :last-child,
.site-main .wp-block-post-content > :last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}
body.entangle-flush-footer .site-main,
.site-main.entangle-flush-footer { padding-bottom: 0 !important; }

/* ---- Homepage: no rules between sections (only above the big numbers), numbers closer to the hero ---- */
.home .service,
.home .testimonials,
.home .blog,
.home .team,
.home .logo-carousel,
.home .projects { border-top: 0 !important; }
.home .stats { padding-top: clamp(16px, 2vw, 28px); }

/* ---- No rule between the hero/subheading and the content (subpages and details) ---- */
.page-hero { border-bottom: 0 !important; }
/* ---- Testimonials: no horizontal rules above individual quotes ---- */
.testimonial { border-top: 0; padding-top: 0; }

/* ---- Systematic merging of doubled hairline rules between sections ----
   A section with a bottom rule (page-hero, page-section) forms a divider; the following
   section therefore doesn't add a top rule → at the boundary there's always just one line. */
.page-hero + *,
.page-section + * { border-top: 0 !important; }

/* ---- No horizontal rule below the publications widget ---- */
.wp-block-entangle-publications { border-bottom: 0 !important; }
.wp-block-entangle-publications + * { border-top: 0 !important; }

/* ---- Section ending with the PDF list: the list draws its own bottom border,
   so the section's full-width rule would double it ---- */
.page-section:has(.wp-block-entangle-download-list:last-child) { border-bottom: 0; }

/* ---- About section (O nás) — no rules, tuned vertical padding ----
   White/gray blocks are separated by the alternating background; the border-bottom was redundant and formed
   two lines in a row with the team's top rule. */
.about-section,
.about-section--soft {
	border: 0 !important;
	padding-block: clamp(48px, 6vw, 96px);
}
/* team right after the about section — no top rule (otherwise a double edge);
   on the homepage (after a different section) the subtle divider is kept */
.about-section + .wp-block-entangle-team { border-top: 0 !important; }

/* =========================================================
   Publication detail — content on the left, sticky preview image on the right
   ========================================================= */
.pub-detail { padding-block: clamp(24px, 3vw, 56px) clamp(56px, 8vw, 120px); }
/* Aligned to the background grid (.entangle-vgrid): default 3 columns, ≥1500 4 columns.
   Image = always the last column; the rule between text and image is provided by the show-through
   grid in the background (hence no own border, so it doesn't double). */
.pub-detail__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 0;
	align-items: start;
}
.pub-detail__main {
	grid-column: 1 / 3; /* all columns except the last */
	padding-right: clamp(24px, 2.5vw, 40px);
	/* mask the background grid under the text; the raster lines at this column's
	   edges (incl. the text/image separator) are redrawn by ::after — z-index: 0
	   makes this a stacking context so the z:-1 pseudo sits above the background
	   but below the text */
	position: relative;
	z-index: 0;
	background: var(--color-bg);
}
.pub-detail__main::after {
	content: "";
	position: absolute;
	inset: 0;
	border-left: 1px solid var(--color-rule);
	border-right: 1px solid var(--color-rule);
	z-index: -1;
	pointer-events: none;
}
@media (max-width: 600px) {
	.pub-detail__main::after { display: none; }
}
/* On the frontend the content width is controlled by the grid (.pub-detail__main), not the constrained layout
   (that's for the editor). We therefore let the children fill and align left. */
.pub-detail__main .wp-block-post-content > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.pub-detail__title { margin: 0 0 clamp(20px, 2.5vw, 36px); }
.pub-detail__main > * { margin-block: clamp(16px, 2vw, 26px); }
.pub-detail__main > .pub-detail__cat { margin: 0 0 clamp(18px, 2vw, 26px); }
.pub-detail__main > .pub-detail__title { margin-top: 0; }
/* eyebrow „Publikace" above the title (uppercase, underline) */
.pub-detail__cat {
	font-size: clamp(0.8125rem, 1vw, 0.875rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-brand);
}
.pub-detail__cat a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color .15s ease;
}
.pub-detail__cat a:hover { color: var(--color-brand-deep); }
.pub-detail__media {
	grid-column: 3 / 4; /* last column (3-col default) */
	position: sticky; /* image aligns directly with the rule (column edge), without a gap */
	top: 104px;
	align-self: start;
	margin: 0;
}
/* ≥1500 px: background 4 columns. Text area = 3 columns (1–3), image 4.
   Inside: title ~2.5 columns, content only 2 columns. */
@media (min-width: 1500px) {
	.pub-detail__grid { grid-template-columns: repeat(4, 1fr); }
	.pub-detail__main { grid-column: 1 / 4; padding-right: 0; }
	.pub-detail__media { grid-column: 4 / 5; }
	.pub-detail__title { max-width: 83.3333%; } /* 2.5 of 3 columns */
	.pub-detail__main .wp-block-post-content { max-width: 66.6667%; } /* 2 of 3 columns */
}
.pub-detail__img,
.pub-detail__media .wp-block-post-featured-image { margin: 0; }
.pub-detail__img img,
.pub-detail__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 210 / 297; /* A4 portrait */
	object-fit: cover;
	display: block;
	border-radius: var(--radius-media);
}
/* don't slip under the sticky header (+ admin bar) */
.admin-bar .pub-detail__media { top: 136px; }

@media (max-width: 1024px) {
	.pub-detail__grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
	.pub-detail__main { grid-column: 1 / -1; padding-right: 0; }
	.pub-detail__media { grid-column: 1 / -1; position: static; order: -1; padding-left: 0; }
	.pub-detail__img img,
	.pub-detail__media img { width: 50%; height: auto; max-height: none; }
}

/* ---- Eyebrow above the subpage title — larger ---- */
.page-hero .page-hero__eyebrow,
.editor-styles-wrapper .page-hero__eyebrow {
	font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
	letter-spacing: 0.17em;
	margin-bottom: clamp(14px, 1.6vw, 20px);
}

/* ---- More vertical space around images and galleries in the content ---- */
.wp-block-post-content > .wp-block-image,
.wp-block-post-content > .wp-block-gallery,
.editor-styles-wrapper .wp-block-post-content > .wp-block-image,
.editor-styles-wrapper .wp-block-post-content > .wp-block-gallery {
	margin-block: clamp(40px, 5vw, 72px);
}

/* ---- Group blocks restyled to a grid: zero out the item blockGap margin ----
   (WP adds is-layout-flow to the group block → margin-top on the 2nd+ child; in a grid it
   shifts cells down and breaks alignment, e.g. the first stats number was higher). */
.stats__grid > *,
.about-grid > * { margin-block: 0 !important; }
/* stats without vertical divider rules */
.stats__item,
.stats__item:nth-child(odd) { border-right: 0 !important; }

/* ---- Larger titles in cards + member name (uniformly, normal weight) ---- */
.project-card .project-card__title,
.blog-card .blog-card__title,
.pub-card .pub-card__title,
.member .member__name {
	font-size: clamp(1.375rem, 1.7vw, 1.75rem);
	font-weight: 400;
	line-height: 1.25;
}
/* member name a bit larger than the other cards */
.member .member__name { font-size: clamp(1.625rem, 2vw, 2.125rem); }

/* ---- Cards: 6/4 ratio, image zoom + title color change on hover of the whole card ---- */
.project-card__media,
.blog-card__media,
.pub-card__media {
	aspect-ratio: 6 / 4;
	overflow: hidden;
	display: block;
}
.project-card__media img,
.blog-card__media img,
.pub-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease-emphasized);
}
.project-card:hover .project-card__media img,
.blog-card:hover .blog-card__media img,
.pub-card:hover .pub-card__media img { transform: scale(1.06); }
.project-card:hover .project-card__title,
.project-card:hover .project-card__title a,
.blog-card:hover .blog-card__title,
.blog-card:hover .blog-card__title a,
.pub-card:hover .pub-card__title,
.pub-card:hover .pub-card__title a { color: var(--color-brand); }

/* ---- Publications: A4 portrait ratio, smaller description, vertical rhythm ---- */
.pub-card .pub-card__media { aspect-ratio: 210 / 297; }
.pub-card { gap: 0; }
.pub-card .pub-card__media { margin-bottom: 16px; }
.pub-card .pub-card__title { margin: 0; }
.pub-card .pub-card__copy {
	margin: 8px 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-ink);
}

/* ---- Generic card carousel (posts / publications at the bottom of the detail) ---- */
.entangle-cards-carousel {
	display: flex;
	gap: clamp(20px, 2.4vw, 40px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}
.entangle-cards-carousel::-webkit-scrollbar { display: none; }
.entangle-cards-carousel > * {
	flex: 0 0 clamp(260px, 30%, 360px);
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Goals (bullet-list): no horizontal separators between items */
.bullet-list li,
.bullet-list li:last-child { border-top: 0 !important; border-bottom: 0 !important; }

/* About section (O nás, Kontakt): label | content aligned to the grid.
   Label = 1st column, content starts at the 2nd line (25% on 4-col, 33.3% on 3-col). */
.about-grid {
	grid-template-columns: repeat(3, 1fr) !important;
	column-gap: 0 !important;
	align-items: start;
}
.about-grid > :first-child { grid-column: 1 / 2; padding-right: clamp(24px, 3vw, 56px); }
.about-grid > :nth-child(2) { grid-column: 2 / 4; }
@media (min-width: 1500px) {
	.about-grid { grid-template-columns: repeat(4, 1fr) !important; }
	.about-grid > :nth-child(2) { grid-column: 2 / 5; }
}
@media (max-width: 1024px) {
	.about-grid { grid-template-columns: 1fr !important; }
	.about-grid > :first-child { grid-column: auto; padding-right: 0; }
	.about-grid > :nth-child(2) { grid-column: auto; }
}

/* ---- O nás: two photos side by side (on mobile/tablet only the first) ---- */
.about-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
	row-gap: clamp(16px, 2vw, 32px);
	margin-top: clamp(40px, 5vw, 72px);
}
.about-photos > * { margin-block: 0 !important; padding-inline: 20px; }
.about-photos figure { margin: 0; }
.about-photos img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
@media (max-width: 1024px) {
	.about-photos { grid-template-columns: 1fr; }
	.about-photos > * { padding-inline: 0; }
	.about-photos > :nth-child(2) { display: none; }
}

/* ---- Hero carousel (entangle/hero-slider) — fade ease-in-out ---- */
.hero-slider { position: relative; }
.hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}
.hero-slider__slide.is-active { opacity: 1; }
.hero-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: none;
}

/* ---- Hero bottom: photo aligned to the grid (column-gap 0 → edges on the rules) ----
   3 columns (desktop): text in the 1st column, photo from the 2nd line (33.3%).
   4 columns (≥1500): text 2 columns, photo from the 3rd line (50%). */
.hero__lower {
	grid-template-columns: repeat(3, 1fr) !important;
	column-gap: 0 !important;
	align-items: start;
}
.hero__intro { grid-column: 1 / 2; padding-right: clamp(24px, 3vw, 56px); }
.hero__media-wrap { grid-column: 2 / 4; }
@media (min-width: 1500px) {
	.hero__lower { grid-template-columns: repeat(4, 1fr) !important; }
	.hero__intro { grid-column: 1 / 3; }
	.hero__media-wrap { grid-column: 3 / 5; }
}
@media (max-width: 880px) {
	.hero__lower { grid-template-columns: 1fr !important; }
	.hero__intro { grid-column: auto; padding-right: 0; }
	.hero__media-wrap { grid-column: auto; }
}

/* ---- Hero subheading same size as the subpage lead, smaller on mobile ---- */
.hero .hero__sub {
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.5;
	max-width: 460px;
}
@media (max-width: 880px) {
	.hero .hero__sub { font-size: 1rem; }
}

/* ---- Hero sticky note: optional announcement in the intro column ----
   Squarish yellow note on desktop (intro column = 1/3, 1/4 on wide), full-width
   flatter rectangle on mobile. Linked variant lifts up on hover and shows an arrow. */
.hero__note {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	min-height: 260px;
	margin-top: var(--wp--preset--spacing--70, 48px);
	padding: 26px 28px 48px;
	background:
		linear-gradient(168deg, #fff6a3 0%, #ffe97a 78%, #f5d95c 100%);
	color: var(--color-ink, #18181b);
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	/* Same cut and size as .hero__sub (lead preset). */
	font-size: var(--wp--preset--font-size--lead, clamp(1.125rem, 1.6vw, 1.375rem));
	line-height: 1.5;
	font-weight: 400;
	text-decoration: none;
	transform: rotate(-1.5deg);
	box-shadow:
		0 1px 2px rgba(24, 24, 27, 0.08),
		0 8px 18px rgba(24, 24, 27, 0.14);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero__note-text { white-space: pre-line; }
.hero__note-arrow {
	position: absolute;
	right: 16px;
	bottom: 14px;
	width: 16px;
	height: 16px;
	color: rgba(24, 24, 27, 0.55);
}
/* ≥1500: the intro spans 2 of 4 columns — cap the note at one column's width. */
@media (min-width: 1500px) {
	.hero__note { max-width: 50%; }
}
a.hero__note--link:hover,
a.hero__note--link:focus-visible {
	transform: rotate(-1.5deg) translateY(-6px);
	box-shadow:
		0 2px 4px rgba(24, 24, 27, 0.08),
		0 14px 26px rgba(24, 24, 27, 0.18);
	color: var(--color-ink, #18181b);
}
@media (max-width: 880px) {
	.hero__note {
		max-width: none;
		min-height: 0;
		padding: 18px 20px 34px;
		transform: rotate(-0.6deg);
		font-size: 1rem; /* mirrors .hero__sub on mobile */
	}
}

/* ---- Footer CTA: title (size via preset, so it can be changed in the editor) ---- */
.footer-cta .footer-cta__title {
	line-height: 0.98;
	letter-spacing: -0.025em;
}
.footer-cta .footer-cta__lead {
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.5;
	max-width: 520px;
}

/* ---- Content grids aligned to the 4-column background grid ----
   The gap between columns is made with padding inside the cards (column-gap: 0), so the cell
   edges fall on 1/4 = the background rules. Columns 4 → 2 → 1 (3 skipped — can't align to 4).

   De-!important funnel: ONE consumer rule reads layout from custom properties; each tier below
   just SETS those props at its natural specificity — no !important. Cascade order is held by
   specificity alone: plain grid (0,1,0) < carousel .home/.single-* (0,2,0) < static team (0,3,0).
   Only one --grid-cols wins per element, so the old collision (repeat(3) beating carousel none)
   is impossible. A child reskins by setting --grid-* on the grid. */
.projects__grid,
.blog__grid,
.pub__grid,
.team__grid {
	display: grid;
	grid-template-columns: var(--grid-cols, repeat(3, 1fr));
	grid-auto-flow: var(--grid-flow, row);
	grid-auto-columns: var(--grid-auto-cols, auto);
	column-gap: var(--grid-col-gap, var(--grid-gap));
	row-gap: var(--grid-row-gap, clamp(40px, 4vw, 64px));
}
/* Cells sit edge to edge on the grid; the gap IS the space between them.
   (The old Agora look — column-gap 0 + padding inside cells so content
   lined up with the decorative vgrid — moved to agora-child.) */
.projects__grid > *,
.blog__grid > *,
.pub__grid > *,
.team__grid > * { padding-inline: var(--card-pad, 0); }
@media (min-width: 1500px) {
	.projects__grid,
	.blog__grid,
	.pub__grid { --grid-cols: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
	.projects__grid,
	.blog__grid,
	.pub__grid { --grid-cols: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.projects__grid,
	.blog__grid,
	.pub__grid { --grid-cols: 1fr; }
	.projects__grid > *,
	.blog__grid > *,
	.pub__grid > * { --card-pad: 0; }
}

/* ---- Carousel mode (homepage): cells 25/33/50% aligned to the grid + horizontal scroll.
   „Další projekty", „Příklady projektů", the team, „Další publikace". Sets funnel props at (0,2,0). */
.single-projekt .projects__grid,
.home .projects__grid,
.wp-block-entangle-project-examples .projects__grid,
.team__grid,
.single-publikace .pub__grid {
	--grid-cols: none;
	--grid-flow: column;
	--grid-auto-cols: 33.3333%;
	--grid-col-gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.single-projekt .projects__grid::-webkit-scrollbar,
.home .projects__grid::-webkit-scrollbar,
.wp-block-entangle-project-examples .projects__grid::-webkit-scrollbar,
.team__grid::-webkit-scrollbar,
.single-publikace .pub__grid::-webkit-scrollbar { display: none; }
.single-projekt .projects__grid > *,
.home .projects__grid > *,
.wp-block-entangle-project-examples .projects__grid > *,
.team__grid > *,
.single-publikace .pub__grid > * {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	--card-pad: 20px;
}
@media (min-width: 1500px) {
	.single-projekt .projects__grid,
	.home .projects__grid,
	.wp-block-entangle-project-examples .projects__grid,
	.team__grid,
	.single-publikace .pub__grid { --grid-auto-cols: 25%; }
}
@media (max-width: 1024px) {
	.single-projekt .projects__grid,
	.home .projects__grid,
	.wp-block-entangle-project-examples .projects__grid,
	.team__grid,
	.single-publikace .pub__grid { --grid-auto-cols: 50%; }
}
@media (max-width: 600px) {
	.single-projekt .projects__grid,
	.home .projects__grid,
	.wp-block-entangle-project-examples .projects__grid,
	.team__grid,
	.single-publikace .pub__grid {
		--grid-auto-cols: 86%;
		--grid-col-gap: 16px;
	}
	.single-projekt .projects__grid > *,
	.home .projects__grid > *,
	.wp-block-entangle-project-examples .projects__grid > *,
	.team__grid > *,
	.single-publikace .pub__grid > * { --card-pad: 0; }
}

/* ---- Team: carousel off (block attribute) → static grid ≥601px; mobile keeps the carousel above.
   Higher specificity (0,3,0) sets the funnel props — no !important. ---- */
@media (min-width: 601px) {
	.team.is-static .team__grid {
		--grid-cols: repeat(3, 1fr);
		--grid-flow: row;
		--grid-auto-cols: auto;
		--grid-col-gap: 56px;
		--grid-row-gap: 56px;
		overflow: visible;
		scroll-snap-type: none;
	}
	.team.is-static .team__grid > * {
		--card-pad: 0;
		scroll-snap-align: none;
	}
}
@media (min-width: 601px) and (max-width: 1024px) {
	.team.is-static .team__grid { --grid-cols: repeat(2, 1fr); }
}
@media (min-width: 1500px) {
	.team.is-static .team__grid { --grid-cols: repeat(4, 1fr); }
}

/* ---- Content typography (prose: blog, project/service detail, publications, offcanvas) ----
   Only detail bodies, not the whole .wp-block-post-content (on pages it also contains sections). */
/* Larger spacing ABOVE headings (but not above the first content element) */
.project-body .wp-block-post-content :is(h2, h3, h4, h5, h6),
.pub-detail__main .wp-block-post-content :is(h2, h3, h4, h5, h6),
.project-drawer__content :is(h2, h3, h4, h5, h6),
.drawer__bio :is(h2, h3, h4, h5, h6) {
	margin-top: clamp(36px, 4vw, 60px) !important;
}
.project-body .wp-block-post-content > :first-child,
.pub-detail__main .wp-block-post-content > :first-child,
.project-drawer__content > :first-child,
.drawer__bio > :first-child {
	margin-top: 0 !important;
}
/* Bullets in the brand color + small spacing between items */
.project-body .wp-block-post-content li::marker,
.pub-detail__main .wp-block-post-content li::marker,
.project-drawer__content li::marker,
.drawer__bio li::marker,
.about-prose li::marker {
	color: var(--color-brand);
}
.project-body .wp-block-post-content li,
.pub-detail__main .wp-block-post-content li,
.project-drawer__content li,
.drawer__bio li,
.about-prose li {
	margin-block: 0.4em;
}
/* about lists: ensure visible bullets (in case the reset hid them) */
.about-prose ul { list-style: disc; padding-left: 1.2em; }
.about-prose ol { list-style: decimal; padding-left: 1.2em; }

/* ---- entangle/logo-grid — „Naši donoři" section: title + logo grid like „Naše služby" ----
   White cells without gaps, 1px rules aligned to the background grid (4 / 3 / 2 columns). */
.logo-grid { padding-block: var(--wp--preset--spacing--70); }
.logo-grid__title { margin: 0 0 clamp(32px, 4vw, 56px); }
.logo-grid__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
/* Each logo cell carries its own full frame (like the download list) — no
   rules on the wrapper (it is also the auto-contained content box, see
   BLOCK-STANDARD "never paint the wrapper"). Opaque rule color so frames do
   not add up with a background grid. */
.logo-grid__item {
	margin: 0;
	border: 1px solid var(--color-rule-solid);
	border-radius: var(--radius);
	overflow: hidden;
}
.logo-grid__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 150px;
	background: var(--color-card);
	padding: clamp(20px, 2.5vw, 40px);
	transition: box-shadow .18s ease;
}
.logo-grid__link:hover {
	z-index: 1;
	box-shadow: 0 6px 20px color-mix(in srgb, var(--color-ink) 8%, transparent);
}
.logo-grid__link img {
	max-width: 100%;
	max-height: 90px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
@media (min-width: 1500px) { .logo-grid__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .logo-grid__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .logo-grid__grid { grid-template-columns: 1fr; } }

/* Editor: logo control buttons (move / replace / remove) visible */
.logo-grid--edit .components-button.is-secondary {
	color: #1e1e1e;
	box-shadow: inset 0 0 0 1px #c3c4c7;
	background: #fff;
	min-height: 30px;
	padding: 0 8px;
}
.logo-grid--edit .components-button.is-secondary:hover:not( :disabled ) { background: #f0f0f1; }
.logo-grid--edit .components-button.is-secondary.is-destructive { color: #b32d2e; }
.logo-grid--edit .components-button:disabled { opacity: 0.4; }

/* ---- Project filter by country (below the listing title) ---- */
.projects__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(24px, 3vw, 40px);
}
.projects__filter-btn {
	border: 1px solid var(--color-rule);
	background: transparent;
	color: var(--color-ink);
	font-size: 0.875rem;
	font-weight: 500;
	padding: 8px 18px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.projects__filter-btn:hover { border-color: var(--color-brand); color: var(--color-brand); }
.projects__filter-btn.is-active {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--color-on-brand);
}

/* ---- Block utilities ---- */
.team__foot { margin-top: clamp(40px, 5vw, 64px); }
.entangle-empty { color: var(--color-ink); }

/* Container as a class on a section (page-hero/about-section…): some sections have
   `padding: V 0 V` in pages.css, which zeroes the horizontal gutter. Restore it — higher
   specificity (0,2,0) than .page-hero alone (0,1,0). Applies on the frontend and in the
   editor (sections are group blocks → they have the wp-block-group class). */
.wp-block-group.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
/* In the editor, blocks aren't inside .site-main; keep the content from sticking to the canvas edge. */
.editor-styles-wrapper .container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* wrappers created from block <p> – zero out the default margins */
.hero__cta-wrap,
.section-head__link-wrap { margin: 0; }
.hero__cta-wrap { margin-top: var(--space-5, 24px); }

/* Buttons as pill-link (service CTA) */
.service__ctas .wp-block-button__link { background: none; padding: 0; }

/* Publications listing – 2 columns on mobile (not the single-publication carousel). The plain
   .pub__grid / .blog__grid attribute rules were dead under the old !important tier and are dropped
   with the de-!important refactor; the funnel governs their columns. */
@media (max-width: 600px) {
	body:not(.single-publikace) .wp-block-entangle-publications .pub__grid {
		--grid-cols: repeat(2, 1fr);
		--grid-col-gap: clamp(12px, 4vw, 20px);
	}
}

/* entangle/offer – items as links */
.offer-col__item {
	display: block;
	text-decoration: none;
	transition: color .15s ease, padding-left .15s ease;
}
a.offer-col__item:hover { color: var(--color-brand); }

/* ---- Editor: give blocks the same width as on the frontend ---- */
.editor-styles-wrapper .projects,
.editor-styles-wrapper .team,
.editor-styles-wrapper .testimonials,
.editor-styles-wrapper .pub-section { max-width: none; }

/* ---- Editor: subtly distinguish the post title field above the block area (all CPTs) ---- */
.editor-styles-wrapper .editor-visual-editor__post-title-wrapper,
.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper {
	background: color-mix(in srgb, var(--color-ink) 4%, transparent);
	border-bottom: 1px solid var(--color-rule);
	padding-block: clamp(18px, 2.6vw, 32px);
	/* Editor adds inline margin-top: 4rem → override, so the field sits below the toolbar. */
	margin-top: 0 !important;
	margin-bottom: clamp(16px, 2.4vw, 28px);
}

/* ---- Editor: vertical rhythm of sections like on the frontend ----
   On the frontend it's scoped to body classes (.page-template-page-no-title / .home),
   which aren't present in the editor → without this, sections in Gutenberg would have no paddings.
   Blocks with their own spacing attribute (inline) override this (same as on the frontend). */
.editor-styles-wrapper { --entangle-sec-y: var(--wp--preset--spacing--70); }
.editor-styles-wrapper .page-hero { padding-block: var(--wp--preset--spacing--80) var(--entangle-sec-y); }
.editor-styles-wrapper .hero { --hero-air: var(--wp--preset--spacing--80); }
.editor-styles-wrapper .service,
.editor-styles-wrapper .projects,
.editor-styles-wrapper .blog,
.editor-styles-wrapper .team,
.editor-styles-wrapper .testimonials,
.editor-styles-wrapper .pub-section,
.editor-styles-wrapper .about-section,
.editor-styles-wrapper .page-section,
.editor-styles-wrapper .stats,
.editor-styles-wrapper .logo-carousel {
	padding-block: var(--entangle-sec-y);
}

/* =========================================================
   Native WP buttons (core/button) in the pill-link style
   - solid (default)            = pill-link--solid (brand background, white text)
   - outline (is-style-outline) = pill-link (outline, brand text)
   Higher specificity (.wp-element-button) overrides the core block's default style.
   ========================================================= */
.wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border: 1px solid var(--color-brand);
	border-radius: 0;
	background-color: var(--color-brand);
	color: var(--color-on-brand);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wp-block-button__link.wp-element-button::after {
	content: "→";
	font-size: 0.875rem;
	transition: transform .2s ease;
}
.wp-block-button__link.wp-element-button:hover {
	background-color: var(--color-brand-deep);
	border-color: var(--color-brand-deep);
	color: var(--color-on-brand);
}
.wp-block-button__link.wp-element-button:hover::after { transform: translateX(4px); }

/* Outline varianta */
.wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
	background-color: var(--color-bg);
	color: var(--color-brand);
	border-color: var(--color-brand);
}
.wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover {
	background-color: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--color-on-brand);
}


.project-subpage__foot {
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: clamp(24px, 3vw, 40px);
	border-top: 1px solid var(--color-rule);
}


/* ---- Publication detail: „Další publikace" closer + title in the body text color ---- */
.single-publikace .pub-detail { padding-bottom: clamp(24px, 3vw, 44px); }
.single-publikace .pub-section { padding-top: clamp(24px, 3vw, 44px); }
.single-publikace .pub-section__title { color: var(--color-ink); }


/* Section titles (o nás, kontakt) in the ink color — size handled by the „Nadpis sekce" preset. */
.about-grid__label { color: var(--color-ink); }

/* ---- Typography page (font size specimen) ---- */
.type-spec__row { padding-block: clamp(20px, 3vw, 36px); border-top: 1px solid var(--color-rule); }
.type-spec__row > * + * { margin-block-start: 10px; }
.type-spec__label { color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: .12em; margin: 0; }

/* ---- Hero: on a low desktop viewport (window height < 780px) reduce the INNER
   air above the content to 1/3 (--hero-air lives on the content wrapper; the
   section's own padding is the block preset and stays untouched). ---- */
@media (min-width: 881px) and (max-height: 780px) {
	.wp-block-entangle-hero > .container,
	.wp-block-entangle-hero-cta > .wrap {
		padding-top: calc(var(--hero-air, clamp(48px, 8vw, 120px)) / 3);
	}
}

/* ---- entangle/photo-marquee: full-bleed photo strip ----
   Structure/animation only (reuses the entangle-marquee keyframes above);
   heights, filters, radii and gaps are the site's job (child CSS). */
.wp-block-entangle-photo-marquee { overflow: hidden; }
.wp-block-entangle-photo-marquee .photo-marquee__track {
	display: flex;
	width: max-content;
	animation: entangle-marquee var(--marquee-duration, 84s) linear infinite;
}
.wp-block-entangle-photo-marquee:hover .photo-marquee__track { animation-play-state: paused; }
.wp-block-entangle-photo-marquee .photo-marquee__dup { display: contents; }
.wp-block-entangle-photo-marquee .photo-marquee__item { margin: 0 14px 0 0; flex: none; overflow: hidden; }
.wp-block-entangle-photo-marquee .photo-marquee__item img { display: block; width: auto; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-entangle-photo-marquee .photo-marquee__track { animation: none; }
}

/* =========================================================
   Ported repeater blocks (faq / tabs / timeline / enhanced-table).
   Structure only + tokens; brand/skin comes from theme.json presets.
   See docs/BLOCK-STANDARD.md.
   ========================================================= */

/* ---- entangle/faq — native <details> accordion (zero JS) ---- */
.wp-block-entangle-faq { display: grid; }
.faq__item { border-bottom: 1px solid var(--color-rule); }
.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 40px);
	padding: clamp(16px, 2.4vw, 28px) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-serif);
	font-size: var(--wp--preset--font-size--h-3, clamp(23px, 2vw, 28px));
	line-height: 1.2;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }
.faq__icon { flex: none; color: var(--color-brand); transition: transform 0.22s ease; }
.faq__item[open] .faq__q { color: var(--color-brand); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a {
	padding-bottom: clamp(20px, 3vw, 40px);
	max-width: 46rem;
}

/* ---- entangle/tabs — accessible tab strip + panels (view.js switching) ---- */
.tabs__list {
	display: flex;
	align-items: stretch;
	gap: clamp(8px, 1.4vw, 18px);
	border-bottom: 2px solid var(--color-rule);
	overflow-x: auto;
	scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
	position: relative;
	appearance: none;
	background: transparent;
	border: 0;
	margin: 0 0 -2px;
	padding: 0.85em 0.25em;
	cursor: pointer;
	white-space: nowrap;
	font: 700 var(--wp--preset--font-size--body, 1.05rem) / 1.2 var(--font-sans);
	color: var(--color-ink-soft);
	transition: color 0.16s ease;
}
.tabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--color-brand);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.tabs__tab:hover { color: var(--color-brand); }
.tabs__tab[aria-selected="true"],
.tabs__tab.is-active { color: var(--color-brand); }
.tabs__tab[aria-selected="true"]::after,
.tabs__tab.is-active::after { opacity: 1; }
.tabs__tab:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
.tabs__panel[hidden] { display: none; }
.tabs__panel-inner { padding-top: clamp(24px, 3.4vw, 48px); }

/* ---- entangle/timeline — connecting line + alternating cards ---- */
.timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: grid;
	gap: clamp(28px, 3.4vw, 40px);
}
.timeline__list::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 19px;
	width: 2px;
	background: var(--color-rule);
}
.timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: clamp(16px, 2vw, 24px);
	align-items: start;
}
.timeline__marker {
	grid-column: 1;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: var(--color-brand);
	color: #fff;
	display: grid;
	place-items: center;
	position: relative;
	z-index: 1;
}
.timeline__marker .material-symbols-outlined { font-size: 22px; line-height: 1; }
.timeline__card {
	grid-column: 2;
	background: var(--color-card);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius);
	padding: clamp(20px, 2.4vw, 32px);
	display: grid;
	gap: 10px;
}
.timeline__date { margin: 0; color: var(--color-ink-soft); font-size: var(--wp--preset--font-size--small, 0.85rem); }
.timeline__date--aside { display: none; }          /* desktop only: date on the far side of the line */
.timeline__title { margin: 0; }
/* Desktop: card | marker | date, alternating sides. Each item is its own row
   (no overlap between neighbours), the marker sits on the vertical line,
   the date on the opposite side of the card, text always left-aligned. */
@media (min-width: 1000px) {
	.timeline__list::before { left: 50%; transform: translateX(-1px); }
	.timeline__item {
		grid-template-columns: 1fr 40px 1fr;
		align-items: start;
		gap: clamp(24px, 3vw, 40px);
	}
	.timeline__marker { grid-column: 2; grid-row: 1; }
	.timeline__card { grid-column: 3; grid-row: 1; text-align: left; }
	.timeline__date--inline { display: none; }
	.timeline__date--aside {
		display: block;
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		justify-self: end;
		text-align: right;
		/* on the marker's line: marker is 40px tall with a small top offset */
		margin-top: calc(clamp(4px, 0.6vw, 10px) + 20px);
		transform: translateY(-50%);
		font-size: var(--wp--preset--font-size--compact, 1rem);
		color: var(--color-brand);
		font-weight: 500;
	}
	.timeline__item:nth-child(even) .timeline__card { grid-column: 1; text-align: left; }
	.timeline__item:nth-child(even) .timeline__date--aside { grid-column: 3; justify-self: start; text-align: left; }
	/* the marker is 40px tall; center it on the card's first line */
	.timeline__marker { align-self: start; margin-top: clamp(4px, 0.6vw, 10px); }
}

/* ---- entangle/enhanced-table — responsive scroll + per-cell styling ---- */
.ent-enhanced-table { margin: var(--wp--preset--spacing--50, 24px) 0; padding: 0; }
.ent-enhanced-table__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	background:
		linear-gradient(to right, var(--color-card) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
		linear-gradient(to left, var(--color-card) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
		radial-gradient(ellipse farthest-side at 0 50%, rgba(24, 24, 27, 0.14), rgba(24, 24, 27, 0)) left center / 16px 100% no-repeat,
		radial-gradient(ellipse farthest-side at 100% 50%, rgba(24, 24, 27, 0.14), rgba(24, 24, 27, 0)) right center / 16px 100% no-repeat;
	background-color: var(--color-card);
	border-radius: var(--radius-sm);
}
.ent-enhanced-table__scroll:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.ent-enhanced-table__table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: auto;
	font-size: var(--wp--preset--font-size--compact, 1rem);
}
.ent-enhanced-table__caption {
	caption-side: top;
	padding: 0.5rem 0.75rem;
	font-size: var(--wp--preset--font-size--small, 0.85rem);
	font-weight: 600;
	text-align: left;
	color: var(--color-ink);
}
.ent-enhanced-table__table th,
.ent-enhanced-table__table td {
	padding: 0.6rem 0.85rem;
	vertical-align: top;
	border: 1px solid var(--color-rule);
	line-height: 1.4;
	min-width: 3rem;
}
.ent-enhanced-table__table th { font-weight: 700; text-align: left; background-color: var(--color-bg); }

/* ---- Editor-only affordances for the ported blocks (inert on the front end) ---- */
.tabs__add {
	appearance: none;
	background: transparent;
	border: 1px dashed var(--color-rule);
	border-radius: var(--radius-sm);
	color: var(--color-ink-soft);
	cursor: pointer;
	font: 700 1rem/1 var(--font-sans);
	padding: 0.4em 0.7em;
	margin: 0 0 -2px 4px;
}
.tabs__add:hover { color: var(--color-brand); border-color: var(--color-brand); }
.ent-enhanced-table.is-editing .ent-enhanced-table__table td,
.ent-enhanced-table.is-editing .ent-enhanced-table__table th { cursor: text; }
.ent-enhanced-table.is-editing .is-selected-cell { box-shadow: inset 0 0 0 2px var(--color-brand); }
.ent-enhanced-table__placeholder {
	display: grid;
	gap: 12px;
	justify-items: start;
	padding: clamp(20px, 3vw, 32px);
	border: 1px dashed var(--color-rule);
	border-radius: var(--radius-sm);
	color: var(--color-ink-soft);
}

/* =========================================================
   Ported grid repeaters (cards-with-icon / icon-grid / people).
   Tier-A InnerBlocks; structure + tokens only. See docs/BLOCK-STANDARD.md.
   ========================================================= */

/* ---- entangle/cards-with-icon ---- */
.cards-icon {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(16px, 2.2vw, 28px);
}
.cards-icon__item { display: grid; }
.cards-icon__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 48px);
	min-height: 200px;
	padding: clamp(20px, 2.2vw, 28px);
	border: 1px solid var(--color-ink);
	border-radius: 0 0 var(--radius) var(--radius);
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.cards-icon__card.has-link:hover {
	background: var(--color-brand);
	color: #fff;
	border-color: var(--color-brand);
}
.cards-icon__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--wp--preset--font-size--h-4, 1.3rem);
	line-height: 1.2;
}
.cards-icon__link { color: inherit; }
.cards-icon__card.has-link .cards-icon__link::after { content: ""; position: absolute; inset: 0; }
.cards-icon__icon { font-size: 40px; line-height: 1; }

/* ---- entangle/icon-grid ---- */
.icon-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	align-items: start;
	gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);
}
.icon-grid__item {
	display: grid;
	gap: clamp(14px, 1.8vw, 24px);
	justify-items: center;
	text-align: center;
}
.icon-grid__icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-pill);
	background: var(--color-brand);
	color: #fff;
}
.icon-grid__icon .material-symbols-outlined { font-size: 28px; line-height: 1; }
.icon-grid__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--wp--preset--font-size--h-3, clamp(23px, 2vw, 28px));
	line-height: 1.2;
}
.icon-grid__text { color: var(--color-ink-soft); max-width: 34rem; }
.icon-grid__text > :first-child { margin-top: 0; }
.icon-grid__text > :last-child { margin-bottom: 0; }
.icon-grid__link {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--color-ink);
	border-radius: var(--radius-pill);
	padding: 0.7em 1.3em;
	font-weight: 600;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.icon-grid__link:hover { background: var(--color-ink); color: var(--color-bg); }

/* ---- entangle/people ---- */
.people {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);
	justify-items: center;
}
.people__item { width: 100%; max-width: 320px; }
.person { display: grid; gap: clamp(16px, 2.2vw, 28px); justify-items: center; }
.person__photo {
	margin: 0;
	width: clamp(100px, 12vw, 150px);
	height: clamp(100px, 12vw, 150px);
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: var(--color-bg);
	position: relative;
}
.person__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__meta { display: grid; gap: 6px; justify-items: center; text-align: center; line-height: 1.45; }
.person__name {
	margin: 0 0 2px;
	font-family: var(--font-serif);
	font-size: var(--wp--preset--font-size--h-4, 1.3rem);
	line-height: 1.2;
}
.person__job { margin: 0; color: var(--color-ink-soft); }
.person__contact { color: var(--color-brand); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.person__contact:hover { color: var(--color-brand-deep); }

/* editor-only: person photo placeholder button */
.person__photo-add { width: 100%; height: 100%; border-radius: var(--radius-pill); }

/* =========================================================
   Ported blocks: headline / button / cover / media / media-and-text.
   Structure + tokens only. See docs/BLOCK-STANDARD.md.
   ========================================================= */

/* ---- entangle/headline ---- */
.headline {
	margin: 0;
	padding-bottom: clamp(20px, 2.4vw, 40px);
	font-family: var(--font-serif);
	line-height: 1.05;
	letter-spacing: -0.02em;
}
/* The underline is a pseudo-element INSIDE the content box, not a border on
   the heading — the heading is also the auto-contained wrapper (gutter
   padding), so a border would run edge to edge past the content line. */
.headline::after {
	content: "";
	display: block;
	height: 1px;
	background: currentColor;
	margin-top: clamp(20px, 2.4vw, 40px);
}
.headline { padding-bottom: 0; }
.headline.has-text-align-center { text-align: center; }
.headline.has-text-align-right { text-align: right; }

/* ---- entangle/button ---- */
.entangle-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.entangle-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--color-ink);
	padding: 0.8em 1.5em;
	font: 600 var(--wp--preset--font-size--compact, 1rem) / 1 var(--font-sans);
	color: var(--color-ink);
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.entangle-btn:hover { background: var(--color-ink); color: var(--color-bg); transform: translateY(-2px); }
.entangle-btn--filled { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.entangle-btn--filled:hover { background: var(--color-brand-deep); border-color: var(--color-brand-deep); color: #fff; }
.entangle-btn--sm { padding: 0.55em 1.05em; font-size: var(--wp--preset--font-size--small, 0.85rem); }
.entangle-btn--lg { padding: 1em 1.8em; font-size: var(--wp--preset--font-size--body, 1.1rem); }
.entangle-btn__icon { font-size: 1.2em; line-height: 1; }

/* ---- entangle/cover — content on a background image ----
   Outer padding of the section = the block's spacing preset (70/70 by default,
   on the sliders); the inner inset around the content is --cover-inset on
   .cover__content. Full-height mode: min-height = viewport minus the site
   header (--header-h is measured by assets/js/ui.js; a child may pin it,
   e.g. :root { --header-h: 96px }). ---- */
.cover {
	--cover-inset: clamp(28px, 4vw, 56px);
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-ink);
	color: #fff;
	isolation: isolate;
}
.cover.is-full-height { min-height: calc(100svh - var(--header-h, 0px)); }
.editor-styles-wrapper .cover.is-full-height { min-height: 70vh; } /* canvas has no site header; approximate */
.cover.is-align-left { align-content: end; }
.cover.is-align-center { align-content: center; justify-items: center; text-align: center; }
.cover__bg,
.cover__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.cover__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, var(--color-ink), transparent);
}
/* Content sits on the site's content line like every section: a container
   box (max-width --container, gutter padding) with the vertical inset; the
   66ch cap applies to the inner column, not to the box. */
.cover__content {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--cover-inset) var(--gutter);
}
/* Two widths, chosen with the block toolbar's alignment (WP-native):
   - default ("In content"): the cover box is auto-contained like every content
     block (content-line width, gutter outside) -> the picture starts on the
     content line, text gets a moderate inset inside the box;
   - Align full ("Edge to edge"): the picture bleeds; the content inside is a
     container so the text still sits on the content line. */
.cover:not(.alignfull):not(.alignwide) {
	/* the auto-contain rule sets max-width + gutter PADDING; a painted box
	   wants the gutter OUTSIDE (picture starts on the content line) */
	padding-inline: 0;
	width: calc(100% - 2 * var(--gutter));
	max-width: calc(var(--container) - 2 * var(--gutter));
	margin-inline: auto;
}
.cover:not(.alignfull):not(.alignwide) > .cover__content { padding-inline: var(--cover-inset); }
/* Inner blocks follow the theme's normal flow rhythm (blockGap = 24px, the
   same margins as anywhere in the content) — no extra grid gap on top. */
.cover__content > * { max-width: 66ch; margin-block: 0; }
.cover__content > * + * { margin-block-start: var(--wp--style--block-gap, var(--wp--preset--spacing--50)); }
.cover.is-align-center .cover__content > * { margin-inline: auto; }
.cover__content :where(h1, h2, h3, h4, p) { color: #fff; }
.cover__content .headline::after { background: rgba(255, 255, 255, 0.4); }
.cover__content > :first-child { margin-top: 0; }
.cover__content > :last-child { margin-bottom: 0; }

/* ---- entangle/media (shared slider markup) ---- */
.media-slider { position: relative; }
.media-slider__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.media-slider__track::-webkit-scrollbar { display: none; }
.media-slider__slide { flex: 0 0 100%; scroll-snap-align: start; }
.media-figure { margin: 0; display: grid; gap: 0.6rem; }
.media-figure__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-bg);
}
.media-figure__img,
.media-figure__embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.media-figure__caption { font-size: var(--wp--preset--font-size--small, 0.85rem); color: var(--color-ink-soft); }
.media-figure__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-brand);
	color: #fff;
	cursor: pointer;
	transition: transform 0.16s ease;
}
.media-figure__play:hover { transform: scale(1.08); }
.media-figure__play .material-symbols-outlined { font-size: 34px; }
.media-figure__placeholder { position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; font-size: 48px; color: var(--color-ink-soft); display: grid; place-items: center; }
.media-slider__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; }
.media-slider__dots { display: flex; gap: 10px; }
.media-slider__dot { width: 10px; height: 10px; border: 0; border-radius: var(--radius-pill); background: var(--color-rule); cursor: pointer; padding: 0; }
.media-slider__dot.is-active { background: var(--color-brand); }
.media-slider__arrows { display: flex; gap: 8px; }
.media-slider__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--color-ink);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-ink);
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}
.media-slider__arrow:hover { background: var(--color-ink); color: var(--color-bg); }

/* ---- entangle/media-and-text ---- */
.media-and-text {
	display: grid;
	gap: clamp(24px, 3.4vw, 40px);
	align-items: center;
}
@media (min-width: 800px) {
	.media-and-text { grid-template-columns: 1fr 1fr; }
	.media-and-text.is-reverse .media-and-text__text { order: 2; }
}
.media-and-text__text > :first-child { margin-top: 0; }
.media-and-text__text > :last-child { margin-bottom: 0; }

/* ---- entangle/text-banner — full-color band, title + circled arrow ---- */
.text-banner-section { padding-block: var(--wp--preset--spacing--70); }
.text-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 3vw, 48px);
	background: var(--color-brand);
	color: var(--color-on-brand);
	text-decoration: none;
	padding: clamp(20px, 2.4vw, 36px) clamp(24px, 3.5vw, 56px);
	border-radius: var(--radius-media);
	transition: background-color 0.2s ease;
}
a.text-banner:hover {
	/* halfway between brand and brand-deep — the full deep shade was too strong */
	background: var(--color-brand-deep);
	background: color-mix(in srgb, var(--color-brand), var(--color-brand-deep) 50%);
	color: var(--color-on-brand);
}
.text-banner__title {
	display: block;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.625rem, 3vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.text-banner__arrow {
	flex: 0 0 auto;
	width: clamp(44px, 4vw, 56px);
	aspect-ratio: 1;
	border-radius: var(--radius-full);
	border: 1.5px solid currentColor;
	display: grid;
	place-items: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.text-banner__arrow svg { width: 44%; height: auto; display: block; }
a.text-banner:hover .text-banner__arrow {
	background: var(--color-on-brand);
	color: var(--color-brand);
	border-color: var(--color-on-brand);
}

/* ---- entangle/side-section — section heading left, free content right ----
   Aligned to the background grid like .about-grid: heading = 1st column, content
   starts at the 2nd line (33.3% on 3 cols, 25% on ≥1500 / 4 cols). The heading is
   always an H2 at the section-title size (fixed by the block, not editable). */
.side-section { padding-block: var(--entangle-sec-y, var(--wp--preset--spacing--70)); }
.side-section__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 0;
	align-items: start;
}
.side-section__grid > * { margin-block: 0; }
.side-section__title {
	grid-column: 1 / 2;
	padding-right: clamp(24px, 3vw, 56px);
	margin: 0;
	color: var(--color-ink);
}
/* (Agora only — the markup below renders only under add_theme_support('entangle-vgrid').)
   The block ships with a default background (backgroundColor: "bg" in block.json)
   that masks the background grid (.entangle-vgrid) across the whole section incl.
   padding; it's a normal color support, editable/removable in the sidebar.
   On top of it, .side-section__rules redraws the SAFE raster lines (same 1fr-column
   technique as .entangle-vgrid, so they align): outer edges + the heading/content
   boundary; on ≥1500 also the line behind the content. Lines that would cross the
   text stay masked. */
.side-section { position: relative; }
/* Hidden by default (neutral base). A site that opted into the vertical grid
   (Agora: add_theme_support('entangle-vgrid') adds body/editor class
   .has-entangle-vgrid) shows the aligned raster lines. Same markup on the
   frontend and in the editor canvas -> parity. */
.side-section__rules {
	display: none;
	position: absolute;
	inset: 0;
	padding-inline: var(--gutter, 40px);
	box-sizing: border-box;
	grid-template-columns: repeat(3, 1fr);
	pointer-events: none;
}
.has-entangle-vgrid .side-section__rules { display: grid; }
.side-section__rules > i:first-child {
	border-left: 1px solid var(--color-rule);
	border-right: 1px solid var(--color-rule);
}
.side-section__rules > i:nth-child(3) { border-right: 1px solid var(--color-rule); }
.side-section__rules > i:nth-child(4) { display: none; }
.side-section__grid { position: relative; }
@media (min-width: 1500px) {
	.side-section__rules { grid-template-columns: repeat(4, 1fr); }
	.side-section__rules > i:nth-child(4) { display: block; border-right: 1px solid var(--color-rule); }
}
@media (max-width: 1024px) {
	/* stacked layout: heading/content boundary would cross the text — edges only */
	.side-section__rules { grid-template-columns: repeat(2, 1fr); }
	.side-section__rules > i:first-child { border-right: 0; }
	.side-section__rules > i:nth-child(2) { border-right: 1px solid var(--color-rule); }
	.side-section__rules > i:nth-child(3) { display: none; }
}
@media (max-width: 600px) { .side-section__rules { display: none; } }
.side-section__content { grid-column: 2 / 4; max-width: 760px; }
.side-section__content > :first-child { margin-top: 0; }
.side-section__content > :last-child { margin-bottom: 0; }
/* content typography — same as .about-prose */
.side-section__content > p { line-height: 1.6; margin: 0 0 18px; }
.side-section__content li::marker { color: var(--color-brand); }
.side-section__content li { margin-block: 0.4em; }
.side-section__content ul { list-style: disc; padding-left: 1.2em; }
.side-section__content ol { list-style: decimal; padding-left: 1.2em; }
@media (min-width: 1500px) {
	.side-section__grid { grid-template-columns: repeat(4, 1fr); }
	.side-section__content { grid-column: 2 / 5; }
}
@media (max-width: 1024px) {
	.side-section__grid { grid-template-columns: 1fr; row-gap: 28px; }
	.side-section__title { grid-column: auto; padding-right: 0; }
	.side-section__content { grid-column: auto; max-width: none; }
}
/* team right after the section — no top rule (same as after .about-section) */
.wp-block-entangle-side-section + .wp-block-entangle-team { border-top: 0 !important; }

/* ---- entangle/download-list — two-column PDF download list ---- */
.download-list {
	list-style: none;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}
/* The frame lives on the CELLS, not on the wrapper: the wrapper is also the
   auto-contained content box (gutter padding), so wrapper borders would sit
   at the page edge, away from the items. Cells draw bottom + right; the first
   row draws top; the first column draws left. */
.download-list li {
	background: var(--color-card);
	border-bottom: 1px solid var(--color-rule);
	border-right: 1px solid var(--color-rule);
}
.download-list li:nth-child(-n + 2) { border-top: 1px solid var(--color-rule); }
.download-list li:nth-child(odd) { border-left: 1px solid var(--color-rule); }
.download-list a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 18px;
	font-size: 0.9375rem;
	color: var(--color-ink);
	transition: background 0.15s ease, color 0.15s ease;
}
.download-list a:hover { background: var(--color-bg-alt); color: var(--color-brand); }
.pdf-tag {
	flex: 0 0 auto;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-on-brand);
	background: var(--color-brand);
	padding: 4px 7px;
	border-radius: var(--radius-media);
	line-height: 1;
}
@media (max-width: 720px) {
	.download-list { grid-template-columns: 1fr; }
	.download-list li { border-left: 1px solid var(--color-rule); }
	.download-list li:nth-child(2) { border-top: 0; }
}