/**
 * Rybičky 48 — Pomáháte nám pomáhat
 * Flowing editorial detail layout R3.1
 *
 * The float is intentional: this is the classic editorial use of CSS float.
 */

.single-r48_help .r48-help-story-section {
	padding-block: clamp(48px, 5.5vw, 86px);
}

.single-r48_help .r48-help-story {
	--r48-help-yellow: var(--r48-yellow, var(--r48-yellow));
	--r48-help-ink: #171717;
	--r48-help-muted: #605d55;

	/*
	 * Wider than R3.0, but still restrained enough that text below the floated
	 * image does not become an ultra-wide desktop line.
	 */
	max-width: 900px;
	margin-inline: auto;
	color: var(--r48-help-ink);
}

.single-r48_help .r48-help-story__flow {
	display: flow-root;
}

/* TRUE editorial float: content wraps to the right and then UNDER the image. */
.single-r48_help .r48-help-story__float-media {
	float: inline-start;
	position: relative;
	width: clamp(300px, 38%, 370px);
	margin: 0 clamp(34px, 4.5vw, 56px) 30px 0;
}

.single-r48_help .r48-help-story__float-media::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: auto -7px -7px 7px;
	height: 7px;
	background: var(--r48-help-yellow);
	pointer-events: none;
}

.single-r48_help .r48-help-story__float-media img,
.single-r48_help .r48-help-story__float-media picture {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}

.single-r48_help .r48-help-story__heading {
	padding-top: 3px;
}

.single-r48_help .r48-help-story__title {
	margin: 18px 0 24px;
	font-size: clamp(2.55rem, 4vw, 4.45rem);
	line-height: 0.92;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

/*
 * Body typography: slightly compact font size, but generous line-height and
 * paragraph spacing. The important improvement is width + flow, not tiny text.
 */
.single-r48_help .r48-help-prose {
	font-size: clamp(0.96rem, 0.935rem + 0.1vw, 1rem);
	line-height: 1.76;
	text-align: left;
	overflow-wrap: break-word;
	hyphens: auto;
}

.single-r48_help .r48-help-story__prose > :first-child {
	margin-top: 0;
}

.single-r48_help .r48-help-story__prose > p:first-child {
	font-size: 1.035em;
	line-height: 1.72;
	font-weight: 560;
	color: #292824;
}

.single-r48_help .r48-help-prose p {
	margin: 0 0 1.32em;
}

/* Real headings imported as semantic elements. */
.single-r48_help .r48-help-prose h2,
.single-r48_help .r48-help-prose h3,
.single-r48_help .r48-help-prose h4 {
	clear: none;
	margin: 2.15em 0 0.72em;
	color: #080808;
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

.single-r48_help .r48-help-prose h2 {
	font-size: clamp(1.75rem, 2.25vw, 2.35rem);
}

.single-r48_help .r48-help-prose h3 {
	position: relative;
	padding-left: 15px;
	font-size: clamp(1.32rem, 1.75vw, 1.72rem);
}

.single-r48_help .r48-help-prose h3::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--r48-help-yellow);
}

