/*
 * About the Lounge native landing (/about/, post 1049).
 *
 * Presentation only. Every word, image, link and the YouTube embed are
 * rendered verbatim by the_content(). This stylesheet constrains the
 * content width, gives the opening heading proper weight, formats the
 * YouTube embed, and turns the four closing photographs (which
 * WordPress's wpautop groups into a single <p>) into a responsive
 * 2x2 / 4-across photo grid.
 */

.pccc-about {
	background: #ffffff;
	color: var(--pccc-color-ink, #0f172a);
}

.pccc-about__section {
	padding: 48px 20px 56px;
}

.pccc-about__inner {
	max-width: 760px;
	margin: 0 auto;
}

/* Opening heading. The stored content already contains this <h1> as
 * the first element, matching the Elementor `hide_title=yes` setting
 * - our template does not add a second one. */
.pccc-about__inner > h1 {
	font-size: clamp(1.75rem, 3.2vw, 2.4rem);
	line-height: 1.15;
	margin: 0 0 24px;
	color: var(--pccc-color-ink, #0f172a);
	font-weight: 700;
}

.pccc-about__inner > h1 + p {
	font-size: 1.1rem;
	line-height: 1.55;
	color: var(--pccc-color-ink, #0f172a);
	margin: 0 0 1.25em;
}

.pccc-about__inner p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--pccc-color-ink, #1a1a1a);
	margin: 0 0 1.1em;
	max-width: 68ch;
}

.pccc-about__inner a {
	color: var(--pccc-color-primary, #398aa0);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pccc-about__inner a:hover,
.pccc-about__inner a:focus-visible {
	color: var(--pccc-color-primary-hover, #2f7a90);
}

/* The "Or email us at ..." line comes through as an <h6>. Treat it as
 * a quiet eyebrow / contact line rather than a tiny heading. */
.pccc-about__inner h6 {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--pccc-color-ink-muted, #64748b);
	margin: 0 0 32px;
	padding-top: 4px;
}

/* YouTube embed produced by WP_Embed::autoembed(). The iframe sits
 * inside a wrapper (or directly inside a <p> depending on WP version).
 * Give it a responsive 16:9 frame. */
.pccc-about__inner iframe,
.pccc-about__inner .wp-block-embed__wrapper iframe,
.pccc-about__inner embed,
.pccc-about__inner object {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	margin: 8px auto 32px;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	background: #0f172a;
}
.pccc-about__inner .wp-block-embed {
	margin: 24px 0 32px;
	max-width: 100%;
}

/* Any image stretches to full container width and gets a soft radius. */
.pccc-about__inner img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* The four closing photographs are grouped by wpautop into a single
 * <p> that contains only images. Detect that paragraph via :has() and
 * lay the images out as a responsive photo grid rather than four tall
 * stacked blocks. */
.pccc-about__inner p:has(> img) {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	max-width: none;
	margin: 16px 0 0;
}
@media (min-width: 640px) {
	.pccc-about__inner p:has(> img) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.pccc-about__inner p:has(> img) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.pccc-about__inner p:has(> img) > img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	margin: 0;
}
/* Hide the <br> tags that wpautop injects between media elements -
 * they would otherwise force each image onto a new grid row. */
.pccc-about__inner p:has(> img) > br {
	display: none;
}
/* YouTube embed (BuddyBoss wraps it in .fluid-width-video-wrapper, or
 * core wraps in .wp-block-embed): span the full row above the photos
 * at native 16:9 aspect, not squeezed into a photo cell. */
.pccc-about__inner p:has(> img) > .fluid-width-video-wrapper,
.pccc-about__inner p:has(> img) > iframe,
.pccc-about__inner p:has(> img) > .wp-block-embed {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 100%;
	margin: 0 0 12px;
	aspect-ratio: 16 / 9;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: #0f172a;
}
.pccc-about__inner p:has(> img) > .fluid-width-video-wrapper {
	/* FitVids-style wrapper. Its own iframe uses position:absolute
	 * inset:0 so we only need to give the wrapper the correct frame. */
	padding: 0 !important;
	height: auto !important;
}
.pccc-about__inner p:has(> img) > .fluid-width-video-wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Hide any legacy entry-title the parent theme would emit (defensive;
 * the native template does not output one, but if the parent template
 * fallback ever ran it would duplicate the <h1> in content). */
.pccc-about .entry-title { display: none; }

/* Very narrow phones: tighten the frame a touch. */
@media (max-width: 420px) {
	.pccc-about__section { padding: 32px 14px 40px; }
	.pccc-about__inner > h1 { margin-bottom: 16px; }
}