/* Pixel Edu Home Kit — front-end
   All colours and sizes come from the Design tab via CSS variables. */

:root{
	--psedu-accent:#1a4e8a;
	--psedu-accent-dark:#0d3060;
	--psedu-text:#111;
	--psedu-border:#e0e4ea;
	--psedu-max:960px;
	--psedu-radius:12px;
	--psedu-about-img:420px;
	--psedu-avatar:88px;
}

.psedu-home-wrap{display:flex;flex-direction:column;gap:44px}

/* ------------------------------------------------------------ About */

.psedu-about-home-preview{
	max-width:var(--psedu-max);margin:0 auto;padding:26px;
	background:#fff;border:1px solid var(--psedu-border);border-radius:var(--psedu-radius);
	box-shadow:0 1px 2px rgba(16,32,64,.05);box-sizing:border-box
}
.psedu-about-home-preview.psedu-has-photo{display:grid;gap:28px;align-items:stretch}
.psedu-about-home-preview.psedu-img-left{grid-template-columns:minmax(0,min(var(--psedu-about-img),45%)) minmax(0,1fr)}
.psedu-about-home-preview.psedu-img-right{grid-template-columns:minmax(0,1fr) minmax(0,min(var(--psedu-about-img),45%))}
.psedu-about-home-preview.psedu-img-right .psedu-about-home-photo{order:2}
.psedu-about-home-preview.psedu-img-top{grid-template-columns:minmax(0,1fr);gap:24px}

.psedu-about-home-photo{
	width:100%;display:block;
	border-radius:calc(var(--psedu-radius) - 3px);object-fit:cover;object-position:center
}

/* Side-by-side: the photo matches the height of the text column.
   The text column sets the row height; the photo stretches into it.
   The wide aspect-ratio is NOT the rendered shape — height:100% wins for
   that — it only caps what the photo contributes when the row is measured,
   so a tall source image can never push the card past the text.
   !important is needed because theme rules (`img{height:auto}`) and
   lazy-loader placeholder variables injected inline (Smush, WP Rocket)
   would otherwise win. */
.psedu-about-home-preview.psedu-img-left > img.psedu-about-home-photo,
.psedu-about-home-preview.psedu-img-right > img.psedu-about-home-photo{
	--smush-placeholder-aspect-ratio:auto !important;
	--smush-placeholder-width:auto !important;
	align-self:stretch;
	width:100% !important;
	height:100% !important;
	aspect-ratio:5 / 2 !important;
	min-height:200px;
	max-height:none !important;
	object-fit:cover !important
}

/* Stacked: a wide band instead of a full-height panel. */
.psedu-about-home-preview.psedu-img-top > img.psedu-about-home-photo{
	--smush-placeholder-aspect-ratio:auto !important;
	--smush-placeholder-width:auto !important;
	width:100% !important;
	height:auto !important;
	aspect-ratio:21 / 9 !important;
	min-height:0;
	object-fit:cover !important
}

.psedu-about-home-body{min-width:0}
.psedu-about-home-title{
	margin:0 0 14px;padding-bottom:10px;display:inline-block;
	font-size:22px;font-weight:700;line-height:1.35;color:var(--psedu-accent);
	border-bottom:2px solid var(--psedu-accent)
}
.psedu-about-home-text{color:var(--psedu-text);font-size:16px;line-height:1.85;margin:0 0 20px}

/* ----------------------------------------------------------- Buttons */

