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


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

.p365-brand-banner {
	position: relative;

	padding:
		clamp(24px, 3vw, 38px) 0 0;
}


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

.p365-brand-banner__shell {
	position: relative;

	display: grid;

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

	align-items:
		center;

	gap:
		clamp(24px, 3vw, 46px);

	min-height:
		132px;

	overflow:
		hidden;

	padding:
		24px clamp(24px, 3vw, 42px);

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

	background:
		linear-gradient(
			110deg,
			var(--p365-dark) 0%,
			#06434a 52%,
			var(--p365-teal) 100%
		);

	color:
		var(--p365-white);

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


/* =========================================================
 * 3. Decorative 365
 * ======================================================= */

.p365-brand-banner__decor {
	position: absolute;

	inset:
		0;

	overflow:
		hidden;

	pointer-events:
		none;
}


.p365-brand-banner__decor span {
	position: absolute;

	top:
		50%;

	left:
		40%;

	color:
		rgba(255, 255, 255, 0.035);

	font-size:
		260px;

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

	line-height:
		1;

	transform:
		translate(-50%, -50%)
		rotate(-6deg);

	user-select:
		none;
}


/* =========================================================
 * 4. Logo
 * ======================================================= */

.p365-brand-banner__logo {
	position: relative;

	z-index:
		2;

	display: flex;

	align-items:
		center;
}


.p365-brand-banner__logo
.custom-logo-link {
	display: flex;

	align-items:
		center;
}


.p365-brand-banner__logo
.custom-logo {
	width:
		auto;

	height:
		62px;

	max-width:
		235px;

	object-fit:
		contain;
}


/* =========================================================
 * 5. Fallback Logo
 * ======================================================= */

.p365-brand-banner__fallback-logo {
	direction:
		ltr;

	display: flex;

	align-items:
		center;

	gap:
		7px;

	color:
		var(--p365-white);

	font-size:
		30px;

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

	line-height:
		1;
}


.p365-brand-banner__fallback-logo strong {
	padding:
		4px 8px;

	border-radius:
		4px;

	background:
		var(--p365-orange);

	color:
		var(--p365-white);

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


/* =========================================================
 * 6. Content
 * ======================================================= */

.p365-brand-banner__content {
	position: relative;

	z-index:
		2;

	min-width:
		0;
}


/* =========================================================
 * 7. Title
 * ======================================================= */

.p365-brand-banner__title {
	margin:
		0 0 7px;

	color:
		var(--p365-white);

	font-size:
		34px;

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

	line-height:
		1.3;
}


/* =========================================================
 * 8. Description
 * ======================================================= */

.p365-brand-banner__description {
	max-width:
		580px;

	margin:
		0;

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

	font-size:
		15px;

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

	line-height:
		1.85;
}


/* =========================================================
 * 9. Actions
 * ======================================================= */

.p365-brand-banner__actions {
	position: relative;

	z-index:
		2;

	direction:
		ltr;

	display: flex;

	align-items:
		center;

	gap:
		12px;
}


/* =========================================================
 * 10. CTA
 * ======================================================= */

.p365-brand-banner__button {
	direction:
		rtl;

	display: inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		12px;

	min-height:
		48px;

	padding:
		0 22px;

	border-radius:
		8px;

	background:
		var(--p365-orange);

	color:
		var(--p365-white);

	font-size:
		14px;

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

	line-height:
		1;

	white-space:
		nowrap;

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


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

	color:
		var(--p365-white);

	transform:
		translateY(-2px);

	box-shadow:
		0 10px 28px rgba(243,154,34,.22);
}


/* =========================================================
 * 11. LIVE
 * ======================================================= */

.p365-brand-banner__live {
	display: inline-flex;

	align-items:
		center;

	gap:
		7px;

	height:
		38px;

	padding:
		0 13px;

	border:
		1px solid rgba(255,255,255,.26);

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

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

	font-size:
		11px;

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

	line-height:
		1;

	letter-spacing:
		.04em;
}


.p365-brand-banner__live-dot {
	position: relative;

	width:
		7px;

	height:
		7px;

	flex:
		0 0 7px;

	border-radius:
		50%;

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


.p365-brand-banner__live-dot::after {
	content:
		"";

	position:
		absolute;

	inset:
		-4px;

	border:
		1px solid rgba(243,154,34,.40);

	border-radius:
		50%;

	animation:
		p365-brand-live 1.8s ease-out infinite;
}


@keyframes p365-brand-live {

	0% {
		transform:
			scale(.65);

		opacity:
			1;
	}

	100% {
		transform:
			scale(1.6);

		opacity:
			0;
	}
}


/* =========================================================
 * 12. Tablet
 * ======================================================= */

@media (max-width: 950px) {

	.p365-brand-banner__shell {
		grid-template-columns:
			auto minmax(0,1fr);

		gap:
			20px;
	}


	.p365-brand-banner__actions {
		grid-column:
			1 / -1;

		justify-content:
			flex-end;
	}


	.p365-brand-banner__title {
		font-size:
			30px;
	}


	.p365-brand-banner__decor span {
		font-size:
			220px;
	}
}


/* =========================================================
 * 13. Mobile
 * ======================================================= */

@media (max-width: 650px) {

	.p365-brand-banner__shell {
		display:
			flex;

		flex-direction:
			column;

		align-items:
			flex-start;

		padding:
			24px 20px;
	}


	.p365-brand-banner__logo
	.custom-logo {
		height:
			48px;

		max-width:
			190px;
	}


	.p365-brand-banner__fallback-logo {
		font-size:
			26px;
	}


	.p365-brand-banner__title {
		font-size:
			28px;

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

		line-height:
			1.3;
	}


	.p365-brand-banner__description {
		font-size:
			14px;

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

		line-height:
			1.8;
	}


	.p365-brand-banner__actions {
		direction:
			rtl;

		width:
			100%;

		justify-content:
			space-between;
	}


	.p365-brand-banner__button {
		flex:
			1;

		font-size:
			13px;
	}


	.p365-brand-banner__live {
		font-size:
			10px;
	}


	.p365-brand-banner__decor span {
		left:
			50%;

		font-size:
			150px;
	}
}


/* =========================================================
 * 14. Small Mobile
 * ======================================================= */

@media (max-width: 480px) {

	.p365-brand-banner__title {
		font-size:
			26px;
	}


	.p365-brand-banner__description {
		font-size:
			13px;
	}


	.p365-brand-banner__button {
		font-size:
			13px;
	}
}


/* =========================================================
 * 15. Reduced Motion
 * ======================================================= */

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

	.p365-brand-banner__live-dot::after {
		animation:
			none;
	}
}