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


/* =========================================================
 * 1. Section
 * ======================================================= */

.p365-opinions {
	position: relative;

	padding-top:
		24px;
}


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

.p365-opinions__shell {
	position: relative;

	overflow:
		hidden;

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

	background:
		linear-gradient(
			135deg,
			#032f33 0%,
			#043b40 55%,
			#075258 100%
		);

	color:
		var(--p365-white);

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


.p365-opinions__shell::after {
	content:
		"365";

	position:
		absolute;

	left:
		-25px;

	bottom:
		-85px;

	color:
		rgba(255,255,255,.025);

	font-size:
		250px;

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

	line-height:
		1;

	pointer-events:
		none;
}


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

.p365-opinions__header {
	position: relative;

	z-index:
		2;

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		20px;

	min-height:
		94px;

	padding:
		22px 30px;

	border-bottom:
		1px solid rgba(255,255,255,.10);
}


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

	position:
		absolute;

	top:
		25px;

	right:
		0;

	width:
		4px;

	height:
		44px;

	background:
		var(--p365-orange);

	border-radius:
		4px 0 0 4px;
}


/* =========================================================
 * 4. Header Typography
 * ======================================================= */

.p365-opinions__eyebrow {
	display:
		block;

	margin-bottom:
		3px;

	color:
		var(--p365-orange);

	font-size:
		12px;

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

	line-height:
		1.4;
}


.p365-opinions__title {
	margin:
		0;

	color:
		var(--p365-white);

	font-size:
		34px;

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

	line-height:
		1.25;
}


.p365-opinions__more {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		8px;

	color:
		rgba(255,255,255,.58);

	font-size:
		13px;

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

	line-height:
		1.4;

	white-space:
		nowrap;

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


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


/* =========================================================
 * 5. Grid
 * ======================================================= */

.p365-opinions__grid {
	position: relative;

	z-index:
		2;

	display:
		grid;

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


/* =========================================================
 * 6. Item
 * ======================================================= */

.p365-opinions__item {
	position: relative;

	min-width:
		0;

	border-left:
		1px solid rgba(255,255,255,.10);
}


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


/* =========================================================
 * 7. Link
 * ======================================================= */

.p365-opinions__link {
	position: relative;

	display:
		flex;

	flex-direction:
		column;

	min-height:
		330px;

	padding:
		30px;

	color:
		var(--p365-white);

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


.p365-opinions__link:hover {
	background:
		rgba(255,255,255,.035);
}


/* =========================================================
 * 8. Quote
 * ======================================================= */

.p365-opinions__quote {
	display:
		block;

	height:
		50px;

	margin-bottom:
		8px;

	color:
		var(--p365-orange);

	font-size:
		72px;

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

	line-height:
		.9;

	opacity:
		.9;
}


/* =========================================================
 * 9. Article
 * ======================================================= */

.p365-opinions__article {
	flex:
		1;
}


.p365-opinions__article-title {
	display:
		-webkit-box;

	overflow:
		hidden;

	margin:
		0 0 14px;

	color:
		var(--p365-white);

	font-size:
		21px;

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

	line-height:
		1.55;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		3;

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


.p365-opinions__link:hover
.p365-opinions__article-title {
	color:
		#ffbd65;
}


/* =========================================================
 * 10. Excerpt
 * ======================================================= */

.p365-opinions__excerpt {
	display:
		-webkit-box;

	overflow:
		hidden;

	margin:
		0;

	color:
		rgba(255,255,255,.62);

	font-size:
		13px;

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

	line-height:
		1.85;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		3;
}


/* =========================================================
 * 11. Author
 * ======================================================= */

.p365-opinions__author {
	display:
		flex;

	align-items:
		center;

	gap:
		12px;

	margin-top:
		26px;

	padding-top:
		20px;

	border-top:
		1px solid rgba(255,255,255,.09);
}


/* =========================================================
 * 12. Avatar
 * ======================================================= */

.p365-opinions__avatar {
	display:
		block;

	width:
		48px;

	height:
		48px;

	flex:
		0 0 48px;

	border:
		2px solid rgba(255,255,255,.16);

	border-radius:
		50%;

	object-fit:
		cover;
}


.p365-opinions__avatar--placeholder {
	background:
		linear-gradient(
			135deg,
			var(--p365-teal-light),
			var(--p365-dark)
		);
}


/* =========================================================
 * 13. Author Info
 * ======================================================= */

.p365-opinions__author-info {
	display:
		flex;

	flex-direction:
		column;

	gap:
		2px;

	min-width:
		0;
}


.p365-opinions__author-info strong {
	color:
		var(--p365-white);

	font-size:
		13px;

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

	line-height:
		1.45;
}


.p365-opinions__author-info span {
	color:
		rgba(255,255,255,.42);

	font-size:
		10px;

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

	line-height:
		1.4;
}


/* =========================================================
 * 14. Tablet
 * ======================================================= */

@media (max-width: 1000px) {

	.p365-opinions__title {
		font-size:
			30px;
	}


	.p365-opinions__link {
		min-height:
			310px;

		padding:
			24px;
	}


	.p365-opinions__article-title {
		font-size:
			18px;

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

		line-height:
			1.55;
	}


	.p365-opinions__excerpt {
		font-size:
			13px;
	}
}


/* =========================================================
 * 15. Mobile
 * ======================================================= */

@media (max-width: 760px) {

	.p365-opinions {
		padding-top:
			18px;
	}


	.p365-opinions__header {
		min-height:
			80px;

		padding:
			18px 20px;
	}


	.p365-opinions__header::before {
		top:
			20px;

		height:
			38px;
	}


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


	.p365-opinions__title {
		font-size:
			28px;

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

		line-height:
			1.28;
	}


	.p365-opinions__more {
		font-size:
			12px;
	}


	.p365-opinions__grid {
		grid-template-columns:
			1fr;
	}


	.p365-opinions__item {
		border-left:
			0;

		border-bottom:
			1px solid rgba(255,255,255,.10);
	}


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


	.p365-opinions__link {
		min-height:
			0;

		padding:
			24px 20px;
	}


	.p365-opinions__quote {
		height:
			38px;

		font-size:
			58px;
	}


	.p365-opinions__article-title {
		font-size:
			18px;

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

		line-height:
			1.55;
	}


	.p365-opinions__excerpt {
		font-size:
			13px;

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

		line-height:
			1.85;
	}


	.p365-opinions__author {
		margin-top:
			20px;
	}


	.p365-opinions__author-info strong {
		font-size:
			13px;
	}


	.p365-opinions__author-info span {
		font-size:
			10px;
	}
}


/* =========================================================
 * 16. Small Mobile
 * ======================================================= */

@media (max-width: 480px) {

	.p365-opinions__more {
		display:
			none;
	}


	.p365-opinions__title {
		font-size:
			26px;
	}


	.p365-opinions__article-title {
		font-size:
			17px;

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

		line-height:
			1.55;
	}


	.p365-opinions__excerpt {
		font-size:
			12px;

		line-height:
			1.8;
	}
}