/* =====================================================================
 * HCM — sections.css
 * Vanilla, build-free CSS for two home-page sections:
 *   1. .hcm-when    — "Kdaj se obrniti na nas?" 5-node horizontal timeline
 *   2. .hcm-partner — "Naš mednarodni partner" centered logo block
 *
 * Uses existing theme tokens (--primary / --accent / --accent-glow / …)
 * from app.css (@layer base). All colors in hsl(). Tailwind is not required.
 * Breakpoint parity with rest of theme: 1024px (matches md:/lg: usage).
 * ===================================================================== */

/* Container layout comes from Tailwind's `.container` class (configured in
 * tailwind.config.ts: center, padding 1rem→2rem, max-width 1400px at 2xl).
 * Both sections use `<div class="container">` like the rest of the theme. */

/* =====================================================================
 * 1) .hcm-when — dark-gradient section with horizontal timeline
 * ===================================================================== */

.hcm-when {
	padding-block: 6rem;
	background-image: var(--gradient-dark);
	color: hsl(var(--primary-foreground));
	position: relative;
}

@media (min-width: 1024px) {
	.hcm-when { padding-block: 8rem; }
}

/* ---------- Header block ---------- */

.hcm-when__head { margin-bottom: 5rem; max-width: 42rem; }

.hcm-when__eyebrow {
	display: inline-block;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 0.8125rem;         /* 13px */
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: hsl(var(--accent-glow));
	margin-bottom: 1rem;
}

.hcm-when__title {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 3.4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: hsl(var(--primary-foreground));
	margin: 0;
}

.hcm-when__lead {
	margin-top: 1.25rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: hsl(210 40% 98% / 0.7);
}

/* ---------- Timeline: mobile vertical list ---------- */

.hcm-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.5rem;
	display: grid;
	gap: 2rem;
	border-left: 1px solid hsl(184 70% 38% / 0.3);
	position: relative;
}

/* ---------- Timeline: desktop horizontal 5-node grid ---------- */

@media (min-width: 1024px) {
	.hcm-timeline {
		grid-template-columns: repeat(5, 1fr);
		gap: 1.5rem;
		padding: 0;
		border-left: 0;
	}

	/* Connecting line passing through the middle of the 56px circles. */
	.hcm-timeline::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 1.75rem;              /* 28px = half of 56px circle */
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent,
			hsl(184 70% 38% / 0.4) 20%,
			hsl(184 70% 38% / 0.4) 80%,
			transparent
		);
	}
}

/* ---------- Node ----------
 * Mobile: 2-column grid — circle (col 1, spans both rows) + stacked title/text (col 2).
 * Desktop (≥1024px): single-column grid — circle on top, title, text beneath.
 * Keeps title + text flush-left under each other on mobile (no more zig-zag wrap).
 */

.hcm-node {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	row-gap: 0.5rem;
	align-items: start;
	text-align: left;
	position: relative;
	/* Reveal stagger: main.js toggles .is-visible on .reveal, we layer delay on top. */
	transition-delay: calc(var(--i, 0) * 120ms);
}

.hcm-node__circle { grid-column: 1; grid-row: 1 / span 2; }
.hcm-node__title  { grid-column: 2; grid-row: 1; }
.hcm-node__text   { grid-column: 2; grid-row: 2; }

@media (min-width: 1024px) {
	.hcm-node {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 0;
	}
	.hcm-node__circle { grid-column: 1; grid-row: 1; }
	.hcm-node__title  { grid-column: 1; grid-row: 2; }
	.hcm-node__text   { grid-column: 1; grid-row: 3; }
}

/* ---------- Circle ---------- */

