/* Shared UI components (markup in template-parts/components). Values measured in Figma. */

/* Pill button with arrow: 48px high, 1px border, radius 24; width set per instance (--btn-w).
   Interaction (global rule, not in Figma): a fill circle sweeps out from the centre (--t-fill), text/icon swap to the
   contrast colour, border stays. Variables drive the two variants:
     standard  — text/border linkpink, hover fill links_on_dark (#58001C), hover text white;
     inverse   — (.rn-button--inverse, dark/coloured backgrounds) white text/border, hover fill white, hover text linkpink. */
.rn-button {
	--btn-color: var(--c-link);
	--btn-border: var(--c-link);
	--btn-hover-bg: var(--c-link-on-dark);
	--btn-hover-color: var(--c-white);
	position: relative;
	z-index: 0;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: var(--btn-w, auto);
	max-width: 100%;                    /* design widths never overflow narrow devices */
	height: var(--btn-h);
	padding: 0 var(--btn-pr, 11px) 0 var(--btn-pl, 18px);
	border: 1px solid var(--btn-border);
	border-radius: var(--radius-pill);
	color: var(--btn-color);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-caps);
	line-height: normal;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	background: transparent;
	cursor: pointer;
	transition: color var(--t-fill) var(--ease);
}
.rn-button::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--btn-y, 50%);       /* fill origin = pointer position (set by nav.js), centre as fallback */
	left: var(--btn-x, 50%);
	width: 200%;
	padding-top: 200%;            /* diameter 2× the pill width: covers the whole pill from any origin point */
	border-radius: 50%;
	background: var(--btn-hover-bg);
	transform: translate(-50%, -50%) scale(0);
	transition: transform var(--t-fill) var(--ease);
}
.rn-button > * {
	position: relative;
}
@media (hover: hover) {
	.rn-button:hover {
		color: var(--btn-hover-color);
	}
	.rn-button:hover::before {
		transform: translate(-50%, -50%) scale(1);
	}
}
.rn-button:focus-visible {
	color: var(--btn-hover-color);
}
.rn-button:focus-visible::before {
	transform: translate(-50%, -50%) scale(1);
}
.rn-button--inverse {
	--btn-color: var(--c-white);
	--btn-border: var(--c-white);
	--btn-hover-bg: var(--c-white);
	--btn-hover-color: var(--c-link);
}

/* Tile hover (Zdravniki / Storitve cards, popravki točka 18): the whole tile darkens slightly with the same
   pointer-origin fill sweep as the pill buttons (nav.js writes --btn-x/y); the title link underlines along. */
.rn-doctor-card::after,
.rn-service-card--cards::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: var(--btn-y, 50%);
	left: var(--btn-x, 50%);
	width: 500%;                          /* sized off the WIDTH — must out-reach the diagonal of tall cards too */
	padding-top: 500%;
	border-radius: 50%;
	background: rgba(45, 55, 59, 0.07);   /* antracit at 7% — a subtle darkening */
	transform: translate(-50%, -50%) scale(0);
	transition: transform var(--t-fill) var(--ease);
	pointer-events: none;
}
@media (hover: hover) {
	.rn-doctor-card:hover::after,
	.rn-service-card--cards:hover::after {
		transform: translate(-50%, -50%) scale(1);
	}
}
.rn-doctor-card:focus-within::after,
.rn-service-card--cards:focus-within::after {
	transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
	.rn-doctor-card::after,
	.rn-service-card--cards::after {
		transition: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.rn-button,
	.rn-button::before {
		transition: none;
	}
}

/* Small-caps section label (16px semibold, uppercase, 1.6 tracking) in a 38px box. */
.rn-label {
	min-height: 38px;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps);
	line-height: normal;
	text-transform: uppercase;
	color: var(--c-antracit);
}
.rn-label--pink {
	color: var(--c-pink);
}

/* Short pink rule (Line 13/15/16/17: 161 × 2, #DA5958). */
.rn-rule {
	display: block;
	width: var(--rule-w);
	height: 2px;
	background: var(--c-pink);
}
.rn-rule--hero {
	width: 128px; /* Line 8 */
}

/* Arrow link icon placed on its own line under card text (32px). */
.rn-arrow-link {
	display: flex;
	width: var(--icon);
	color: var(--c-link);
}

/* Red gradient title band: 878×192 (desktop, 60° #DA5958 54.56% → #89002B) / 312×192 (mobile, 105.19° 14.3% → 85.7%).
   Title 32px/1.1 white; eyebrow 32px/1.1 #58001C. */
.rn-band {
	position: relative;
	min-height: 192px;                /* grows when the title needs three lines (popravki točka 6) */
	margin-top: 13px;                 /* header ends 108 → band 121 (mobile) */
	padding: 23px 24px 24px;
	background: linear-gradient(105.19deg, #da5958 14.313%, #89002b 85.687%);
	color: var(--c-white);
}
.rn-band__eyebrow {
	font-size: 32px;
	line-height: 1.1;
	color: var(--c-link-on-dark);
}
/* Eyebrow as a link one level up (single doctor/service): same colour, dotted underline on hover (global rule). */
.rn-band__eyebrow a {
	color: var(--c-link-on-dark);
	--link-hover: var(--c-link-on-dark);
}
.rn-band__title {
	font-size: 32px;
	font-weight: var(--fw-regular);
	line-height: 1.1;
	color: var(--c-white);
}
.rn-band__eyebrow + .rn-band__title {
	margin-top: 4px;
}
@media (min-width: 900px) {
	.rn-band {
		margin-top: 11px;             /* header ends 192 → band 203 */
		padding: 91px 29px 28px;      /* bottom gap 28 per Figma (367→395); pads only when the title pushes past 192 */
		background: linear-gradient(60deg, #da5958 54.56%, #89002b 100%);
	}
	.rn-band__eyebrow + .rn-band__title {
		margin-top: 3px;
	}
	.rn-band__title {
		max-width: 563px;             /* Figma 412 scaled to the 1200 content column (412/878) */
	}
	/* A two-line title without eyebrow sits at +99 instead of +91 (145:697). */
	.rn-band__text > .rn-band__title.is-multiline:first-child {
		margin-top: 8px;
	}
	/* With an eyebrow the pair starts at 91 and the title lands at +129 (294 / 332). */
}

/* Long running text (detail pages): 18px / 1.6, 12px between paragraphs. */
.rn-rich--long {
	line-height: var(--lh-long);
}
.rn-rich--long > * + * {
	margin-top: 12px;
}