/* =========================================================================
   OSA Component — основні стилі теми
   Дизайн-система знята з чинного сайту a-component.com.ua:
   темний фон, м'ятно-зелений акцент, Unbounded (заголовки) + Manrope (текст).

   Структура:
   1. Змінні (:root)
   2. Базові елементи
   3. Контейнер і секції
   4. Кнопки
   5. Сітки й картки
   6. Блоки головної
   7. Інтеграція зі Storefront / WooCommerce
   8. Адаптив
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Змінні — усе брендування міняється тут
   ---------------------------------------------------------------------- */
:root {
	/* Фони */
	--osa-bg: #0a0b0d;
	--osa-bg-2: #0d0e11;
	--osa-bg-3: #08090b;
	--osa-panel: #141519;
	--osa-panel-2: #191b20;
	--osa-line: rgba(255, 255, 255, 0.08);
	--osa-line-strong: rgba(255, 255, 255, 0.16);

	/* Текст */
	--osa-ink: #eceae3;
	--osa-ink-2: #b7b2a8;
	--osa-ink-3: #867f73;

	/* Акцент */
	--osa-ac: #22b98a;
	--osa-ac-hi: #55d8ad;
	--osa-ac-rgb: 34, 185, 138;
	--osa-ac-soft: rgba(34, 185, 138, 0.24);
	--osa-ac-glow: rgba(34, 185, 138, 0.35);
	--osa-gradient: linear-gradient(135deg, var(--osa-ac-hi), var(--osa-ac) 55%, rgba(34, 185, 138, 0.6));
	--osa-on-accent: #0b0c0e;

	/* Типографіка */
	--osa-font-head: "Unbounded", "Manrope", system-ui, sans-serif;
	--osa-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--osa-fs-h1: clamp(2.25rem, 1.2rem + 4.4vw, 4.75rem);
	--osa-fs-h2: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
	--osa-fs-h3: clamp(1.05rem, 0.95rem + 0.5vw, 1.375rem);
	--osa-fs-body: clamp(0.975rem, 0.93rem + 0.2vw, 1.0625rem);
	--osa-fs-eyebrow: 0.75rem;
	--osa-lh-tight: 1.05;
	--osa-lh-base: 1.65;

	/* Розміри */
	--osa-container: 1200px;
	--osa-gutter: 26px;
	--osa-section-py: clamp(3rem, 2rem + 3vw, 5rem);
	--osa-hero-pt: clamp(5rem, 3rem + 6vw, 8.125rem);
	--osa-hero-pb: clamp(3rem, 2rem + 3vw, 4.375rem);

	/* Простір */
	--osa-space-xs: 0.5rem;
	--osa-space-sm: 0.875rem;
	--osa-space-md: 1.5rem;
	--osa-space-lg: 2.5rem;

	/* Оформлення */
	--osa-radius: 18px;
	--osa-radius-sm: 12px;
	--osa-pill: 999px;
	--osa-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
	--osa-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--osa-transition: 0.35s var(--osa-ease);
}

/* -------------------------------------------------------------------------
   2. Базові елементи
   ---------------------------------------------------------------------- */
body,
body.woocommerce-page {
	background-color: var(--osa-bg);
	color: var(--osa-ink);
	font-family: var(--osa-font-body);
	font-size: var(--osa-fs-body);
	line-height: var(--osa-lh-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.osa-front-page,
.osa-front-page p,
.osa-front-page li {
	color: var(--osa-ink-2);
}

.osa-front-page h1,
.osa-front-page h2,
.osa-front-page h3 {
	font-family: var(--osa-font-head);
	color: var(--osa-ink);
	letter-spacing: -0.01em;
}

.osa-front-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

.osa-front-page ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.osa-front-page a {
	color: var(--osa-ac-hi);
	text-decoration: none;
	transition: color var(--osa-transition);
}

.osa-front-page a:hover {
	color: var(--osa-ink);
}

.osa-entry-content p:last-child {
	margin-bottom: 0;
}

::selection {
	background: var(--osa-ac);
	color: var(--osa-on-accent);
}

/* -------------------------------------------------------------------------
   3. Контейнер і секції
   ---------------------------------------------------------------------- */
.osa-container {
	width: 100%;
	max-width: var(--osa-container);
	margin-inline: auto;
	padding-inline: var(--osa-gutter);
}

.osa-section {
	padding-block: var(--osa-section-py);
	position: relative;
}

.osa-section--alt {
	background-color: var(--osa-bg-2);
}

.osa-section__header {
	margin-bottom: var(--osa-space-lg);
	max-width: 48rem;
}

/* Надзаголовок «— ПОСЛУГИ» */
.osa-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--osa-space-sm);
	font-family: var(--osa-font-body);
	font-size: var(--osa-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--osa-ink-3);
}