.single-r48_help .r48-help-prose h4 {
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

/* Imported editorial subheads are sometimes bold-only paragraphs. */
.single-r48_help .r48-help-prose p > strong:only-child {
	display: block;
	margin-top: 2em;
	padding-top: 0.2em;
	font-size: 1.08em;
	line-height: 1.25;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.024em;
}

.single-r48_help .r48-help-prose strong {
	font-weight: 750;
}

.single-r48_help .r48-help-prose a {
	color: inherit;
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-color: var(--r48-help-yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}

.single-r48_help .r48-help-prose a:hover,
.single-r48_help .r48-help-prose a:focus-visible {
	background: var(--r48-help-yellow);
	text-decoration-color: transparent;
	outline: none;
}

.single-r48_help .r48-help-prose ul,
.single-r48_help .r48-help-prose ol {
	margin: 1.2em 0 1.5em;
	padding-left: 1.45em;
}

.single-r48_help .r48-help-prose li {
	margin-block: 0.42em;
	padding-left: 0.2em;
}

.single-r48_help .r48-help-prose blockquote {
	margin: 1.9em 0;
	padding: 1.1em 1.35em 1.1em 1.45em;
	border-left: 6px solid var(--r48-help-yellow);
	background: rgba(0, 0, 0, 0.035);
	font-size: 1.035em;
	line-height: 1.72;
}

.single-r48_help .r48-help-prose hr {
	width: 72px;
	height: 6px;
	margin: 2.6em 0;
	border: 0;
	background: var(--r48-help-yellow);
}

/*
 * Once the story clears the image, the text naturally uses this full article
 * width. No second narrow column exists.
 */
.single-r48_help .r48-help-story__actions {
	clear: both;
	max-width: 900px;
	margin: clamp(44px, 5vw, 66px) auto 0;
	padding-top: 25px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Tablet: smaller float so the side text does not get squeezed. */
@media (max-width: 900px) {
	.single-r48_help .r48-help-story {
		max-width: 760px;
	}

	.single-r48_help .r48-help-story__float-media {
		width: clamp(250px, 39%, 305px);
		margin-right: clamp(26px, 4vw, 38px);
		margin-bottom: 24px;
	}

	.single-r48_help .r48-help-story__title {
		font-size: clamp(2.35rem, 5.5vw, 3.7rem);
	}
}

/*
 * Mobile: floats are deliberately disabled. A narrow-screen float would create
 * exactly the skinny text column we are trying to eliminate.
 */
@media (max-width: 680px) {
	.single-r48_help .r48-help-story-section {
		padding-block: 36px 56px;
	}

	.single-r48_help .r48-help-story__float-media {
		float: none;
		width: min(100%, 430px);
		margin: 0 auto 34px;
	}

	.single-r48_help .r48-help-story__heading {
		padding-top: 0;
	}

	.single-r48_help .r48-help-story__title {
		margin-block: 16px 24px;
		font-size: clamp(2.3rem, 12vw, 4.1rem);
	}

	.single-r48_help .r48-help-prose {
		font-size: 0.98rem;
		line-height: 1.74;
	}

	.single-r48_help .r48-help-prose p {
		margin-bottom: 1.25em;
	}

	.single-r48_help .r48-help-story__actions {
		margin-top: 42px;
	}
}

/* ========================================================================
   R48 HELP — CHARITY CALLOUT R3.2
   ======================================================================== */

.single-r48_help .r48-help-campaign {
	--r48-help-yellow: var(--r48-yellow, var(--r48-yellow));

	clear: both;
	position: relative;
	isolation: isolate;
	margin: clamp(36px, 5vw, 58px) 10px clamp(42px, 5vw, 64px) 0;
	padding: clamp(25px, 3.4vw, 38px) clamp(24px, 3.8vw, 42px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #0a0a0a;
	color: #f7f5ed;
	box-shadow: 10px 10px 0 var(--r48-help-yellow);
}

.single-r48_help .r48-help-campaign::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 7px;
	background: var(--r48-help-yellow);
}

.single-r48_help .r48-help-campaign__kicker {
	display: inline-flex;
	align-items: center;
	min-height: 25px;
	margin-bottom: 14px;
	padding: 4px 8px 3px;
	background: var(--r48-help-yellow);
	color: #090909;
	font-size: 0.69rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.095em;
	text-transform: uppercase;
}

.single-r48_help .r48-help-prose .r48-help-campaign__title {
	margin: 0 0 20px;
	padding: 0;
	color: var(--r48-white);
	font-size: clamp(1.9rem, 3.1vw, 3.15rem);
	line-height: 0.95;
	letter-spacing: -0.018em;
	text-transform: uppercase;
}

.single-r48_help .r48-help-prose .r48-help-campaign__title::before {
	content: none;
}

.single-r48_help .r48-help-campaign p {
	max-width: 68ch;
	margin: 0;
	color: #f0eee7;
	font-size: 0.97em;
	line-height: 1.68;
}

.single-r48_help .r48-help-campaign p + p {
	margin-top: 1.05em;
	padding-top: 1.05em;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.single-r48_help .r48-help-campaign strong {
	color: var(--r48-white);
}

.single-r48_help .r48-help-campaign a {
	color: var(--r48-white);
	text-decoration-color: var(--r48-help-yellow);
}

@media (max-width: 680px) {
	.single-r48_help .r48-help-campaign {
		margin-right: 6px;
		padding: 25px 22px 27px;
		box-shadow: 6px 6px 0 var(--r48-help-yellow);
	}

	.single-r48_help .r48-help-prose .r48-help-campaign__title {
		font-size: clamp(1.75rem, 9vw, 2.55rem);
	}

	.single-r48_help .r48-help-campaign p {
		font-size: 0.96em;
		line-height: 1.65;
	}
}

/* ========================================================================
   R48 HELP — STORY PAPER PANEL R3.3
   ======================================================================== */

/*
 * The page section becomes a quiet "desk" behind the story. The change is
 * intentionally small: enough to define the editorial object without turning
 * the page into a generic card UI.
 */
.single-r48_help .r48-help-story-section {
	position: relative;
	background:
		linear-gradient(
			180deg,
			#ebe7de 0,
			#efebe3 210px,
			#efebe3 100%
		);
}

/*
 * One complete story = one physical editorial sheet.
 * Sharp corners are intentional and match the R48 visual language.
 */
.single-r48_help .r48-help-story {
	position: relative;
	isolation: isolate;
	max-width: 1040px;
	padding: clamp(38px, 5vw, 62px) clamp(34px, 5.4vw, 68px) clamp(42px, 5.5vw, 68px);
	border: 1px solid rgba(20, 18, 14, 0.10);
	background-color: #f8f5ec;
	background-image:
		repeating-linear-gradient(
			0deg,
			rgba(20, 18, 14, 0.010) 0,
			rgba(20, 18, 14, 0.010) 1px,
			transparent 1px,
			transparent 5px
		),
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.58) 0%,
			rgba(255, 255, 255, 0.12) 42%,
			rgba(222, 212, 190, 0.10) 100%
		);
	box-shadow:
		0 18px 48px rgba(22, 19, 13, 0.075),
		0 2px 8px rgba(22, 19, 13, 0.035);
}

/*
 * Short R48 yellow registration mark rather than a full-width decorative bar.
 * This visually links the paper panel to buttons/callouts without competing
 * with the charity block.
 */
.single-r48_help .r48-help-story::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: -1px auto auto -1px;
	width: clamp(92px, 13vw, 148px);
	height: 7px;
	background: var(--r48-help-yellow, var(--r48-yellow, var(--r48-yellow)));
}

/*
 * Very restrained offset "second sheet". It only appears at the bottom/right
 * edge and makes the long article feel intentional rather than empty.
 */
.single-r48_help .r48-help-story::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 14px -8px -8px 14px;
	border-right: 1px solid rgba(20, 18, 14, 0.045);
	border-bottom: 1px solid rgba(20, 18, 14, 0.045);
	background: rgba(255, 212, 0, 0.055);
	pointer-events: none;
}