.hcm-node__circle {
	position: relative;
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background-color: hsl(var(--primary));
	border: 2px solid hsl(184 70% 38% / 0.5);
	box-shadow: var(--shadow-glow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: hsl(var(--accent));
	transition:
		background-color 0.5s var(--ease-smooth),
		color 0.5s var(--ease-smooth),
		transform 0.5s var(--ease-smooth),
		border-color 0.5s var(--ease-smooth);
}

.hcm-node__icon {
	width: 1.5rem;
	height: 1.5rem;
	color: inherit;                /* driven by parent .hcm-node__circle */
}

.hcm-node:hover .hcm-node__circle,
.hcm-node:focus-within .hcm-node__circle {
	background-color: hsl(var(--accent));
	color: hsl(var(--accent-foreground));
	border-color: hsl(var(--accent));
	transform: scale(1.1);
}

/* ---------- Number badge 01–05 ---------- */

.hcm-node__badge {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background-color: hsl(var(--accent));
	color: hsl(var(--accent-foreground));
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.6875rem;          /* 11px */
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Text block ---------- */

.hcm-node__title {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	color: hsl(var(--primary-foreground));
	margin: 0;
	transition: color 0.4s var(--ease-smooth);
}

@media (min-width: 1024px) {
	.hcm-node__title {
		margin-top: 2rem;            /* below the circle on desktop */
		margin-bottom: 0.75rem;
	}
}

.hcm-node:hover .hcm-node__title {
	color: hsl(var(--accent-glow));
}

.hcm-node__text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: hsl(210 40% 98% / 0.6);
	margin: 0;
}

/* =====================================================================
 * 2) .hcm-partner — centered international-partner logo
 * ===================================================================== */

.hcm-partner {
	padding-block: 4rem;
	background-color: hsl(var(--background));
	border-top: 1px solid hsl(var(--border));
}

@media (min-width: 1024px) {
	.hcm-partner { padding-block: 5rem; }
}

.hcm-partner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 2rem;
}

.hcm-partner__eyebrow {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: hsl(var(--accent));
}

.hcm-partner__link {
	display: inline-flex;
	transition: transform 0.5s var(--ease-smooth);
	/* Prevent the flexbox from stretching the link full width. */
	align-self: center;
}

.hcm-partner__link:hover,
.hcm-partner__link:focus-visible {
	transform: scale(1.05);
}

.hcm-partner__logo {
	height: 5rem;                  /* 80px mobile */
	width: auto;
	object-fit: contain;
	display: block;
}

@media (min-width: 1024px) {
	.hcm-partner__logo { height: 6rem; }   /* 96px desktop */
}

/* =====================================================================
 * Contact info rows (page-kontakt.php left column — plain list)
 * Borderless rows with rounded icon tiles. Match the look in img_7.
 * ===================================================================== */

.hcm-info-row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	color: inherit;
	text-decoration: none;
}

.hcm-info-row__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;              /* 44px */
	height: 2.75rem;
	border-radius: 0.75rem;      /* rounded square, not circle */
	background-color: hsl(var(--accent) / 0.1);
	color: hsl(var(--accent));
	transition: background-color 0.25s var(--ease-smooth);
}

a.hcm-info-row--link:hover .hcm-info-row__icon,
a.hcm-info-row--link:focus-visible .hcm-info-row__icon {
	background-color: hsl(var(--accent) / 0.18);
}

.hcm-info-row__label {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 0.75rem;          /* 12px */
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
	margin: 0 0 0.25rem 0;
	line-height: 1.2;
}

.hcm-info-row__value {
	font-size: 1rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	margin: 0;
	line-height: 1.4;
	word-break: break-word;
	transition: color 0.25s var(--ease-smooth);
}

a.hcm-info-row--link:hover .hcm-info-row__value,
a.hcm-info-row--link:focus-visible .hcm-info-row__value {
	color: hsl(var(--accent));
}

/* =====================================================================
 * Contact info cards (dark "Delovni čas" variant only)
 * ===================================================================== */

.hcm-info-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid hsl(var(--border));
	border-radius: 0.75rem;
	background-color: hsl(var(--card));
	box-shadow: var(--shadow-card);
	color: inherit;
	text-decoration: none;
	transition:
		transform 0.3s var(--ease-smooth),
		box-shadow 0.3s var(--ease-smooth),
		border-color 0.3s var(--ease-smooth);
}

a.hcm-info-card:hover,
a.hcm-info-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: hsl(var(--accent) / 0.3);
}

.hcm-info-card__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	background-color: hsl(var(--accent) / 0.1);
	color: hsl(var(--accent));
	transition: background-color 0.3s var(--ease-smooth);
}

a.hcm-info-card:hover .hcm-info-card__icon,
a.hcm-info-card:focus-visible .hcm-info-card__icon {
	background-color: hsl(var(--accent) / 0.18);
}

.hcm-info-card__label {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 0.6875rem;          /* 11px */
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
	margin: 0;
}