.osa-eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--osa-ac);
	flex: none;
}

.osa-section__title {
	font-size: var(--osa-fs-h2);
	line-height: var(--osa-lh-tight);
	font-weight: 700;
	margin: 0 0 var(--osa-space-sm);
}

.osa-section__subtitle {
	margin: 0;
	color: var(--osa-ink-2);
	max-width: 42rem;
}

.osa-section__footer {
	margin-top: var(--osa-space-lg);
}

/* -------------------------------------------------------------------------
   4. Кнопки
   ---------------------------------------------------------------------- */
.osa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 14px 24px;
	border-radius: var(--osa-pill);
	border: 1px solid transparent;
	font-family: var(--osa-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--osa-transition), box-shadow var(--osa-transition),
		background-color var(--osa-transition), color var(--osa-transition), border-color var(--osa-transition);
}

.osa-btn:focus-visible {
	outline: 2px solid var(--osa-ac-hi);
	outline-offset: 3px;
}

.osa-btn--primary {
	background-image: var(--osa-gradient);
	color: var(--osa-on-accent);
	box-shadow: 0 8px 30px rgba(34, 185, 138, 0.18);
}

.osa-btn--primary:hover {
	color: var(--osa-on-accent);
	transform: translateY(-1px);
	box-shadow: 0 12px 38px var(--osa-ac-glow);
}

.osa-btn--ghost {
	background-color: transparent;
	border-color: var(--osa-ac-soft);
	color: var(--osa-ac-hi);
}

.osa-btn--ghost:hover {
	border-color: var(--osa-ac);
	color: var(--osa-ink);
	background-color: rgba(34, 185, 138, 0.08);
}

/* -------------------------------------------------------------------------
   5. Сітки й картки
   ---------------------------------------------------------------------- */
.osa-grid {
	display: grid;
	gap: var(--osa-space-md);
}

.osa-grid--cards {
	grid-template-columns: repeat(3, 1fr);
}

.osa-grid--products {
	grid-template-columns: repeat(4, 1fr);
}

.osa-grid--benefits {
	grid-template-columns: repeat(3, 1fr);
}

.osa-grid--contacts {
	grid-template-columns: repeat(3, 1fr);
}

.osa-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--osa-panel);
	border: 1px solid var(--osa-line);
	border-radius: var(--osa-radius);
	overflow: hidden;
	transition: border-color var(--osa-transition), transform var(--osa-transition), box-shadow var(--osa-transition);
}

.osa-card:hover {
	border-color: var(--osa-ac-soft);
	transform: translateY(-3px);
	box-shadow: var(--osa-shadow);
}

.osa-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.osa-card__link:hover {
	color: inherit;
}

.osa-card__media {
	aspect-ratio: 16 / 10;
	background-color: var(--osa-bg-3);
	overflow: hidden;
	position: relative;
}

.osa-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--osa-ease);
}

.osa-card:hover .osa-card__media img {
	transform: scale(1.04);
}

/* Заглушка з «платою» замість фото */
.osa-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #0f1a16;
	background-image:
		linear-gradient(rgba(34, 185, 138, 0.16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34, 185, 138, 0.16) 1px, transparent 1px),
		radial-gradient(circle at 70% 30%, rgba(34, 185, 138, 0.22), transparent 60%);
	background-size: 34px 34px, 34px 34px, 100% 100%;
}

/* Номер картки «01» */
.osa-card__index {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 5px 11px;
	border-radius: 8px;
	background-color: rgba(10, 11, 13, 0.72);
	border: 1px solid var(--osa-ac-soft);
	backdrop-filter: blur(6px);
	font-family: var(--osa-font-head);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--osa-ac-hi);
}

.osa-card__body {
	padding: var(--osa-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--osa-space-xs);
	flex: 1;
}

