/**
 * Stackora Page Builder — front-end and editor styles.
 * Design assets license: see license.txt.
 *
 * Colors and widths follow the Stackora theme when it is active
 * (--sk-* variables) and fall back to neutral values with any other theme.
 */

/* ---------- Section ---------- */
.skb-section {
	--skb-container: var(--sk-container, 1240px);
	--skb-gutter: var(--sk-gutter, clamp(16px, 4vw, 32px));
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-block: clamp(48px, 8vw, 96px);
	isolation: isolate;
}

.skb-section--v-top { justify-content: flex-start; }
.skb-section--v-center { justify-content: center; }
.skb-section--v-bottom { justify-content: flex-end; }

.skb-section--has-bg {
	overflow: hidden;
}

.skb-section__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--skb-content, var(--skb-container)) + var(--skb-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--skb-gutter);
}

.skb-section--content-full > .skb-section__inner {
	max-width: none;
	padding-inline: 0;
}

/* "No top and bottom spacing": banners, sliders, full images. */
.skb-section--flush {
	padding-block: 0;
}

/* Images inside a full-width content area fill it completely. */
.skb-section--content-full > .skb-section__inner > .wp-block-image,
.skb-section--content-full > .skb-section__inner > .wp-block-image img {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.skb-section__inner > :first-child { margin-block-start: 0; }
.skb-section__inner > :last-child { margin-block-end: 0; }

.skb-section__media,
.skb-section__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	pointer-events: none;
}

.skb-section__overlay {
	z-index: 1;
}

.skb-section.has-text-color :where(h1, h2, h3, h4, h5, h6, p, li, a:not(.wp-element-button):not(.sk-btn)) {
	color: inherit;
}

.skb-col.has-text-color :where(h1, h2, h3, h4, h5, h6, p, li, a:not(.wp-element-button):not(.sk-btn)) {
	color: inherit;
}

/* Shape dividers */
.skb-shape {
	position: absolute;
	inset-inline: 0;
	z-index: 1;
	line-height: 0;
	color: var(--sk-bg, #fff);
	pointer-events: none;
}

.skb-shape svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.skb-shape--bottom { bottom: -1px; }

.skb-shape--top {
	top: -1px;
	transform: rotate(180deg);
}

.skb-shape--bottom.skb-shape--flip { transform: scaleX(-1); }
.skb-shape--top.skb-shape--flip { transform: rotate(180deg) scaleX(-1); }

/* A light section on a dark-mode page keeps the light colors inside (texts, buttons, cards). */
:root[data-theme="dark"] .skb-on-light {
	--sk-primary: #111827;
	--sk-on-primary: #FFFFFF;
	--sk-primary-hover: #374151;
	--sk-text: #111827;
	--sk-muted: #4B5563;
	--sk-bg: #FFFFFF;
	--sk-surface: #F5F6F8;
	--sk-border: #E5E7EB;
	color-scheme: light;
}

/* ---------- Row and columns ---------- */
.skb-row {
	--skb-gap: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--skb-gap);
	box-sizing: border-box;
	margin-block: 0;
}

/* Two rows in a row (e.g. a title row above a row of cards): some air between them. */
:where(.skb-row) + .skb-row { margin-top: clamp(20px, 3vw, 36px); }

.skb-row--v-top { align-items: flex-start; }
.skb-row--v-center { align-items: center; }
.skb-row--v-bottom { align-items: flex-end; }
.skb-row--v-stretch { align-items: stretch; }

.skb-col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
}

.skb-col--w { flex: 0 0 var(--w); }

.skb-col--v-top { justify-content: flex-start; }
.skb-col--v-center { justify-content: center; }
.skb-col--v-bottom { justify-content: flex-end; }

.skb-col--has-bg {
	padding: 24px;
	border-radius: var(--sk-radius, 12px);
}

.skb-col > :first-child { margin-block-start: 0; }
.skb-col > :last-child { margin-block-end: 0; }

