/* Podcast Grid — "What We Remember Together" card row.
   Scoped under .pgrid so it won't collide with the theme. */
.pgrid{
	--pg-navy:#2e3a56;
	--pg-red:#c44536;
	--pg-red-dark:#a5382b;
	--pg-cream:#f2e9dc;
	--pg-gray:#6b6b6b;
	--pg-line:rgba(46,58,86,.16);
	width:100%;max-width:none;margin:0;
	font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	color:var(--pg-navy);
}
.pgrid *{box-sizing:border-box}

/* header row */
.pgrid-head{
	display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
	margin-bottom:26px;
}
.pgrid-eyebrow{
	color:var(--pg-red);font-size:12px;font-weight:700;
	letter-spacing:1.6px;text-transform:uppercase;margin-bottom:8px;
}
.pgrid-title{
	font-family:"Oswald",Impact,sans-serif;
	color:var(--pg-navy);font-weight:700;
	font-size:34px;line-height:1.05;letter-spacing:.5px;
	text-transform:uppercase;margin:0;
}
.pgrid-explore{
	flex:0 0 auto;
	border:2px solid var(--pg-red);color:var(--pg-red);
	background:transparent;text-decoration:none;
	font-weight:700;font-size:14px;padding:10px 20px;border-radius:8px;
	white-space:nowrap;transition:background .15s,color .15s;
}
.pgrid-explore:hover{background:var(--pg-red);color:#fff}

/* card row */
.pgrid-cards{
	display:grid;grid-template-columns:repeat(5,1fr);
	align-items:stretch;
}
.pgrid-card{
	display:flex;flex-direction:column;text-align:center;
	padding:16px;border-radius:14px;
	transition:background .22s ease,border-color .22s ease;
}
.pgrid-card-title,.pgrid-card-desc,.pgrid-media,.pgrid-ph,.pgrid-play{
	transition:background .22s ease,color .22s ease;
}
@media (min-width:901px){
	.pgrid-card + .pgrid-card:not(.pgrid-featured){border-left:1px solid var(--pg-line)}
	.pgrid-featured + .pgrid-card{border-left:none}
}

/* image */
.pgrid-media{
	width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
	background:#e7ded0;margin-bottom:14px;
	display:flex;align-items:center;justify-content:center;
}
.pgrid-media img{width:100%;height:100%;object-fit:cover;display:block}
.pgrid-ph{font-size:30px;color:#b9ab97}

/* text */
.pgrid-card-title{
	font-family:"Oswald",Impact,sans-serif;
	color:var(--pg-navy);font-weight:600;font-size:16px;
	letter-spacing:.5px;text-transform:uppercase;margin:0 0 8px;line-height:1.2;
}
.pgrid-card-desc{
	color:var(--pg-gray);font-size:14px;line-height:1.5;
	margin:0 0 16px;flex:1;
}

/* play button */
.pgrid-play{
	align-self:center;margin-top:auto;
	background:var(--pg-red);color:#fff;border:none;
	border-radius:7px;padding:10px 24px;
	font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;
	transition:background .15s,transform .08s;
}
.pgrid-play:hover{background:var(--pg-red-dark)}
.pgrid-play:active{transform:scale(.96)}
.pgrid-play:disabled{opacity:.5;cursor:default}

/* featured (red) card */
.pgrid-featured{background:var(--pg-red)}
.pgrid-featured .pgrid-card-title{color:#fff}
.pgrid-featured .pgrid-card-desc{color:rgba(255,255,255,.92)}
.pgrid-featured .pgrid-play{background:var(--pg-red-dark);color:#fff}
.pgrid-featured .pgrid-play:hover{background:#8f3025}
.pgrid-featured .pgrid-media{background:rgba(255,255,255,.18)}
.pgrid-featured .pgrid-ph{color:rgba(255,255,255,.7)}

/* hover: a plain card fills with the theme colour, like the featured card */
.pgrid-card:not(.pgrid-featured):hover{background:var(--pg-red);border-left-color:transparent}
.pgrid-card:not(.pgrid-featured):hover + .pgrid-card{border-left-color:transparent}
.pgrid-card:not(.pgrid-featured):hover .pgrid-card-title{color:#fff}
.pgrid-card:not(.pgrid-featured):hover .pgrid-card-desc{color:rgba(255,255,255,.92)}
.pgrid-card:not(.pgrid-featured):hover .pgrid-media{background:rgba(255,255,255,.18)}
.pgrid-card:not(.pgrid-featured):hover .pgrid-ph{color:rgba(255,255,255,.7)}
.pgrid-card:not(.pgrid-featured):hover .pgrid-play{background:var(--pg-red-dark);color:#fff}

/* button hover — flips to cream so it stands out on the red card */
.pgrid-card:hover .pgrid-play:hover,
.pgrid-featured .pgrid-play:hover{background:var(--pg-cream);color:var(--pg-red);}

/* ---- entrance animation (cards fade + slide up, staggered) ---- */
.pgrid-card{opacity:1;transform:none}
.pgrid-animate .pgrid-card{
	opacity:0;transform:translateY(24px);
	transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1),background .22s ease;
}
.pgrid-animate .pgrid-card.is-in{opacity:1;transform:translateY(0)}
.pgrid-animate .pgrid-card:nth-child(1){transition-delay:0s}
.pgrid-animate .pgrid-card:nth-child(2){transition-delay:.09s}
.pgrid-animate .pgrid-card:nth-child(3){transition-delay:.18s}
.pgrid-animate .pgrid-card:nth-child(4){transition-delay:.27s}
.pgrid-animate .pgrid-card:nth-child(5){transition-delay:.36s}
.pgrid-animate .pgrid-card:nth-child(6){transition-delay:.45s}

/* card lift on hover */
.pgrid-card{will-change:transform}
.pgrid-card:hover{box-shadow:0 14px 30px rgba(46,58,86,.16)}
.pgrid-animate .pgrid-card.is-in:hover{transform:translateY(-6px)}

@media (prefers-reduced-motion:reduce){
	.pgrid-animate .pgrid-card{opacity:1;transform:none;transition:background .22s ease}
	.pgrid-animate .pgrid-card.is-in:hover{transform:none}
}

.pgrid-empty{opacity:.7;font-style:italic}

/* video lightbox */
.pgrid-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.pgrid-modal[hidden]{display:none}
.pgrid-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78)}
.pgrid-modal-box{position:relative;width:min(900px,100%);background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.pgrid-modal-body{line-height:0}
.pgrid .pgrid-modal-close{
	position:absolute;top:8px;right:10px;z-index:2;
	width:38px;height:38px;border-radius:50%;
	border:none;cursor:pointer;line-height:1;
	background:rgba(0,0,0,.55);color:#fff;font-size:24px;
}
.pgrid .pgrid-modal-close:hover{background:rgba(0,0,0,.82)}
.pgrid-embed{position:relative;width:100%;padding-bottom:56.25%;height:0}
.pgrid-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pgrid-video{display:block;width:100%;max-height:80vh;background:#000}
body.pgrid-modal-open{overflow:hidden}

/* responsive */
@media (max-width:900px){
	.pgrid-cards{grid-template-columns:repeat(2,1fr);gap:10px}
	.pgrid-title{font-size:28px}
}
@media (max-width:560px){
	.pgrid-cards{grid-template-columns:1fr}
	.pgrid-head{flex-direction:column;align-items:flex-start;gap:14px}
}