/* HOBBYTEC Core — Farebné prevedenia [hbtc_colors] (flat) */

.hbtc-colors {
	--cl-ease: cubic-bezier(.22, 1, .36, 1);
	width: 100%;
	max-width: 1600px;
	margin: 56px auto 0;
	font-family: "Gilroy-Regular", system-ui, sans-serif;
}
.hbtc-colors *,
.hbtc-colors *::before,
.hbtc-colors *::after { box-sizing: border-box; }

.hbtc-colors__title {
	margin: 0 0 24px !important;
	font-family: "Gilroy-ExtraBold", system-ui, sans-serif; font-weight: 800;
	font-size: clamp(24px, 3vw, 38px); line-height: 1.05; letter-spacing: -1px;
	color: #221f20 !important;
	text-align: center;
}

.hbtc-colors__row {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), 1fr);
	border-radius: 40px;
	overflow: hidden;
}

.hbtc-colors__panel {
	position: relative; overflow: hidden;
	min-height: clamp(440px, 52vw, 640px);
	background: var(--c-bg, #221f20) !important;
	color: var(--c-tc, #fff) !important;
}

/* fotka hore + fade do farby panelu */
.hbtc-colors__photo {
	position: relative; display: block;
	height: clamp(150px, 18vw, 280px);
	background-size: cover; background-position: center; background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1s var(--cl-ease);
}
.hbtc-colors.is-visible .hbtc-colors__photo {
	opacity: 1;
	transition-delay: calc(var(--i, 0) * .14s);
}
.hbtc-colors__photo--empty { background: rgba(255,255,255,.06); }
.hbtc-colors__photo::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 55%;
	background: linear-gradient(to bottom, transparent, var(--c-bg, #221f20) 96%);
}

/* info — vpravo safe zóna pre vertikálny watermark */
.hbtc-colors__info {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; gap: 2px;
	padding: 22px clamp(86px, 9vw, 150px) 22px 24px;
	opacity: 0; transform: translateY(16px);
	transition: opacity .8s var(--cl-ease), transform .8s var(--cl-ease);
}
.hbtc-colors.is-visible .hbtc-colors__info {
	opacity: 1; transform: none;
	transition-delay: calc(var(--i, 0) * .14s + .5s);
}
.hbtc-colors__name {
	font-family: "Gilroy-ExtraBold", system-ui, sans-serif; font-weight: 800;
	font-size: clamp(22px, 2vw, 30px); line-height: 1.1;
	color: var(--c-tc, #fff) !important;
	margin-bottom: 6px;
}
.hbtc-colors__meta {
	font-family: "Gilroy-Medium", system-ui, sans-serif; font-weight: 500;
	font-size: clamp(14px, 1.1vw, 17px); line-height: 1.35;
	color: var(--c-tc, #fff) !important; opacity: .92;
}

/* veľký rotovaný watermark názvu — zarovnaný vpravo, číta zdola nahor */
.hbtc-colors__watermark {
	position: absolute; bottom: 26px; right: 14px; left: auto;
	transform: rotate(180deg) translateY(24px);
	writing-mode: vertical-rl;
	font-family: "Gilroy-ExtraBold", system-ui, sans-serif; font-weight: 800;
	font-size: clamp(46px, 6vw, 104px); line-height: 1; letter-spacing: -2px;
	color: var(--c-tc, #fff) !important;
	text-transform: lowercase; white-space: nowrap; pointer-events: none;
	opacity: 0;
	transition: opacity 1s var(--cl-ease), transform 1s var(--cl-ease);
}
.hbtc-colors.is-visible .hbtc-colors__watermark {
	opacity: 1; transform: rotate(180deg) translateY(0);
	transition-delay: calc(var(--i, 0) * .14s + .1s);
}

@media (max-width: 768px) {
	.hbtc-colors__title { text-align: left; }
	.hbtc-colors__ralbar { text-align: left; }
	.hbtc-colors__row { grid-template-columns: repeat(2, 1fr); border-radius: 28px; }
	/* vyššia fotka, nižší farebný box */
	.hbtc-colors__panel { min-height: 0; }
	.hbtc-colors__photo { height: clamp(230px, 48vw, 320px); }
	/* na mobile žiadny vertikálny text + plná šírka pre info */
	.hbtc-colors__watermark { display: none; }
	.hbtc-colors__info { padding: 18px 20px 24px; }
}
@media (max-width: 420px) {
	.hbtc-colors__row { grid-template-columns: 1fr; }
}

/* ── RAL button + popup ──────────────────────────── */
.hbtc-colors__ralbar { text-align: center; margin: -8px 0 26px; }
@media (max-width: 768px) { .hbtc-colors__ralbar { text-align: left; } }
.hbtc-colors__ralbtn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 11px 22px; border: none; cursor: pointer;
	border-radius: 999px;
	background: #f1bb41 !important; color: #221f20 !important;
	font-family: "Gilroy-Medium", system-ui, sans-serif; font-weight: 500; font-size: 15px;
	transition: transform .25s var(--cl-ease), background .25s var(--cl-ease);
}
.hbtc-colors__ralbtn:hover { transform: translateY(-2px); }
.hbtc-colors__ralbtn-ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: #221f20 !important; color: #fff !important;
}
.hbtc-colors__ralbtn-ico svg { width: 13px; height: 13px; }

.hbtc-colors__modal {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.hbtc-colors__modal[hidden] { display: none; }
.hbtc-colors__modal-overlay {
	position: absolute; inset: 0;
	background: rgba(20, 18, 18, .6); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity .3s var(--cl-ease);
}
.hbtc-colors__modal.is-open .hbtc-colors__modal-overlay { opacity: 1; }
.hbtc-colors__modal-box {
	position: relative; z-index: 1;
	width: 100%; max-width: 720px; max-height: 88vh; overflow-y: auto;
	background: #ffffff !important; border-radius: 32px;
	padding: clamp(28px, 4vw, 48px);
	text-align: left;
	opacity: 0; transform: translateY(20px) scale(.98);
	transition: opacity .35s var(--cl-ease), transform .35s var(--cl-ease);
}
.hbtc-colors__modal.is-open .hbtc-colors__modal-box { opacity: 1; transform: none; }
.hbtc-colors__modal-close {
	position: absolute; top: 16px; right: 16px;
	width: 42px; height: 42px; border: none; cursor: pointer;
	border-radius: 50%; background: #f4f4f1 !important; color: #221f20 !important;
	font-size: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
	transition: background .25s var(--cl-ease), transform .25s var(--cl-ease);
}
.hbtc-colors__modal-close:hover { background: #e8e8e2 !important; transform: rotate(90deg); }
.hbtc-colors__modal-title {
	margin: 0 0 16px !important;
	font-family: "Gilroy-ExtraBold", system-ui, sans-serif; font-weight: 800;
	font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -1px;
	color: #78b956 !important;
}
.hbtc-colors__modal-text {
	margin: 0 0 14px !important;
	font-family: "Gilroy-Regular", system-ui, sans-serif; font-size: 17px; line-height: 1.5;
	color: #221f20 !important;
}
.hbtc-colors__modal-text strong { font-family: "Gilroy-ExtraBold", system-ui, sans-serif; font-weight: 800; }
.hbtc-colors__modal-img {
	display: block; width: 100%; max-width: 460px; height: auto; margin: 22px auto;
}
.hbtc-colors__modal-notes {
	margin-top: 24px; padding-top: 20px; background: #f8f8f8 !important;
	border-radius: 18px; padding: 18px 20px;
}
.hbtc-colors__modal-notes p {
	position: relative; margin: 0 0 12px !important; padding-left: 26px;
	font-family: "Gilroy-Regular", system-ui, sans-serif; font-size: 13px; line-height: 1.5;
	color: rgba(34,31,32,.66) !important;
}
.hbtc-colors__modal-star {
	position: absolute; left: 0; top: 0;
	font-family: "Gilroy-ExtraBold", system-ui, sans-serif; font-weight: 800;
	color: #221f20 !important;
}