/**
 * Obrtnici Katalog — Frontend Stylesheet
 * Design: Industrial / editorial — strong typographic hierarchy,
 * earthy warm palette, bold horizontal card layout.
 */

/* ============================================================
   CSS Custom Properties
============================================================ */
:root {
	--ok-color-bg:           #f5f2ee;
	--ok-color-surface:      #ffffff;
	--ok-color-accent:       #c8440e;       /* terracotta orange-red */
	--ok-color-accent-dark:  #9e3509;
	--ok-color-text:         #1a1a18;
	--ok-color-text-muted:   #6b6b67;
	--ok-color-border:       #ddd9d3;
	--ok-color-cat-bg:       #1a1a18;       /* dark sidebar */
	--ok-color-cat-text:     #f5f2ee;
	--ok-color-cat-label:    #c8440e;

	--ok-radius:             10px;
	--ok-radius-card:        8px;
	--ok-shadow-card:        0 2px 12px rgba(0,0,0,.10);
	--ok-shadow-card-hover:  0 8px 30px rgba(0,0,0,.18);
	--ok-font-heading:       'Georgia', 'Times New Roman', serif;
	--ok-font-body:          system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ok-transition:         0.25s ease;

	--ok-cat-width:          260px;         /* left column width */
}

/* ============================================================
   Wrapper
============================================================ */
.ok-katalog-wrap {
	max-width: 1400px;
	margin:    0 auto;
	padding:   0 24px 48px;
	font-family: var(--ok-font-body);
	color:     var(--ok-color-text);
}

/* ============================================================
   Search + Filter Bar
============================================================ */
.ok-search-filter-bar {
	display:         flex;
	align-items:     center;
	gap:             16px;
	margin-bottom:   32px;
	padding:         18px 24px;
	background:      var(--ok-color-surface);
	border:          1px solid var(--ok-color-border);
	border-radius:   var(--ok-radius);
	box-shadow:      0 1px 6px rgba(0,0,0,.06);
	flex-wrap:       wrap;
}

/* Search input group */
.ok-search-wrap {
	position:        relative;
	flex:            1 1 280px;
	min-width:       200px;
}

.ok-search-icon {
	position:        absolute;
	left:            14px;
	top:             50%;
	transform:       translateY(-50%);
	color:           var(--ok-color-text-muted);
	pointer-events:  none;
	display:         flex;
	align-items:     center;
}

.ok-search-input {
	width:           100%;
	box-sizing:      border-box;
	padding:         11px 40px 11px 44px;
	border:          2px solid var(--ok-color-border);
	border-radius:   6px;
	font-size:       15px;
	font-family:     var(--ok-font-body);
	background:      var(--ok-color-bg);
	color:           var(--ok-color-text);
	transition:      border-color var(--ok-transition), box-shadow var(--ok-transition);
	outline:         none;
	appearance:      none;
}

.ok-search-input:focus {
	border-color:    var(--ok-color-accent);
	box-shadow:      0 0 0 3px rgba(200, 68, 14, .15);
	background:      #fff;
}

.ok-search-clear {
	position:        absolute;
	right:           10px;
	top:             50%;
	transform:       translateY(-50%);
	background:      none;
	border:          none;
	cursor:          pointer;
	color:           var(--ok-color-text-muted);
	font-size:       14px;
	line-height:     1;
	padding:         4px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-radius:   50%;
	transition:      color var(--ok-transition), background var(--ok-transition);
}

.ok-search-clear:hover {
	color:           var(--ok-color-text);
	background:      var(--ok-color-border);
}

/* Category filter dropdown */
.ok-filter-wrap {
	flex-shrink:     0;
}

