/*
 * Croator Webstudio Addons — the single-project case study.
 *
 * Ported from "Croator Projekt.dc.html". The design writes every section as its own
 * <section> with the same max-width and its own top padding, and that structure is kept
 * verbatim here: one rhythm variable per section band rather than margins between siblings,
 * so a section that renders nothing (a project with no gallery, no stats, no quote) leaves
 * no gap behind it. That is the whole reason the padding is on the top of each band and not
 * split between the bottom of one and the top of the next.
 *
 * Loaded alongside croator-projects.css, not instead of it: the "Slični projekti" cards are
 * the projects-grid card, class for class, so the two bands cannot drift apart. The four
 * custom properties that card reads are re-declared on .cws-project below, because they are
 * scoped to .cws-projects in that sheet and nothing here is inside one.
 */

.cws-project {
	font-family: var(--cws-font-body);
	color: var(--cws-tx);

	--cws-project-max: 1100px;
	--cws-project-pad: 24px;

	/* The three vertical rhythms the design uses, in source order. */
	--cws-project-gap-tight: clamp(28px, 3.5vw, 40px);
	--cws-project-gap: clamp(48px, 6vw, 76px);
	--cws-project-gap-top: clamp(36px, 5vw, 60px);
	--cws-project-gap-end: clamp(72px, 9vw, 110px);

	/*
	 * Read by .cws-projects__card and friends in croator-projects.css, which declares them
	 * on .cws-projects — a scope the related band here never enters. Values are the design's
	 * own for the related cards, which are slightly rounder and shorter than the homepage's.
	 */
	--cws-projects-gap: 22px;
	--cws-projects-card-min: 300px;
	--cws-projects-radius: 20px;
	--cws-projects-ratio: 16 / 10;
}

.cws-project *,
.cws-project *::before,
.cws-project *::after {
	box-sizing: border-box;
}

.cws-project__section {
	max-width: var(--cws-project-max);
	margin-inline: auto;
	padding-inline: var(--cws-project-pad);
	padding-top: var(--cws-project-gap);
}

.cws-project__section--head {
	padding-top: var(--cws-project-gap-top);
}

/* The three bands the design packs tightly under the title. */
.cws-project__section--hero,
.cws-project__section--facts {
	padding-top: var(--cws-project-gap-tight);
}

.cws-project__section--cta {
	padding-bottom: var(--cws-project-gap-end);
}

/* Shared section heading — "Iz projekta", "Slični projekti". */
.cws-project__heading {
	margin: 0 0 26px;
	font-family: var(--cws-font-display);
	font-weight: 700;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.8px;
	color: var(--cws-tx);
	text-wrap: balance;
}

/* --------------------------------------------------------------- breadcrumb */

.cws-project__crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 26px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cws-tx3);
}

.cws-project__crumb-link {
	color: var(--cws-tx3);
	text-decoration: none;
	transition: color 0.15s ease;
}

.cws-project__crumb-link:hover,
.cws-project__crumb-link:focus-visible {
	color: var(--cws-brand);
}

.cws-project__crumb-current {
	color: var(--cws-tx2);
}

/* -------------------------------------------------------------- title block */

.cws-project__eyebrow {
	display: inline-flex;
	align-items: center;
	margin-bottom: 20px;
	padding: 6px 13px;
	border-radius: 99px;
	background: var(--cws-tint);
	color: var(--cws-brand);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.4px;
}

.cws-project__title {
	max-width: 820px;
	margin: 0 0 20px;
	font-family: var(--cws-font-display);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1.04;
	letter-spacing: -1.5px;
	color: var(--cws-tx);
	text-wrap: balance;
}

.cws-project__lead {
	max-width: 640px;
	margin: 0;
	font-size: clamp(17px, 1.7vw, 20px);
	font-weight: 500;
	line-height: 1.6;
	color: var(--cws-tx2);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------- hero */

.cws-project__hero {
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	border: 1px solid var(--cws-bd);
	border-radius: 24px;
	background: var(--cws-media-bg);
}

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

/* --------------------------------------------------------------- fact strip */

/*
 * The hairlines between cells are the 1px grid gap showing the wrapper's own background
 * through, which is how the design draws them. Real borders would double up where two cells
 * meet and would not disappear cleanly when the grid wraps to a second row.
 */
.cws-project__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--cws-bd);
	border-radius: 18px;
	background: var(--cws-bd);
}

