/* Media & Press page — bespoke, one-off */

/* ---------- Hero ---------- */
.pg-media-hero {
	background: radial-gradient(130% 120% at 84% -10%, #16294C 0%, #0E1B3A 42%, #0A1430 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid #0A1430;
}

.pg-media-hero-glow {
	position: absolute;
	top: -160px;
	right: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(203,14,42,.26), transparent 62%);
	filter: blur(20px);
	pointer-events: none;
}

.pg-media-hero-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 78%);
	pointer-events: none;
}

.pg-media-hero-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 64px 60px;
	position: relative;
}

.pg-media-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	font: 500 12.5px/1 'Hanken Grotesk', sans-serif;
	color: #8FA0BE;
}

.pg-media-breadcrumb a { color: #8FA0BE; text-decoration: none; }
.pg-media-breadcrumb .sep { opacity: .5; }
.pg-media-breadcrumb .current { color: #fff; }

/* Matches .pg-home-hero-kicker's styling exactly (home-page.css), but white instead of that
   kicker's #FF6477 accent — a plain label, no pill/background/border/padding. */
.pg-media-eyebrow-pill {
	font: 700 12.5px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .16em;
	color: #fff;
	margin-bottom: 24px;
}

@keyframes pgMediaLivePulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .6; transform: scale(.85); }
}

.pg-media-hero-grid-2col {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 50px;
	align-items: end;
}

.pg-media-h1 {
	font: 700 58px/1.04 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.028em;
	margin: 0 0 22px !important;
	color: #fff !important;
}

.pg-media-hero-sub {
	font: 400 18.5px/1.6 'Hanken Grotesk', sans-serif !important;
	color: #B8C0D2 !important;
	max-width: 600px;
	margin: 0 !important;
}

.pg-media-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.pg-media-stat-box {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 3px;
	padding: 22px;
}

.pg-media-stat-box .v {
	font: 800 40px/0.9 'Bricolage Grotesque', sans-serif;
	color: #fff;
}

.pg-media-stat-box .v.accent { color: #46C2A8; }

.pg-media-stat-box .k {
	font: 500 12px/1.4 'Hanken Grotesk', sans-serif;
	color: #9AA6BD;
	margin-top: 8px;
}

/* ---------- As Featured In strip ---------- */
.pg-media-featured-strip {
	background: #fff;
	border-bottom: 1px solid #EEF0F4;
}

.pg-media-featured-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 44px 64px 46px;
	text-align: center;
}

.pg-media-featured-label {
	font: 500 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .16em;
	color: #9097A4;
	margin-bottom: 24px;
}

.pg-media-featured-logos {
	display: flex;
	justify-content: center;
	gap: 14px 30px;
	flex-wrap: wrap;
}

.pg-media-featured-logos span {
	font: 700 17px/1.1 'Bricolage Grotesque', sans-serif;
	color: #8A93A6;
}

.pg-media-featured-logos span.sm {
	font-size: 16px;
	color: #9AA3B2;
}

/* ---------- Shared numbered badge ---------- */
.pg-media-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.pg-media-badge .num {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	background: #CB0E2A;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	font: 800 13px/1 'Hanken Grotesk', sans-serif;
}

.pg-media-badge .label {
	font: 700 11.5px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #0C1A3A;
}

/* ---------- Featured Spotlight ---------- */
.pg-media-spotlight-section {
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 64px 40px;
}

.pg-media-spotlight-card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	background: #0C1A3A;
	border: 1px solid #0C1A3A;
	border-radius: 3px;
	overflow: hidden;
	text-decoration: none;
}

