/* =========================================================
 * PRESS 365 — Core Design System
 * Version: 1.1.0
 * =========================================================
 *
 * Global foundation for:
 * - Brand Colors
 * - Kashkool-inspired Typography Hierarchy
 * - Layout / Containers
 * - Spacing
 * - Grid System
 * - Buttons
 * - Cards
 * - Media
 * - Utilities
 * - Accessibility
 * - Astra Base Normalization
 *
 * IMPORTANT:
 * Section-specific styles should NOT be added here.
 * Header, Hero, Politics, Community... etc.
 * each get their own CSS module.
 * ======================================================= */


/* =========================================================
 * 1. Design Tokens
 * ======================================================= */

:root {

	/* -----------------------------------------------------
	 * Brand Colors
	 * --------------------------------------------------- */

	--p365-dark: #032f33;
	--p365-dark-2: #04272b;
	--p365-dark-3: #021f22;

	--p365-teal: #075258;
	--p365-teal-2: #0d6269;
	--p365-teal-light: #14727a;
	--p365-teal-soft: #e7f1f1;

	--p365-orange: #f39a22;
	--p365-orange-dark: #dc8211;
	--p365-orange-light: #ffae38;
	--p365-orange-soft: #fff0dc;

	--p365-cream: #fff8ed;
	--p365-cream-2: #f8f2e8;

	--p365-white: #ffffff;
	--p365-black: #101818;


	/* -----------------------------------------------------
	 * Text Colors
	 * --------------------------------------------------- */

	--p365-text: #17383a;
	--p365-text-dark: #08282b;

	--p365-muted: #6a7f80;
	--p365-muted-light: #91a2a3;

	--p365-text-on-dark: #ffffff;
	--p365-text-on-orange: #ffffff;


	/* -----------------------------------------------------
	 * Borders
	 * --------------------------------------------------- */

	--p365-border:
		rgba(3, 47, 51, 0.10);

	--p365-border-medium:
		rgba(3, 47, 51, 0.16);

	--p365-border-dark:
		rgba(255, 255, 255, 0.12);


	/* -----------------------------------------------------
	 * Typography — Base Scale
	 * --------------------------------------------------- */

	--p365-fs-xs: 11px;
	--p365-fs-sm: 12px;
	--p365-fs-base: 15px;
	--p365-fs-md: 16px;
	--p365-fs-lg: 17px;
	--p365-fs-xl: 20px;


	/* -----------------------------------------------------
	 * Typography — Editorial Titles
	 * --------------------------------------------------- */

	/*
	 * Small article / card title
	 */
	--p365-title-sm: 17px;

	/*
	 * Medium editorial title
	 */
	--p365-title-md: 22px;

	/*
	 * Large section / feature title
	 */
	--p365-title-lg: 34px;

	/*
	 * Main Hero title
	 */
	--p365-title-xl: 44px;


	/* -----------------------------------------------------
	 * Typography — Weights
	 * --------------------------------------------------- */

	--p365-weight-regular: 400;
	--p365-weight-medium: 500;
	--p365-weight-semibold: 600;
	--p365-weight-bold: 700;
	--p365-weight-extrabold: 800;
	--p365-weight-black: 900;


	/* -----------------------------------------------------
	 * Typography — Line Heights
	 * --------------------------------------------------- */

	--p365-line-tight: 1.20;
	--p365-line-title: 1.35;
	--p365-line-card: 1.55;
	--p365-line-body: 1.90;


	/* -----------------------------------------------------
	 * Layout
	 * --------------------------------------------------- */

	--p365-container: 1480px;
	--p365-container-wide: 1580px;
	--p365-container-narrow: 920px;

	--p365-gutter:
		clamp(16px, 2.2vw, 32px);


	/* -----------------------------------------------------
	 * Spacing
	 * --------------------------------------------------- */

	--p365-space-1: 4px;
	--p365-space-2: 8px;
	--p365-space-3: 12px;
	--p365-space-4: 16px;
	--p365-space-5: 20px;
	--p365-space-6: 24px;
	--p365-space-7: 32px;
	--p365-space-8: 40px;
	--p365-space-9: 48px;
	--p365-space-10: 64px;
	--p365-space-11: 80px;
	--p365-space-12: 96px;


	/* -----------------------------------------------------
	 * Radius
	 * --------------------------------------------------- */

	--p365-radius-xs: 4px;
	--p365-radius-sm: 8px;
	--p365-radius-md: 12px;
	--p365-radius-lg: 18px;
	--p365-radius-xl: 24px;
	--p365-radius-2xl: 32px;
	--p365-radius-round: 999px;


	/* -----------------------------------------------------
	 * Shadows
	 * --------------------------------------------------- */

	--p365-shadow-xs:
		0 3px 12px rgba(3, 47, 51, 0.05);

	--p365-shadow-sm:
		0 8px 24px rgba(3, 47, 51, 0.07);

	--p365-shadow:
		0 18px 50px rgba(3, 47, 51, 0.10);

	--p365-shadow-lg:
		0 30px 80px rgba(3, 47, 51, 0.14);


	/* -----------------------------------------------------
	 * Motion
	 * --------------------------------------------------- */

	--p365-transition-fast: 140ms ease;
	--p365-transition: 220ms ease;
	--p365-transition-slow: 380ms ease;


	/* -----------------------------------------------------
	 * Z Index
	 * --------------------------------------------------- */

	--p365-z-base: 1;
	--p365-z-dropdown: 100;
	--p365-z-header: 500;
	--p365-z-overlay: 800;
	--p365-z-modal: 1000;
}


