/**
 * Paripoorn Layout
 * Container, section rhythm, and shared grid utilities used by theme
 * templates (header/footer/woocommerce). Elementor widgets bring their
 * own inner layout but should still nest inside .pp-container.
 */

.pp-container {
	width: 100%;
	max-width: var(--pp-container);
	margin-inline: auto;
}

@media (max-width: 767px) {
	.pp-container {
		padding-inline: var(--pp-gutter);
	}
}

.pp-container--wide {
	max-width: 1440px;
}

.pp-container--narrow {
	max-width: 860px;
}

.pp-section {
	padding-block: var(--pp-section-space);
	position: relative;
}

.pp-section--soft {
	background: var(--pp-bg-soft);
}

.pp-section--section-bg {
	background: var(--pp-bg-section);
}

.pp-section--white {
	background: var(--pp-bg);
}

.pp-section-head {
	max-width: 640px;
	margin-bottom: var(--pp-space-12);
}

.pp-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.pp-grid {
	display: grid;
	gap: var(--pp-space-6);
}

.pp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pp-grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1023px) {
	.pp-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.pp-grid--5 { grid-template-columns: repeat(3, 1fr); }
	.pp-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.pp-grid--2,
	.pp-grid--3,
	.pp-grid--4,
	.pp-grid--5 {
		grid-template-columns: repeat(2, 1fr);
	}
	.pp-grid--stack-mobile {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 479px) {
	.pp-grid--min-1-xs {
		grid-template-columns: 1fr;
	}
}

.pp-flex {
	display: flex;
}

.pp-flex--center {
	align-items: center;
	justify-content: center;
}

.pp-flex--between {
	align-items: center;
	justify-content: space-between;
}

.pp-flex--wrap {
	flex-wrap: wrap;
}

.pp-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pp-space-12);
	align-items: center;
}

@media (max-width: 1023px) {
	.pp-two-col {
		grid-template-columns: 1fr;
		gap: var(--pp-space-8);
	}
}

.pp-aspect {
	position: relative;
	overflow: hidden;
}

.pp-aspect img,
.pp-aspect video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pp-aspect--1-1 { aspect-ratio: 1 / 1; }
.pp-aspect--4-3 { aspect-ratio: 4 / 3; }
.pp-aspect--16-9 { aspect-ratio: 16 / 9; }
.pp-aspect--3-4 { aspect-ratio: 3 / 4; }

/* Skip-link container placement */
.pp-site {
	overflow-x: hidden;
}

.pp-main {
	min-height: 40vh;
}