/*
Theme Name: Ruda Shakira
Theme URI: https://www.rudashakira.pl
Description: Custom block theme for rudashakira.pl — a Polish feline health and
             lifestyle portal. Built mobile-first against designs in Figma.
Author: Ruda Shakira
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ruda-shakira
Tags: blog, news, one-column, block-patterns, full-site-editing
*/

/*
 * Base styles only. Anything expressible as a design token belongs in
 * theme.json instead — it lands in both the site and the editor, and shows up
 * in the editor's colour and typography pickers.
 *
 * Written mobile-first: base rules target the 390px design, and desktop rules
 * go in `@media (min-width: 782px)` blocks. 782px is WordPress core's own
 * breakpoint for stacking Columns; matching it avoids two breakpoints fighting
 * each other.
 */

/* ---------------------------------------------------------------------------
 * Box sizing
 *
 * WordPress does not set border-box globally, so any of our components that
 * combines a fixed height with padding renders taller than declared — the
 * padding sits outside the height. That produced two separate bugs: promo
 * panels overhanging their grid row, and category cards spilling 40px into the
 * row gap and painting over it. Set once for everything the theme owns.
 * ------------------------------------------------------------------------ */

.wp-site-blocks [class^="rs-"],
.wp-site-blocks [class*=" rs-"] {
	box-sizing: border-box;
}

/* Container for cqw units: the home page scales its desktop layout to the
   page width (see HOME — desktop). */
.wp-site-blocks {
	container-type: inline-size;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Never let an imported image break the mobile layout. */
img,
figure {
	max-width: 100%;
	height: auto;
}

/*
 * Bricolage Grotesque is a variable font with optical-size and width axes.
 * The Figma design pins both (opsz 14, wdth 100); theme.json cannot express
 * variation axes, so they are set here.
 */
:where(h1, h2, h3, h4, h5, h6),
.wp-block-post-title,
.wp-block-site-title {
	font-variation-settings: "opsz" 14, "wdth" 100;
}

/* ---------------------------------------------------------------------------
 * Footer
 *
 * Figma "stopka": 390x300 on mobile, 1440x340 on the home frame. Title
 * Bricolage 24 at y=32 (38 desktop), a 1px 20% rule, four 13px links and the
 * 11px legal line. Content starts at x=24; on desktop the home page keeps that
 * (HOME — desktop) and the other pages use the 1200 column, as their frames do.
 * ------------------------------------------------------------------------ */

.rs-footer {
	box-sizing: border-box;
	min-height: 300px;
	padding: 32px 24px 46px;
}

.rs-footer a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
}

.rs-footer a:hover,
.rs-footer a:focus-visible {
	text-decoration: underline;
}

.rs-footer .rs-footer__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 29px;
}

.rs-footer__rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--cream);
	opacity: 0.2;
	margin: 13px 0 0;
}

.rs-footer__links {
	margin: 11px 0 0;
	padding-left: 0;
	list-style: none;
	font-size: 0.8125rem;
	line-height: 18px;
}

.rs-footer__links li + li {
	margin-top: 10px;
}

.rs-footer__legal {
	margin-top: 48px;
	font-size: 0.6875rem;
	line-height: 18px;
	opacity: 0.7;
}

@media (min-width: 782px) {
	.rs-footer {
		min-height: 340px;
		padding: 38px 24px 40px;
	}

	.rs-footer .rs-footer__title {
		line-height: 34px;
	}

	.rs-footer__rule {
		margin-top: 16px;
	}

	.rs-footer__links {
		margin-top: 13px;
		line-height: 21px;
	}

	.rs-footer__links li + li {
		margin-top: 12px;
	}

	.rs-footer__legal {
		margin-top: 91px;
	}
}

/* One Figma pixel at the current width: the home page draws its 390 frame on
   phones and its 1440 frame on desktop (HOME — desktop) to scale. */
.rs-hero,
.rs-navrow,
.rs-band,
.rs-latest {
	--u: calc(100cqw / 390);
}

/* ---------------------------------------------------------------------------
 * Hero
 *
 * Mobile (390): coral banner 390x270 stacked above a cream panel 390x300.
 * Desktop (1440): the two sit side by side at 960/480 — a 2:1 split.
 *
 * The split is expressed as `2fr 1fr` rather than fixed widths, so above
 * 1440 the colour field keeps its proportion instead of stranding the
 * artwork in a gutter. Text inside still obeys the 1200px column.
 *
 * Layer coordinates below are the Figma positions converted to percentages
 * of their panel, so the collage holds together at any width.
 * ------------------------------------------------------------------------ */

.rs-hero {
	display: grid;
	grid-template-columns: 1fr;
}

/* --- coral panel --- */

.rs-hero__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Figma's 390x270 read as too tall on real phones; a third shorter. */
	aspect-ratio: 390 / 180;
	padding-inline: var(--wp--preset--spacing--30);
	text-align: center;
}

.rs-hero__title {
	margin: 0;
	font-size: clamp(2.625rem, 5.97vw, 5.375rem);
	line-height: 1.1;
}

.rs-hero__tagline {
	margin: clamp(0.5rem, 1.4vw, 1.25rem) 0 0;
	font-size: clamp(0.9375rem, 2.08vw, 1.875rem);
	font-weight: 500;
	letter-spacing: 0.05em;
}

.rs-hero__icons {
	gap: clamp(2.8125rem, 5.7vw, 5.125rem);
	margin-top: clamp(1rem, 2.2vw, 2rem);
}

.rs-hero__icon {
	width: clamp(2.5rem, 6.3vw, 5.6875rem);
	margin: 0;
}

.rs-hero__icon img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- cream panel with the avatar collage --- */

.rs-hero__avatar {
	/* A third shorter than Figma's 390x300, like the coral panel above. */
	aspect-ratio: 390 / 200;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Figma's ring is 220 in a 300-tall panel; in the 200-tall panel it is drawn
   at 170 (85% of the height) rather than shrunk by the full third. The image
   is 243/220 of the ring, for the box corners that poke past it. */
.rs-hero__logo {
	display: block;
	width: 48.21%;                   /* 188/390 */
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Icon nav row
 *
 * Desktop (Figma, measured): pale blue band 190px tall; nine 76px circles
 * evenly spaced from x=63 to x=1376 — i.e. nine equal columns across the full
 * width, so `repeat(9, 1fr)` reproduces it exactly rather than approximating.
 * Labels are Manrope Medium 14px, uppercase, 0.7px tracking.
 *
 * Mobile: the Figma frame is 390x420 for nine items, which is a 3x3 grid at
 * 130x140 per cell. INFERRED — the Figma rate limit stopped me reading that
 * frame directly. Worth confirming against the design.
 * ------------------------------------------------------------------------ */

.rs-navrow__nav {
	/* Figma's mobile frame for this section is 390x420. The internal spacing
	   is INFERRED — the Figma rate limit stopped me reading that frame — but
	   the band height is known, so it is pinned and the rows centre inside it. */
	box-sizing: border-box;
	min-height: 420px;
	display: flex;
	align-items: center;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--30);
}

.rs-navrow__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40) 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-navrow__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.rs-navrow__link:hover .rs-navrow__icon,
.rs-navrow__link:focus-visible .rs-navrow__icon {
	transform: scale(1.06);
}

.rs-navrow__icon {
	/* Fixed square box with object-fit rather than height:auto. The rozrywka
	   export is 152x161 where the others are square, which otherwise makes
	   that one circle taller and drops its label below the row. */
	display: block;
	width: 76px;
	height: 76px;
	object-fit: contain;
	transition: transform 150ms ease;
}

.rs-navrow__label {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.7px;
	text-align: center;
	line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
	.rs-navrow__icon {
		transition: none;
	}

	.rs-navrow__link:hover .rs-navrow__icon,
	.rs-navrow__link:focus-visible .rs-navrow__icon {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Promo row — adopcja.tv + współpraca
 *
 * Desktop: same 2:1 split as the hero (960 / 480 of 1440), both panels 300 tall.
 * Mobile: stacked, adopcja 390x424 then współpraca 390x220.
 *
 * Figma measurements used below, panel-relative:
 *   adopcja  logo 420x156 at x=63; heading 40px at y=38; body 20px at y=113;
 *            button 156x38 at y=194. Inset 63/960 = 6.56%.
 *   współpr. heading 30px at y=47; cats 176x162 at x=26,y=104; text column
 *            centred on x=324; button 119x25 at y=227.
 *
 * Button labels are Manrope, not Figma's Nokora — that font has no Polish
 * glyphs (203 codepoints, ASCII + Khmer), so the mockup is showing a fallback.
 * ------------------------------------------------------------------------ */

.rs-band {
	display: grid;
	grid-template-columns: 1fr;
}

/* Mobile order follows the design: adopcja, the four tiles, then współpraca
   as a fifth tile at the end. Desktop pulls współpraca back up beside
   adopcja to form the 2:1 promo row above the tiles. */
.rs-promo__panel--adopcja    { order: 1; }
.rs-tile--aktualnosci        { order: 2; }
.rs-tile--rozrywka           { order: 3; }
.rs-tile--pomoc              { order: 4; }
.rs-tile--blog               { order: 5; }
.rs-promo__panel--wspolpraca { order: 6; }

.rs-promo__panel {
	/* These carry vertical padding, and default content-box sizing puts it
	   outside the declared height — the panels measured 338 and 347 against a
	   300px row until this was set. */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-inline: 6.56%;
}

/* --- shared type --- */

.rs-promo__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: clamp(1.75rem, 2.78vw, 2.5rem);   /* 28px -> 40px */
	letter-spacing: 0.05em;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

.rs-promo__body {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: clamp(1.125rem, 1.39vw, 1.25rem); /* 18px -> 20px */
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--ink);
}

/* --- call to action --- */

.rs-promo__cta {
	box-sizing: border-box;   /* Figma sizes include the 1px border */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Figma sizes reproduced exactly, per the "match the design" decision.
	   See the accessibility note in docs/07-section-specs.md — the mobile
	   współpraca button (78x14, 6.5px label) is below the WCAG 2.5.8 minimum
	   target size of 24x24 and is not legible at that size. */
	width: 144px;
	height: 43px;
	padding: 0;
	border: 1px solid #000;
	border-radius: 10px;
	background: var(--wp--preset--color--coral);
	color: #fff;
	text-decoration: none;
	/* Figma draws the button as a bordered 0 4px 4px drop shadow with a white
	   inset highlight over the fill: shadow-[inset_-4px_4px_4px_0px_white].
	   That highlight along the top and right inner edges is what makes the
	   button read as 3D — without it it is a flat coral pill. The M3 elevation
	   pair that used to be here belongs to the label's text-shadow, not the
	   button. */
	box-shadow:
		inset -4px 4px 4px 0 #fff,
		0 4px 4px rgba(0, 0, 0, 0.25);
}

.rs-promo__cta-label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.75rem;          /* 12px */
	letter-spacing: 0.05em;
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.rs-promo__cta:hover,
.rs-promo__cta:focus-visible {
	filter: brightness(1.06);
}

.rs-promo__cursor {
	position: absolute;
	right: -0.5rem;
	bottom: -0.9rem;
	width: 28px;
	height: auto;
	opacity: 0.9;
	pointer-events: none;
}

/* --- adopcja.tv panel --- */

.rs-promo__panel--adopcja {
	min-height: 424px;
	gap: 1.75rem;
}

.rs-promo__logo {
	order: 3;
	margin: 0;
	width: min(320px, 82%);
}

.rs-promo__logo img,
.rs-promo__cats img {
	display: block;
	width: 100%;
	height: auto;
}

.rs-promo__text {
	display: contents;
}

.rs-promo__panel--adopcja .rs-promo__title { order: 1; }
.rs-promo__panel--adopcja .rs-promo__body  { order: 2; }
.rs-promo__panel--adopcja .rs-promo__cta   { order: 4; }

/* --- współpraca panel --- */

.rs-promo__panel--wspolpraca {
	min-height: 220px;
	gap: 1rem;
	padding-block: var(--wp--preset--spacing--40);
}

.rs-promo__wsp-body {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.rs-promo__cats {
	margin: 0;
	width: 160px;
	flex: none;
}

.rs-promo__wsp-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.rs-promo__arrow {
	display: block;
	width: 72px;
}

.rs-promo__or {
	font-size: 0.875rem;
}

/* Mobile: Figma draws this at 78x14 with a 6.5px label. Reproduced as drawn. */
.rs-promo__cta--small {
	width: 78px;
	height: 14px;
}

.rs-promo__cta--small .rs-promo__cta-label {
	font-size: 0.40625rem;   /* 6.5px */
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
 * Category tiles
 *
 * Four tiles (390x220 stacked on mobile, 360x320 across on desktop), laid out
 * absolutely to the frame's coordinates in --u (one Figma pixel at the current
 * width — see .rs-band). Every tile places its title, chip, arrow and cut-out
 * differently, so the coordinates travel as custom properties per tile:
 *
 *   --tx --ty --tf   title left, top, font size
 *   --cx --cy --cw --ch --cp --cf   chip box, text inset from its right edge
 *                    (Figma right-aligns the tagline), tagline font size
 *   --ax --ay        arrow; --kx --ky --kw  cat cut-out
 * ------------------------------------------------------------------------ */

.rs-tile {
	position: relative;
	overflow: hidden;
	height: calc(220 * var(--u));
}

.rs-tile__text {
	display: contents;
}

.rs-tile__title,
.rs-tile__chip,
.rs-tile__arrow,
.rs-tile__cat {
	position: absolute;
	margin: 0;
}

.rs-tile__title {
	left: calc(var(--tx) * var(--u));
	top: calc(var(--ty) * var(--u));
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-size: calc(var(--tf) * var(--u));
	line-height: normal;
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
	text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
}

.rs-tile--aktualnosci .rs-tile__title {
	text-shadow: 0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.2);
}

.rs-tile__chip {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	left: calc(var(--cx) * var(--u));
	top: calc(var(--cy) * var(--u));
	width: calc(var(--cw) * var(--u));
	height: calc(var(--ch) * var(--u));
	padding: 0 calc(var(--cp) * var(--u)) 0 0;
	border-radius: calc(8 * var(--u));
	background: rgba(253, 240, 236, 0.7);
	box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
}

/* BLOG's chip is a drawn SVG shape rather than a plain rounded rectangle. */
.rs-tile--blog .rs-tile__chip {
	background: url("assets/images/tile-chip-blog.svg") no-repeat center / 100% 100%;
	box-shadow: none;
	filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25));
}