@media (max-width: 1024px) {
	.skb-row--stack-tablet > .skb-col { flex: 0 0 100%; }
	.skb-row--stack-tablet.skb-row--reverse { flex-direction: column-reverse; flex-wrap: nowrap; }
	.skb-col.skb-col--wt { flex: 0 0 var(--w-t); }
}

@media (max-width: 767px) {
	.skb-row--stack-mobile > .skb-col,
	.skb-row--stack-tablet > .skb-col { flex: 0 0 100%; }
	.skb-row--stack-mobile.skb-row--reverse { flex-direction: column-reverse; flex-wrap: nowrap; }
	.skb-col.skb-col--wm { flex: 0 0 var(--w-m); }
}

/* 5 to 8 columns: 3 or 4 per line on tablets, 2 on phones. */
@media (max-width: 1024px) {
	.skb-row--cols-5 > .skb-col,
	.skb-row--cols-6 > .skb-col { flex: 0 0 calc((100% - var(--skb-gap) * 2) / 3); }
	.skb-row--cols-7 > .skb-col,
	.skb-row--cols-8 > .skb-col { flex: 0 0 calc((100% - var(--skb-gap) * 3) / 4); }
}

@media (max-width: 767px) {
	.skb-row--cols-5 > .skb-col,
	.skb-row--cols-6 > .skb-col,
	.skb-row--cols-7 > .skb-col,
	.skb-row--cols-8 > .skb-col { flex: 0 0 calc((100% - var(--skb-gap)) / 2); }
}

/* ---------- Spacer and divider ---------- */
.skb-spacer {
	height: 48px;
	margin: 0;
}

.skb-divider {
	display: flex;
	margin-block: 24px;
}

.skb-divider--left { justify-content: flex-start; }
.skb-divider--center { justify-content: center; }
.skb-divider--right { justify-content: flex-end; }

.skb-divider__line {
	display: block;
	width: 100%;
	border-top: 1px solid var(--sk-border, rgb(0 0 0 / 12%));
}

/* ---------- Visibility per device ---------- */
@media (min-width: 1025px) {
	.skb-hide-desktop { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.skb-hide-tablet { display: none !important; }
}

@media (max-width: 767px) {
	.skb-hide-mobile { display: none !important; }
}

/* ---------- Entrance animations ---------- */
.skb-anim-ready [data-skb-anim]:not(.is-visible) {
	opacity: 0;
}

.skb-anim-ready [data-skb-anim].is-visible {
	animation: skb-in .7s cubic-bezier(.2, .7, .2, 1) var(--skb-delay, 0ms) both;
}

.skb-anim-ready [data-skb-anim="fade-up"].is-visible { --skb-from: translate3d(0, 32px, 0); }
.skb-anim-ready [data-skb-anim="fade-down"].is-visible { --skb-from: translate3d(0, -32px, 0); }
.skb-anim-ready [data-skb-anim="fade-start"].is-visible { --skb-from: translate3d(-32px, 0, 0); }
.skb-anim-ready [data-skb-anim="fade-end"].is-visible { --skb-from: translate3d(32px, 0, 0); }
.skb-anim-ready [data-skb-anim="zoom"].is-visible { --skb-from: scale(.94); }
[dir="rtl"] .skb-anim-ready [data-skb-anim="fade-start"].is-visible,
.skb-anim-ready[dir="rtl"] [data-skb-anim="fade-start"].is-visible { --skb-from: translate3d(32px, 0, 0); }
[dir="rtl"] .skb-anim-ready [data-skb-anim="fade-end"].is-visible,
.skb-anim-ready[dir="rtl"] [data-skb-anim="fade-end"].is-visible { --skb-from: translate3d(-32px, 0, 0); }

.skb-anim-ready [data-skb-anim].is-static {
	animation: none;
}

@keyframes skb-in {
	from {
		opacity: 0;
		transform: var(--skb-from, none);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skb-anim-ready [data-skb-anim]:not(.is-visible) { opacity: 1; }
	.skb-anim-ready [data-skb-anim].is-visible { animation: none; }
}