.osa-card__title {
	font-family: var(--osa-font-head);
	font-size: var(--osa-fs-h3);
	line-height: 1.25;
	font-weight: 700;
	margin: 0;
	color: var(--osa-ink);
}

.osa-card__text {
	margin: 0;
	color: var(--osa-ink-3);
	font-size: 0.9375em;
}

.osa-card__price {
	margin-top: auto;
	padding-top: var(--osa-space-xs);
	font-weight: 700;
	color: var(--osa-ac-hi);
}

.osa-card__price del {
	color: var(--osa-ink-3);
	font-weight: 400;
	margin-right: 0.4em;
}

.osa-price--on-request {
	font-weight: 600;
	color: var(--osa-ink-3);
}

.osa-card__actions {
	padding: 0 var(--osa-space-md) var(--osa-space-md);
}

.osa-card__actions .osa-btn,
.osa-card__actions .button {
	width: 100%;
	text-align: center;
}

/* -------------------------------------------------------------------------
   6. Блоки головної
   ---------------------------------------------------------------------- */

/* --- Hero --- */
.osa-hero {
	position: relative;
	overflow: hidden;
	padding-top: var(--osa-hero-pt);
	padding-bottom: var(--osa-hero-pb);
	background-color: var(--osa-bg-3);
	background-size: cover;
	background-position: center;
	text-align: center;
}

/* Сітка «плати» на фоні, якщо своє зображення не задане */
.osa-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(34, 185, 138, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34, 185, 138, 0.07) 1px, transparent 1px);
	background-size: 46px 46px, 46px 46px;
	mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
	pointer-events: none;
}

.osa-hero--has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 9, 11, 0.78), rgba(8, 9, 11, 0.92));
}

.osa-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 52rem;
	margin-inline: auto;
}

.osa-hero .osa-eyebrow {
	justify-content: center;
}

.osa-hero__title {
	font-size: var(--osa-fs-h1);
	line-height: var(--osa-lh-tight);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 var(--osa-space-md);
	color: var(--osa-ink);
}

.osa-hero__accent {
	display: block;
	background: var(--osa-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.osa-hero__subtitle {
	margin: 0 auto var(--osa-space-lg);
	max-width: 40rem;
	font-size: 1.0625em;
	color: var(--osa-ink-2);
}

.osa-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--osa-space-sm);
}

/* Стрічка напрямів під hero */
.osa-hero__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
	margin-top: var(--osa-space-lg);
}

.osa-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 10px 18px;
	border: 1px solid var(--osa-line);
	border-radius: var(--osa-radius-sm);
	background-color: rgba(20, 21, 25, 0.6);
	color: var(--osa-ink-2);
	font-size: 0.875rem;
	text-decoration: none;
	transition: border-color var(--osa-transition), color var(--osa-transition);
}

.osa-chip:hover {
	border-color: var(--osa-ac-soft);
	color: var(--osa-ink);
}

.osa-chip__num {
	font-family: var(--osa-font-head);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--osa-ac);
	letter-spacing: 0.06em;
}

/* --- Про компанію --- */
.osa-about__inner--split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: center;
}

.osa-about__media img {
	border-radius: var(--osa-radius);
	border: 1px solid var(--osa-line);
	width: 100%;
}

/* --- Переваги --- */
.osa-benefit {
	position: relative;
	background-color: var(--osa-panel);
	border: 1px solid var(--osa-line);
	border-radius: var(--osa-radius);
	padding: var(--osa-space-md);
	transition: border-color var(--osa-transition), transform var(--osa-transition);
}

.osa-benefit:hover {
	border-color: var(--osa-ac-soft);
	transform: translateY(-2px);
}

.osa-benefit__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--osa-space-sm);
	border-radius: var(--osa-radius-sm);
	background-color: rgba(34, 185, 138, 0.1);
	border: 1px solid var(--osa-ac-soft);
}

.osa-benefit__icon img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.osa-benefit__num {
	font-family: var(--osa-font-head);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--osa-ac);
	display: block;
	margin-bottom: var(--osa-space-xs);
}

.osa-benefit__title {
	font-family: var(--osa-font-head);
	font-size: var(--osa-fs-h3);
	font-weight: 700;
	margin: 0 0 var(--osa-space-xs);
	color: var(--osa-ink);
}