.rs-tile__tagline {
	font-family: var(--wp--preset--font-family--accent);
	font-size: calc(var(--cf) * var(--u));
	line-height: normal;
	color: var(--wp--preset--color--ink-soft);
	white-space: nowrap;
}

.rs-tile--aktualnosci .rs-tile__tagline {
	text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) #f4b6c2;
}

/* The "zobacz" arrow: Figma crops the square export to 72x48 (cover). */
.rs-tile__arrow {
	display: block;
	left: calc(var(--ax) * var(--u));
	top: calc(var(--ay) * var(--u));
	width: calc(72 * var(--u));
	height: calc(48 * var(--u));
}

.rs-tile__arrow img,
.rs-promo__arrow img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-tile__cat {
	left: calc(var(--kx) * var(--u));
	top: calc(var(--ky) * var(--u));
	width: calc(var(--kw) * var(--u));
	filter: drop-shadow(calc(2 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25));
}

.rs-tile--aktualnosci .rs-tile__cat {
	filter: drop-shadow(calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25));
}

.rs-tile__cat img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- mobile coordinates, panel 390x220 (frame 27:2) --- */

@media (max-width: 781px) {
	/*                     title               chip                                   arrow           cat */
	.rs-tile--aktualnosci { --tx: 22;    --ty: 58;   --tf: 26; --cx: 26;    --cy: 102;  --cw: 147;   --ch: 26;   --cp: 27; --cf: 13; --ax: 72;    --ay: 137;   --kx: 223;  --ky: 14;   --kw: 87; }
	.rs-tile--rozrywka    { --tx: 170;   --ty: 51;   --tf: 26; --cx: 170;   --cy: 88;   --cw: 165;   --ch: 32;   --cp: 6;  --cf: 13; --ax: 215;   --ay: 125;   --kx: 30;   --ky: 31;   --kw: 98; }
	.rs-tile--pomoc       { --tx: 28;    --ty: 40;   --tf: 28; --cx: 22;    --cy: 86;   --cw: 135;   --ch: 27;   --cp: 13; --cf: 13; --ax: 28;    --ay: 132;   --kx: 195;  --ky: 40;   --kw: 127; }
	.rs-tile--blog        { --tx: 199.7; --ty: 50.6; --tf: 28; --cx: 197.7; --cy: 93.8; --cw: 108.4; --ch: 26.1; --cp: 16; --cf: 13; --ax: 199.7; --ay: 130.9; --kx: 60.2; --ky: -7.6; --kw: 98.4; }

	/* Figma gives POMOC's chip a negative x shadow on mobile only. */
	.rs-tile--pomoc .rs-tile__chip {
		box-shadow: calc(-4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
	}

	.rs-tile--aktualnosci .rs-tile__arrow,
	.rs-tile--blog .rs-tile__arrow {
		filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25));
	}
}

/* ---------------------------------------------------------------------------
 * Section flow
 *
 * WordPress puts a block gap between every direct child of .wp-site-blocks,
 * which showed as 16px white strips between the hero, nav row, promo row,
 * tiles and footer. The design butts these full-bleed bands directly against
 * each other. Scoped to top-level siblings only, so spacing inside post
 * content is untouched.
 * ------------------------------------------------------------------------ */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * NAJNOWSZE — latest posts
 *
 * Figma: cream band, 1440x267 desktop / 390x600 mobile. Cards are 342x120,
 * white, 1px black border, radius 14. Thumbnail 96x96 radius 10 at 12,12.
 *
 * Figma spans the three cards 55..1380 (1325px), wider than the project's
 * 1200px column. Scaled proportionally into 1200 instead — the card-to-gap
 * ratio is preserved (gap 136 rather than 150), keeping the rule that desktop
 * content caps at 1200.
 * ------------------------------------------------------------------------ */

.rs-latest {
	/* Figma mobile: heading at y=40, cards at 95/251/407 each 120 tall,
	   band 600 => 73px below the last card. */
	padding-block: 40px 73px;
	padding-inline: 24px;
}

.rs-latest__heading {
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto 27px;
	font-size: 1.75rem;          /* 28px */
	font-weight: 600;
	font-variation-settings: "opsz" 14, "wdth" 100;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.rs-latest__colon {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 400;
}

.rs-latest__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	list-style: none;
	padding: 0;
}

.rs-latest__card {
	box-sizing: border-box;
	gap: 12px;
	align-items: flex-start;
	height: 120px;
	padding: 12px;
	border: 1px solid #000;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* The grey fill is the empty state as well as the frame — most posts have no
   usable featured image, so the square must look deliberate when bare. */
.rs-latest__thumb {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: 10px;
	background: #d9d9d9;
	overflow: hidden;
}

.rs-latest__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-latest__thumb .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.rs-latest__text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	height: 100%;
	gap: 0;
}

.rs-latest__cat {
	margin: 1px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;        /* 11px */
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--coral);
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rs-latest__cat a {
	color: inherit;
	text-decoration: none;
}

/* Posts sit in several of the 108 categories; the design shows one. */
.rs-latest__cat a:not(:first-of-type),
.rs-latest__cat .wp-block-post-terms__separator {
	display: none;
}

/* Figma allots the title 42px — two lines at 16px/1.3 — so longer titles are
   clamped. The clamp lives on the anchor, not the heading: the heading is a
   flex item, and flex items blockify `display: -webkit-box` away (Chrome
   computes it as `flow-root`), which silently disables line-clamp. */
.rs-latest__card .rs-latest__title {
	margin: 0.55rem 0 0;
	font-size: 1rem;             /* 16px */
	font-weight: 600;
	font-variation-settings: "opsz" 14, "wdth" 100;
	line-height: 1.3;
	color: #000;
	overflow: hidden;
}

.rs-latest__card .rs-latest__title a,
.rs-latest__card .rs-latest__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.rs-latest__title a {
	color: inherit;
	text-decoration: none;
}

.rs-latest__title a:hover,
.rs-latest__title a:focus-visible {
	text-decoration: underline;
}

.rs-latest__date {
	margin: auto 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;        /* 11px */
	font-weight: 600;
	color: #666;
}

/* ---------------------------------------------------------------------------
 * współpraca on mobile
 *
 * Figma treats this as a fifth tile below BLOG (233:113, 390x220): heading
 * "WSPÓŁPRACA" at 28,50, the "Dowiedz się więcej" chip 132x26 at 30,97, the
 * arrow at 41,127, "lub" right-aligned to x=135 at y=141 and the button
 * 96x22.5 at 112.7,170. The cats cut-out is hidden in that frame, so it is
 * hidden here too.
 *
 * The heading is "Współpracuj z nami" on desktop. Both wordings live in the
 * one <h2>; the short one is aria-hidden and the long one stays readable to
 * screen readers on mobile.
 * ------------------------------------------------------------------------ */

.rs-promo__wsp-short {
	display: none;
}

@media (max-width: 781px) {

	.rs-promo__panel--wspolpraca {
		position: relative;
		display: block;
		height: calc(220 * var(--u));
		min-height: 0;
		padding: 0;
		overflow: hidden;
		text-align: left;
	}

	.rs-promo__wsp-body,
	.rs-promo__wsp-text {
		display: contents;
	}

	.rs-promo__cats {
		display: none;
	}

	.rs-promo__title--wsp,
	.rs-promo__body--more,
	.rs-promo__panel--wspolpraca .rs-promo__arrow,
	.rs-promo__or,
	.rs-promo__cta--small {
		position: absolute;
		margin: 0;
	}

	.rs-promo__title--wsp {
		left: calc(28 * var(--u));
		top: calc(50 * var(--u));
		font-family: var(--wp--preset--font-family--display);
		font-variation-settings: "opsz" 14, "wdth" 100;
		font-size: calc(26 * var(--u));
		font-weight: 600;
		line-height: normal;
		letter-spacing: normal;
		white-space: nowrap;
		text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
	}

	.rs-promo__wsp-short {
		display: inline;
		text-transform: uppercase;
	}

	.rs-promo__wsp-long {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.rs-promo__body--more {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		left: calc(30 * var(--u));
		top: calc(97 * var(--u));
		width: calc(132 * var(--u));
		height: calc(26 * var(--u));
		padding: 0 calc(13 * var(--u)) 0 0;
		border-radius: calc(8 * var(--u));
		background: rgba(253, 240, 236, 0.7);
		box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
		font-family: var(--wp--preset--font-family--accent);
		font-size: calc(13 * var(--u));
		font-weight: 400;
		line-height: normal;
		letter-spacing: normal;
		color: var(--wp--preset--color--ink-soft);
		white-space: nowrap;
	}

	.rs-promo__panel--wspolpraca .rs-promo__arrow {
		left: calc(41 * var(--u));
		top: calc(127 * var(--u));
		width: calc(72 * var(--u));
		height: calc(48 * var(--u));
	}

	.rs-promo__or {
		left: calc(85 * var(--u));
		top: calc(141 * var(--u));
		width: calc(50 * var(--u));
		font-family: var(--wp--preset--font-family--accent);
		font-size: calc(13 * var(--u));
		font-weight: 400;
		line-height: normal;
		letter-spacing: normal;
		text-align: right;
		color: var(--wp--preset--color--ink-soft);
	}

	.rs-promo__cta--small {
		left: calc(112.7 * var(--u));
		top: calc(170 * var(--u));
		width: calc(95.9 * var(--u));
		height: calc(22.5 * var(--u));
		border-radius: calc(10 * var(--u));
	}

	.rs-promo__cta--small .rs-promo__cta-label {
		font-size: calc(7.5 * var(--u));
		letter-spacing: calc(0.15 * var(--u));
	}

	.rs-promo__cta--small .rs-promo__cursor {
		right: calc(-0.45 * var(--u));
		bottom: calc(-5.45 * var(--u));
		width: calc(17.35 * var(--u));
	}
}

/* ===========================================================================
 * HOME — mobile (below 782px)
 *
 * The 390 frame (27:2) scaled to the phone's width with --u, so a 360 or 430
 * phone gets the design rather than 390-pixel geometry with stretched gaps.
 * The tiles and współpraca are above; this is the hero, the icon grid,
 * adopcja.tv and NAJNOWSZE. The coral hero is 180 tall instead of 270, as
 * requested, with the same content block centred in it.
 * ======================================================================== */

@media (max-width: 781px) {

	/* --- hero --- */

	.rs-hero__intro {
		padding: 0;
	}

	.rs-hero__title {
		font-size: calc(42 * var(--u));
		line-height: calc(57 * var(--u));
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	}

	.rs-hero__tagline {
		margin: calc(8 * var(--u)) 0 0;
		font-size: calc(15 * var(--u));
		line-height: calc(20 * var(--u));
		letter-spacing: 0;
		text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
	}

	/* 40px icons at x=90/173/260: 43 and 47 apart. */
	.rs-hero__icons {
		gap: calc(45 * var(--u));
		margin-top: calc(19 * var(--u));
	}

	.rs-hero__icon {
		width: calc(40 * var(--u));
		filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25));
	}

	/* --- icon grid: 390x420, 90-wide items at x=20/150/280, rows 125 apart --- */

	.rs-navrow__nav {
		display: block;
		height: calc(420 * var(--u));
		min-height: 0;
		padding: calc(40 * var(--u)) 0 0 calc(20 * var(--u));
	}

	.rs-navrow__list {
		grid-template-columns: repeat(3, calc(90 * var(--u)));
		gap: calc(21 * var(--u)) calc(40 * var(--u));
	}

	.rs-navrow__link {
		gap: calc(9 * var(--u));
	}

	.rs-navrow__icon {
		width: calc(76 * var(--u));
		height: calc(76 * var(--u));
	}

	.rs-navrow__label {
		font-size: calc(14 * var(--u));
		letter-spacing: calc(0.7 * var(--u));
		line-height: normal;
		white-space: nowrap;
	}

	/* --- adopcja.tv: 390x424 --- */

	.rs-promo__panel--adopcja {
		position: relative;
		display: block;
		height: calc(424 * var(--u));
		min-height: 0;
		padding: 0;
	}

	.rs-promo__panel--adopcja .rs-promo__text {
		display: contents;
	}

	.rs-promo__panel--adopcja .rs-promo__logo,
	.rs-promo__panel--adopcja .rs-promo__title,
	.rs-promo__panel--adopcja .rs-promo__body,
	.rs-promo__panel--adopcja .rs-promo__cta {
		position: absolute;
		margin: 0;
	}

	.rs-promo__panel--adopcja .rs-promo__title {
		left: calc(20 * var(--u));
		top: calc(40 * var(--u));
		width: calc(350 * var(--u));
		font-size: calc(28 * var(--u));
		line-height: normal;
		letter-spacing: calc(1.4 * var(--u));
	}

	.rs-promo__panel--adopcja .rs-promo__body {
		left: calc(30 * var(--u));
		top: calc(105 * var(--u));
		width: calc(340 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: normal;
		letter-spacing: calc(0.9 * var(--u));
	}

	/* 320x119 box; the export is 320x114, centred in it. */
	.rs-promo__panel--adopcja .rs-promo__logo {
		left: calc(40 * var(--u));
		top: calc(167.5 * var(--u));
		width: calc(320 * var(--u));
	}

	.rs-promo__panel--adopcja .rs-promo__cta {
		left: calc(128.2 * var(--u));
		top: calc(324 * var(--u));
		width: calc(144.3 * var(--u));
		height: calc(43.2 * var(--u));
		border-radius: calc(10 * var(--u));
	}

	.rs-promo__panel--adopcja .rs-promo__cta-label {
		font-size: calc(12 * var(--u));
		letter-spacing: calc(0.6 * var(--u));
	}

	.rs-promo__panel--adopcja .rs-promo__cursor {
		right: calc(0.15 * var(--u));
		bottom: calc(-13.5 * var(--u));
		width: calc(27.15 * var(--u));
	}

	/* --- NAJNOWSZE: 390x600, cards 342x120 at x=24, y=95/251/407 --- */

	.rs-latest {
		padding: calc(40 * var(--u)) calc(24 * var(--u)) calc(73 * var(--u));
	}

	.rs-latest__heading {
		margin-bottom: calc(21 * var(--u));
		font-size: calc(28 * var(--u));
		line-height: calc(34 * var(--u));
	}

	.rs-latest__colon {
		font-size: calc(13 * var(--u));
	}

	.rs-latest__list {
		gap: calc(36 * var(--u));
	}

	.rs-latest__card {
		gap: calc(16 * var(--u));
		height: calc(120 * var(--u));
		padding: calc(12 * var(--u));
		border-radius: calc(14 * var(--u));
	}

	.rs-latest__thumb {
		width: calc(96 * var(--u));
		height: calc(96 * var(--u));
		border-radius: calc(10 * var(--u));
	}

	.rs-latest__cat,
	.rs-latest__date {
		font-size: calc(11 * var(--u));
	}

	.rs-latest__card .rs-latest__title {
		margin-top: calc(7 * var(--u));
		font-size: calc(16 * var(--u));
		line-height: normal;
	}
}