.psedu-about-home-seemore,
.psedu-speech-home-seemore{
	display:inline-flex;align-items:center;gap:7px;
	padding:9px 20px;border-radius:999px;
	background:var(--psedu-accent);color:#fff;text-decoration:none;
	font-size:14px;font-weight:600;letter-spacing:.02em;
	transition:background .15s,gap .15s
}
.psedu-about-home-seemore:after,
.psedu-speech-home-seemore:after{content:'\2192';font-size:15px;line-height:1}
.psedu-about-home-seemore:hover,
.psedu-speech-home-seemore:hover{background:var(--psedu-accent-dark);color:#fff;gap:11px}
.psedu-about-home-seemore:focus-visible,
.psedu-speech-home-seemore:focus-visible{outline:2px solid var(--psedu-accent);outline-offset:3px}

/* ---------------------------------------------------------- Speeches */

.psedu-speeches-home-heading{
	max-width:var(--psedu-max);margin:0 auto 18px;
	font-size:22px;font-weight:700;color:var(--psedu-accent);text-align:center
}
.psedu-speeches-home-preview{
	display:grid;gap:26px;max-width:var(--psedu-max);margin:0 auto;
	grid-template-columns:repeat(2,minmax(0,1fr))
}
.psedu-speeches-home-preview.psedu-cols-1{grid-template-columns:minmax(0,1fr)}
.psedu-speeches-home-preview.psedu-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.psedu-speech-home-card{
	background:#fff;border:1px solid var(--psedu-border);border-radius:var(--psedu-radius);
	padding:24px 24px 26px;box-sizing:border-box;
	display:flex;flex-direction:column;
	box-shadow:0 1px 2px rgba(16,32,64,.05);transition:box-shadow .18s,border-color .18s
}
.psedu-speech-home-card:hover{box-shadow:0 6px 18px rgba(16,32,64,.08);border-color:#c9d6e6}

/* Text carries the card. */
.psedu-speech-home-title{
	margin:0 0 4px;font-size:19px;font-weight:700;line-height:1.4;color:var(--psedu-accent)
}
.psedu-speech-home-text{
	color:var(--psedu-text);font-size:15.5px;line-height:1.8;margin:14px 0 20px;flex:1 1 auto;
	position:relative;padding-top:14px
}
.psedu-speech-home-text:before{
	content:'';position:absolute;top:0;left:0;width:34px;height:2px;background:var(--psedu-accent);opacity:.55
}
.psedu-speech-home-seemore{align-self:flex-start}

/* Photo — small and quiet by default. */
.psedu-speech-home-photo{display:block;object-fit:cover;object-position:top center}

.psedu-photo-avatar .psedu-speech-home-photo{
	width:var(--psedu-avatar);height:var(--psedu-avatar);
	border-radius:50%;margin:0 0 14px;
	border:1px solid var(--psedu-border);filter:saturate(.92)
}
.psedu-photo-portrait .psedu-speech-home-photo{
	width:110px;aspect-ratio:3 / 4;
	border-radius:calc(var(--psedu-radius) - 4px);margin:0 0 16px
}
.psedu-photo-banner .psedu-speech-home-photo{
	width:100%;aspect-ratio:16 / 9;
	border-radius:calc(var(--psedu-radius) - 4px);margin:0 0 18px
}

/* ------------------------------------------------------- Responsive */

/* Tablet: stack the About block and drop 3-up speech cards to 2-up.
   Below 900px a side-by-side image squeezes the text column too hard. */
@media(max-width:900px){
	.psedu-about-home-preview.psedu-img-left,
	.psedu-about-home-preview.psedu-img-right{grid-template-columns:minmax(0,1fr);gap:22px}
	.psedu-about-home-preview.psedu-img-right > img.psedu-about-home-photo{order:0}
	.psedu-about-home-preview.psedu-img-left > img.psedu-about-home-photo,
	.psedu-about-home-preview.psedu-img-right > img.psedu-about-home-photo{
		height:auto !important;aspect-ratio:16 / 9 !important;min-height:0
	}
	.psedu-speeches-home-preview.psedu-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
	.psedu-speech-home-card{padding:22px}
}

@media(max-width:680px){
	.psedu-speeches-home-preview,
	.psedu-speeches-home-preview.psedu-cols-2,
	.psedu-speeches-home-preview.psedu-cols-3{grid-template-columns:minmax(0,1fr);gap:20px}
	.psedu-about-home-preview{padding:22px 18px}
	.psedu-about-home-preview.psedu-has-photo{gap:18px}
	.psedu-about-home-title{font-size:20px}
	.psedu-speech-home-card{padding:20px}
}

@media(prefers-reduced-motion:reduce){
	.psedu-speech-home-card,
	.psedu-about-home-seemore,
	.psedu-speech-home-seemore{transition:none}
}