.cws-project__fact {
	padding: 22px 24px;
	background: var(--cws-card);
}

.cws-project__fact-label {
	display: block;
	margin-bottom: 7px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--cws-tx3);
}

.cws-project__fact-value,
.cws-project__fact-link {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.cws-project__fact-value {
	color: var(--cws-tx);
}

.cws-project__fact-link {
	color: var(--cws-brand);
	text-decoration: none;
	transition: color 0.15s ease;
}

.cws-project__fact-link:hover,
.cws-project__fact-link:focus-visible {
	color: var(--cws-brand-hover);
}

.cws-project__fact-arrow {
	margin-left: 5px;
}

/* ---------------------------------------------- izazov / rješenje / rezultat */

/*
 * A ruled list rather than cards: a hairline over the first row and between rows, none under
 * the last, which is what the design's border-top on the list plus border-bottom on all but
 * the final row draws. The list and item resets are explicit because themes style <ol>.
 */
.cws-project__story {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cws-bd);
}

.cws-project__step {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 56px);
	margin: 0;
	padding: clamp(26px, 3vw, 36px) 0;
	border-bottom: 1px solid var(--cws-bd);
}

.cws-project__step:last-child {
	border-bottom: 0;
}

.cws-project__step-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
}

.cws-project__step-num {
	flex: none;
	font-family: var(--cws-font-display);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	/* Keeps "01" and "03" the same width, so the labels line up down the column. */
	font-variant-numeric: tabular-nums;
	color: var(--cws-tx3);
}

.cws-project__step-label {
	min-width: 0;
	font-family: var(--cws-font-display);
	font-weight: 700;
	font-size: clamp(19px, 2.2vw, 24px);
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--cws-tx);
}

.cws-project__step--outcome .cws-project__step-num,
.cws-project__step--outcome .cws-project__step-label {
	color: var(--cws-brand);
}

.cws-project__step-body {
	max-width: 62ch;
	margin: 0;
	font-size: clamp(16px, 1.6vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	color: var(--cws-tx2);
	text-wrap: pretty;
}

/*
 * The 220px label column leaves the text a sliver on a phone, so the label stacks over it.
 * Not in the design, which is drawn at desktop width only.
 */
@media (max-width: 640px) {
	.cws-project__step {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

/* ------------------------------------------------------------ results panel */

/*
 * Not themed. The panel is the design's one deliberately dark surface in light mode and
 * stays dark in dark mode, so its type colours are literals rather than tokens — resolving
 * them against the palette would make the figures invisible in one theme or the other.
 */
.cws-project__results {
	position: relative;
	overflow: hidden;
	padding: clamp(32px, 4vw, 52px);
	border-radius: 24px;
	background: var(--cws-panel);
	color: #fff;
}

.cws-project__glow {
	position: absolute;
	top: -70px;
	right: -40px;
	width: 300px;
	height: 300px;
	pointer-events: none;
}

.cws-project__results .cws-project__glow {
	background: radial-gradient(circle, rgba(219, 68, 55, 0.28), transparent 70%);
}

.cws-project__stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	gap: 32px;
}

.cws-project__stat-value {
	display: block;
	font-family: var(--cws-font-display);
	font-weight: 700;
	font-size: clamp(38px, 5vw, 56px);
	line-height: 1;
	letter-spacing: -1px;
	color: #f0796b;
}

.cws-project__stat-label {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #aeb6c0;
}

/* ------------------------------------------------------------------ gallery */

.cws-project__shots {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.cws-project__shot {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--cws-bd);
	border-radius: 18px;
	background: var(--cws-media-bg);
}

/* The lead shot spans the row, as it does in the design's 1 + 2 arrangement. */
.cws-project__shot--wide {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 8;
}

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

@media (max-width: 600px) {
	.cws-project__shots {
		grid-template-columns: 1fr;
	}

	.cws-project__shot {
		aspect-ratio: 16 / 10;
	}
}

/* ---------------------------------------------------------- capability chips */

/*
 * Title over note, stacked, with a floor on the height so a one-line box in a row of
 * two-line ones does not look unfinished. Grid rows stretch their items, so every box in a
 * row already matches the tallest — the design's height: 100% is that, said twice.
 */
.cws-project__chips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr));
	gap: 16px;
}