/* ===========================================================================
 * HOME — desktop (782px and up)
 *
 * The 1440 Figma frame, scaled to the viewport. Every length is a Figma pixel
 * times --u (one Figma pixel at the current width), so the page is the design
 * at any desktop width: a 1920 monitor gets the 1440 layout at 1.33x instead
 * of a 1200 strip with a fixed-size collage stranded in wide bands, and a
 * laptop gets it slightly smaller. cqw is the .wp-site-blocks width, which
 * unlike vw excludes a classic scrollbar.
 *
 * Coordinates are panel-relative, read from the frame (8:2). The hero is the
 * one deliberate deviation: 415 tall instead of 620, as requested, with the
 * logo kept large rather than shrunk by the same third.
 * ======================================================================== */

@media (min-width: 782px) {

	.rs-hero,
	.rs-navrow,
	.rs-band,
	.rs-latest,
	.home .rs-footer {
		--u: calc(100cqw / 1440);
	}

	/* --- hero: coral 960 + cream 480 ------------------------------------- */

	.rs-hero {
		grid-template-columns: 2fr 1fr;
	}

	.rs-hero__intro {
		aspect-ratio: auto;
		height: calc(415 * var(--u));
		padding: 0;
	}

	.rs-hero__title {
		font-size: calc(86 * var(--u));
		line-height: calc(103 * var(--u));
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	}

	.rs-hero__tagline {
		margin: calc(37 * var(--u)) 0 0;
		font-size: calc(30 * var(--u));
		line-height: calc(67 * var(--u));
		letter-spacing: 0;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	}

	/* Icons 94x79, 91, 91 at x=258/435/608 of the panel: 83 and 82 apart. */
	.rs-hero__icons {
		align-items: flex-start;
		gap: calc(82.5 * var(--u));
		margin-top: 0;
	}

	.rs-hero__icon {
		width: calc(91 * var(--u));
		filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25));
	}

	.rs-hero__icon img {
		height: calc(91 * var(--u));
		object-fit: cover;
	}

	.rs-hero__icon:first-child {
		width: calc(94 * var(--u));
	}

	.rs-hero__icon:first-child img {
		height: calc(79 * var(--u));
	}

	/* Ring 361 in Figma's 620-tall panel; 330 here, centred. */
	.rs-hero__avatar {
		aspect-ratio: auto;
	}

	.rs-hero__logo {
		width: calc(372 * var(--u));
	}

	/* --- icon row: 1440x190, nine 90-wide items 155 apart from x=56 ------- */

	.rs-navrow__nav {
		display: block;
		height: calc(190 * var(--u));
		min-height: 0;
		padding: calc(41 * var(--u)) calc(23.5 * var(--u)) 0;
	}

	.rs-navrow__list {
		grid-template-columns: repeat(9, 1fr);
		gap: 0;
	}

	.rs-navrow__link {
		gap: calc(9 * var(--u));
	}

	.rs-navrow__icon {
		width: calc(76 * var(--u));
		height: calc(76 * var(--u));
	}

	/* Floors keep the smallest copy legible on tablets, where the frame is
	   drawn at ~0.55x; above ~1030 they never engage. */
	.rs-navrow__label {
		font-size: max(calc(14 * var(--u)), 10px);
		letter-spacing: calc(0.7 * var(--u));
		line-height: normal;
	}

	/* --- promo row (300) and tiles (320) --------------------------------- */

	.rs-band {
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: calc(300 * var(--u)) calc(320 * var(--u));
	}

	.rs-promo__panel--adopcja    { grid-column: span 8; order: 1; }
	.rs-promo__panel--wspolpraca { grid-column: span 4; order: 2; }
	.rs-tile                     { grid-column: span 3; }
	.rs-tile--aktualnosci        { order: 3; }
	.rs-tile--rozrywka           { order: 4; }
	.rs-tile--pomoc              { order: 5; }
	.rs-tile--blog               { order: 6; }

	/* Both promo panels and all four tiles are laid out absolutely to the
	   frame's coordinates; their wrappers drop out of the box tree. */
	.rs-band .rs-promo__panel {
		position: relative;
		display: block;
		height: auto;
		min-height: 0;
		padding: 0;
		overflow: hidden;
	}

	.rs-band .rs-promo__text,
	.rs-band .rs-promo__wsp-body,
	.rs-band .rs-promo__wsp-text {
		display: contents;
	}

	.rs-band .rs-promo__panel > *,
	.rs-band .rs-promo__panel .rs-promo__text > *,
	.rs-band .rs-promo__panel .rs-promo__wsp-body > *,
	.rs-band .rs-promo__panel .rs-promo__wsp-text > * {
		position: absolute;
		margin: 0;
	}

	.rs-band .rs-promo__title,
	.rs-band .rs-promo__body {
		line-height: normal;
		text-align: center;
	}

	.rs-band .rs-promo__cta {
		border-radius: calc(10 * var(--u));
	}

	/* adopcja.tv — panel 960 */
	.rs-band .rs-promo__logo {
		left: calc(63 * var(--u));
		top: calc(63 * var(--u));
		width: calc(420 * var(--u));
	}

	.rs-band .rs-promo__panel--adopcja .rs-promo__title {
		left: calc(471 * var(--u));
		top: calc(38 * var(--u));
		width: calc(450 * var(--u));
		font-size: calc(40 * var(--u));
		letter-spacing: calc(2 * var(--u));
	}

	.rs-band .rs-promo__panel--adopcja .rs-promo__body {
		left: calc(508 * var(--u));
		top: calc(113 * var(--u));
		width: calc(350 * var(--u));
		font-size: calc(20 * var(--u));
		letter-spacing: calc(1 * var(--u));
	}

	.rs-band .rs-promo__panel--adopcja .rs-promo__cta {
		left: calc(603 * var(--u));
		top: calc(194 * var(--u));
		width: calc(156 * var(--u));
		height: calc(38 * var(--u));
	}

	.rs-band .rs-promo__cta-label {
		font-size: calc(12 * var(--u));
		letter-spacing: calc(0.6 * var(--u));
	}

	.rs-band .rs-promo__cursor {
		right: calc(14.4 * var(--u));
		bottom: calc(-13.3 * var(--u));
		width: calc(24.3 * var(--u));
	}

	/* współpraca — panel 480 */
	.rs-band .rs-promo__title--wsp {
		left: calc(-5 * var(--u));
		top: calc(47 * var(--u));
		width: calc(450 * var(--u));
		font-size: calc(30 * var(--u));
		letter-spacing: calc(1.5 * var(--u));
	}

	.rs-band .rs-promo__cats {
		left: calc(26 * var(--u));
		top: calc(104 * var(--u));
		width: calc(176 * var(--u));
		filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25));
	}

	.rs-band .rs-promo__body--more,
	.rs-band .rs-promo__or {
		left: calc(149 * var(--u));
		width: calc(350 * var(--u));
		font-size: calc(20 * var(--u));
		letter-spacing: calc(1 * var(--u));
	}

	.rs-band .rs-promo__body--more { top: calc(104 * var(--u)); }
	.rs-band .rs-promo__or         { top: calc(185 * var(--u)); }

	.rs-band .rs-promo__panel--wspolpraca .rs-promo__arrow {
		left: calc(288 * var(--u));
		top: calc(131 * var(--u));
	}

	.rs-band .rs-promo__cta--small {
		left: calc(277 * var(--u));
		top: calc(217 * var(--u));
		width: calc(103.6 * var(--u));
		height: calc(25.8 * var(--u));
	}

	.rs-band .rs-promo__cta--small .rs-promo__cta-label {
		font-size: calc(10 * var(--u));
		letter-spacing: calc(0.2 * var(--u));
	}

	.rs-band .rs-promo__cta--small .rs-promo__cursor {
		right: calc(-0.4 * var(--u));
		bottom: calc(-6.2 * var(--u));
		width: calc(19.3 * var(--u));
	}

	.rs-band .rs-promo__panel--wspolpraca .rs-promo__arrow {
		width: calc(72 * var(--u));
		height: calc(48 * var(--u));
		filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25));
	}

	/* tiles — 360x320 (coordinates relative to each tile; BLOG's from x=1080) */
	.rs-tile {
		height: calc(320 * var(--u));
	}

	/*                     title                    chip                                          arrow                 cat */
	.rs-tile--aktualnosci { --tx: 31;  --ty: 111; --tf: 27; --cx: 31;  --cy: 155; --cw: 154; --ch: 33; --cp: 17; --cf: 15; --ax: 55;  --ay: 198; --kx: 228; --ky: 72; --kw: 90; }
	.rs-tile--rozrywka    { --tx: 145; --ty: 110; --tf: 28; --cx: 145; --cy: 152; --cw: 195; --ch: 36; --cp: 15; --cf: 15; --ax: 201; --ay: 198; --kx: 26;  --ky: 90; --kw: 107; }
	.rs-tile--pomoc       { --tx: 39;  --ty: 108; --tf: 30; --cx: 33;  --cy: 152; --cw: 147; --ch: 33; --cp: 8;  --cf: 16; --ax: 55;  --ay: 198; --kx: 208; --ky: 97; --kw: 130; }
	.rs-tile--blog        { --tx: 38;  --ty: 111; --tf: 30; --cx: 38;  --cy: 155; --cw: 123; --ch: 29; --cp: 14; --cf: 16; --ax: 40;  --ay: 191; --kx: 194; --ky: 63; --kw: 98; }

	/* --- NAJNOWSZE: 1440x267, cards 342x120 at x=55/547/1038, y=91 ------- */

	.rs-latest {
		padding: calc(36 * var(--u)) 0 calc(56 * var(--u));
	}

	.rs-latest__heading {
		max-width: none;
		margin: 0 0 calc(21 * var(--u)) calc(24 * var(--u));
		font-size: calc(28 * var(--u));
		line-height: calc(34 * var(--u));
	}

	.rs-latest__colon {
		font-size: calc(13 * var(--u));
	}

	.rs-latest__list {
		grid-template-columns: repeat(3, calc(342 * var(--u)));
		column-gap: calc(149.5 * var(--u));
		max-width: none;
		margin: 0;
		padding-left: calc(55 * var(--u));
	}

	.rs-latest__card {
		gap: calc(16 * var(--u));
		height: calc(120 * var(--u));
		padding: calc(12 * var(--u));
		border-radius: calc(14 * var(--u));
	}

	.rs-latest__thumb {
		width: calc(96 * var(--u));
		height: calc(96 * var(--u));
		border-radius: calc(10 * var(--u));
	}

	.rs-latest__cat,
	.rs-latest__date {
		font-size: max(calc(11 * var(--u)), 9px);
	}

	.rs-latest__card .rs-latest__title {
		margin-top: calc(7 * var(--u));
		font-size: max(calc(16 * var(--u)), 11px);
		line-height: normal;
	}

	/* The home frame runs the footer full width from x=24 (the blog frame
	   insets it to the 1200 column, which the other pages keep). */
	.home .rs-footer {
		padding-inline: calc(24 * var(--u));
	}

	.home .rs-footer > * {
		max-width: none;
		margin-inline: 0 !important;
	}
}

