/**
 * Visiokom reusable components.
 *
 * Site-wide .vk-* classes (handle: visiokom-components, depends on
 * visiokom-tokens). Use these in new markup before writing any new CSS —
 * see wp-content/DESIGN-SYSTEM.md for the full reference with examples.
 *
 * Naming: BEM — .vk-block, .vk-block__element, .vk-block--modifier.
 * Values: tokens only (var(--vk-*)); never hardcode a tokened value here.
 */

/* =========================================================================
   Container — centered content column
   ========================================================================= */
.vk-container {
	max-width: var(--vk-container);
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 600px) {
	.vk-container { padding: 0 24px; }
}

/* =========================================================================
   Buttons — rectangular, flat
   .vk-btn--primary  red CTA with an arrow that nudges right on hover
   .vk-btn--outline  white outline, for dark surfaces
   ========================================================================= */
.vk-btn {
	display: inline-block;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--vk-radius);
	font-size: var(--vk-text-base);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--vk-anim-fast), color var(--vk-anim-fast), border-color var(--vk-anim-fast);
}
.vk-btn--primary { background: var(--vk-accent); color: #fff; }
.vk-btn--primary:hover,
.vk-btn--primary:focus-visible { background: var(--vk-accent-dark); color: #fff; }
.vk-btn--primary::after {
	content: "\2192";
	display: inline-block;
	margin-left: 10px;
	transition: transform var(--vk-anim);
}
.vk-btn--primary:hover::after { transform: translateX(4px); }
.vk-btn--outline {
	background: transparent;
	border: 2px solid #fff;
	color: #fff;
}
.vk-btn--outline:hover,
.vk-btn--outline:focus-visible { background: #fff; color: var(--vk-ink); }

/* =========================================================================
   Sections — full-width horizontal bands
   ========================================================================= */
.vk-section {
	padding: var(--vk-section-pad) 0;
	background: var(--vk-bg);
	color: var(--vk-ink);
}
.vk-section--muted { background: var(--vk-bg-muted); }
/* Full-bleed helper: breaks a band out of a contained content column
   (e.g. .entry-content on pages) to span the full viewport width —
   Gutenberg's alignfull alone does not escape GeneratePress's container. */
.vk-section--bleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* 50vw includes the scrollbar, so a bleed band can overhang by a few px;
   clip the sliver instead of growing a horizontal scrollbar. */
body { overflow-x: clip; }

/* Gutenberg wraps "legacy" groups (saved without a layout attribute) in an
   extra inner container; make it transparent so component grids/flex still
   see their real children. */
:is(.vk-section, .vk-container, .vk-usps, .vk-usps__item) > .wp-block-group__inner-container {
	display: contents;
}
.vk-section--dark {
	background: var(--vk-bg-dark);
	color: var(--vk-ink-invert);
}
.vk-section--dark .vk-section__lead { color: var(--vk-ink-invert-soft); }

.vk-section__head { margin-bottom: 22px; }
.vk-section__lead {
	color: var(--vk-ink-soft);
	font-size: var(--vk-text-md);
	margin: 0;
}

/* Section heading with the squared accent tick.
   Override the tick color per use with --vk-tick (defaults to accent red). */
.vk-section__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--vk-title-section);
	line-height: 1.2;
	margin: 0 0 6px;
}
.vk-section__title::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 1em;
	background: var(--vk-tick, var(--vk-accent));
}

/* Eyebrow — small uppercase label above a title, with a color square. */
.vk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: var(--vk-text-xs);
	font-weight: 700;
	letter-spacing: var(--vk-tracking-wider);
	text-transform: uppercase;
	color: var(--vk-ink-soft);
}
.vk-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--vk-tick, var(--vk-accent));
}

/* =========================================================================
   Card grid — 2 / 3 / 4 columns (mobile / tablet / desktop)
   ========================================================================= */
.vk-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--vk-card-gap);
}
@media (min-width: 600px) {
	.vk-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
	.vk-cards { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================================
   Card — flat, squared, lifts on hover, accent underline slides in
   Override the accent per card with --vk-card-accent (e.g. a CMYK ink).
   Works on <a> and <button> alike.
   ========================================================================= */
.vk-card {
	--vk-card-accent: var(--vk-accent);
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--vk-bg);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: border-color var(--vk-anim), transform var(--vk-anim), box-shadow var(--vk-anim);
	/* Neutralise button defaults so <button class="vk-card"> matches <a>. */
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	text-align: inherit;
	padding: 0;
	cursor: pointer;
}
.vk-card:hover,
.vk-card:focus-visible {
	border-color: var(--vk-card-accent);
	transform: translateY(-4px);
	box-shadow: var(--vk-shadow-lift);
}
.vk-card::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--vk-card-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--vk-anim-slow);
}
.vk-card:hover::after,
.vk-card:focus-visible::after { transform: scaleX(1); }

.vk-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 16px;
	background: var(--vk-bg-media);
	border-bottom: 1px solid var(--vk-border);
	overflow: hidden;
}
.vk-card__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	transition: transform var(--vk-anim-slow);
}
.vk-card:hover .vk-card__media img { transform: scale(1.05); }

.vk-card__title {
	margin: 0;
	padding: 14px 12px 4px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--vk-tracking);
	color: var(--vk-ink);
}
.vk-card:hover .vk-card__title,
.vk-card:focus-visible .vk-card__title { color: var(--vk-card-accent); }