.cws-project__chip {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	min-height: 104px;
	padding: 22px;
	border: 1px solid var(--cws-bd);
	border-radius: 16px;
	background: var(--cws-s1);
}

.cws-project__chip-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cws-tx);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.cws-project__chip-note {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--cws-tx3);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

/* -------------------------------------------------------------- editor body */

/*
 * The free-text body. Styled to the same measure and rhythm as the lead so an editor's
 * paragraphs sit inside the design rather than reverting to theme defaults, but left
 * deliberately plain — this is the one region whose markup the plugin does not author.
 */
.cws-project__body {
	max-width: 760px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--cws-tx2);
}

.cws-project__body > :first-child {
	margin-top: 0;
}

.cws-project__body > :last-child {
	margin-bottom: 0;
}

.cws-project__body h2,
.cws-project__body h3,
.cws-project__body h4 {
	margin: 1.6em 0 0.5em;
	font-family: var(--cws-font-display);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--cws-tx);
}

.cws-project__body h2 {
	font-size: clamp(22px, 2.6vw, 30px);
}

.cws-project__body h3 {
	font-size: clamp(19px, 2.1vw, 23px);
}

.cws-project__body h4 {
	font-size: 17px;
}

.cws-project__body a {
	color: var(--cws-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cws-project__body a:hover,
.cws-project__body a:focus-visible {
	color: var(--cws-brand-hover);
}

.cws-project__body img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.cws-project__body blockquote {
	margin: 1.5em 0;
	padding-left: 20px;
	border-left: 3px solid var(--cws-brand);
	color: var(--cws-tx);
	font-style: italic;
}

.cws-project__body ul,
.cws-project__body ol {
	padding-left: 1.3em;
}

.cws-project__body li + li {
	margin-top: 0.4em;
}

/* -------------------------------------------------------------------- quote */

.cws-project__quote {
	margin: 0;
	padding: clamp(32px, 4vw, 52px);
	border: 1px solid var(--cws-bd);
	border-radius: 24px;
	background: var(--cws-s1);
}

.cws-project__stars {
	display: block;
	margin-bottom: 18px;
	color: #ffb020;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 2px;
}

.cws-project__quote-body {
	margin: 0 0 24px;
	font-family: var(--cws-font-display);
	font-weight: 600;
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.4;
	letter-spacing: -0.4px;
	color: var(--cws-tx);
	text-wrap: pretty;
}

.cws-project__quote-by {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cws-project__avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cws-tint);
	color: var(--cws-brand);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}

.cws-project__quote-lines {
	min-width: 0;
}

.cws-project__quote-name {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cws-tx);
}

.cws-project__quote-role {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cws-tx3);
}

/* ------------------------------------------------------------ related band */

.cws-project__related-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 26px;
}

/* The heading's own bottom margin is the head row's job here. */
.cws-project__related-head .cws-project__heading {
	margin-bottom: 0;
	min-width: 0;
}

/* ---------------------------------------------------------------------- CTA */

.cws-project__cta {
	position: relative;
	overflow: hidden;
	padding: clamp(36px, 5vw, 60px);
	border-radius: 26px;
	background: linear-gradient(135deg, var(--cws-brand), var(--cws-brand-hover));
	color: #fff;
	text-align: center;
}

.cws-project__cta .cws-project__glow {
	top: -60px;
	width: 280px;
	height: 280px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
}

.cws-project__cta-inner {
	position: relative;
	max-width: 600px;
	margin-inline: auto;
}

.cws-project__cta-title {
	margin: 0 0 14px;
	font-family: var(--cws-font-display);
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.1;
	letter-spacing: -1px;
	text-wrap: balance;
}

.cws-project__cta-text {
	margin: 0 0 28px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	opacity: 0.92;
	text-wrap: pretty;
}

.cws-project__cta-btn {
	display: inline-flex;
	align-items: center;
	padding: 16px 26px;
	border-radius: 13px;
	background: #fff;
	color: #0e1116;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cws-project__cta-btn:hover,
.cws-project__cta-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -14px rgba(14, 17, 22, 0.5);
	color: #0e1116;
}

@media (prefers-reduced-motion: reduce) {
	.cws-project *,
	.cws-project *::before,
	.cws-project *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.cws-project__cta-btn:hover,
	.cws-project__cta-btn:focus-visible {
		transform: none;
	}
}