/* ===========================================================================
 * BLOG INDEX (templates/home.html)
 *
 * Figma frame is 1300 wide and the blog content spans x=53..1253 — exactly
 * 1200px, so this page needs no adjustment to meet the project's content-width
 * rule.
 * ======================================================================== */

/* --- banner --------------------------------------------------------------- */

.rs-bloghero {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	background: #ebb400;
	min-height: 270px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}

.rs-bloghero__inner {
	position: relative;
	z-index: 1;
	padding-inline: var(--wp--preset--spacing--40);
}

.rs-bloghero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 600;
	font-size: clamp(2.75rem, 4.46vw, 3.625rem);   /* 44 -> 58 */
	line-height: 1.1;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.rs-bloghero__lead {
	margin: 0.75rem 0 0;
	font-weight: 500;
	font-size: clamp(1.375rem, 2.54vw, 2.0625rem); /* 22 -> 33 */
	line-height: 1.25;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.rs-bloghero__icon {
	display: block;
	width: clamp(23px, 3.4vw, 44px);
	height: auto;
	margin: 0.9rem auto 0;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}

/* Figma rotates a 70.22x162.888 image by 1.56deg and places the resulting
   74.634x164.742 bbox at 269,105 in the 390x270 mobile band. left/top below are
   the un-rotated layout box, since the rotation expands the painted area
   symmetrically: 269 + (74.634-70.22)/2 = 271.2, 105 + (164.742-162.888)/2 =
   105.9. The previous right/top percentages were a guess and put the cat 78px
   too high on mobile and 174px too far right on desktop. */
.rs-bloghero__cat {
	position: absolute;
	left: 69.54%;                    /* 271.2 of 390 */
	top: 105.9px;
	width: 18%;                      /* 70.22 of 390 */
	height: auto;
	transform: rotate(1.56deg);
	filter: drop-shadow(-1px 1px 4px rgba(0, 0, 0, 0.25));
}

/* --- kategorie ------------------------------------------------------------ */

.rs-blogcats {
	padding-inline: 0;
}

/* Figma insets the cream panel to the 1200 column; on the live site that left
   white strips on wide screens, so the cream bleeds full width and the padding
   centres the 1200 column inside it. */
.rs-blogcats__panel {
	box-sizing: border-box;
	/* Mobile, read from the live file: panel 390x850, heading at 20,28,
	   cards 175x175 at x=12/205 and y=347/545/743/941 (gaps 18 / 23). */
	/* Figma's 12/10 sides put KATEGORIE and the cards on the screen edge. */
	padding: 28px 20px 4px;
	background: var(--wp--preset--color--cream);
}

.rs-blogcats__heading,
.rs-bloglatest__heading,
.rs-blogaside__heading {
	margin: 0 0 23px;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 600;
	font-size: 1.75rem;              /* 28px */
	line-height: 1;
	color: var(--wp--preset--color--ink);
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.rs-blogcats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 23px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-blogcat {
	height: 175px;
}

.rs-blogcat__link {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon title"
		"desc desc";
	align-content: start;
	column-gap: 7px;
	overflow: hidden;
	height: 100%;
	padding: 19px 10px;
	border-radius: 12px;
	background: #e7b0bc;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	color: #000;
	text-decoration: none;
}

.rs-blogcat__icon {
	grid-area: icon;
	display: block;
	width: 30px;
	height: auto;
}

.rs-blogcat__title {
	grid-area: title;
	align-self: center;
	display: block;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.875rem;
	line-height: 1.15;
}

.rs-blogcat__desc {
	grid-area: desc;
	display: block;
	margin-top: 0.35rem;
	margin-left: var(--rs-desc-l, 0);
	max-width: var(--rs-desc-w, 58%);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

.rs-blogcat__cat {
	/* Mobile cut-out geometry, per card, read from the live file. */
	position: absolute;
	left: var(--rs-mcat-x);
	top: var(--rs-mcat-y);
	right: auto;
	bottom: auto;
	width: var(--rs-mcat-w);
	height: auto;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.rs-blogcat--zdrowie     { --rs-mcat-x:  6px; --rs-mcat-y: 54px; --rs-mcat-w:  63px; --rs-desc-l: 71px; --rs-desc-w: 84px; }
.rs-blogcat--zachowanie  { --rs-mcat-x: 10px; --rs-mcat-y: 53px; --rs-mcat-w:  51px; --rs-desc-l: 61px; --rs-desc-w: 94px; }
.rs-blogcat--zywienie    { --rs-mcat-x: 76px; --rs-mcat-y: 70px; --rs-mcat-w: 103px; --rs-desc-w: 66px; }
.rs-blogcat--zycie       { --rs-mcat-x: 22px; --rs-mcat-y: 54px; --rs-mcat-w:  37px; --rs-desc-l: 71px; --rs-desc-w: 84px; }
.rs-blogcat--adopcja     { --rs-mcat-x: 97px; --rs-mcat-y: 49px; --rs-mcat-w:  68px; --rs-desc-l: 6px;  --rs-desc-w: 78px; }
.rs-blogcat--ciekawostki { --rs-mcat-x: 41px; --rs-mcat-y: 88px; --rs-mcat-w: 115px; --rs-desc-l: 7px;  --rs-desc-w: 96px; }
.rs-blogcat--kultura     { --rs-mcat-x: 97px; --rs-mcat-y: 54px; --rs-mcat-w:  61px; --rs-desc-l: 5px;  --rs-desc-w: 80px; }
.rs-blogcat--aktualnosci { --rs-mcat-x: 88px; --rs-mcat-y: 58px; --rs-mcat-w:  74px; --rs-desc-l: 7px;  --rs-desc-w: 69px; }

/* --- bottom: najnowsze + nie przegap -------------------------------------- */

/* Figma runs one continuous cream area from below the banner to above the
   footer (y=320..1640, x=53..1253), with the pink category cards and the white
   post cards sitting on it. Splitting it into per-section panels left white
   showing behind NIE PRZEGAP. */
.rs-blogbottom {
	box-sizing: border-box;
	display: grid;
	/* minmax(0,…): the newsletter form's intrinsic width otherwise pushes the
	   column past the viewport at 390. */
	grid-template-columns: minmax(0, 1fr);
	/* Mobile rhythm, measured on the 1:1 render: the categories panel ends at
	   1120 and NAJNOWSZE starts at 1170 (50), the last post card ends at 1798
	   and NIE PRZEGAP starts at 1837 (39), and the newsletter ends 33 above the
	   footer. */
	gap: 39px 0;
	padding: 50px 20px 33px;
	background: var(--wp--preset--color--cream);
}

.rs-bloglatest { box-sizing: border-box; }

/* Figma sits these two headings 8px above their panels; KATEGORIE sits inside
   its panel with a 32px gap, so they cannot share a margin. */
.rs-bloglatest__heading,
.rs-blogaside__heading {
	margin-bottom: 17px;
}

/* Figma puts both column headings above their panels (y=994) rather than
   inside them (panels start at y=1002). The panel itself carries no separate
   background — the section behind it is already the same cream. */
.rs-bloglatest__panel {
	box-sizing: border-box;
	padding: 0 0 8px;
}

.rs-bloglatest__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Blog cards differ from the homepage: 260x120, no border, 100px thumbnail. */
.rs-blogcard {
	/* Mobile: 342x120, thumb 96 at 12,12, text column starting at x=124.
	   Desktop overrides to 8px padding / 100px thumb / 4px gap. */
	box-sizing: border-box;
	gap: 16px;
	align-items: flex-start;
	height: 120px;
	padding: 12px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.rs-blogcard__thumb {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: 10px;
	background: #d9d9d9;
	overflow: hidden;
}

.rs-blogcard__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-blogcard__thumb .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.rs-blogcard__text {
	/* Figma: category text bottom at 37, title box 44..86, date bottom at 103
	   in a 120px card — the block starts well below the top, it is not packed
	   against it. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	height: 100%;
	/* padding rather than a margin on the date: `margin-top: auto` absorbs a
	   sibling bottom margin, so the date sat flush with the box bottom. */
	padding: 17px 0 9px;
	gap: 0;
}

.rs-blogcard__cat {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;             /* 10px */
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--coral);
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rs-blogcard__cat a { color: inherit; text-decoration: none; }

.rs-blogcard__cat a:not(:first-of-type),
.rs-blogcard__cat .wp-block-post-terms__separator { display: none; }

.rs-blogcard .rs-blogcard__title {
	margin: 7px 0 0;
	font-size: 0.75rem;              /* 12px */
	font-weight: 600;
	font-variation-settings: "opsz" 14, "wdth" 100;
	line-height: 1.35;
	color: #000;
	overflow: hidden;
}

.rs-blogcard .rs-blogcard__title,
.rs-blogcard .rs-blogcard__title a {
	display: -webkit-box;
	/* Figma allots a 42px box — two lines at 12px/1.35. A third line ran into
	   the date. */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	max-height: 42px;
}

.rs-blogcard__title a { color: inherit; text-decoration: none; }
.rs-blogcard__title a:hover { text-decoration: underline; }

.rs-blogcard__date {
	margin: auto 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;            /* 11px */
	font-weight: 600;
	color: #666;
}

/* --- facebook card -------------------------------------------------------- */

.rs-blogaside {
	box-sizing: border-box;
	padding-inline: 2px;
}

.rs-blogfb {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	min-height: 340px;
	padding: 22px 20px;
	border-radius: 16px;
	background: linear-gradient(180deg, #e7b0bc 0%, #fbeca8 100%);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.rs-blogfb__photo {
	position: absolute;
	z-index: 1;
	left: -6%;
	bottom: -6%;
	width: 62%;
	height: auto;
	transform: rotate(0.89deg);
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.25));
}

/* Both cards carry a translucent amber shape behind the artwork
   (rgba(255,184,10,0.1) in Figma). Decorative, so a pseudo-element. */
.rs-blogfb::before,
.rs-blognl::before {
	content: "";
	position: absolute;
	background: rgba(255, 184, 10, 0.1);
	pointer-events: none;
}

.rs-blogfb::before {
	left: 1px;
	top: 86px;
	width: 357px;
	height: 240px;
	border-radius: 40px;
}

.rs-blognl::before {
	left: 7px;
	top: 84px;
	width: 122px;
	height: 92px;
	border-radius: 0 58px 58px 0;
}

/* Figma puts the icon and title on one line at the top of the card, title
   left-aligned beside the icon — not stacked and right-aligned. */
.rs-blogfb__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
}

.rs-blogfb__icon {
	display: block;
	flex: none;
	width: 62px;
	height: auto;
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.25));
}

.rs-blogfb__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.5rem;               /* 24px */
	line-height: 1.2;
	color: #000;
	text-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
}

.rs-blogfb__lead {
	/* Fluid by default; the Figma pixel column is applied at desktop only. */
	position: relative;
	margin: 1rem 0 0 auto;
	max-width: 58%;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 1.25rem;              /* 20px */
	line-height: 30px;
	text-align: center;
	color: #000;
	white-space: normal;
}

.rs-blogfb__cta {
	position: absolute;
	right: 24px;
	bottom: 26px;
}

/* --- newsletter card ------------------------------------------------------ */

.rs-blognl {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	min-height: 200px;
	margin-top: 17px;
	padding: 14px 20px;
	border-radius: 12px;
	background: var(--wp--preset--color--lemon);
}

.rs-blognl__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
}

.rs-blognl__icon {
	display: block;
	flex: none;
	width: 36px;
	height: auto;
	filter: drop-shadow(-1px 1px 4px rgba(0, 0, 0, 0.25));
}

.rs-blognl__cat {
	position: absolute;
	z-index: 1;
	left: 2%;
	bottom: 0;
	width: 124px;
	height: auto;
	filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.25));
}

.rs-blognl__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.25rem;              /* 20px */
	letter-spacing: 0.03em;
	color: #000;
	text-shadow: 0 3px 4px rgba(0, 0, 0, 0.25);
}

.rs-blognl__lead {
	margin: 0.5rem 0 0 auto;
	max-width: 62%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;            /* 13px */
	line-height: 1.35;
	letter-spacing: 0.05em;
	text-align: center;
	color: #000;
}

.rs-blognl__form {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 0.9rem;
}

.rs-blognl__input {
	box-sizing: border-box;
	width: 150px;
	height: 30px;
	padding: 0 0.6rem;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 8px;
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	color: #000;
}

.rs-blognl__cta {
	border: 1px solid #000;
	cursor: pointer;
}