/* =========================================================
 * 2. Global Reset
 * ======================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}


html {
	margin: 0;
	padding: 0;

	scroll-behavior: smooth;

	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}


body {
	margin: 0;
	padding: 0;

	direction: rtl;

	background:
		var(--p365-cream);

	color:
		var(--p365-text);

	font-size:
		var(--p365-fs-base);

	font-weight:
		var(--p365-weight-regular);

	line-height:
		var(--p365-line-body);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	text-rendering:
		optimizeLegibility;
}


::selection {
	background:
		var(--p365-orange);

	color:
		var(--p365-white);
}


/* =========================================================
 * 3. Global Elements
 * ======================================================= */

img,
picture,
svg,
video,
canvas {
	display: block;

	max-width: 100%;
}


img {
	height: auto;
}


iframe {
	max-width: 100%;
}


a {
	color: inherit;

	text-decoration: none;

	transition:
		color var(--p365-transition-fast),
		background-color var(--p365-transition-fast),
		border-color var(--p365-transition-fast),
		opacity var(--p365-transition-fast);
}


button,
input,
textarea,
select {
	font: inherit;
}


button {
	margin: 0;
	padding: 0;

	border: 0;

	background: none;

	color: inherit;

	cursor: pointer;
}


input,
textarea,
select {
	max-width: 100%;
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote {
	margin-top: 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	color:
		var(--p365-text-dark);

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		var(--p365-line-title);
}


p:last-child {
	margin-bottom: 0;
}


ul,
ol {
	margin-top: 0;
}


strong,
b {
	font-weight:
		var(--p365-weight-bold);
}


/* =========================================================
 * 4. Accessibility
 * ======================================================= */

:focus {
	outline: none;
}


:focus-visible {
	outline:
		3px solid rgba(243, 154, 34, 0.45);

	outline-offset:
		3px;
}


.p365-sr-only {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	padding: 0 !important;
	margin: -1px !important;

	overflow: hidden !important;

	clip:
		rect(0, 0, 0, 0) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


/* =========================================================
 * 5. Main Site Structure
 * ======================================================= */

.p365-site {
	position: relative;

	width: 100%;

	min-height: 100vh;

	overflow-x: clip;
}


.p365-main {
	position: relative;

	width: 100%;
}


/* =========================================================
 * 6. Containers
 * ======================================================= */

.p365-container {
	width:
		min(
			calc(
				100% -
				(
					var(--p365-gutter) *
					2
				)
			),
			var(--p365-container)
		);

	margin-inline:
		auto;
}


.p365-container--wide {
	width:
		min(
			calc(
				100% -
				(
					var(--p365-gutter) *
					2
				)
			),
			var(--p365-container-wide)
		);

	margin-inline:
		auto;
}


.p365-container--narrow {
	width:
		min(
			calc(
				100% -
				(
					var(--p365-gutter) *
					2
				)
			),
			var(--p365-container-narrow)
		);

	margin-inline:
		auto;
}


.p365-full {
	width: 100%;
}


/* =========================================================
 * 7. Sections
 * ======================================================= */

.p365-section {
	position: relative;

	width: 100%;

	padding-block:
		clamp(48px, 6vw, 88px);
}


.p365-section--compact {
	padding-block:
		clamp(32px, 4vw, 56px);
}


.p365-section--large {
	padding-block:
		clamp(64px, 8vw, 120px);
}


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


.p365-section--cream {
	background:
		var(--p365-cream);
}


.p365-section--cream-2 {
	background:
		var(--p365-cream-2);
}


.p365-section--dark {
	background:
		var(--p365-dark);

	color:
		var(--p365-white);
}


.p365-section--teal {
	background:
		var(--p365-teal);

	color:
		var(--p365-white);
}


/* =========================================================
 * 8. Section Heading System
 * ======================================================= */

.p365-section-head {
	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap: 20px;

	margin-bottom:
		clamp(22px, 3vw, 34px);
}


.p365-section-title {
	position: relative;

	display: flex;

	align-items: center;

	gap: 12px;

	margin: 0;

	color:
		var(--p365-text-dark);

	font-size:
		34px;

	font-weight:
		var(--p365-weight-black);

	line-height:
		1.25;
}


.p365-section-title::before {
	content: "";

	display: block;

	width: 5px;
	height: 30px;

	flex:
		0 0 5px;

	border-radius:
		var(--p365-radius-round);

	background:
		var(--p365-orange);
}


.p365-section--dark
.p365-section-title,
.p365-section--teal
.p365-section-title {
	color:
		var(--p365-white);
}


.p365-section-more {
	display: inline-flex;

	align-items: center;

	gap: 7px;

	color:
		var(--p365-teal);

	font-size:
		13px;

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1.4;
}


.p365-section-more:hover {
	color:
		var(--p365-orange);
}


.p365-section--dark
.p365-section-more,
.p365-section--teal
.p365-section-more {
	color:
		rgba(255, 255, 255, 0.76);
}


.p365-section--dark
.p365-section-more:hover,
.p365-section--teal
.p365-section-more:hover {
	color:
		var(--p365-orange-light);
}


/* =========================================================
 * 9. Typography
 * ======================================================= */

/*
 * Hero / Primary editorial title
 */
.p365-title-xl {
	margin: 0;

	font-size:
		var(--p365-title-xl);

	font-weight:
		var(--p365-weight-black);

	line-height:
		var(--p365-line-tight);

	letter-spacing:
		-0.015em;
}


/*
 * Major title
 */
.p365-title-lg {
	margin: 0;

	font-size:
		var(--p365-title-lg);

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1.28;
}


/*
 * Medium editorial title
 */
.p365-title-md {
	margin: 0;

	font-size:
		var(--p365-title-md);

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1.40;
}


/*
 * Card / article title
 */
.p365-title-sm {
	margin: 0;

	font-size:
		var(--p365-title-sm);

	font-weight:
		var(--p365-weight-bold);

	line-height:
		var(--p365-line-card);
}


/*
 * Large descriptive text
 */
.p365-body-lg {
	font-size:
		17px;

	font-weight:
		var(--p365-weight-medium);

	line-height:
		1.85;
}


/*
 * Normal editorial text
 */
.p365-body {
	font-size:
		var(--p365-fs-base);

	font-weight:
		var(--p365-weight-regular);

	line-height:
		var(--p365-line-body);
}


/*
 * Secondary text
 */
.p365-body-sm {
	font-size:
		13px;

	font-weight:
		var(--p365-weight-regular);

	line-height:
		1.80;
}


.p365-muted {
	color:
		var(--p365-muted);
}


/*
 * Dates / authors / reading time
 */
.p365-meta {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 8px;

	color:
		var(--p365-muted);

	font-size:
		12px;

	font-weight:
		var(--p365-weight-medium);

	line-height:
		1.5;
}


.p365-meta-separator {
	width: 3px;
	height: 3px;

	border-radius: 50%;

	background:
		currentColor;

	opacity: 0.5;
}


/* =========================================================
 * 10. Labels / Categories
 * ======================================================= */

.p365-label {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: fit-content;

	min-height: 28px;

	padding:
		5px 10px;

	border-radius:
		var(--p365-radius-xs);

	background:
		var(--p365-orange);

	color:
		var(--p365-white);

	font-size:
		12px;

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1;
}


.p365-label--dark {
	background:
		var(--p365-dark);

	color:
		var(--p365-white);
}


.p365-label--teal {
	background:
		var(--p365-teal);

	color:
		var(--p365-white);
}


.p365-label--soft {
	background:
		var(--p365-orange-soft);

	color:
		var(--p365-orange-dark);
}


/* =========================================================
 * 11. Grid System
 * ======================================================= */

.p365-grid {
	display: grid;

	gap:
		clamp(16px, 2vw, 24px);
}


.p365-grid--2 {
	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);
}


.p365-grid--3 {
	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);
}


