/* R48 NEWS DETAIL UX R2.2 — global-container hero alignment */

.r48-news-detail {
	background: #0b0b0b;
}

/* --------------------------------------------------------------------------
   COMPACT HERO
   -------------------------------------------------------------------------- */

.r48-news-detail-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(270px, 30vw, 410px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #080808;
	border-bottom: 6px solid var(--r48-yellow, var(--r48-yellow));
}

.r48-news-detail-hero-art {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		url("../images/r48-news-fallback-r2.svg")
		center 58% / cover
		no-repeat;
	transform: scale(1.01);
	opacity: .82;
	filter: saturate(.86) contrast(1.04);
}

.r48-news-detail-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			180deg,
			rgba(0,0,0,.08) 0%,
			rgba(0,0,0,.14) 26%,
			rgba(0,0,0,.86) 100%
		),
		linear-gradient(
			90deg,
			rgba(0,0,0,.60) 0%,
			rgba(0,0,0,.12) 58%,
			rgba(0,0,0,.36) 100%
		);
}

.r48-news-detail-hero-content {
	/*
	 * Important: do NOT force width:100% here.
	 * This element also carries the global .r48-container class; allowing that
	 * existing theme container to control width/max-width/margins makes the
	 * heading line up with Concerts and the rest of the site.
	 */
	position: relative;
	padding-top: clamp(38px, 5vw, 66px);
	padding-bottom: clamp(30px, 4vw, 48px);
}

.r48-news-detail-back {
	display: inline-flex;
	margin-bottom: 14px;
	color: var(--r48-white);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	text-decoration: none;
	opacity: .82;
}

.r48-news-detail-back:hover {
	color: var(--r48-yellow, var(--r48-yellow));
	opacity: 1;
}

.r48-news-detail-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
	color: var(--r48-white);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .055em;
}

.r48-news-detail-label {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 4px 9px 3px;
	background: var(--r48-yellow, var(--r48-yellow));
	color: #090909;
}

.r48-news-detail-title {
	max-width: 1040px;
	margin: 0;
	color: var(--r48-white);
	font-size: clamp(42px, 5.4vw, 78px);
	line-height: .94;
	letter-spacing: -.015em;
	text-wrap: balance;
	text-shadow: 0 3px 0 rgba(0,0,0,.28);
}

/* --------------------------------------------------------------------------
   EDITORIAL PAPER STAGE
   -------------------------------------------------------------------------- */

.r48-news-detail-paper {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: clamp(46px, 5vw, 66px);
	padding-bottom: clamp(58px, 6vw, 82px);
	background:
		linear-gradient(
			90deg,
			rgba(255,255,255,.16),
			transparent 22%,
			transparent 78%,
			rgba(255,255,255,.15)
		),
		repeating-linear-gradient(
			0deg,
			rgba(25,23,19,.018) 0,
			rgba(25,23,19,.018) 1px,
			transparent 1px,
			transparent 7px
		),
		#efede5;
}

/* Faint poster-wall layer in the otherwise empty side area. */
.r48-news-detail-paper::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: -8% -3%;
	background:
		url("../images/r48-news-fallback-r2.svg")
		center 44% / min(1840px, 126vw) auto
		no-repeat;
	opacity: .045;
	filter: grayscale(1) contrast(1.35);
	pointer-events: none;
}

/* Large typographic ghost in the right margin. */
.r48-news-detail-paper::after {
	content: "48";
	position: absolute;
	z-index: -1;
	right: clamp(-42px, 1vw, 22px);
	top: clamp(80px, 10vw, 150px);
	color: rgba(15,15,14,.055);
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	font-size: clamp(190px, 27vw, 410px);
	line-height: .75;
	letter-spacing: -.08em;
	transform: rotate(-5deg);
	pointer-events: none;
	user-select: none;
}

.r48-news-detail-paper > .r48-container {
	position: relative;
	z-index: 1;
}

/* Editorial sheet: gives the article a real visual object on the page. */
.r48-news-detail-article {
	position: relative;
	width: min(100%, 1030px);
	margin-inline: auto;
	padding:
		clamp(40px, 5vw, 66px)
		clamp(28px, 6vw, 76px)
		clamp(42px, 5vw, 64px);
	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.74),
			rgba(250,248,241,.62)
		);
	border: 1px solid rgba(18,17,14,.09);
	border-left: 6px solid var(--r48-yellow, var(--r48-yellow));
	box-shadow:
		0 24px 64px rgba(23,21,16,.10),
		0 2px 0 rgba(255,255,255,.58) inset;
	font-size: clamp(17px, 1.18vw, 19px);
	line-height: 1.74;
}

/* Small editorial stamp, not another headline. */
.r48-news-detail-article::before {
	content: "RYBIČKY 48 · NOVINKY";
	position: absolute;
	top: 17px;
	right: clamp(20px, 3vw, 38px);
	color: rgba(20,19,16,.34);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.r48-news-detail-article > :first-child {
	margin-top: 0;
}

.r48-news-detail-article p {
	margin: 0 0 1.35em;
}

.r48-news-detail-article h2,
.r48-news-detail-article h3 {
	margin-top: 2.05em;
	margin-bottom: .7em;
}

.r48-news-detail-article a:not(.r48-btn) {
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.r48-news-detail-article img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 34px auto;
	box-shadow: 0 10px 34px rgba(24,21,16,.10);
}

.r48-news-detail-article figure {
	max-width: 100%;
	margin: 36px auto;
}

.r48-news-detail-article iframe,
.r48-news-detail-article video {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   RELATED CONCERTS
   -------------------------------------------------------------------------- */

.r48-news-related {
	margin-top: clamp(46px, 5vw, 68px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	border-left-width: 5px;
	box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.r48-news-related h2 {
	margin: 4px 0 8px;
}

.r48-news-related p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   PRODUCT UPSELL — keep existing homepage Woo cards untouched
   -------------------------------------------------------------------------- */

.r48-news-upsell {
	position: relative;
	padding-top: clamp(58px, 6vw, 86px);
	padding-bottom: clamp(68px, 7vw, 104px);
	border-top: 1px solid rgba(255,255,255,.08);
}

.r48-news-upsell-grid {
	min-height: 360px;
}

.r48-news-upsell-grid .product {
	align-self: stretch;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	.r48-news-detail-paper::after {
		opacity: .45;
	}

	.r48-news-detail-article {
		width: min(100%, 900px);
	}
}

@media (max-width: 760px) {
	.r48-news-detail-hero {
		min-height: 285px;
	}

	.r48-news-detail-hero-art {
		background-position: center 55%;
	}

	.r48-news-detail-title {
		font-size: clamp(40px, 12.5vw, 64px);
	}

	.r48-news-detail-paper {
		padding-top: 32px;
		padding-bottom: 48px;
	}

	.r48-news-detail-paper::before,
	.r48-news-detail-paper::after {
		display: none;
	}

	.r48-news-detail-article {
		width: 100%;
		padding: 38px 22px 34px;
		border-left-width: 4px;
		box-shadow: 0 14px 34px rgba(23,21,16,.08);
	}

	.r48-news-detail-article::before {
		top: 13px;
		right: 18px;
		font-size: 9px;
	}

	.r48-news-related {
		align-items: flex-start;
		flex-direction: column;
	}

	.r48-news-upsell-grid {
		min-height: 0;
	}
}