@media (min-width: 782px) {

	.rs-bloghero { min-height: 319px; }   /* measured 0..319 on the 1:1 render */

	/* Desktop band is 1200x319: image 116.912x271.199 whose rotated bbox sits
	   at 833,40, so the layout box is 836.7,41.5. */
	.rs-bloghero__cat {
		/* The band runs full width; the cat keeps its place in the centred
		   1200 column: 836.7 of 1200 is 236.7 right of centre. */
		left: calc(50% + min(19.72%, 236.7px));
		top: 41.5px;
		width: min(9.74%, 116.9px);
		filter: drop-shadow(-1px -1px 4px rgba(0, 0, 0, 0.25));
	}

	.rs-blogcats__panel { padding: 32px calc(max(0px, (100% - var(--wp--style--global--content-size)) / 2) + 39px) 54px; }

	.rs-blogcats__heading { margin-bottom: 32px; }

	.rs-blogcats__grid {
		/* Measured off the 1:1 render: card rows start at 411 and 672 (240 tall
		   => 21px apart), columns at 92/380/667/954 (260 wide => 28 apart).
		   Below 1200 the cards keep their designed 260 and as many fit as the
		   width allows (two at 782, three at 1024), centred; stretched to fill,
		   they ran to 460 with the copy stranded in one corner. */
		grid-template-columns: repeat(auto-fill, 260px);
		justify-content: center;
		gap: 21px 28px;
	}

	.rs-blogcat { height: 240px; }

	/* Icon and title sit on one line at both breakpoints — Figma never stacks
	   them. Only the sizes change. */
	.rs-blogcat__link {
		/* Figma leaves only ~5px between icon and title, which is what lets
		   "Ciekawostki i nauka" stay on one line at 20px. */
		padding: 20px 12px 20px 16px;
		column-gap: 5px;
	}

	.rs-blogcat__title {
		font-size: 1.25rem;
		line-height: 1.2;
	}

	.rs-blogcat__desc {
		margin-top: 0.85rem;
		max-width: 61%;          /* Figma: ~159 of 260 */
		font-size: 1rem;
		line-height: 22px;
	}

	/* Cut-out geometry derived from the Figma node coordinates, not eyeballed
	   from a render — the earlier values were all 15-35% too small. Each card
	   gets its own width, height, side and bottom offset. Figma puts the cat on
	   the left in the first two cards and on the right in the other six.
	   `zywienie` deliberately overhangs its card by 3px. */
	.rs-blogcat__cat {
		width: var(--rs-cat-w);
		height: var(--rs-cat-h);
		right: var(--rs-cat-r, auto);
		left: var(--rs-cat-l, auto);
		top: auto;
		bottom: var(--rs-cat-b);
		object-fit: contain;
		object-position: bottom;
	}

	/* Reset the mobile desc offsets — desktop has its own. */
	.rs-blogcat__desc { margin-left: 0; }

	.rs-blogcat--zdrowie     { --rs-cat-w:  81px; --rs-cat-h: 122px; --rs-cat-l:  17px; --rs-cat-b: 35px; }
	.rs-blogcat--zachowanie  { --rs-cat-w:  65px; --rs-cat-h: 136px; --rs-cat-l:  21px; --rs-cat-b: 23px; }
	.rs-blogcat--zywienie    { --rs-cat-w: 142px; --rs-cat-h: 132px; --rs-cat-r:  -3px; --rs-cat-b: 20px; }
	.rs-blogcat--zycie       { --rs-cat-w:  47px; --rs-cat-h: 133px; --rs-cat-r:  44px; --rs-cat-b: 24px; }
	.rs-blogcat--adopcja     { --rs-cat-w:  91px; --rs-cat-h: 147px; --rs-cat-r:  14px; --rs-cat-b: 29px; }
	.rs-blogcat--ciekawostki { --rs-cat-w: 158px; --rs-cat-h: 107px; --rs-cat-r:  17px; --rs-cat-b: 25px; }
	.rs-blogcat--kultura     { --rs-cat-w:  80px; --rs-cat-h: 140px; --rs-cat-r:  40px; --rs-cat-b: 22px; }
	.rs-blogcat--aktualnosci { --rs-cat-w:  98px; --rs-cat-h: 129px; --rs-cat-r:  38px; --rs-cat-b: 40px; }

	/* Figma's icons are 41px frames; the stethoscope is a 35x36 drawing
	   centred in its frame. */
	.rs-blogcat__icon { width: 41px; }

	.rs-blogcat--zdrowie .rs-blogcat__icon {
		width: 35px;
		margin: 2px 3px 3px;
	}

	/* Figma tops single-line titles at 29 and two-line titles at 24; centring
	   against the icon gives 29 and 20, so the wrapped ones need 4px. */
	.rs-blogcat--zachowanie .rs-blogcat__title,
	.rs-blogcat--zywienie .rs-blogcat__title,
	.rs-blogcat--kultura .rs-blogcat__title {
		margin-top: 4px;
	}

	.rs-blogcat--zdrowie .rs-blogcat__desc,
	.rs-blogcat--zachowanie .rs-blogcat__desc {
		margin-left: auto;
		max-width: 58%;
	}

	/* Figma sets NAJNOWSZE at x=93 against a column edge of 53. NIE PRZEGAP is
	   already inset by .rs-blogaside's own 13px padding. */
	.rs-bloglatest__heading { padding-left: 40px; }

	/* Headings sit at y 966..994 and both panels start at 1034. */
	.rs-bloglatest__heading,
	.rs-blogaside__heading { margin-bottom: 40px; }

	/* minmax(0,…) again: the cards' intrinsic width otherwise pushes the two
	   columns to 285 each and overflows the 546px panel. */
	.rs-bloglatest__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Desktop card: thumb 100 at 8,8 with the text column at x=128 — measured
	   off the 1:1 render, where the category label starts at 126 and the title
	   at 129 (Figma right-aligns both boxes, so the node x is not the text x). */
	.rs-blogcard { padding: 8px; gap: 20px; }

	.rs-blogcard__thumb { width: 100px; height: 100px; }

	/* Cards sit at x=83 in a column starting at 53, and the second column ends
	   24px short of the panel: 30 + 260 + 26 + 260 + 24 = 600. */
	.rs-bloglatest__panel { padding: 0 24px 0 30px; }

	/* Rows are 148 apart with 120px cards (28), columns 26. */
	.rs-bloglatest__list { gap: 28px 26px; }

	.rs-blogaside { padding-inline: 13px 27px; }

	/* Both columns are 600 wide in the design. Capping them keeps the post
	   cards at 260 and the Facebook card at 560 between 782 and 1199, where the
	   sections stack full-width and would otherwise stretch their absolutely
	   positioned contents across empty space. At 1200+ the grid columns are
	   already 600, so this is inert. */
	.rs-bloglatest,
	.rs-blogaside {
		/* width:100% is required — margin-inline:auto alone stops a grid item
		   stretching, collapsing it to fit-content. */
		width: 100%;
		max-width: 600px;
		margin-inline: auto;
	}

	/* No side padding: the two columns are 600 each and must span the full 1200,
	   or the Facebook card comes out 521 wide instead of 560. The 40px bottom
	   lands the cream on the footer at y=1638, as in the design. */
	.rs-blogbottom { padding: 0 max(0px, (100% - var(--wp--style--global--content-size)) / 2) 40px; }

	.rs-blogfb { height: 340px; padding-inline: 24px; }

	.rs-blognl { height: 200px; padding-inline: 24px; }

	/* Facebook card laid out to Figma's child coordinates (card 560x340):
	   icon 62 at 11,26 · title right edge 404 at y=39 · amber shape 357x240 at
	   1,86 · photo 547x547 at -86,-12 · lead 272 at 324,94 · button 127x38 at
	   392,268. The photo is far larger than the card and is clipped by it. */
	.rs-blogfb__head {
		position: absolute;
		left: 11px;
		top: 26px;
		gap: 7px;
	}

	.rs-blogfb__icon { width: 62px; }

	.rs-blogfb__photo {
		left: -86px;
		top: -12px;
		bottom: auto;
		width: 547px;
	}

	.rs-blogfb__lead {
		position: absolute;
		left: 324px;
		top: 94px;
		width: 272px;
		max-width: none;
		margin: 0;
	}

	.rs-blogfb__cta {
		left: 392px;
		top: 268px;
		right: auto;
		bottom: auto;
	}

	/* Newsletter card laid out to Figma's child coordinates (card 556x200):
	   icon 36 at 23,17 · title bottom at 85,50 · body 295 centred on 267.7 at
	   y=69 · cat 124x122 at -16,66 (clipped left) · amber shape 122x92 at 7,84
	   · e-mail field 215 centred on 248.5 · button 127x38 at 392,129. */
	.rs-blognl__head {
		position: absolute;
		left: 23px;
		top: 17px;
		gap: 26px;
	}

	.rs-blognl__icon { width: 36px; }

	.rs-blognl__title { margin-top: 6px; }

	.rs-blognl__lead {
		position: absolute;
		left: 120px;
		top: 69px;
		width: 295px;
		max-width: none;
		margin: 0;
	}

	.rs-blognl__cat {
		left: -16px;
		bottom: auto;
		top: 66px;
		width: 124px;
	}

	.rs-blognl::before {
		left: 7px;
		top: 84px;
		width: 122px;
		height: 92px;
	}

	.rs-blognl__form {
		position: absolute;
		left: 141px;
		top: 129px;
		gap: 0;
		width: 378px;
		margin: 0;
	}

	.rs-blognl__input {
		width: 215px;
		height: 38px;
		text-align: center;
	}

	.rs-blognl__cta {
		margin-left: auto;
	}

	.rs-blogfb__cta,
	.rs-blognl__cta { width: 127px; height: 38px; }
}

/* ---------------------------------------------------------------------------
 * Blog aside on mobile
 *
 * Laid out to the mobile frame's own child coordinates, read off the 1:1
 * render: the Facebook card is 350x226 at x=19 and the newsletter 350x220 at
 * x=17 — both much shorter than the desktop cards, so the desktop offsets do
 * not transfer. The earlier flow layout here was a stand-in from before the
 * mobile frame could be read.
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {

	/* Figma centres the mobile hero column on ~183 rather than the band's 195
	   (BLOG box centres on 187, the icon on 182.5) and wraps the lead narrow, so
	   the copy clears the cat at x=269. Left full width it ran under the cat. */
	.rs-bloghero__inner { transform: translateX(-11px); }

	/* 16px in 165px keeps the lines left of the cat (x=269) on a real phone;
	   at 22/210 "kotów" ran under it. */
	.rs-bloghero__lead {
		max-width: 165px;
		margin-inline: auto;
		font-size: 1rem;
	}

	/* Post cards are 342 wide at x=25, not the 350 at x=20 the section padding
	   alone would give. */
	.rs-bloglatest__panel { padding: 0 3px 0 5px; }

	/* The mobile post card (325:37) is the home page's: category 11px at the
	   top, title 16px from y=35, date 11px at y=88. */
	.rs-blogcard__text { padding: 0 0 5px; }

	.rs-blogcard__cat { font-size: 0.6875rem; }

	.rs-blogcard .rs-blogcard__title {
		margin-top: 8px;
		font-size: 1rem;
		line-height: normal;
	}

	.rs-blogcard .rs-blogcard__title,
	.rs-blogcard .rs-blogcard__title a { max-height: 44px; }

	/* Mobile icons are 30px frames; the stethoscope is 24x23 inside its own. */
	.rs-blogcat--zdrowie .rs-blogcat__icon {
		width: 24px;
		margin: 3px;
	}

	/* NIE PRZEGAP clears its card by 22 where NAJNOWSZE clears its list by 17. */
	.rs-blogaside__heading { margin-bottom: 22px; }

	.rs-blogaside { padding-inline: 0; }

	/* Facebook card: 350x226 at x=19 · icon 53 at 18,13 · amber shape 210x154
	   at 1,71 · photo 350 at -56,8 · lead 272 at 129,71 · button 92x29 at
	   222,172. */
	.rs-blogfb {
		/* 100% is exactly 350 at the 390 the frame is drawn at, and shrinks
		   below it — a hard 350px overflows a 360px phone. */
		width: 100%;
		min-height: 0;
		height: 226px;
		margin-left: -1px;
		padding: 0;
	}

	.rs-blogfb__head { position: absolute; left: 18px; top: 13px; gap: 18px; }

	.rs-blogfb__icon { width: 53px; }

	/* 18px here, not the desktop 24px — at 24px it wraps to two lines. */
	.rs-blogfb__title { font-size: 1.125rem; }

	.rs-blogfb::before { left: 1px; top: 71px; width: 210px; height: 154px; }

	.rs-blogfb__photo { left: -61px; top: 8px; bottom: auto; width: 350px; }

	/* 13px/17 on mobile against 20px/30 on desktop — the desktop size overran
	   the card and the button covered "filmików". */
	.rs-blogfb__lead {
		position: absolute;
		left: 129px;
		top: 71px;
		width: 272px;
		max-width: none;
		margin: 0;
		font-size: 0.8125rem;
		line-height: 17px;
		letter-spacing: 0.13px;
	}

	.rs-blogfb__cta {
		left: 233px;
		top: 172px;
		right: auto;
		bottom: auto;
		width: 73px;
		height: 22px;
	}

	.rs-blogfb__cta .rs-promo__cta-label {
		font-size: 0.5rem;
		letter-spacing: 0.4px;
	}

	.rs-blogfb__cta .rs-promo__cursor {
		right: 0;
		bottom: -7px;
		width: 14px;
	}

	/* Newsletter: 350x220 at x=17 · icon 32 at 28,19 · lead 295 at 69,62 · cat
	   124x122 at -16,69 · e-mail 215 at 116,122 · button 96x27 at 212,163. The
	   field and the button stack rather than sitting on one row. */
	.rs-blognl {
		width: 100%;
		min-height: 0;
		height: 220px;
		margin: 19px 0 0 -3px;
		padding: 0;
	}

	.rs-blognl__head {
		position: absolute;
		left: 28px;
		top: 19px;
		align-items: flex-start;
		gap: 12px;
	}

	.rs-blognl__icon { width: 32px; position: relative; z-index: 1; }

	/* 17px, tracking 0.51 — 20px wrapped onto the lead. */
	.rs-blognl__title {
		margin-top: 14px;
		font-size: 1.0625rem;
		letter-spacing: 0.51px;
	}

	.rs-blognl__lead {
		position: absolute;
		left: 69px;
		top: 62px;
		z-index: 1;
		width: 295px;
		max-width: none;
		margin: 0;
		font-size: 0.6875rem;
		letter-spacing: 0.55px;
	}

	.rs-blognl__cat {
		left: -16px;
		right: auto;
		top: 69px;
		bottom: auto;
		width: 124px;
	}

	.rs-blognl::before { left: 0; top: 82px; width: 122px; height: 92px; }

	.rs-blognl__form {
		position: absolute;
		left: 116px;
		top: 122px;
		display: block;
		width: auto;
		margin: 0;
		padding: 0;
	}

	.rs-blognl__input {
		width: 215px;
		height: 30px;
		font-size: 0.6875rem;
		letter-spacing: 0.55px;
		text-align: center;
	}

	.rs-blognl__cta {
		position: absolute;
		left: 96px;
		top: 41px;
		width: 96px;
		height: 27px;
	}
}