/*
 * Preserve the R3.1 reading measure inside the wider paper sheet.
 */
.single-r48_help .r48-help-story__flow,
.single-r48_help .r48-help-story__actions {
	max-width: 900px;
	margin-inline: auto;
}

/* Slightly soften the prose against the warmer paper. */
.single-r48_help .r48-help-prose {
	color: #201f1b;
}

.single-r48_help .r48-help-story__prose > p:first-child {
	color: #292721;
}

/*
 * The charity callout remains the strongest object. Give it slightly more
 * breathing room inside the paper sheet.
 */
.single-r48_help .r48-help-campaign {
	margin-top: clamp(40px, 5vw, 60px);
	margin-bottom: clamp(44px, 5vw, 66px);
}

/*
 * The return action belongs to the paper sheet, so its separator is deliberately
 * softer than before.
 */
.single-r48_help .r48-help-story__actions {
	border-top-color: rgba(20, 18, 14, 0.10);
}

/* Tablet: retain the paper, reduce the internal frame. */
@media (max-width: 900px) {
	.single-r48_help .r48-help-story {
		max-width: 820px;
		padding: clamp(32px, 4.5vw, 46px);
	}

	.single-r48_help .r48-help-story__flow,
	.single-r48_help .r48-help-story__actions {
		max-width: 100%;
	}
}

/*
 * Mobile: the panel remains visible, but the shadow/offset is deliberately
 * reduced so it does not consume precious viewport width.
 */
@media (max-width: 680px) {
	.single-r48_help .r48-help-story-section {
		background: #efebe3;
	}

	.single-r48_help .r48-help-story {
		padding: 28px 20px 34px;
		box-shadow: 0 10px 28px rgba(22, 19, 13, 0.065);
	}

	.single-r48_help .r48-help-story::before {
		width: 88px;
		height: 6px;
	}

	.single-r48_help .r48-help-story::after {
		inset: 8px -5px -5px 8px;
		background: rgba(255, 212, 0, 0.045);
	}
}

@media (max-width: 420px) {
	.single-r48_help .r48-help-story {
		padding-inline: 17px;
	}
}