/* Action row — uppercase microcopy (+ optional inline svg icon) pinned to
   the card bottom, naming what the card does ("Odpri katalog" etc.). */
.vk-card__action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	padding: 0 12px 14px;
	font-size: var(--vk-text-xs);
	font-weight: 600;
	letter-spacing: var(--vk-tracking-wide);
	text-transform: uppercase;
	text-align: center;
	color: var(--vk-ink-soft);
	transition: color var(--vk-anim);
}
.vk-card__action svg { flex: 0 0 auto; width: 14px; height: 14px; }
.vk-card:hover .vk-card__action,
.vk-card:focus-visible .vk-card__action { color: var(--vk-card-accent); }

/* =========================================================================
   Panel — boxed white content surface (product tabs, term descriptions…)
   ========================================================================= */
.vk-panel {
	background: var(--vk-bg);
	border: 1px solid var(--vk-border);
	padding: 28px;
	color: var(--vk-ink-soft);
	font-size: var(--vk-text-md);
	line-height: 1.7;
}
.vk-panel > *:first-child { margin-top: 0; }
.vk-panel > *:last-child { margin-bottom: 0; }
.vk-panel strong { color: var(--vk-ink); }
@media (min-width: 600px) {
	.vk-panel { padding: 40px 48px; }
}

/* =========================================================================
   List — square accent bullets (feature/option lists)
   ========================================================================= */
.vk-list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.vk-list li {
	position: relative;
	padding: 0 0 0 22px;
	margin: 0 0 8px;
}
.vk-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 8px;
	height: 8px;
	background: var(--vk-tick, var(--vk-accent));
}

/* =========================================================================
   USP strip — short "plus point" tiles (next-day production, 9-color
   print, cutting to size…). Flat squared tiles with a colored top edge
   that cycles through the CMYK process inks automatically; override a
   tile's ink with --vk-tick on the li if needed.

   <ul class="vk-usps">
     <li class="vk-usps__item">
       <strong class="vk-usps__title">Izdelava naslednji dan</strong>
       <span class="vk-usps__note">Ekspresna proizvodnja</span>
     </li>
     …
   </ul>
   ========================================================================= */
.vk-usps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vk-card-gap);
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
@media (min-width: 600px) {
	.vk-usps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.vk-usps { grid-template-columns: repeat(4, 1fr); }
}

/* Each tile reads as a cut sheet: white surface, thick ink edge on top.
   On a dark band (.vk-section--dark) the sheets pop hard against the
   press-bed surface. */
.vk-usps__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 18px 20px;
	background: var(--vk-bg);
	border: 1px solid var(--vk-border);
	border-top: 4px solid var(--vk-tick, var(--vk-accent));
	border-radius: var(--vk-radius);
	transition: transform var(--vk-anim-slow), box-shadow var(--vk-anim-slow);
}
.vk-usps__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--vk-shadow-lift);
}
/* Tiles take the CMYK process inks in turn. */
.vk-usps__item:nth-child(4n + 1) { --vk-tick: var(--vk-cyan); }
.vk-usps__item:nth-child(4n + 2) { --vk-tick: var(--vk-magenta); }
.vk-usps__item:nth-child(4n + 3) { --vk-tick: var(--vk-yellow); }
.vk-usps__item:nth-child(4n + 4) { --vk-tick: var(--vk-key); }

/* Margins zeroed so the classes work on <p> (editable blocks) as well as
   on <strong>/<span>. */
.vk-usps__title {
	margin: 0;
	color: var(--vk-ink);
	font-size: var(--vk-text-lg);
	font-weight: 700;
	line-height: 1.25;
}
.vk-usps__note {
	margin: 0;
	color: var(--vk-ink-faint);
	font-size: var(--vk-text-xs);
	font-weight: 700;
	letter-spacing: var(--vk-tracking-wide);
	text-transform: uppercase;
}

/* =========================================================================
   Badge — small squared uppercase chip (taxonomy terms, statuses)
   ========================================================================= */
.vk-badge {
	display: inline-block;
	padding: 4px 12px;
	background: var(--vk-bg-muted);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius);
	font-size: var(--vk-text-xs);
	font-weight: 600;
	letter-spacing: var(--vk-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--vk-ink-soft);
	transition: color var(--vk-anim-fast), border-color var(--vk-anim-fast);
}
a.vk-badge:hover,
a.vk-badge:focus-visible {
	color: var(--vk-accent);
	border-color: var(--vk-accent);
}

/* =========================================================================
   CMYK registration strip — thin print-shop signature detail.
   Give it to an empty element, or use the token gradients directly.
   ========================================================================= */
.vk-cmyk-strip {
	height: 6px;
	background: var(--vk-cmyk-strip);
}

/* =========================================================================
   Motion preferences
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.vk-btn, .vk-btn--primary::after,
	.vk-card, .vk-card::after, .vk-card__media img,
	.vk-card__action, .vk-badge, .vk-usps__item {
		transition: none;
	}
	.vk-btn--primary:hover::after { transform: none; }
	.vk-usps__item:hover { transform: none; }
	.vk-card:hover, .vk-card:focus-visible { transform: none; }
	.vk-card:hover .vk-card__media img { transform: none; }
}