/* ---------------------------------------------------------------------------
 * Category grid column count
 *
 * Figma only specifies the four-across layout at the full 1200 column, where
 * cards are 260 wide. Forcing four columns below that squeezed them to 235 and
 * the copy ran under the cut-outs. Four columns therefore wait until 1200 is
 * actually available; between 782 and 1200 the cards stay two-up and roomy.
 * ------------------------------------------------------------------------ */

@media (min-width: 1200px) {
	.rs-blogcats__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Figma: two 600px columns that touch — the left cream panel is 53..653 and
	   the right 653..1253. This waits for 1200 rather than 782: splitting the
	   row earlier leaves the left column ~391 wide, which squeezes the two
	   260px post cards down to 156 and buries the text beside the thumbnail.
	   Between 782 and 1199 the two sections stack and the cards stay legible. */
	.rs-blogbottom {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Encyklopedia weterynaryjna
 *
 * Desktop geometry from the 1:1 export of `encyklopedia desktop` (366:2,
 * 1400x3280), mobile from `encyklopedia mobile` (449:282). The mobile frame is
 * 4200 tall, over Figma's 4096 export cap, so it is measured section by section
 * rather than from one scaled render.
 *
 * Both banners share a 2.5 aspect (1200x480 and 390x156) and the same source
 * illustration, so one percentage-positioned box serves both; only the values
 * the designer moved are overridden at desktop.
 * ------------------------------------------------------------------------ */

.rs-encheader,
.rs-enchero {
	padding-inline: 0;
}

.rs-encheader__inner,
.rs-enchero__inner {
	position: relative;
	box-sizing: border-box;
	margin-inline: auto;
}

/* --- pasek górny ---------------------------------------------------------- */

/* Mobile stacks two full-bleed bars: the brand on #51a5f3 (390x100) and the
   links on #7ca6f8 (390x60). Desktop merges them into one 93px bar inside the
   1200 column, with the darker block running under the brand only. */
.rs-encheader__inner {
	height: 160px;
	background: #7ca6f8;
}

.rs-encheader__inner::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 100px;
	background: #51a5f3;
}

.rs-encheader__brand {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	text-decoration: none;
}

/* The badge is the homepage avatar's disc with this page's ring colour, so it
   costs no extra asset. Figma draws the ring as a 3px stroke. */
.rs-encheader__logo {
	position: absolute;
	left: 10.256%;
	top: 16px;
	width: 72px;
	height: 73px;
	box-sizing: border-box;
	border: 3px solid #f3b354;
	border-radius: 50%;
	background: #fad3db;
	object-fit: cover;
}

.rs-encheader__word {
	position: absolute;
	left: 57.051%;
	top: 22px;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 600;
	font-size: 3.125rem;            /* 50px */
	line-height: 1.2;
	color: #fff;
	text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25), 1px 1px 4px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
}

.rs-encheader__nav {
	position: absolute;
	inset: 100px 0 0 0;
	z-index: 1;
}

/* The inset highlight is top-left here (4px 4px), where the coral CTA's is
   top-right (-4px 4px). */
.rs-encpill {
	position: absolute;
	top: 18px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21.364%;
	height: 24.227px;
	border-radius: 17px;
	background: #fcc24b;
	box-shadow:
		inset 4px 4px 4px 0 #fff,
		0 4px 4px rgba(0, 0, 0, 0.25);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.46875rem;          /* 7.5px — see the note in docs/07 */
	letter-spacing: 0.375px;
	color: #0b0b0b;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
}

.rs-encpill:nth-child(1) { left:  4.115%; }
.rs-encpill:nth-child(2) { left: 28.474%; }
.rs-encpill:nth-child(3) { left: 52.564%; }
.rs-encpill:nth-child(4) { left: 75.654%; }

/* --- baner ---------------------------------------------------------------- */

.rs-enchero__inner {
	aspect-ratio: 1200 / 480;
	overflow: hidden;
	background: #7ca6f8;
	/* The overlay copy is sized in cqw of the banner, so it stays on the
	   illustration at every width instead of drifting off it at 1000 or 1600. */
	container-type: inline-size;
}

.rs-enchero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-enchero__cat {
	position: absolute;
	height: auto;
}

.rs-enchero__cat--shakira  { left:  9.559%; top: 54.321%; width:  9.976%; transform: rotate(2.24deg); }
.rs-enchero__cat--ruda     { left: 16.154%; top: 57.051%; width: 10.513%; }
.rs-enchero__cat--krystian { left: 41.161%; top: 40.737%; width:  7.625%; transform: rotate(-1.71deg); opacity: 0.83; filter: blur(0.5px); }
.rs-enchero__cat--johnny   { left: 45.346%; top: 61.192%; width: 11.249%; transform: rotate(-3.98deg); opacity: 0.85; filter: blur(0.5px); }
.rs-enchero__cat--lola     { left: 50%;     top: 42.308%; width:  6.923%; opacity: 0.83; filter: blur(0.5px); }
.rs-enchero__cat--dziadek  { left: 72.474%; top: 21.429%; width: 10.353%; transform: rotate(5.61deg); }

/* Signage painted on the reception desk. Figma scales it to 4px on mobile,
   where it is an artefact of shrinking the desktop artboard rather than
   legible text, so it is hidden below 782 and the illustration carries the
   desk on its own. */
.rs-enchero__desk { display: none; }