.ok-category-filter {
	padding:         11px 36px 11px 14px;
	border:          2px solid var(--ok-color-border);
	border-radius:   6px;
	font-size:       14px;
	font-family:     var(--ok-font-body);
	background:      var(--ok-color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b67' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	appearance:      none;
	cursor:          pointer;
	color:           var(--ok-color-text);
	transition:      border-color var(--ok-transition);
	outline:         none;
	min-width:       180px;
}

.ok-category-filter:focus {
	border-color:    var(--ok-color-accent);
	box-shadow:      0 0 0 3px rgba(200, 68, 14, .15);
}

/* ============================================================
   Search Results Dropdown
============================================================ */
.ok-search-results-dropdown {
	position:        absolute;
	top:             100%;
	left:            0;
	right:           0;
	z-index:         500;
	margin-top:      6px;
}

.ok-search-results-dropdown.is-open {
	background:      var(--ok-color-surface);
	border:          1px solid var(--ok-color-border);
	border-radius:   var(--ok-radius);
	box-shadow:      0 8px 30px rgba(0,0,0,.14);
	overflow:        hidden;
	max-height:      420px;
	overflow-y:      auto;
	animation:       okFadeIn 0.15s ease;
}

@keyframes okFadeIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ok-search-loading {
	padding:         20px 24px;
	color:           var(--ok-color-text-muted);
	font-size:       14px;
}

.ok-search-empty {
	padding:         20px 24px;
	color:           var(--ok-color-text-muted);
	margin:          0;
	font-size:       14px;
}

.ok-search-list {
	list-style:      none;
	margin:          0;
	padding:         8px 0;
}

.ok-search-item {
	border-bottom:   1px solid var(--ok-color-border);
}

.ok-search-item:last-child {
	border-bottom:   none;
}

.ok-search-link {
	display:         grid;
	grid-template-columns: 48px 1fr auto;
	align-items:     center;
	gap:             14px;
	padding:         12px 20px;
	text-decoration: none;
	color:           var(--ok-color-text);
	transition:      background var(--ok-transition);
}

.ok-search-link:hover {
	background:      var(--ok-color-bg);
}

.ok-search-thumb {
	width:           48px;
	height:          48px;
	object-fit:      cover;
	border-radius:   6px;
	flex-shrink:     0;
}

.ok-search-thumb--placeholder {
	background:      var(--ok-color-border);
}

.ok-search-text {
	display:         flex;
	flex-direction:  column;
	gap:             3px;
}

.ok-search-title {
	font-weight:     600;
	font-size:       14px;
}

.ok-search-cats {
	font-size:       12px;
	color:           var(--ok-color-text-muted);
}

/* ============================================================
   Category Blocks — outer list
============================================================ */
.ok-category-blocks {
	display:         flex;
	flex-direction:  column;
	gap:             28px;
}

/* ============================================================
   Individual Category Block
============================================================ */
.ok-category-block {
	display:         grid;
	grid-template-columns: var(--ok-cat-width) 1fr;
	min-height:      220px;
	border-radius:   var(--ok-radius);
	overflow:        hidden;
	box-shadow:      var(--ok-shadow-card);
	transition:      box-shadow var(--ok-transition);
}

.ok-category-block:hover {
	box-shadow:      var(--ok-shadow-card-hover);
}

/* ── Left: category info ── */
.ok-category-info {
	background:      var(--ok-color-cat-bg);
	color:           var(--ok-color-cat-text);
	display:         flex;
	align-items:     center;
	position:        relative;
	overflow:        hidden;
}

/* Subtle texture / decoration */
.ok-category-info::before {
	content:         '';
	position:        absolute;
	bottom:          -40px;
	left:            -40px;
	width:           160px;
	height:          160px;
	border:          2px solid rgba(200,68,14,.25);
	border-radius:   50%;
	pointer-events:  none;
}

.ok-category-info::after {
	content:         '';
	position:        absolute;
	top:             -30px;
	right:           -30px;
	width:           100px;
	height:          100px;
	background:      rgba(200,68,14,.08);
	border-radius:   50%;
	pointer-events:  none;
}

.ok-category-info-inner {
	padding:         28px 24px;
	position:        relative;
	z-index:         1;
}

.ok-category-label {
	display:         inline-block;
	font-size:       10px;
	font-weight:     700;
	letter-spacing:  .15em;
	text-transform:  uppercase;
	color:           var(--ok-color-cat-label);
	margin-bottom:   8px;
}

.ok-category-name {
	font-family:     var(--ok-font-heading);
	font-size:       clamp(1.15rem, 2vw, 1.45rem);
	font-weight:     400;
	margin:          0 0 10px;
	line-height:     1.25;
	color:           var(--ok-color-cat-text);
}

.ok-category-desc {
	font-size:       13px;
	line-height:     1.55;
	color:           rgba(245,242,238,.65);
	margin:          0 0 12px;
}

.ok-category-count {
	font-size:       12px;
	color:           rgba(245,242,238,.45);
	font-weight:     500;
}

/* ── Right: slider ── */
.ok-slider-wrap {
	background:      var(--ok-color-surface);
	padding:         20px 20px 20px 16px;
	min-width:       0; /* prevent grid blowout */
	position:        relative;
}

/* Swiper needs explicit height when in grid */
.ok-slider-wrap .swiper {
	width:           100%;
	height:          100%;
}

.ok-slider-wrap .swiper-wrapper {
	align-items:     stretch;
}

/* ============================================================
   Work Type Card
============================================================ */
.ok-work-card {
	display:         flex;
	flex-direction:  column;
	height:          100%;
	border-radius:   var(--ok-radius-card);
	overflow:        hidden;
	text-decoration: none;
	color:           var(--ok-color-text);
	background:      var(--ok-color-bg);
	border:          1px solid var(--ok-color-border);
	transition:      transform var(--ok-transition), box-shadow var(--ok-transition);
}

.ok-work-card:hover {
	transform:       translateY(-4px);
	box-shadow:      0 10px 28px rgba(0,0,0,.14);
}

.ok-work-card:focus-visible {
	outline:         3px solid var(--ok-color-accent);
	outline-offset:  2px;
}

.ok-work-card__image-wrap {
	position:        relative;
	width:           100%;
	aspect-ratio:    4 / 3;
	overflow:        hidden;
	flex-shrink:     0;
}

.ok-work-card__image {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	transition:      transform 0.5s ease;
	display:         block;
}

.ok-work-card:hover .ok-work-card__image {
	transform:       scale(1.05);
}

.ok-work-card__overlay {
	position:        absolute;
	inset:           0;
	background:      linear-gradient(to top, rgba(0,0,0,.3) 0%, transparent 60%);
	pointer-events:  none;
}

.ok-work-card__body {
	padding:         12px 14px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             8px;
	flex:            1;
}

.ok-work-card__title {
	font-size:       13px;
	font-weight:     600;
	margin:          0;
	line-height:     1.35;
	color:           var(--ok-color-text);
}

.ok-work-card__arrow {
	font-size:       16px;
	color:           var(--ok-color-accent);
	flex-shrink:     0;
	transition:      transform var(--ok-transition);
}

.ok-work-card:hover .ok-work-card__arrow {
	transform:       translateX(4px);
}

/* ============================================================
   Swiper Custom Navigation
============================================================ */
.ok-swiper-prev,
.ok-swiper-next {
	--swiper-navigation-size: 34px;
	color:           var(--ok-color-accent) !important;
	background:      var(--ok-color-surface);
	border:          1px solid var(--ok-color-border);
	border-radius:   50%;
	width:           34px !important;
	height:          34px !important;
	box-shadow:      0 2px 8px rgba(0,0,0,.12);
	transition:      background var(--ok-transition), border-color var(--ok-transition);
}

.ok-swiper-prev:hover,
.ok-swiper-next:hover {
	background:      var(--ok-color-accent);
	border-color:    var(--ok-color-accent);
	color:           #fff !important;
}

.ok-swiper-prev::after,
.ok-swiper-next::after {
	font-size:       12px !important;
	font-weight:     900;
}

.ok-swiper-prev {
	left: 4px !important;
}

.ok-swiper-next {
	right: 4px !important;
}

.ok-swiper-pagination .swiper-pagination-bullet {
	background:      var(--ok-color-border);
	opacity:         1;
}

.ok-swiper-pagination .swiper-pagination-bullet-active {
	background:      var(--ok-color-accent);
}

/* ============================================================
   Pagination
============================================================ */
.ok-pagination {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	margin-top:      36px;
	flex-wrap:       wrap;
}

.ok-page-btn {
	width:           40px;
	height:          40px;
	border:          2px solid var(--ok-color-border);
	border-radius:   6px;
	background:      var(--ok-color-surface);
	color:           var(--ok-color-text);
	font-size:       14px;
	font-weight:     600;
	cursor:          pointer;
	transition:      border-color var(--ok-transition), background var(--ok-transition), color var(--ok-transition);
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.ok-page-btn:hover {
	border-color:    var(--ok-color-accent);
	color:           var(--ok-color-accent);
}

.ok-page-btn.is-active {
	background:      var(--ok-color-accent);
	border-color:    var(--ok-color-accent);
	color:           #fff;
	pointer-events:  none;
}

/* ============================================================
   Loading state
============================================================ */
.ok-categories-container.ok-loading {
	opacity:         0.5;
	pointer-events:  none;
	transition:      opacity 0.2s;
}

/* ============================================================
   No results
============================================================ */
.ok-no-categories {
	text-align:      center;
	padding:         40px 20px;
	color:           var(--ok-color-text-muted);
	font-size:       15px;
}

/* ============================================================
   Responsive: Tablet (max 1023px)
============================================================ */
@media ( max-width: 1023px ) {
	:root {
		--ok-cat-width: 220px;
	}

	.ok-category-name {
		font-size: 1.15rem;
	}
}

/* ============================================================
   Responsive: Mobile (max 767px)
============================================================ */
@media ( max-width: 767px ) {
	.ok-category-block {
		grid-template-columns: 1fr;
		grid-template-rows:    auto auto;
	}

	.ok-category-info {
		min-height:      unset;
		padding:         0;
	}

	.ok-category-info::before,
	.ok-category-info::after {
		display: none;
	}

	.ok-category-info-inner {
		padding:         20px 20px 16px;
		width:           100%;
	}

	.ok-category-name {
		font-size: 1.15rem;
	}

	.ok-slider-wrap {
		padding: 16px;
	}

	.ok-search-filter-bar {
		flex-direction:  column;
		align-items:     stretch;
		gap:             10px;
		padding:         14px 16px;
		margin-bottom:   16px;
	}

	.ok-search-wrap {
		min-width:       0;
		flex:            1 1 auto;
	}

	.ok-search-input {
		font-size:       14px;
		padding:         10px 38px 10px 40px;
	}

	.ok-search-icon {
		left:            12px;
	}

	.ok-search-clear {
		right:           8px;
	}

	.ok-category-filter {
		min-width:       unset;
		width:           100%;
	}

	.ok-work-card__title {
		font-size: 12px;
	}
}

/* ============================================================
   Reduced motion
============================================================ */
@media ( prefers-reduced-motion: reduce ) {
	.ok-work-card,
	.ok-work-card__image,
	.ok-work-card__arrow,
	.ok-search-results-dropdown.is-open {
		transition:  none;
		animation:   none;
	}
}

/* ============================================================
   Search Result — Description (right column)
============================================================ */
.ok-search-desc-wrap {
	flex-shrink:     0;
	width:           560px;
	max-width:       560px;
	border-left:     2px solid var(--ok-color-border);
	padding-left:    16px;
}

.ok-search-desc {
	display:         block;
	font-size:       12px;
	line-height:     1.55;
	color:           var(--ok-color-text-muted);
}

/* ============================================================
   Standalone Search Bar ([work_search_bar])
============================================================ */
.ok-katalog-wrap--search-only {
	max-width:    700px;
}

.ok-search-filter-bar--standalone {
	padding:      14px 20px;
	margin-bottom: 0;
}

.ok-search-results-dropdown--standalone {
	margin-top:   6px;
}

/* ============================================================
   Responsive — description column
============================================================ */

/* Tablet (≤ 1023px): narrower description */
@media ( max-width: 1023px ) {
	.ok-search-desc-wrap {
		width:     280px;
		max-width: 280px;
	}
}

/* Small tablet / large mobile (≤ 767px): hide description */
@media ( max-width: 767px ) {
	.ok-search-link {
		grid-template-columns: 48px 1fr;
	}
	.ok-search-desc-wrap {
		display: none;
	}
}