.p365-grid--4 {
	grid-template-columns:
		repeat(
			4,
			minmax(0, 1fr)
		);
}


.p365-grid--5 {
	grid-template-columns:
		repeat(
			5,
			minmax(0, 1fr)
		);
}


/* =========================================================
 * 12. Flex Utilities
 * ======================================================= */

.p365-flex {
	display: flex;
}


.p365-flex-center {
	display: flex;

	align-items: center;

	justify-content: center;
}


.p365-flex-between {
	display: flex;

	align-items: center;

	justify-content:
		space-between;
}


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


/* =========================================================
 * 13. Buttons
 * ======================================================= */

.p365-btn {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 9px;

	min-height: 44px;

	padding:
		10px 20px;

	border:
		1px solid transparent;

	border-radius:
		var(--p365-radius-sm);

	font-size:
		14px;

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1;

	white-space: nowrap;

	transition:
		transform var(--p365-transition-fast),
		background-color var(--p365-transition-fast),
		color var(--p365-transition-fast),
		border-color var(--p365-transition-fast),
		box-shadow var(--p365-transition-fast);
}


.p365-btn:hover {
	transform:
		translateY(-1px);
}


.p365-btn--orange {
	background:
		var(--p365-orange);

	color:
		var(--p365-white);
}


.p365-btn--orange:hover {
	background:
		var(--p365-orange-dark);

	color:
		var(--p365-white);

	box-shadow:
		0 8px 24px rgba(243, 154, 34, 0.22);
}