.pg-media-spotlight-visual {
	position: relative;
	overflow: hidden;
	min-height: 340px;
	background: linear-gradient(135deg,#1A2E5C 0%,#0C1A3A 60%,#25101A 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 40px;
}

.pg-media-spotlight-visual .outlet {
	font: 700 42px/1.1 'Bricolage Grotesque', sans-serif;
	color: #fff;
	letter-spacing: -0.02em;
	text-align: center;
}

.pg-media-spotlight-visual .tag {
	font: 600 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .18em;
	color: #9AA6BD;
}

.pg-media-spotlight-body {
	padding: 46px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pg-media-spotlight-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.pg-media-spotlight-meta .cat {
	font: 600 11.5px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .08em;
	color: #fff;
	background: #CB0E2A;
	padding: 6px 11px;
	border-radius: 6px;
}

.pg-media-spotlight-meta .src {
	font: 600 12.5px/1 'Hanken Grotesk', sans-serif;
	color: #9AA6BD;
}

.pg-media-spotlight-body h2 {
	font: 700 30px/1.16 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.018em;
	color: #fff !important;
	margin: 0 0 16px !important;
}

.pg-media-spotlight-body p {
	font: 400 15px/1.6 'Hanken Grotesk', sans-serif !important;
	color: #AEB6C8 !important;
	margin: 0 0 26px !important;
}

.pg-media-readmore {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 700 14px/1 'Hanken Grotesk', sans-serif;
	color: #FF6477;
}

/* ---------- Full Archive ---------- */
.pg-media-archive-section {
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 64px 96px;
}

.pg-media-topic-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.pg-media-topic-label {
	font: 600 11.5px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .12em;
	color: #9097A4;
	width: 64px;
	flex-shrink: 0;
}

.pg-media-topic-pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.pg-media-topic-pills .pill {
	cursor: pointer;
	font: 600 12.5px/1 'Hanken Grotesk', sans-serif;
	color: #6A7080;
	background: transparent;
	border: none;
	padding: 9px 15px;
	border-radius: 4px;
	text-decoration: none;
	transition: all .18s ease;
	white-space: nowrap;
}

.pg-media-topic-pills .pill.is-active {
	background: #CB0E2A;
	color: #fff;
}

.pg-media-grid-wrap {
	transition: opacity .15s ease;
}

.pg-media-grid-wrap.is-loading {
	opacity: .45;
}

.pg-media-result-count {
	font: 500 13px/1 'Hanken Grotesk', sans-serif;
	color: #9097A4;
	margin: 22px 0 26px;
}

.pg-media-result-count strong {
	color: #14161E;
	font-weight: 700;
}

.pg-media-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.pg-media-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: #fff;
	border: 1px solid #ECEEF2;
	border-radius: 3px;
	overflow: hidden;
}

.pg-media-card-thumb {
	position: relative;
	overflow: hidden;
	height: 190px;
	background: linear-gradient(135deg, #646B7B -60%, #0C1A3A 80%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 34px;
	text-align: center;
}

.pg-media-card-thumb .mast {
	font: 700 23px/1.18 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.015em;
	color: rgba(255,255,255,.94);
	text-wrap: pretty;
}

.pg-media-card-thumb .tag {
	position: absolute;
	top: 12px;
	left: 12px;
	font: 600 11px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .06em;
	color: #fff;
	background: #646B7B;
	padding: 6px 10px;
	border-radius: 6px;
}

/* Per-category thumb gradient + tag color (12 topics, colors from
   PITON-Global Media.dc.html's own CATS map — see piton2026_media_cats()
   in functions.php, the single source of truth these mirror). */
.pg-media-card-thumb.cat-callcenter { background: linear-gradient(135deg, #CB0E2A -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-callcenter .tag { background: #CB0E2A; color: #fff; }
.pg-media-card-thumb.cat-cx { background: linear-gradient(135deg, #0E9E86 -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-cx .tag { background: #0E9E86; color: #fff; }
.pg-media-card-thumb.cat-fintech { background: linear-gradient(135deg, #46C2A8 -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-fintech .tag { background: #46C2A8; color: #0A1430; }
.pg-media-card-thumb.cat-healthcare { background: linear-gradient(135deg, #3E7BFA -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-healthcare .tag { background: #3E7BFA; color: #fff; }
.pg-media-card-thumb.cat-insurance { background: linear-gradient(135deg, #15294F -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-insurance .tag { background: #15294F; color: #fff; }
.pg-media-card-thumb.cat-retail { background: linear-gradient(135deg, #E8973A -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-retail .tag { background: #E8973A; color: #3A2400; }
.pg-media-card-thumb.cat-travel { background: linear-gradient(135deg, #C2410C -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-travel .tag { background: #C2410C; color: #fff; }
.pg-media-card-thumb.cat-legal { background: linear-gradient(135deg, #7C5CFC -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-legal .tag { background: #7C5CFC; color: #fff; }
.pg-media-card-thumb.cat-realestate { background: linear-gradient(135deg, #4D7C0F -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-realestate .tag { background: #4D7C0F; color: #fff; }
.pg-media-card-thumb.cat-ai { background: linear-gradient(135deg, #14161E -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-ai .tag { background: #14161E; color: #fff; }
.pg-media-card-thumb.cat-backoffice { background: linear-gradient(135deg, #646B7B -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-backoffice .tag { background: #646B7B; color: #fff; }
.pg-media-card-thumb.cat-moderation { background: linear-gradient(135deg, #BE185D -60%, #0C1A3A 80%); }
.pg-media-card-thumb.cat-moderation .tag { background: #BE185D; color: #fff; }

.pg-media-empty {
	padding: 40px 0 10px;
	text-align: center;
	font: 500 17px/1.5 'Hanken Grotesk', sans-serif;
	color: #5A5F6E;
}

.pg-media-card-body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.pg-media-card-body .meta {
	font: 600 12px/1 'Hanken Grotesk', sans-serif;
	color: #9097A4;
	margin-bottom: 12px;
}

.pg-media-card-body h3 {
	font: 700 17.5px/1.32 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.012em;
	color: #14161E !important;
	margin: 0 0 18px !important;
}

.pg-media-card-body .readmore {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 700 13px/1 'Hanken Grotesk', sans-serif;
	color: #15294F;
}

.pg-media-archive-actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 48px;
	flex-wrap: wrap;
}

.pg-media-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: #15294F;
	border: 1px solid #D9DDE5;
	padding: 15px 28px;
	border-radius: 4px;
	font: 700 14px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none;
}

.pg-media-btn-solid {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #15294F;
	color: #fff;
	padding: 15px 28px;
	border-radius: 4px;
	font: 700 14px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none;
}

.pg-media-btn-solid span { color: #FF6477; }
.pg-media-btn-solid:hover { background: #CB0E2A; }

/* ---------- Press Contact CTA ---------- */
.pg-media-press-cta {
	background: #CB0E2A;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.pg-media-press-cta-glow {
	position: absolute;
	bottom: -180px;
	left: -100px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.16), transparent 64%);
	filter: blur(16px);
	pointer-events: none;
}

.pg-media-press-cta-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 88px 64px;
	position: relative;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 50px;
	align-items: center;
}

.pg-media-press-cta-eyebrow {
	font: 700 11.5px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #FFD7DD;
	margin-bottom: 20px;
}

.pg-media-press-cta-inner h2 {
	font: 700 42px/1.08 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.024em;
	margin: 0 0 18px !important;
	color: #fff !important;
}

.pg-media-press-cta-inner h2 .accent { color: #FFD7DD; }

.pg-media-press-cta-inner p {
	font: 400 18px/1.6 'Hanken Grotesk', sans-serif !important;
	color: #FCE3E7 !important;
	max-width: 540px;
	margin: 0 !important;
}

.pg-media-contact-links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pg-media-contact-links a {
	display: flex;
	align-items: center;
	gap: 13px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 3px;
	padding: 18px 22px;
	text-decoration: none;
	transition: border-color .16s ease;
}

.pg-media-contact-links a:hover { border-color: #fff; }

.pg-media-contact-links .icon.blue { color: #7FB2FF; }
.pg-media-contact-links .icon.teal { color: #46C2A8; }

.pg-media-contact-links .t { display: block; font: 700 15px/1.2 'Hanken Grotesk', sans-serif; color: #fff; }
.pg-media-contact-links .d { display: block; font: 400 13px/1.3 'Hanken Grotesk', sans-serif; color: #F7C9CF; margin-top: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.pg-media-hero-grid-2col,
	.pg-media-spotlight-card,
	.pg-media-grid,
	.pg-media-press-cta-inner {
		grid-template-columns: 1fr;
	}
	.pg-media-stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Mobile-only section padding ----------
   560px is intentionally narrower than the 900px tablet-collapse tier above, so this never fires on
   tablets or larger. .pg-media-hero-inner gets the full padding swap to 40px/30px per instruction.
   The other 64px-horizontal-inset wrappers below keep their own tuned vertical rhythm and only get the
   horizontal fix, so every section's left/right edge still lines up with the hero. !important guards
   against inline per-section padding. */
@media (max-width: 560px) {
	.pg-media-hero-inner { padding: 40px 30px !important; }
	.pg-media-featured-inner,
	.pg-media-spotlight-section,
	.pg-media-archive-section,
	.pg-media-press-cta-inner {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}