/* ═════════════════════════════════════════════════════════════════
   PAGE — SOCIAL MEDIA
   About → Social Media page (see /pages/page-social-media.php).

   Page deltas only — cream background, hero blob decorations,
   and the vertical frosted-glass post-card feed with media panels.

   Class prefix: `.sm-*`
   ═════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   PAGE BACKGROUND
   ───────────────────────────────────────────────────────────────── */
.sm-page {
	background: var(--cream);
}


/* ─────────────────────────────────────────────────────────────────
   HERO BAND — eyebrow + display headline + lede + social icons.
   ───────────────────────────────────────────────────────────────── */
.sm-hero-band {
	padding-top: clamp(100px, 11vw, 144px);
	padding-bottom: clamp(40px, 5vw, 80px);
	position: relative;
	overflow: hidden;
}

/* Decorative organic blobs */
.sm-hero-blobs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}
.sm-blob {
	position: absolute;
	border-radius: 50%;
}
.sm-blob-1 {
	width: 70vw;
	height: 70vw;
	max-width: 920px;
	max-height: 920px;
	background: rgba(245, 244, 240, 0.9);
	filter: blur(80px);
	right: -12%;
	top: -25%;
	opacity: 0.7;
}
.sm-blob-2 {
	width: 42vw;
	height: 42vw;
	max-width: 560px;
	max-height: 560px;
	background: rgba(11, 102, 35, 0.07);
	filter: blur(90px);
	right: 4%;
	top: 8%;
	opacity: 1;
}
.sm-blob-3 {
	width: 54vw;
	height: 32vw;
	max-width: 720px;
	max-height: 430px;
	background: rgba(245, 244, 240, 0.8);
	filter: blur(70px);
	right: -6%;
	bottom: -15%;
	opacity: 0.6;
}

.sm-hero-wrap {
	position: relative;
	z-index: 1;
}

/* Headline */
.sm-headline {
	margin: clamp(8px, 1vw, 16px) 0 clamp(28px, 3.5vw, 50px);
}
.sm-headline .hl-line {
	display: block;
	text-transform: uppercase;
	line-height: 0.96;
}
.sm-headline .it-tail.sm-it-tail {
	display: block;
	text-align: left;
	white-space: normal;
	margin-top: 0;
	line-height: 1.02;
	letter-spacing: 0;
}

/* Sub-hero: lede + social icons stacked with gap */
.sm-hero-sub {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 50px);
}

.sm-lede {
	max-width: 60ch;
	margin: 0;
}

/* Social icon row — reuses .social-icon from footer.css */
.sm-hero-icons {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.5vw, 32px);
}
.sm-hero-icons .social-icon img {
	width: clamp(22px, 2vw, 28px);
	height: auto;
}


/* ─────────────────────────────────────────────────────────────────
   POSTS FEED SECTION
   ───────────────────────────────────────────────────────────────── */
.sm-feed-section {
	padding-top: clamp(16px, 2vw, 32px);
	padding-bottom: clamp(60px, 8vw, 120px);
}

.sm-feed {
	display: flex;
	flex-direction: column;
	gap: 32px;
}


/* ─────────────────────────────────────────────────────────────────
   POST CARD — frosted-glass tile: media panel left, text right.
   ───────────────────────────────────────────────────────────────── */
.sm-card {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 14px;
	padding: 30px 30px 40px;
	display: flex;
	gap: 32px;
	align-items: flex-start;
}


/* ─────────────────────────────────────────────────────────────────
   MEDIA PANEL — left column, fixed 405 × 724 px grey rectangle.
   When a YouTube Short is embedded, the iframe fills it fully.
   ───────────────────────────────────────────────────────────────── */
.sm-card-media {
	background: #dcdcdc;
	width: 405px;
	height: 724px;
	border-radius: 10px;
	flex-shrink: 0;
	overflow: hidden;
}

/* iframe fills the panel exactly */
.sm-card-media--video iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}


/* ─────────────────────────────────────────────────────────────────
   RIGHT CONTENT COLUMN — date / title / body / source
   ───────────────────────────────────────────────────────────────── */
.sm-card-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sm-card-date {
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.5vw, 22px);
	line-height: 1.54;
	color: var(--ink-soft, rgba(26, 26, 26, 0.75));
	margin: 0;
}

.sm-card-title {
	font-family: var(--f-sans);
	font-weight: 500;
	font-size: clamp(24px, 2.5vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin: 0;
}

/* Body: paragraphs with generous leading */
.sm-card-body {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.sm-card-body p {
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: clamp(18px, 1.8vw, 26px);
	line-height: 1.54;
	color: var(--ink-soft, rgba(26, 26, 26, 0.75));
	margin: 0 0 clamp(12px, 1.5vw, 20px);
}
.sm-card-body p:last-child {
	margin-bottom: 0;
}
.sm-card-body a {
	color: inherit;
	text-underline-offset: 3px;
}

/* Source block */
.sm-card-source {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sm-card-source-label {
	font-family: var(--f-sans);
	font-weight: 600;
	font-size: var(--fs-eyebrow, 14px);
	line-height: 1.57;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--green);
	margin: 0;
}
.sm-card-source-url {
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: clamp(14px, 1.4vw, 20px);
	line-height: 1.54;
	color: var(--ink-soft, rgba(26, 26, 26, 0.75));
	text-decoration: underline;
	text-underline-offset: 3px;
	word-break: break-all;
}
.sm-card-source-url:hover {
	color: var(--ink);
}


/* ─────────────────────────────────────────────────────────────────
   VIEW MORE — centred button beneath the feed.
   ───────────────────────────────────────────────────────────────── */
.sm-viewmore {
	display: flex;
	justify-content: center;
	margin-top: clamp(40px, 5vw, 78px);
}


/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.sm-card-media {
		width: 340px;
		height: 604px;
	}
}

@media (max-width: 860px) {
	.sm-card {
		flex-direction: column;
	}
	.sm-card-media {
		width: 100%;
		height: auto;
		aspect-ratio: 9 / 16;
		max-height: 520px;
	}
}

@media (max-width: 600px) {
	.sm-card-media {
		max-height: 420px;
	}
}