.p365-btn--dark {
	background:
		var(--p365-dark);

	color:
		var(--p365-white);
}


.p365-btn--dark:hover {
	background:
		var(--p365-teal);
}


.p365-btn--outline {
	border-color:
		var(--p365-border-medium);

	background:
		transparent;

	color:
		var(--p365-text-dark);
}


.p365-btn--outline:hover {
	border-color:
		var(--p365-orange);

	color:
		var(--p365-orange-dark);
}


.p365-btn--outline-light {
	border-color:
		rgba(255, 255, 255, 0.28);

	color:
		var(--p365-white);
}


.p365-btn--outline-light:hover {
	border-color:
		var(--p365-orange);

	background:
		var(--p365-orange);

	color:
		var(--p365-white);
}


/* =========================================================
 * 14. Cards
 * ======================================================= */

.p365-card {
	position: relative;

	overflow: hidden;

	border:
		1px solid var(--p365-border);

	border-radius:
		var(--p365-radius-md);

	background:
		var(--p365-white);

	transition:
		transform var(--p365-transition),
		box-shadow var(--p365-transition),
		border-color var(--p365-transition);
}


.p365-card:hover {
	transform:
		translateY(-2px);

	border-color:
		rgba(3, 47, 51, 0.15);

	box-shadow:
		var(--p365-shadow-sm);
}