.hcm-info-card__value {
	font-size: 0.9375rem;          /* 15px */
	font-weight: 500;
	color: hsl(var(--foreground));
	margin: 0.25rem 0 0 0;
	line-height: 1.4;
	word-break: break-word;
}

/* ---------- Dark variant (Delovni čas) ---------- */

.hcm-info-card--dark {
	background-image: var(--gradient-dark);
	border-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	position: relative;
	overflow: hidden;
}

.hcm-info-card--dark::before {
	content: '';
	position: absolute;
	inset: auto -2rem -2rem auto;
	width: 8rem;
	height: 8rem;
	border-radius: 9999px;
	background: radial-gradient(circle, hsl(184 70% 38% / 0.2), transparent 70%);
	pointer-events: none;
}

.hcm-info-card__icon--dark {
	background-color: hsl(var(--accent));
	color: hsl(var(--accent-foreground));
}

.hcm-info-card__label--dark {
	color: hsl(var(--accent-glow));
}

.hcm-info-card__value--dark {
	color: hsl(var(--primary-foreground));
}

/* =====================================================================
 * Contact-page form polish — nudges CF7's default markup toward
 * the design in img_4 (label above input, visible required-asterisk,
 * two-column name/email row on desktop). Targets only elements rendered
 * inside .card on the /kontakt/ page so other CF7 placements are unaffected.
 * ===================================================================== */

/* ---- Reset every CF7-generated wrapper so we have a single vertical rhythm ----
 * CF7 + wpautop produce a mix of <p>, <br>, and raw <label> depending on how the
 * admin wrote the template. Any of those introducing its own margin causes the
 * "split apart" look. Zero them all, then apply exactly one bottom margin per
 * top-level form child. */
.card .wpcf7,
.card .wpcf7 form,
.card .wpcf7 p,
.card .wpcf7 label,
.card .wpcf7 .wpcf7-form-control-wrap { margin: 0; }

.card .wpcf7 form > * + * { margin-top: 0.875rem; }   /* 14 px between consecutive fields */

.card .wpcf7 label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: hsl(var(--foreground));
	line-height: 1.4;
}

/* Label text sits right above its input — 6 px gap between label text and the
 * input box. Works whether wpautop injected a <br> or not (both collapse into
 * the same spacing). */
.card .wpcf7 label > .wpcf7-form-control-wrap { display: block; margin-top: 0.375rem; }
.card .wpcf7 label > br { display: none; }           /* wpautop's auto <br> is redundant with our margin */

.card .wpcf7 .wpcf7-form-control-wrap { display: block; }

.card .wpcf7 input[type="text"],
.card .wpcf7 input[type="email"],
.card .wpcf7 input[type="tel"],
.card .wpcf7 input[type="url"],
.card .wpcf7 textarea,
.card .wpcf7 select {
	display: block;
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid hsl(var(--border));
	/* Match the theme's global --radius (4 px) so inputs line up with .btn, .card, .hcm-input. */
	border-radius: var(--radius);
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	font: inherit;
	font-size: 0.875rem;
	transition:
		border-color 0.2s var(--ease-smooth),
		box-shadow 0.2s var(--ease-smooth);
}

.card .wpcf7 input[type="text"]:focus,
.card .wpcf7 input[type="email"]:focus,
.card .wpcf7 input[type="tel"]:focus,
.card .wpcf7 input[type="url"]:focus,
.card .wpcf7 textarea:focus,
.card .wpcf7 select:focus {
	outline: none;
	border-color: hsl(var(--accent));
	box-shadow: 0 0 0 3px hsl(var(--accent) / 0.15);
}

.card .wpcf7 textarea { min-height: 8rem; resize: vertical; }

/* Two-column grid for the common "name + email" row. Wrap the pair
 * in an element with class `hcm-field-row` in the CF7 template for this to apply;
 * otherwise it degrades to stacked fields on narrow screens. */
.card .wpcf7 .hcm-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px) {
	.card .wpcf7 .hcm-field-row { grid-template-columns: 1fr 1fr; }
}

