/* =========================================================
 * PRESS 365 — Community
 * Version: 1.1.0
 * =========================================================
 *
 * Typography aligned with PRESS 365 Core Design System.
 * Layout and visual structure preserved.
 * ======================================================= */


/* =========================================================
 * 1. Module
 * ======================================================= */

.p365-community {
	width:
		100%;

	height:
		100%;
}


/* =========================================================
 * 2. Shell
 * ======================================================= */

.p365-community__shell {
	height:
		100%;

	overflow:
		hidden;

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

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

	background:
		var(--p365-white);

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


/* =========================================================
 * 3. Header
 * ======================================================= */

.p365-community__head {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		16px;

	min-height:
		60px;

	padding:
		0 18px;

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


.p365-community__title {
	position:
		relative;

	margin:
		0;

	padding-right:
		13px;

	color:
		var(--p365-dark);

	font-size:
		22px;

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

	line-height:
		1.2;
}


.p365-community__title::before {
	content:
		"";

	position:
		absolute;

	top:
		50%;

	right:
		0;

	width:
		4px;

	height:
		22px;

	border-radius:
		20px;

	background:
		var(--p365-orange);

	transform:
		translateY(-50%);
}


.p365-community__more {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		6px;

	color:
		var(--p365-teal);

	font-size:
		11px;

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

	line-height:
		1.4;
}


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


/* =========================================================
 * 4. Grid
 * ======================================================= */

.p365-community__grid {
	display:
		grid;

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


/* =========================================================
 * 5. Card
 * ======================================================= */

.p365-community-card {
	min-width:
		0;

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


.p365-community-card:last-child {
	border-left:
		0;
}


.p365-community-card__link {
	display:
		block;

	height:
		100%;

	padding:
		12px;

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


.p365-community-card__link:hover {
	background:
		#fffaf2;
}


/* =========================================================
 * 6. Media
 * ======================================================= */

.p365-community-card__media {
	width:
		100%;

	aspect-ratio:
		4 / 3;

	overflow:
		hidden;

	border-radius:
		8px;

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


.p365-community-card__media img {
	width:
		100%;

	height:
		100%;

	object-fit:
		cover;

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


.p365-community-card__link:hover
.p365-community-card__media img {
	transform:
		scale(1.03);
}


.p365-community-card__media.is-placeholder {
	background:
		linear-gradient(
			135deg,
			#e7efef,
			#d0dddd 55%,
			#b9cecf
		);
}


.p365-community-card:nth-child(2)
.p365-community-card__media.is-placeholder {
	background:
		linear-gradient(
			135deg,
			#f1e9de,
			#ddd1c1
		);
}


.p365-community-card:nth-child(3)
.p365-community-card__media.is-placeholder {
	background:
		linear-gradient(
			135deg,
			#dce9e7,
			#bfd5d1
		);
}


/* =========================================================
 * 7. Content
 * ======================================================= */

.p365-community-card__content {
	padding:
		10px 2px 3px;
}


/* =========================================================
 * 8. Card Title
 * ======================================================= */

.p365-community-card__title {
	display:
		-webkit-box;

	overflow:
		hidden;

	margin:
		0 0 8px;

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

	font-size:
		15px;

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

	line-height:
		1.6;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		3;

	transition:
		color var(--p365-transition-fast);
}


.p365-community-card__link:hover
.p365-community-card__title {
	color:
		var(--p365-teal);
}


/* =========================================================
 * 9. Time
 * ======================================================= */

.p365-community-card__time {
	color:
		var(--p365-muted);

	font-size:
		10px;

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

	line-height:
		1.4;
}


/* =========================================================
 * 10. Responsive — Tablet
 * ======================================================= */

@media (max-width: 1000px) {

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


	.p365-community-card:nth-child(2) {
		border-left:
			0;
	}


	.p365-community-card:nth-child(3) {
		grid-column:
			1 / -1;

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

		border-left:
			0;
	}


	.p365-community-card__title {
		font-size:
			15px;

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


/* =========================================================
 * 11. Responsive — Mobile
 * ======================================================= */

@media (max-width: 600px) {

	.p365-community__head {
		gap:
			12px;
	}


	.p365-community__title {
		font-size:
			21px;

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


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


	.p365-community__grid {
		display:
			block;
	}


	.p365-community-card {
		border-left:
			0;

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


	.p365-community-card:last-child {
		border-bottom:
			0;
	}


	.p365-community-card__link {
		display:
			grid;

		grid-template-columns:
			118px minmax(0, 1fr);

		align-items:
			center;

		gap:
			12px;

		padding:
			12px;
	}


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


	.p365-community-card__content {
		padding:
			2px 0;
	}


	.p365-community-card__title {
		margin-bottom:
			8px;

		font-size:
			15px;

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

		line-height:
			1.55;

		-webkit-line-clamp:
			3;
	}


	.p365-community-card__time {
		font-size:
			10px;
	}
}