.p365-card--dark {
	border-color:
		var(--p365-border-dark);

	background:
		var(--p365-dark);

	color:
		var(--p365-white);
}


.p365-card__media {
	position: relative;

	overflow: hidden;
}


.p365-card__image {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform var(--p365-transition-slow);
}


.p365-card:hover
.p365-card__image {
	transform:
		scale(1.025);
}


.p365-card__content {
	padding:
		clamp(14px, 2vw, 20px);
}


/* =========================================================
 * 15. Editorial Image Helpers
 * ======================================================= */

.p365-media {
	position: relative;

	overflow: hidden;

	background:
		var(--p365-teal-soft);
}


.p365-media img {
	width: 100%;
	height: 100%;

	object-fit: cover;
}


.p365-ratio-16-9 {
	aspect-ratio: 16 / 9;
}


.p365-ratio-4-3 {
	aspect-ratio: 4 / 3;
}


.p365-ratio-3-2 {
	aspect-ratio: 3 / 2;
}


.p365-ratio-square {
	aspect-ratio: 1 / 1;
}


/* =========================================================
 * 16. Image Overlay
 * ======================================================= */

.p365-overlay {
	position: absolute;

	inset: 0;

	pointer-events: none;
}


.p365-overlay--bottom {
	background:
		linear-gradient(
			to top,
			rgba(2, 31, 34, 0.90) 0%,
			rgba(2, 31, 34, 0.45) 45%,
			rgba(2, 31, 34, 0) 78%
		);
}


.p365-overlay--side {
	background:
		linear-gradient(
			to left,
			rgba(2, 31, 34, 0.94) 0%,
			rgba(2, 31, 34, 0.74) 40%,
			rgba(2, 31, 34, 0.08) 78%
		);
}


/* =========================================================
 * 17. Dividers
 * ======================================================= */

.p365-divider {
	width: 100%;
	height: 1px;

	border: 0;

	background:
		var(--p365-border);
}


.p365-divider--dark {
	background:
		rgba(255, 255, 255, 0.12);
}


/* =========================================================
 * 18. Status Dot
 * ======================================================= */

.p365-dot {
	display: inline-block;

	width: 7px;
	height: 7px;

	flex:
		0 0 7px;

	border-radius: 50%;

	background:
		var(--p365-orange);
}


.p365-dot--live {
	position: relative;

	background:
		#ff4a33;
}


.p365-dot--live::after {
	content: "";

	position: absolute;

	inset: -4px;

	border:
		1px solid rgba(255, 74, 51, 0.45);

	border-radius: 50%;
}


/* =========================================================
 * 19. Icon Button
 * ======================================================= */

.p365-icon-btn {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 42px;
	height: 42px;

	flex:
		0 0 42px;

	border:
		1px solid var(--p365-border);

	border-radius:
		var(--p365-radius-round);

	background:
		transparent;

	color:
		var(--p365-text-dark);

	transition:
		background-color var(--p365-transition-fast),
		border-color var(--p365-transition-fast),
		color var(--p365-transition-fast),
		transform var(--p365-transition-fast);
}