.card .wpcf7 input.wpcf7-submit,
.card .wpcf7 button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* Match .btn sizing: h-10 (2.5rem) baseline + room on the right for the inline send icon. */
	height: 2.5rem;
	padding: 0 2.5rem 0 1rem;
	border: none;
	border-radius: var(--radius);   /* 4 px — same as every other theme button */
	background-color: hsl(var(--accent));
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2 11 13'/><path d='m22 2-7 20-4-9-9-4Z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 0.875rem 0.875rem;
	color: hsl(var(--accent-foreground));
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	transition:
		background-color 0.2s var(--ease-smooth),
		box-shadow 0.2s var(--ease-smooth),
		transform 0.1s var(--ease-smooth);
}
.card .wpcf7 input.wpcf7-submit:hover,
.card .wpcf7 button[type="submit"]:hover {
	background-color: hsl(var(--accent-glow));
	box-shadow: var(--shadow-glow);
}
.card .wpcf7 input.wpcf7-submit:active,
.card .wpcf7 button[type="submit"]:active {
	transform: scale(0.98);
}

/* Fallback: whatever paragraph contains the submit button gets right-aligned.
 * Works even when the admin has NOT wrapped the submit in .hcm-form-submit-row. */
.card .wpcf7 p:has(input.wpcf7-submit),
.card .wpcf7 p:has(button[type="submit"]) {
	text-align: right;
	margin-top: 1.25rem;
}
/* Older browsers without :has — target the LAST paragraph as a pragmatic approximation. */
.card .wpcf7 form > p:last-of-type { text-align: right; }

/* The acceptance checkbox paragraph (if present) should stay left-aligned. */
.card .wpcf7 p:has(.wpcf7-acceptance) {
	text-align: left;
	margin-top: 0.5rem;
}

/* ---------- Submit-row layout (GDPR text on left, button on right) ----------
 * Admin wraps the submit line in <p class="hcm-form-submit-row">…</p> inside
 * the CF7 template. On mobile the row stacks; from 640px up it's a space-between
 * flex row. If the admin forgets the wrapper, the button still renders correctly
 * — just without the inline consent text.
 */
.card .wpcf7 .hcm-form-submit-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
	margin-top: 0.5rem;
}
.card .wpcf7 .hcm-form-submit-row .hcm-form-consent {
	font-size: 0.8125rem;
	color: hsl(var(--muted-foreground));
	line-height: 1.45;
	flex: 1 1 auto;
}
.card .wpcf7 .hcm-form-submit-row .hcm-form-consent a {
	color: hsl(var(--accent));
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Native CF7 [acceptance] inside the submit row — checkbox + label flow as
 * one consent block on the left, button on the right. When unchecked, CF7
 * natively disables the submit (acceptance_as_validation = off by default),
 * so the .btn:disabled rule below gives visual feedback.
 */
.card .wpcf7 .hcm-form-submit-row .wpcf7-acceptance {
	flex: 1 1 auto;
	font-size: 0.8125rem;
	color: hsl(var(--muted-foreground));
	line-height: 1.45;
}
.card .wpcf7 .hcm-form-submit-row .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
	display: block;
}
.card .wpcf7 .hcm-form-submit-row .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	cursor: pointer;
	margin: 0;
	font-weight: 400;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}
.card .wpcf7 .hcm-form-submit-row .wpcf7-acceptance input[type="checkbox"] {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	accent-color: hsl(var(--accent));
	cursor: pointer;
}
.card .wpcf7 .hcm-form-submit-row .wpcf7-acceptance a {
	color: hsl(var(--accent));
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Submit stays clickable visually but greys out when CF7 disables it
 * because the acceptance checkbox isn't ticked. */
.card .wpcf7 input.wpcf7-submit:disabled,
.card .wpcf7 button[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}
@media (min-width: 640px) {
	.card .wpcf7 .hcm-form-submit-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}
	.card .wpcf7 .hcm-form-submit-row .wpcf7-form-control-wrap,
	.card .wpcf7 .hcm-form-submit-row input.wpcf7-submit {
		flex: 0 0 auto;
	}
}

.card .wpcf7 .wpcf7-spinner { margin-left: 0.5rem; }

.card .wpcf7 .wpcf7-not-valid-tip {
	color: hsl(var(--destructive));
	font-size: 0.75rem;
	margin-top: 0.375rem;
	display: block;
}

.card .wpcf7 .wpcf7-response-output {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	border: 1px solid hsl(var(--border));
}