.osa-benefit__text {
	margin: 0;
	color: var(--osa-ink-3);
}

/* --- CTA --- */
.osa-cta {
	background-color: var(--osa-bg-2);
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
}

.osa-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 20% 0%, rgba(34, 185, 138, 0.16), transparent 60%);
	pointer-events: none;
}

.osa-cta--has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 9, 11, 0.92), rgba(8, 9, 11, 0.7));
}

.osa-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--osa-space-lg);
	flex-wrap: wrap;
	padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
	border: 1px solid var(--osa-line);
	border-radius: var(--osa-radius);
	background-color: rgba(20, 21, 25, 0.72);
}

.osa-cta__title {
	font-family: var(--osa-font-head);
	font-size: var(--osa-fs-h2);
	line-height: var(--osa-lh-tight);
	font-weight: 700;
	margin: 0 0 var(--osa-space-xs);
	color: var(--osa-ink);
}

.osa-cta__text {
	margin: 0;
	color: var(--osa-ink-2);
	max-width: 40rem;
}

/* --- Контакти --- */
.osa-contact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: var(--osa-space-md);
	background-color: var(--osa-panel);
	border: 1px solid var(--osa-line);
	border-radius: var(--osa-radius);
	transition: border-color var(--osa-transition);
}

.osa-contact:hover {
	border-color: var(--osa-ac-soft);
}

.osa-contact__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--osa-ink-3);
}

.osa-contact__value {
	font-weight: 600;
	font-size: 1.0625em;
	color: var(--osa-ink);
	text-decoration: none;
	word-break: break-word;
}

a.osa-contact__value:hover {
	color: var(--osa-ac-hi);
}

/* -------------------------------------------------------------------------
   7. Інтеграція зі Storefront / WooCommerce
   ---------------------------------------------------------------------- */
.site-header,
.site-footer,
.storefront-breadcrumb,
.secondary-navigation,
.main-navigation ul.menu ul.sub-menu {
	background-color: var(--osa-bg-3);
	color: var(--osa-ink);
}

.site-header,
.site-footer {
	border-color: var(--osa-line);
}

.site-header a,
.site-footer a,
.main-navigation ul li a,
.site-title a {
	color: var(--osa-ink) !important;
}

.site-header a:hover,
.main-navigation ul li a:hover,
.site-footer a:hover {
	color: var(--osa-ac-hi) !important;
}

.site-content,
.site {
	background-color: var(--osa-bg);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--osa-ac-hi);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button {
	background-image: var(--osa-gradient);
	background-color: transparent;
	color: var(--osa-on-accent);
	border-radius: var(--osa-pill);
	font-weight: 700;
	padding: 12px 22px;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce ul.products li.product .button:hover {
	background-color: transparent;
	color: var(--osa-on-accent);
	opacity: 0.92;
}

/* -------------------------------------------------------------------------
   8. Адаптив
   ---------------------------------------------------------------------- */

/* Tablet landscape */
@media (max-width: 1100px) {
	.osa-grid--products {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tablet */
@media (max-width: 900px) {
	.osa-grid--cards,
	.osa-grid--products,
	.osa-grid--benefits,
	.osa-grid--contacts {
		grid-template-columns: repeat(2, 1fr);
	}

	.osa-about__inner--split {
		grid-template-columns: 1fr;
	}

	.osa-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Mobile */
@media (max-width: 600px) {
	:root {
		--osa-gutter: 18px;
	}

	.osa-grid--cards,
	.osa-grid--products,
	.osa-grid--benefits,
	.osa-grid--contacts {
		grid-template-columns: 1fr;
	}

	.osa-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.osa-hero__actions .osa-btn {
		width: 100%;
	}

	.osa-hero__chips {
		justify-content: flex-start;
	}
}

/* Доступність */
@media (prefers-reduced-motion: reduce) {
	.osa-card,
	.osa-benefit,
	.osa-btn,
	.osa-card__media img,
	.osa-chip,
	.osa-contact {
		transition: none;
	}

	.osa-card:hover,
	.osa-benefit:hover,
	.osa-btn--primary:hover {
		transform: none;
	}

	.osa-card:hover .osa-card__media img {
		transform: none;
	}
}