.p365-icon-btn:hover {
	border-color:
		var(--p365-orange);

	color:
		var(--p365-orange);

	transform:
		translateY(-1px);
}


.p365-section--dark
.p365-icon-btn {
	border-color:
		rgba(255, 255, 255, 0.18);

	color:
		var(--p365-white);
}


/* =========================================================
 * 20. Surface Helpers
 * ======================================================= */

.p365-surface {
	border:
		1px solid var(--p365-border);

	border-radius:
		var(--p365-radius-lg);

	background:
		var(--p365-white);
}


.p365-surface--dark {
	border-color:
		var(--p365-border-dark);

	background:
		var(--p365-dark);

	color:
		var(--p365-white);
}


.p365-surface--cream {
	background:
		var(--p365-cream);
}


/* =========================================================
 * 21. Text Clamp
 * ======================================================= */

.p365-clamp-1,
.p365-clamp-2,
.p365-clamp-3 {
	display: -webkit-box;

	overflow: hidden;

	-webkit-box-orient: vertical;
}


.p365-clamp-1 {
	-webkit-line-clamp: 1;
}


.p365-clamp-2 {
	-webkit-line-clamp: 2;
}


.p365-clamp-3 {
	-webkit-line-clamp: 3;
}


/* =========================================================
 * 22. Spacing Utilities
 * ======================================================= */

.p365-mb-0 {
	margin-bottom:
		0 !important;
}


.p365-mb-2 {
	margin-bottom:
		var(--p365-space-2) !important;
}


.p365-mb-3 {
	margin-bottom:
		var(--p365-space-3) !important;
}


.p365-mb-4 {
	margin-bottom:
		var(--p365-space-4) !important;
}


.p365-mb-5 {
	margin-bottom:
		var(--p365-space-5) !important;
}


.p365-mb-6 {
	margin-bottom:
		var(--p365-space-6) !important;
}


.p365-mb-7 {
	margin-bottom:
		var(--p365-space-7) !important;
}


.p365-mb-8 {
	margin-bottom:
		var(--p365-space-8) !important;
}


/* =========================================================
 * 23. Visibility Utilities
 * ======================================================= */

.p365-hide {
	display:
		none !important;
}


.p365-desktop-only {
	display: block;
}


.p365-mobile-only {
	display: none;
}


/* =========================================================
 * 24. WordPress / Astra Base Normalization
 * ======================================================= */

html,
body,
#page,
.site,
.site-content {
	min-height: 100%;
}


body,
#page,
.site,
.site-content {
	background-color:
		var(--p365-cream);
}


#page {
	width: 100%;

	margin: 0;

	overflow: clip;
}


.site-content {
	width: 100%;
}


.ast-container {
	width: 100%;

	max-width: none;

	margin: 0;

	padding-left: 0;
	padding-right: 0;
}


.site-main {
	width: 100%;
}


.content-area {
	width: 100%;

	margin: 0;
}


.site-content
.ast-container {
	display: block;
}


.entry-content {
	margin: 0;
}


.entry-content > * {
	max-width: none;
}


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


.ast-page-builder-template
.site-content
> .ast-container {
	max-width: none;

	padding: 0;
}


.ast-page-builder-template
.site-content
#primary {
	margin: 0;

	padding: 0;
}


.ast-page-builder-template
.entry-content {
	margin: 0;
}


.p365-site
article,
.p365-site
.entry-content {
	margin: 0;
	padding: 0;
}


/* =========================================================
 * 25. WordPress Admin Bar Compatibility
 * ======================================================= */

body.admin-bar {
	--p365-adminbar-height: 32px;
}


@media screen and (max-width: 782px) {

	body.admin-bar {
		--p365-adminbar-height: 46px;
	}
}


/* =========================================================
 * 26. Generic Loading State
 * ======================================================= */

.p365-loading {
	position: relative;

	pointer-events: none;

	opacity: 0.65;
}


