/* Pojedinačni rad — raspored po skici (hero, stupac, galerija, izjava, susjedi). */

.cvc-single-rad.cv-offset {
	padding-top: 0;
}

.cvc-rad-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100svh;
	padding: calc(var(--cv-header-h, 76px) + var(--cvc-space-6)) var(--cvc-gutter) var(--cvc-space-7);
	color: var(--project-color-text-on-dark);
	background: var(--project-color-ink-deep);
	overflow: hidden;
	text-align: center;
}

.cvc-rad-hero__media,
.cvc-rad-hero__shade {
	position: absolute;
	inset: 0;
}

.cvc-rad-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cvc-rad-hero__shade {
	background:
		linear-gradient(180deg, rgb(0 0 0 / 0.28) 0%, rgb(0 0 0 / 0.45) 42%, rgb(0 0 0 / 0.78) 100%);
}

.cvc-rad-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: var(--cvc-space-4);
	width: min(100%, 46rem);
}

.cvc-rad-hero__inner > * {
	margin: 0;
}

.cvc-rad-hero .cvc-breadcrumb,
.cvc-rad-hero .cvc-breadcrumb a {
	color: var(--project-color-text-on-dark);
}

.cvc-rad-hero__lead {
	max-width: 36em;
	text-wrap: balance;
}

.cvc-rad-hero__title {
letter-spacing: var(--project-hero-title-tracking);
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.cvc-rad-hero a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: opacity 200ms var(--project-ease);
}

.cvc-rad-hero a:hover {
	opacity: 0.72;
}

.cvc-rad-hero a:focus-visible {
	outline: var(--project-focus-ring);
	outline-offset: 3px;
}

.cvc-rad-story {
	padding: var(--project-section-space) var(--cvc-gutter);
}

.cvc-rad-story__inner {
	display: grid;
	justify-items: center;
	gap: var(--cvc-space-7);
	width: min(100%, 40rem);
	margin-inline: auto;
	text-align: center;
}

.cvc-rad-kicker {
	max-width: 20em;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: var(--project-letter-spacing-eyebrow);
	text-wrap: balance;
}

.cvc-rad-story__body {
	width: 100%;
	text-align: start;
}

.cvc-rad-story__body > :first-child {
	margin-block-start: 0;
}

.cvc-rad-story__body > :last-child {
	margin-block-end: 0;
}

.cvc-rad-story__result {
	max-width: 34em;
	margin: 0;
}


/* Portfolio single: obuhvat po odabranim hijerarhijskim pojmovima. */
.cvc-rad-scope { width: 100%; }
.cvc-rad-scope > .cvc-eyebrow { margin: 0 0 var(--cvc-space-3); }
.cvc-rad-scope__groups { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cvc-space-3); }
.cvc-rad-scope__group { position: relative; z-index: 1; }
.cvc-rad-scope__group[open] { z-index: 3; }
.cvc-rad-scope__summary,
.cvc-rad-scope__static { display: inline-flex; align-items: center; gap: var(--cvc-space-3); border: 1px solid var(--cvc-color-border); border-radius: var(--cvc-radius); padding: var(--cvc-space-2) var(--cvc-space-4); background: var(--cvc-color-surface); color: var(--cvc-color-text); font-size: var(--cvc-font-size-small, 0.9rem); line-height: 1.4; }
.cvc-rad-scope__summary { cursor: pointer; list-style: none; }
.cvc-rad-scope__summary::-webkit-details-marker { display: none; }
.cvc-rad-scope__summary::marker { content: ''; }
.cvc-rad-scope__summary:hover { border-color: var(--project-color-primary-active); }
.cvc-rad-scope__summary:focus-visible { outline: var(--project-focus-ring); outline-offset: 3px; }
.cvc-rad-scope__summary span { font-weight: 600; transition: transform 160ms ease; }
.cvc-rad-scope__group[open] .cvc-rad-scope__summary span { transform: rotate(45deg); }
.cvc-rad-scope__list { position: absolute; z-index: 5; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: max-content; min-width: 100%; max-width: min(80vw, 22rem); margin: 0; padding: var(--cvc-space-3) var(--cvc-space-4); list-style: none; text-align: left; background: var(--cvc-color-surface); color: var(--cvc-color-text); border: 1px solid var(--cvc-color-border); border-radius: var(--cvc-radius); box-shadow: 0 12px 30px rgb(0 0 0 / 0.12); }
.cvc-rad-scope__list li + li { margin-top: var(--cvc-space-2); }
@media (max-width: 600px) {
  .cvc-rad-scope__groups { align-items: stretch; }
  .cvc-rad-scope__list { position: static; width: 100%; max-width: 100%; transform: none; margin-top: var(--cvc-space-2); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cvc-rad-scope__summary span { transition: none; }
}

.cvc-rad-story__links {
	display: grid;
	gap: var(--cvc-space-3);
}

.cvc-rad-story__links p {
	margin: 0;
}

.cvc-rad-story__links a {
	color: var(--project-color-link);
	transition: color 200ms var(--project-ease);
}

.cvc-rad-story__links a:hover {
	color: var(--project-color-primary-active);
}

.cvc-rad-frame {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--cvc-color-border);
	border-radius: var(--cvc-radius);
	background: var(--cvc-color-surface);
	overflow: hidden;
}

