/* Chikapulya — базові стилі теми + допоміжні правила для Elementor-версії головної */

:root {
	--color-bg: #f5f1e4;
	--color-dark: #1a1a1a;
	--color-accent: #b3272d;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-dark);
	font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

a {
	color: inherit;
}

/*
 * Шрифти підібрані під оригінал на Tilda: заголовки — KenyanCoffee (платний,
 * замінено на Unbounded 900, дуже схожа геометрія), решта тексту — TildaSans
 * (власний шрифт Tilda, замінено на Golos Text — теж під кирилицю).
 */
.elementor-heading-title {
	font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
	font-weight: 900 !important;
}

.elementor-widget-text-editor,
.elementor-button,
.elementor-button-text,
.elementor-widget-button {
	font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}

/*
 * Головний заголовок — один блок тексту у 2 рядки (як на Tilda), кожен
 * рядок містить чорне і червоне слово поруч, а не окремими рядками.
 * Шрифт — Roboto Condensed (щільний, як KenyanCoffee), інакше довгі слова
 * не влазять по двоє в рядок на такому вузькому блоці.
 */
.chikapulya-headline {
	margin: 16px 0 !important;
	font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
	font-weight: 900 !important;
	font-size: 68px;
	line-height: 1.05;
	letter-spacing: -0.5px;
	text-transform: uppercase;
}

.chikapulya-headline .hl-dark {
	color: var(--color-dark);
}

.chikapulya-headline .hl-accent {
	color: var(--color-accent);
}

@media (max-width: 1300px) {
	.chikapulya-headline {
		font-size: 44px;
	}
}

@media (max-width: 480px) {
	.chikapulya-headline {
		font-size: 34px;
	}
}

.site-footer {
	text-align: center;
	padding: 20px;
	font-size: 13px;
	color: #8a8672;
}

/*
 * Ліва колонка hero-секції (заголовок/контакти) позначена CSS-класом
 * "chikapulya-hero-col" (Advanced → CSS Classes в Elementor). Вона "прилипає"
 * зверху, поки права колонка з фотогалереєю довша за екран і прокручується під нею.
 * Працює однаково і в редакторі Elementor, і на опублікованому сайті.
 */
.chikapulya-hero-col {
	position: sticky !important;
	top: 0 !important;
	height: 100vh !important;
	overflow: hidden !important;
}

@media (max-width: 1024px) {
	.chikapulya-hero-col {
		position: static !important;
		height: auto !important;
		overflow: visible !important;
	}
}

@media (max-width: 480px) {
	.elementor-heading-title {
		font-size: 42px !important;
	}
}

/*
 * Автопрокрутка фотогалереї, як на Tilda: уся колонка фото разом
 * повністю "їде" вниз, потім назад вгору, по колу. Висота колонки і
 * відстань прокрутки рахуються в assets/gallery-scroll.js (JS проставляє
 * --chikapulya-scroll-distance і клас chikapulya-auto-scroll).
 * Працює лише на десктопі — на планшетах/мобільних фото просто йдуть
 * одне під одним у звичайному потоці сторінки.
 */
@media (min-width: 1025px) {
	.chikapulya-gallery-col {
		height: 100vh;
		overflow: hidden;
	}

	.chikapulya-gallery-col > .elementor-widget-wrap.chikapulya-auto-scroll {
		animation: chikapulya-gallery-scroll 46s ease-in-out infinite;
		will-change: transform;
	}

	/* Фото одне під одним, без прогалин через різну висоту кадру. */
	.chikapulya-gallery-col .elementor-widget-image {
		margin-bottom: 8px;
	}

	.chikapulya-gallery-col .elementor-widget-image img {
		display: block;
		width: 100%;
	}
}

@keyframes chikapulya-gallery-scroll {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(-1 * var(--chikapulya-scroll-distance, 0px))); }
}

@media (prefers-reduced-motion: reduce) {
	.chikapulya-gallery-col > .elementor-widget-wrap {
		animation: none !important;
	}
}