.p365-loading::after {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	width: 24px;
	height: 24px;

	margin:
		-12px 0 0 -12px;

	border:
		2px solid rgba(3, 47, 51, 0.15);

	border-top-color:
		var(--p365-orange);

	border-radius: 50%;

	animation:
		p365-spin 0.7s linear infinite;
}


@keyframes p365-spin {

	to {
		transform:
			rotate(360deg);
	}
}


/* =========================================================
 * 27. Reduced Motion
 * ======================================================= */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}


	*,
	*::before,
	*::after {
		animation-duration:
			0.01ms !important;

		animation-iteration-count:
			1 !important;

		scroll-behavior:
			auto !important;

		transition-duration:
			0.01ms !important;
	}
}


/* =========================================================
 * 28. Responsive — Tablet
 * ======================================================= */

@media (max-width: 1024px) {

	:root {

		--p365-gutter:
			clamp(16px, 2.5vw, 24px);

		--p365-title-sm: 16px;
		--p365-title-md: 21px;
		--p365-title-lg: 30px;
		--p365-title-xl: 38px;
	}


	.p365-section-title {
		font-size:
			30px;
	}


	.p365-grid--4,
	.p365-grid--5 {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}


	.p365-grid--3 {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}
}


/* =========================================================
 * 29. Responsive — Mobile
 * ======================================================= */
@media (max-width: 767px) {
	:root {--p365-gutter: 16px;--p365-radius-lg: 14px;--p365-radius-xl: 18px;--p365-fs-xs: 10px;--p365-fs-sm: 11px;--p365-fs-base: 14px;--p365-fs-md: 15px;--p365-fs-lg: 16px;--p365-fs-xl: 18px;--p365-title-sm: 15px;--p365-title-md: 20px;--p365-title-lg: 28px;--p365-title-xl: 32px;}
	body {font-size:14px;line-height:1.80;}
	.p365-section {
		padding-block:
			44px;
	}


	.p365-section--compact {padding-block:30px;}
	.p365-section--large {padding-block:56px;}
	.p365-grid--2, .p365-grid--3, .p365-grid--4, .p365-grid--5 {grid-template-columns:1fr;}
	.p365-section-head {
		align-items:flex-end;
		margin-bottom:20px;
	}

	.p365-section-title {
		font-size:28px;
		font-weight:var(--p365-weight-black);
		line-height:1.28;
	}


	.p365-section-title::before {
		width: 4px;
		height: 24px;

		flex-basis:
			4px;
	}


	.p365-section-more {
		font-size:
			12px;

		font-weight:
			var(--p365-weight-extrabold);
	}


	.p365-title-xl {
		font-size:
			32px;
	}


	.p365-title-lg {
		font-size:
			28px;
	}


	.p365-title-md {
		font-size:
			20px;
	}


	.p365-title-sm {
		font-size:
			15px;
	}


	.p365-body-lg {
		font-size:
			15px;

		line-height:
			1.85;
	}


	.p365-body {
		font-size:
			14px;

		line-height:
			1.85;
	}


	.p365-body-sm {
		font-size:
			12px;
	}


	.p365-meta {
		font-size:
			11px;
	}


	.p365-label {
		font-size:
			11px;
	}


	.p365-btn {
		min-height:
			42px;

		padding:
			9px 16px;

		font-size:
			13px;
	}


	.p365-desktop-only {
		display:
			none !important;
	}


	.p365-mobile-only {
		display:
			block !important;
	}
}

/* =========================================================
 * 30. Responsive — Small Mobile
 * ======================================================= */
@media (max-width: 480px) {
	:root {--p365-gutter: 14px;}
	.p365-section-head {gap:12px;}
	.p365-section-title {gap:9px;}
}


/* =========================================================
 * 31. Print
 * ======================================================= */
@media print {
	body {background:#ffffff;color:#000000;}
	.p365-no-print {display:none !important;}
	a {color:#000000;text-decoration:none;}
}