.cvc-rad-frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--motion-duration) var(--motion-ease);
}

button.cvc-rad-frame {
	cursor: pointer;
	color: inherit;
}

button.cvc-rad-frame:hover img,
button.cvc-rad-frame:focus-visible img {
	transform: scale(1.03);
}

button.cvc-rad-frame:focus-visible {
	outline: var(--project-focus-ring);
	outline-offset: 3px;
}

.cvc-rad-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cvc-space-4);
	width: 100%;
}

.cvc-rad-steps {
	display: grid;
	gap: var(--cvc-space-7);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: start;
}

.cvc-rad-steps__item > :first-child {
	margin-block-start: 0;
}

.cvc-rad-video {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
}

.cvc-rad-video iframe,
.cvc-rad__video-facade iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.cvc-rad-quote {
	display: grid;
	gap: var(--cvc-space-5);
	max-width: 16em;
	margin: 0;
}

.cvc-rad-quote p,
.cvc-rad-quote cite {
	margin: 0;
}

.cvc-rad-quote cite {
	display: block;
	font-style: normal;
}

.cvc-rad-quote .cvc-text-small {
	margin: var(--cvc-space-2) 0 0;
	letter-spacing: var(--project-letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--cvc-color-text-muted);
}

.cvc-rad-switch {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100svh;
	overflow: hidden;
	background: var(--cvc-color-background);
}

.cvc-rad-switch__marquee {
	width: 100%;
	overflow: hidden;
}

.cvc-rad-switch__track {
	display: flex;
	width: max-content;
	animation: cvc-rad-marquee 42s linear infinite;
}

.cvc-rad-switch:hover .cvc-rad-switch__track,
.cvc-rad-switch:focus-within .cvc-rad-switch__track {
	animation-play-state: paused;
}

.cvc-rad-switch__phrase {
	margin: 0;
	padding-inline: var(--cvc-space-4);
	white-space: nowrap;
}

@keyframes cvc-rad-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.cvc-rad-switch__hit {
	position: absolute;
	z-index: 2;
	inset-block: 0;
	width: 100%;
}

.cvc-rad-switch__hit--prev { inset-inline-start: 0; }
.cvc-rad-switch__hit--next { inset-inline-end: 0; }

.cvc-rad-switch__hit--prev:has(+ .cvc-rad-switch__hit--next),
.cvc-rad-switch__hit--prev + .cvc-rad-switch__hit--next {
	width: 50%;
}

.cvc-rad-switch__hit:focus-visible {
	outline: var(--project-focus-ring);
	outline-offset: -3px;
}

.cvc-rad-switch__card {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	width: clamp(7.5rem, 22vw, 14rem);
	aspect-ratio: 2 / 3;
	border-radius: var(--cvc-radius-lg);
	overflow: hidden;
	pointer-events: none;
	transform: translate(-50%, -50%) rotate(-12deg);
	transition: transform 500ms var(--project-ease);
	box-shadow: 0 1.25rem 2.5rem color-mix(in srgb,var(--project-base-secondary) 18%,transparent);
}

.cvc-rad-switch[data-side="prev"] .cvc-rad-switch__card {
	transform: translate(-50%, -58%) rotate(8deg);
}

.cvc-rad-switch[data-side="next"] .cvc-rad-switch__card {
	transform: translate(-50%, -58%) rotate(-8deg);
}

.cvc-rad-switch__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	transition: opacity 180ms var(--project-ease);
}

.cvc-rad-switch__card.is-fading img {
	opacity: 0;
}

.cvc-lightbox {
	padding: var(--cvc-space-5);
	border: 0;
	border-radius: var(--cvc-radius-lg);
	max-width: min(96vw, 56rem);
}

.cvc-lightbox::backdrop {
	background: color-mix(in srgb,var(--project-base-secondary) 72%,transparent);
}

.cvc-lightbox__figure img {
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.cvc-rad-switch__track {
		animation: none;
	}

	.cvc-rad-frame img,
	.cvc-rad-switch__card img {
		transition: none;
		transform: none;
	}

	.cvc-rad-switch__card,
	.cvc-rad-switch[data-side="prev"] .cvc-rad-switch__card,
	.cvc-rad-switch[data-side="next"] .cvc-rad-switch__card {
		transform: translate(-50%, -50%);
		transition: none;
	}
}