.rs-enchero__title {
	position: absolute;
	left: 23.885%;
	top: 4.487%;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 400;
	font-size: 5.128cqw;            /* 20 of 390 */
	line-height: 5.128cqw;
	letter-spacing: 0.051cqw;
	color: #fff;
	text-align: center;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Figma sets this to 5px on mobile — a by-product of shrinking the desktop
   artboard rather than legible text. Raised to 9px and widened to 135, which
   keeps it two lines inside the design's own 28px-tall box: at 11px it ran to
   three lines and the third crossed the shakira cut-out at y=84. */
.rs-enchero__lead {
	position: absolute;
	left: 21.795%;
	top: 33.974%;
	transform: translateX(-50%);
	margin: 0;
	width: 41.026%;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.795cqw;            /* 7 of 390 — 9 read too big on phones */
	line-height: 2.821cqw;
	color: #111;
	text-align: center;
}

/* Figma draws a 75x5.9 search pill with a 3px placeholder inside the mobile
   banner. At that size it is neither readable nor tappable (WCAG 2.5.8 asks
   for 24x24), and the page's real search sits directly below the banner, so
   the decorative duplicate is dropped on mobile. */
.rs-enchero__search { display: none; }

@media (min-width: 782px) {

	.rs-encheader__inner {
		max-width: var(--wp--style--global--content-size);
		height: 93px;
	}

	/* The bar runs full width; the darker block still ends where the brand
	   does (393 of the centred 1200). */
	.rs-encheader {
		background: linear-gradient(90deg, #51a5f3 calc(max(0px, (100% - var(--wp--style--global--content-size)) / 2) + min(100%, var(--wp--style--global--content-size)) * 0.3275), #7ca6f8 0);
	}

	/* The banner is an illustration: it scales with the page (to 1920) rather
	   than sitting in a 1200 box between white strips. */
	.rs-enchero {
		background: #7ca6f8;
	}

	.rs-enchero__inner {
		max-width: 1920px;
	}

	/* Figma runs the darker block under the brand only, 393 of the 1200. */
	.rs-encheader__inner::before {
		inset: 0 auto 0 0;
		width: 32.75%;
		height: auto;
	}

	.rs-encheader__logo {
		left: 3.5%;
		top: 4px;
		width: 78px;
		height: 78px;
	}

	.rs-encheader__word {
		left: 18.728%;
		top: 11px;
		font-size: 3.4375rem;       /* 55px */
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	}

	.rs-encheader__nav { inset: 0; }

	/* Four pills at 470/634/798/962 — 164 apart, 141 wide, so a 23px gutter. */
	.rs-encpill {
		top: 28px;
		width: 11.75%;
		height: 41px;
		font-size: 0.625rem;        /* 10px */
		letter-spacing: 0.5px;
	}

	.rs-encpill:nth-child(1) { left: 39.167%; }
	.rs-encpill:nth-child(2) { left: 52.833%; }
	.rs-encpill:nth-child(3) { left: 66.5%; }
	.rs-encpill:nth-child(4) { left: 80.167%; }

	.rs-enchero__cat--shakira  { left:  9.352%; top: 48.423%; width: 10.699%; }
	.rs-enchero__cat--ruda     { left: 16.75%;  top: 52.292%; width: 11.583%; }
	.rs-enchero__cat--krystian { left: 41.082%; top: 41.729%; width:  7.436%; }
	.rs-enchero__cat--johnny   { left: 43.918%; top: 61.61%;  width: 11.871%; }
	.rs-enchero__cat--lola     { left: 49.833%; top: 44.167%; width:  6.583%; }
	.rs-enchero__cat--dziadek  { left: 75.343%; top: 22.498%; width: 10.068%; transform: rotate(7.36deg); }

	.rs-enchero__desk {
		position: absolute;
		display: block;
		margin: 0;
		transform-origin: center;
		font-family: var(--wp--preset--font-family--body);
		font-size: 1.5cqw;          /* 18 of 1200 */
		line-height: 4.167cqw;
		text-align: center;
		text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
		white-space: nowrap;
	}

	/* Figma centres these in a taller flex wrapper, so the node's top is not the
	   text's top — hence the half-height offsets. */
	.rs-enchero__desk--brand {
		left: 72.193%;
		top: 66.881%;
		transform: translateX(-50%) rotate(2.39deg);
		letter-spacing: 0.3cqw;
		color: #4180df;
	}

	.rs-enchero__desk--tag {
		left: 72.133%;
		top: 75.027%;
		transform: translateX(-50%) rotate(3.28deg);
		letter-spacing: 0.15cqw;
		color: #6598e7;
	}

	.rs-enchero__title {
		left: 19.098%;
		top: 8.671%;
		font-size: 3.75cqw;         /* 45 of 1200 */
		line-height: 4.167cqw;
		letter-spacing: 0.0375cqw;
	}

	.rs-enchero__lead {
		left: 20.708%;
		top: 30.417%;
		width: auto;
		font-size: 1.167cqw;        /* 14 of 1200 */
		line-height: 4.167cqw;
		white-space: nowrap;
	}

	.rs-enchero__search {
		display: block;
		position: absolute;
		left: 5.41%;
		top: 42.083%;
		width: 27.377%;
		height: 7.917%;
	}
}

.rs-enchero__field {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0 1.333cqw;
	border: 1px solid #fff;
	border-radius: 1.167cqw;
	background: rgba(255, 240, 240, 0.19);
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.25cqw;             /* 15 of 1200 */
	letter-spacing: 0.0125cqw;
	color: #000;
	text-align: center;
}

.rs-enchero__field::placeholder { color: #000; opacity: 1; }

.rs-enchero__cursor {
	right: -1.667cqw;
	bottom: -1.833cqw;
	width: 2cqw;
}

/* --- kategorie ------------------------------------------------------------ */

/* Mobile: a full-bleed cream panel, two 164x128 cards per row 10 apart with
   rows 146 on centre. Desktop: the 1200 column, five 226px cards with a 17.5
   gutter (5x226 + 4x17.5 = 1200 exactly) and rows 267 on centre. */
.rs-enccats {
	padding-inline: 0;
}

.rs-enccats__panel {
	box-sizing: border-box;
	margin-inline: auto;
	padding: 31px 27px 53px 25px;
	background: var(--wp--preset--color--cream);
}

.rs-enccats__heading {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 600;
	font-size: 1.75rem;              /* 28px */
	line-height: 1;
	color: var(--wp--preset--color--ink);
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.rs-enccats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 17.93px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-enccat {
	position: relative;
	height: 128.067px;
}

.rs-enccat__link {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 12px;
	background: #fcc24b;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	color: #000;
	text-decoration: none;
}

.rs-enccat__title {
	position: absolute;
	left: 50%;
	top: var(--mt);
	transform: translateX(-50%);
	display: block;
	/* An absolute box at left:50% shrinks to the half-card right of it, which
	   broke one-line labels such as WIRUSY JELITOWE; size it to the text,
	   capped at the design's title width. */
	width: max-content;
	max-width: var(--mtw);
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.8125rem;            /* 13px */
	line-height: 1.15;
	text-align: center;
}

.rs-enccat__art {
	position: absolute;
	left: 50%;
	top: var(--mit);
	transform: translateX(-50%);
	width: var(--miw);
	height: var(--mih);
	object-fit: contain;
}

@media (min-width: 782px) {

	/* Cream runs full width; below 1200 the heading and cards keep a 24px
	   gutter instead of touching the viewport edge. */
	.rs-enccats__panel {
		padding: 59px 24px 61px;
	}

	.rs-enccats__heading { margin-bottom: 47px; }

	/* Between 782 and 1199 the 226px cards do not fit five across — they squash
	   to 142 and their illustrations overhang. The mobile 164x128 card is kept
	   and simply repeated to fill the row instead. */
	.rs-enccats__grid {
		grid-template-columns: repeat(auto-fill, 164px);
		justify-content: space-between;
	}
}

@media (min-width: 1200px) {

	.rs-enccats__panel {
		padding-inline: max(0px, (100% - var(--wp--style--global--content-size)) / 2);
	}

	.rs-enccats__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 41px 17.5px;
	}

	.rs-enccat { height: 226px; }

	.rs-enccat__title {
		top: var(--t);
		max-width: none;
		width: var(--tw);
		font-size: var(--fs);
		line-height: 1.2;
	}

	.rs-enccat__art {
		top: var(--it);
		width: var(--iw);
		height: var(--ih);
	}
}

/* --- wyszukiwarka --------------------------------------------------------- */

/* Mobile 390x237, desktop the 1200 column at 164 tall. Both are fixed-height
   bands, so children are placed with px tops and percentage lefts. */
.rs-encsearch {
	padding-inline: 0;
}

.rs-encsearch__inner {
	position: relative;
	box-sizing: border-box;
	max-width: none;
	height: 237px;
	margin-inline: auto;
	border: 1px solid #fffafa;
	background: #7ca6f8;
}

.rs-encsearch__cat {
	position: absolute;
	left: 7.146%;
	top: 24.87px;
	width: 130.513px;
	height: auto;
	transform: rotate(3.48deg);
}

.rs-encsearch__bubble {
	position: absolute;
	left: 38.462%;
	top: 41px;
	width: 195px;
	height: 65px;
}

.rs-encsearch__bubble-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

/* Figma 455:371: 10px text at 31,16.25 in the 195x65 bubble, which centres
   it in the balloon's body (the image's lower part is tail and shadow, so
   centring in the image box sat it low). */
.rs-encsearch__bubble-text {
	position: absolute;
	left: 31px;
	top: 16.25px;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 300;
	font-size: 0.625rem;             /* 10px */
	line-height: 1.2;
	white-space: nowrap;
	color: #1f1f1f;
	text-shadow: 1px 1px 20px #fff;
}

.rs-encsearch__field {
	position: absolute;
	left: 12.051%;
	top: 131px;
	box-sizing: border-box;
	width: 75.897%;
	height: 34px;
	padding: 0 1rem;
	border: 1px solid #fff;
	border-radius: 14px;
	background: #fff0f0;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	color: #000;
}

.rs-encsearch__cta {
	position: absolute;
	left: 38.497%;
	top: 182px;
	width: 92.728px;
	height: 27.745px;
	cursor: pointer;
}

.rs-encsearch__cta .rs-promo__cursor {
	right: -7px;
	bottom: -9px;
	width: 17.447px;
}

@media (min-width: 782px) {

	.rs-encsearch__inner {
		max-width: var(--wp--style--global--content-size);
		height: 164px;
	}

	.rs-encsearch__cat {
		left: 4.805%;
		top: 19.93px;
		width: 166.111px;
	}

	.rs-encsearch__bubble {
		left: 18.833%;
		top: 27px;
		width: 276px;
		height: 92px;
	}

	.rs-encsearch__bubble-text {
		left: 44px;
		top: 23px;
		font-size: 0.90625rem;       /* 14.5px */
	}

	.rs-encsearch__field {
		left: 45.667%;
		top: 60px;
		width: 27.417%;
		height: 38px;
	}

	.rs-encsearch__cta {
		left: 74.512%;
		top: 64px;
	}
}

/* Phones: the 390 frame scaled to the phone's width (--m = one Figma pixel), so
   the cat, balloon and its copy keep their places from 360 to 430. */
@media (max-width: 781px) {

	.rs-encsearch {
		--m: calc(100cqw / 390);
	}

	.rs-encsearch__inner { height: calc(237 * var(--m)); }

	.rs-encsearch__cat {
		left: calc(27.87 * var(--m));
		top: calc(24.87 * var(--m));
		width: calc(130.513 * var(--m));
	}

	.rs-encsearch__bubble {
		left: calc(150 * var(--m));
		top: calc(41 * var(--m));
		width: calc(195 * var(--m));
		height: calc(65 * var(--m));
	}

	.rs-encsearch__bubble-text {
		left: calc(31 * var(--m));
		top: calc(16.25 * var(--m));
		font-size: calc(10 * var(--m));
	}

	.rs-encsearch__field {
		left: calc(47 * var(--m));
		top: calc(131 * var(--m));
		width: calc(296 * var(--m));
		height: calc(34 * var(--m));
		border-radius: calc(14 * var(--m));
	}

	.rs-encsearch__cta {
		left: calc(150.14 * var(--m));
		top: calc(182 * var(--m));
		width: calc(92.73 * var(--m));
		height: calc(27.75 * var(--m));
	}

	.rs-encsearch__cta .rs-promo__cta-label { font-size: calc(12 * var(--m)); }

	.rs-encsearch__cta .rs-promo__cursor {
		right: calc(-7 * var(--m));
		bottom: calc(-9 * var(--m));
		width: calc(17.45 * var(--m));
	}
}

/* --- najnowsze, newsletter i social --------------------------------------- */

.rs-encbottom {
	padding-inline: 0;
}

.rs-encnews,
.rs-encpanels {
	box-sizing: border-box;
	max-width: none;
	margin-inline: auto;
}

/* Mobile: cards 337x120 at x=25, rows 147 on centre. Desktop: three 342x120
   across the 1200 column — 55 + 342 + 28.5 + 342 + 28.5 + 342 + 62 = 1200. */
.rs-encnews {
	padding: 0 28px 50px 25px;
	background: var(--wp--preset--color--cream);
}

.rs-encnews__heading {
	margin: 0 0 13px;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.rs-encnews__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 27.3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-encpost {
	box-sizing: border-box;
	gap: 17px;
	align-items: flex-start;
	height: 120px;
	padding: 12px 11px;
	border: 1px solid #000;
	border-radius: 14px;
	background: #fff;
}

.rs-encpost__thumb {
	flex: none;
	overflow: hidden;
	width: 94px;
	height: 94px;
	border-radius: 10px;
	background: #d9d9d9;
}

.rs-encpost__thumb img,
.rs-encpost__thumb .wp-block-post-featured-image {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.rs-encpost__text {
	min-width: 0;
	flex: 1;
}

.rs-encpost__cat {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.625rem;             /* 10px on mobile, 11 desktop */
	line-height: 14px;
	color: var(--wp--preset--color--coral);
	text-transform: uppercase;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rs-encpost__cat a { color: inherit; text-decoration: none; }

.rs-encpost__cat a:not(:first-of-type),
.rs-encpost__cat .wp-block-post-terms__separator { display: none; }

.rs-encpost .rs-encpost__title {
	margin: 9px 0 0;
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 600;
	font-size: 0.875rem;             /* 14px on mobile, 16 desktop */
	line-height: 21px;
	color: #000;
}

.rs-encpost__title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.rs-encpost__title a:hover { text-decoration: underline; }

.rs-encpost__date {
	margin: 11px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.6875rem;
	line-height: 15px;
	color: #666;
}

/* --- newsletter + social panels ------------------------------------------- */

.rs-encpanels {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
}

.rs-encnl,
.rs-encsoc {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	height: 204px;
	border: 1px solid #fff;
}

.rs-encnl { background: #fbeca8; }

.rs-encsoc { background: linear-gradient(180deg, #7ca6f8 0%, #92afe8 100%); }

/* A blurred rounded block sits under the text side of the social panel. */
.rs-encsoc::before {
	content: "";
	position: absolute;
	left: -9px;
	top: 0;
	width: 220px;
	height: 100%;
	border-radius: 0 99px 99px 0;
	background: #7ca6f8;
	filter: blur(1px);
	box-shadow: 1px 0 10px rgba(0, 0, 0, 0.25);
}

.rs-encnl__cat {
	position: absolute;
	left: -17px;
	top: 46px;
	width: 108px;
	height: auto;
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.25));
}

.rs-encnl__icon {
	position: absolute;
	left: 23px;
	top: 22px;
	width: 30px;
	height: 30px;
	filter: drop-shadow(-1px 1px 4px rgba(0, 0, 0, 0.25));
}

.rs-encnl__title,
.rs-encsoc__title {
	position: absolute;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.375rem;             /* 22px */
	line-height: 24px;
	letter-spacing: 1.1px;
	color: #000;
	text-shadow: 0 3px 4px rgba(0, 0, 0, 0.25);
}

/* Figma keeps this on one line in a 368-wide box that overhangs the 390 panel.
   At 22px it needs more than the 317 available from x=73 and wraps onto the
   speech balloon, so mobile drops it to 20px; desktop keeps 22. */
.rs-encnl__title {
	left: 73px;
	top: 28px;
	font-size: 1.1875rem;            /* 19px */
	white-space: nowrap;
}

.rs-encnl__bubble {
	position: absolute;
	left: 84px;
	top: 68px;
	z-index: 1;
	width: 251px;
	height: 83px;
}

.rs-encnl__bubble-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
}

.rs-encnl__bubble-text {
	position: absolute;
	left: 40px;
	top: 28px;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 300;
	font-size: 0.625rem;             /* 10px */
	line-height: 1.2;
	color: #1f1f1f;
	text-shadow: 1px 1px 20px #fff;
}

.rs-encnl__bubble-text strong { font-weight: 700; }

.rs-encnl__form {
	position: absolute;
	left: 74px;
	top: 152px;
	z-index: 1;
	display: block;
	width: 215px;
}

.rs-encnl__field {
	box-sizing: border-box;
	width: 100%;
	height: 20px;
	padding: 0 0.4rem;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 6px;
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	letter-spacing: 0.55px;
	color: #000;
	text-align: center;
}

.rs-encnl__cta,
.rs-encsoc__cta {
	position: absolute;
	width: 92.728px;
	height: 27.745px;
	cursor: pointer;
}

.rs-encnl__cta { left: 162px; top: -1px; }

.rs-encnl__cta .rs-promo__cursor,
.rs-encsoc__cta .rs-promo__cursor {
	right: -7px;
	bottom: -9px;
	width: 19px;
}

.rs-encsoc__photo {
	position: absolute;
	left: 153.5px;
	top: -5px;
	width: 292px;
	height: 292px;
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.rs-encsoc__icon {
	position: absolute;
	left: 14px;
	top: 26px;
	z-index: 1;
	width: 37px;
	height: 37px;
}

.rs-encsoc__title { left: 57px; top: 57px; z-index: 1; }

.rs-encsoc__logos {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-encsoc__logo {
	position: absolute;
	display: block;
}

.rs-encsoc__logo img { display: block; width: 100%; height: auto; }

.rs-encsoc__logo--instagram { left:  -9px;   top: 65px;    width: 90px; }
.rs-encsoc__logo--facebook  { left:  25.12px; top: 65px;   width: 90px; }
.rs-encsoc__logo--youtube   { left:  79.61px; top: 93.6px; width: 55.1px; }
.rs-encsoc__logo--tiktok    { left: 102.57px; top: 68.62px; width: 83.43px; }

.rs-encsoc__cta { left: 27.92px; top: 141px; z-index: 1; width: 107.25px; height: 28px; }

@media (min-width: 782px) {

	.rs-encnews,
	.rs-encpanels {
		max-width: var(--wp--style--global--content-size);
	}

	.rs-encnews { padding: 0 62px 78px 55px; }

	.rs-encnews__heading { margin-bottom: 41px; }

	/* Three 342px cards need 1083; below 1200 they fall back to as many 337px
	   cards as fit, and the two panels stack at their design width. */
	.rs-encnews__list {
		grid-template-columns: repeat(auto-fill, minmax(337px, 1fr));
		gap: 28.5px;
	}

	.rs-encpost {
		gap: 16px;
		padding: 12px;
	}

	.rs-encpost__thumb { width: 96px; height: 96px; }

	.rs-encpost__cat { font-size: 0.6875rem; }

	.rs-encpost .rs-encpost__title { font-size: 1rem; }

	.rs-encnews__list > li:nth-child(n + 4) { display: none; }

	.rs-encnl,
	.rs-encsoc {
		width: 100%;
		max-width: 600px;
		margin-inline: auto;
	}

	.rs-encsoc::before { width: 304px; border-radius: 0 99px 99px 0; }

	.rs-encnl__cat   { left: -16px; top: -1px; width: 157px; }
	.rs-encnl__icon  { left: 157px; top: 19px; width: 40px; height: 40px; }
	.rs-encnl__title { left: 211px; top: 31px; font-size: 1.375rem; }

	.rs-encnl__bubble { left: 115px; top: 71px; width: 275px; height: 92px; }

	.rs-encnl__bubble-text {
		left: 44px;
		top: 33px;
		font-size: 0.90625rem;       /* 14.5px */
	}

	/* Figma sets the e-mail as plain text at 372, which laps 12px over the
	   balloon's transparent corner. A real bordered input reads as a collision
	   there, so it moves into the clear space right of the balloon (ends 384). */
	.rs-encnl__form { left: 395px; top: 92px; width: 190px; }

	.rs-encnl__field { height: 22px; }

	.rs-encnl__cta { left: 13px; top: 35px; }

	.rs-encsoc__photo { left: 241px; top: -54px; width: 402.5px; height: 402.5px; }

	.rs-encsoc__icon  { left: 10px; top: 23px; width: 50px; height: 50px; }
	.rs-encsoc__title { left: 68px; top: 41px; }

	.rs-encsoc__logo--instagram { left: -16px;  top: 37px; width: 133px; }
	.rs-encsoc__logo--facebook  { left:  30px;  top: 37px; width: 133px; }
	.rs-encsoc__logo--youtube   { left: 107px;  top: 80px; width:  79px; }
	.rs-encsoc__logo--tiktok    { left: 137px;  top: 44px; width: 120px; }

	.rs-encsoc__cta { left: 69px; top: 147px; width: 110px; height: 28px; }
}

/* Placed after the bottom section's base rules rather than beside the category
   grid's 1200 block — cascade order, not specificity, decides here. */
@media (min-width: 1200px) {

	.rs-encnews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.rs-encpanels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}

	.rs-encnl,
	.rs-encsoc {
		max-width: none;
		margin-inline: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Encyklopedia — category and post pages
 *
 * Figma frames 480:3, 539:2, 506:350, 599:6161, 602:98, 602:416 and 610:5.
 * The newest frames (602:*, 610:5) add a yellow breadcrumb bar and set the text
 * in a 948px column 110 in from the left; that newest layout is used for every
 * category and post page so they stay one system. Mobile follows 504:17 and
 * 516:78 — the breadcrumb pages have no mobile frame.
 * ------------------------------------------------------------------------ */

.rs-encterm {
	padding-inline: 0;
}

.rs-encterm__panel {
	box-sizing: border-box;
	margin-inline: auto;
	padding-bottom: 40px;
	background: var(--wp--preset--color--cream);
}

.rs-enccrumbs {
	box-sizing: border-box;
	padding: 14px 12px;
	border: 1px solid #fffafa;
	background: #feec9a;
}

.rs-enccrumbs p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-size: 0.75rem;
	line-height: 1.4;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-align: center;
	color: #000;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.rs-enccrumbs a { color: inherit; text-decoration: none; }
.rs-enccrumbs a:hover { text-decoration: underline; }

.rs-encterm__body {
	box-sizing: border-box;
	padding: 32px 33px 0;
}

.rs-encterm .rs-encterm__title {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 600;
	font-size: 1.25rem;              /* 20px */
	line-height: 1.2;
	color: #1f1f1f;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.rs-encterm__title--cat { text-transform: uppercase; }

/* Figma sets the mobile intro at 15px on a 38px line — kept as drawn. */
.rs-encterm__desc p,
.rs-encarticle__content > p,
.rs-encarticle__content li {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;            /* 15px */
	line-height: 38px;
	letter-spacing: 0.5px;
	text-align: justify;
	color: #000;
}

.rs-encterm__list {
	margin: 24px 0 0 -14px;
	padding-left: 22.5px;
	list-style: disc;
}

.rs-encterm__list li {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 35px;
	color: #000;
}

.rs-encterm__list a,
.rs-encarticle__content a { color: inherit; text-decoration: none; }

.rs-encterm__list a:hover,
.rs-encarticle__content a:hover { text-decoration: underline; }

.rs-encterm__tiles {
	margin: 24px 27px 0 25px;
}

/* Post content: headings, lists, tables and the FAQ keep the same column and
   type; headings are the body size in bold, as the pasted Figma text shows. */
.rs-encarticle__content > * + * { margin-top: 0; }

.rs-encarticle__content h2,
.rs-encarticle__content h3,
.rs-encarticle__content h4 {
	margin: 38px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 38px;
	letter-spacing: 0.5px;
	color: #000;
}

.rs-encarticle__content ul,
.rs-encarticle__content ol {
	margin: 0;
	padding-left: 22.5px;
}

.rs-encarticle__content li { text-align: left; }

.rs-encarticle__content table {
	width: 100%;
	margin: 19px 0;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.rs-encarticle__content th,
.rs-encarticle__content td {
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	text-align: left;
	vertical-align: top;
}

.rs-encarticle__content th { background: #feec9a; }

.rs-encarticle__content .wp-block-table { margin: 0; overflow-x: auto; }

/* Easy Table of Contents leaves its container in 568 posts; the plugin is not
   active, so the empty box is hidden rather than rendered unstyled. */
.rs-encarticle__content .ez-toc-container,
.rs-encarticle__content #ez-toc-container { display: none; }

@media (min-width: 782px) {

	.rs-encterm__panel {
		max-width: var(--wp--style--global--content-size);
		padding-bottom: 65px;
	}

	/* Bar 1200x132; text 23px across 15..1160 from the bar's top-left. */
	.rs-enccrumbs {
		min-height: 132px;
		padding: 44px 40px 20px 15px;
	}

	.rs-enccrumbs p {
		font-size: 1.4375rem;        /* 23px */
		line-height: 1.25;
		letter-spacing: 1.15px;
	}

	/* Title 74 below the bar, body 38 below the title, in a 948 column at 110. */
	.rs-encterm__body {
		max-width: calc(948px + 110px);
		padding: 74px 0 0 110px;
	}

	.rs-encterm .rs-encterm__title {
		margin-bottom: 38px;
		font-size: 1.875rem;         /* 30px */
	}

	.rs-encterm__desc p,
	.rs-encarticle__content > p,
	.rs-encarticle__content li,
	.rs-encarticle__content h2,
	.rs-encarticle__content h3,
	.rs-encarticle__content h4 {
		font-size: 1.5625rem;        /* 25px */
	}

	.rs-encarticle__content table { font-size: 1rem; }

	.rs-encterm__list {
		margin: 38px 0 0;
		padding-left: 37.5px;
	}

	.rs-encterm__list li {
		font-weight: 400;
		font-size: 1.5625rem;
		line-height: 40px;
		letter-spacing: 1px;
	}

	.rs-encarticle__content ul,
	.rs-encarticle__content ol { padding-left: 37.5px; }

	.rs-encterm__tiles { margin: 79px 0 0; }
}

/* The editor's flow layout adds a block gap between the breadcrumb, body and
   title; Figma spaces them explicitly. */
/* :where() keeps this at zero specificity so the explicit margins above win. */
:where(.rs-encterm__panel, .rs-encterm__body) > * { margin-block-start: 0; }

/* Top-level tile pages: no bar, title 53 below the panel top at 28px, body 44
   below it, tiles 50 below the text (539:44). */
.rs-encterm--root .rs-encterm .rs-encterm__title,
.rs-encterm--root .rs-encterm__title { font-size: 1.25rem; }

@media (min-width: 782px) {
	.rs-encterm--root .rs-encterm__body { padding-top: 53px; }
	.rs-encterm--root .rs-encterm__title { margin-bottom: 44px; font-size: 1.75rem; }
	.rs-encterm--root .rs-encterm__tiles { margin-top: 50px; }
}

/* Immunologia and Granulocyty (the newest frames) leave a blank 38px line
   between description paragraphs. */
.rs-encterm__desc p + p { margin-top: 38px; }

/* Posts cite long URLs and lab terms with no break opportunity; let them wrap
   instead of widening the page. */
.rs-encterm__body,
.rs-encarticle__content { overflow-wrap: anywhere; }

/* Grid items default to min-width:auto, so a long category label on a post
   card ("Choroby związane z kompleksami immunologicznymi") widened the whole
   column past the viewport. Applies to every latest-posts list. */
.wp-block-post-template > li { min-width: 0; }

/* ---------------------------------------------------------------------------
 * Encyklopedia — full-width bands
 *
 * The encyklopedia frames sit in a 1200 column with white either side, like
 * the blog frame. As with the blog, every band's background runs the full
 * width and only the content keeps the centred 1200 column. --rs-gutter is
 * the space either side of that column (0 below 1200).
 * ------------------------------------------------------------------------ */

@media (min-width: 782px) {

	.rs-encsearch,
	.rs-encterm__panel,
	.rs-encnews {
		--rs-gutter: max(0px, (100% - var(--wp--style--global--content-size)) / 2);
	}

	/* search band: the white hairlines move to the full-width band */
	.rs-encsearch {
		border-block: 1px solid #fffafa;
		background: #7ca6f8;
	}

	.rs-encsearch__inner {
		height: 162px;
		border: 0;
	}

	/* category and post pages: bar and cream panel full width, text in the
	   column */
	.rs-encterm__panel {
		max-width: none;
	}

	.rs-enccrumbs {
		padding-inline: calc(var(--rs-gutter) + 15px) calc(var(--rs-gutter) + 40px);
	}

	.rs-encterm__body {
		margin-left: var(--rs-gutter);
	}

	/* At least 24px either side below 1200, where the column is the page. */
	.rs-encterm__tiles {
		margin-inline: max(24px, var(--rs-gutter));
	}

	/* NAJNOWSZE */
	.rs-encnews {
		max-width: none;
		padding-inline: calc(var(--rs-gutter) + 55px) calc(var(--rs-gutter) + 62px);
	}

	/* Newsletter and social: stacked 600-wide below 1200, so the band behind
	   them is yellow then blue. */
	.rs-encpanels {
		max-width: none;
		background:
			linear-gradient(#fbeca8, #fbeca8) top / 100% 50% no-repeat,
			linear-gradient(180deg, #7ca6f8 0%, #92afe8 100%) bottom / 100% 50% no-repeat;
	}
}

@media (min-width: 1200px) {

	/* Side by side from 1200: yellow left half, blue right half, panels in the
	   column. */
	.rs-encpanels {
		grid-template-columns: repeat(2, minmax(0, 600px));
		justify-content: center;
		background:
			linear-gradient(#fbeca8, #fbeca8) left / 50% 100% no-repeat,
			linear-gradient(180deg, #7ca6f8 0%, #92afe8 100%) right / 50% 100% no-repeat;
	}

	/* The panels' white hairline would draw seams into the full-width band at
	   their outer edges; only the line between them is kept. */
	.rs-encnl  { border-width: 0 1px 0 0; }
	.rs-encsoc { border-width: 0; }
}

/* ---------------------------------------------------------------------------
 * Encyklopedia — header bar and search band to scale
 *
 * Both are drawn with fixed pixel sizes at percentage positions, which only
 * holds at the frame's own width: at 782 the BLOG word ran over the badge, the
 * pill labels outgrew their pills and the balloon ran into the search field.
 * Sizes are therefore in frame pixels too — --m is one pixel of the 390 frame
 * on phones, --e one pixel of the 1200 column on desktop (capped at 1).
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {

	.rs-encheader {
		--m: calc(100cqw / 390);
	}

	.rs-encheader__inner { height: calc(160 * var(--m)); }

	.rs-encheader__inner::before { height: calc(100 * var(--m)); }

	.rs-encheader__nav { inset: calc(100 * var(--m)) 0 0 0; }

	.rs-encheader__logo {
		top: calc(16 * var(--m));
		width: calc(72 * var(--m));
		height: calc(73 * var(--m));
		border-width: calc(3 * var(--m));
	}

	.rs-encheader__word {
		top: calc(22 * var(--m));
		font-size: calc(50 * var(--m));
	}

	.rs-encpill {
		top: calc(18 * var(--m));
		height: calc(24.227 * var(--m));
		border-radius: calc(17 * var(--m));
		font-size: calc(7.5 * var(--m));
		letter-spacing: calc(0.375 * var(--m));
	}

	.rs-encsearch__field {
		padding: 0 calc(16 * var(--m));
		font-size: calc(14 * var(--m));
	}
}

@media (min-width: 782px) {

	.rs-encheader,
	.rs-encsearch {
		--e: calc(min(100cqw, var(--wp--style--global--content-size)) / 1200);
	}

	.rs-encheader__inner { height: calc(93 * var(--e)); }

	.rs-encheader__logo {
		top: calc(4 * var(--e));
		width: calc(78 * var(--e));
		height: calc(78 * var(--e));
	}

	.rs-encheader__word {
		top: calc(11 * var(--e));
		font-size: calc(55 * var(--e));
	}

	.rs-encpill {
		top: calc(28 * var(--e));
		height: calc(41 * var(--e));
		border-radius: calc(17 * var(--e));
		font-size: calc(10 * var(--e));
		letter-spacing: calc(0.5 * var(--e));
	}

	.rs-encsearch__inner { height: calc(162 * var(--e)); }

	.rs-encsearch__cat {
		top: calc(19.93 * var(--e));
		width: calc(166.111 * var(--e));
	}

	.rs-encsearch__bubble {
		top: calc(27 * var(--e));
		width: calc(276 * var(--e));
		height: calc(92 * var(--e));
	}

	.rs-encsearch__bubble-text {
		left: calc(44 * var(--e));
		top: calc(23 * var(--e));
		font-size: calc(14.5 * var(--e));
	}

	.rs-encsearch__field {
		top: calc(60 * var(--e));
		height: calc(38 * var(--e));
		padding: 0 calc(16 * var(--e));
		border-radius: calc(14 * var(--e));
		font-size: calc(14 * var(--e));
	}

	.rs-encsearch__cta {
		top: calc(64 * var(--e));
		width: calc(92.73 * var(--e));
		height: calc(27.75 * var(--e));
	}

	.rs-encsearch__cta .rs-promo__cta-label { font-size: calc(12 * var(--e)); }

	.rs-encsearch__cta .rs-promo__cursor {
		right: calc(-7 * var(--e));
		bottom: calc(-9 * var(--e));
		width: calc(17.45 * var(--e));
	}
}