/**
* Single Podcast Episode — Template Styles
*
* Targets .single-gcc_podcast_episode, the body class WordPress adds
* automatically for this post type, so nothing leaks into other templates.
*
* Enqueue from functions.php:
*
* add_action( 'wp_enqueue_scripts', function () {
* if ( is_singular( 'gcc_podcast_episode' ) ) {
* wp_enqueue_style(
* 'single-gcc-podcast-episode',
* get_template_directory_uri() . '/css/single-gcc_podcast_episode.css',
* array(),
* '1.0.0'
* );
* }
* } );
*
* @package RoelCoaching
*/
/* =========================================================================
1. EPISODE HEADER
=========================================================================
Two-column grid: album cover (square) on the left, meta on the right.
The header uses .wrapper (1200px max) so it spans the full content width,
while the text content below is constrained to 680px.
Visual hierarchy inside the meta column:
- Show name → small, uppercase, muted (e.g. "The Tailbone Podcast: Expert Talks")
- Episode no. → medium weight, subdued (e.g. "Episode 9")
- Title → large, bold (e.g. "Marjolein – Patient")
- Excerpt → regular, slightly muted (the episode tagline)
========================================================================= */
.single-gcc_podcast_episode .gcc-episode-header {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
margin-bottom: 3rem;
}
.single-gcc_podcast_episode .gcc-episode-header__inner {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto;
gap: 2.5rem;
align-items: center;
}
/* Album cover wrapper — explicit dimensions enforce the grid cell size and
prevent the image's natural dimensions from overflowing. */
.single-gcc_podcast_episode .gcc-episode-header__cover {
width: 200px;
height: 200px;
flex-shrink: 0;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.12 );
}
/* Image fills its wrapper exactly. */
.single-gcc_podcast_episode .gcc-episode-header__cover-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0; /* Radius is on the wrapper, not the img. */
}
/* Meta column. */
.single-gcc_podcast_episode .gcc-episode-header__meta {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
min-height: 200px; /* Align content vertically with the cover image. */
}
/* Show name — smallest, uppercase label above the title. */
.single-gcc_podcast_episode .gcc-episode-header__show-name {
margin: 0;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.5;
line-height: 1.4;
}
/* Episode title — the main h1. */
.single-gcc_podcast_episode .gcc-episode-header__title {
margin: 0.1rem 0 0;
font-size: clamp( 1.5rem, 2.5vw, 2.125rem );
font-weight: 700;
line-height: 1.2;
}
/* Excerpt / tagline — rendered below the title if set. */
.single-gcc_podcast_episode .gcc-episode-header__excerpt {
margin: 0.5rem 0 0;
font-size: 1rem;
line-height: 1.6;
opacity: 0.7;
font-style: italic;
}
/* Narrow viewports: stack cover above meta. */
@media ( max-width: 640px ) {
.single-gcc_podcast_episode .gcc-episode-header__inner {
grid-template-columns: 1fr;
}
.single-gcc_podcast_episode .gcc-episode-header__cover {
width: 140px;
height: 140px;
}
.single-gcc_podcast_episode .gcc-episode-header__meta {
min-height: 0;
}
}
/* =========================================================================
2. CONTENT COLUMN — Layout
=========================================================================
WordPress's global-styles-inline-css already outputs the .is-layout-constrained
rules using --wp--style--global--content-size (680px) and
--wp--style--global--wide-size (1200px) from theme.json, including the
!important margins on child blocks. We do not replicate those rules here —
doing so causes conflicts with alignwide breakouts.
We only add horizontal padding so content does not touch viewport edges on
narrow screens.
========================================================================= */
.single-gcc_podcast_episode .entry-content.is-layout-constrained {
padding-right: 1rem;
padding-left: 1rem;
}
/* =========================================================================
3. MEDIA & TEXT BLOCK — Guest bio layout
=========================================================================
The client should use the Media & Text block for the guest photo + bio
section. This gives it a clean two-column appearance that matches the
style of the episode header above.
========================================================================= */
.single-gcc_podcast_episode .entry-content .wp-block-media-text {
gap: 2rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
/* Round the guest photo to match the header cover image style. */
.single-gcc_podcast_episode .entry-content .wp-block-media-text .wp-block-media-text__media img {
border-radius: 8px;
object-fit: cover;
}
/* =========================================================================
4. CONTENT SPACING — Headings
=========================================================================
The client adds
before each for spacing. We suppress it and
use margin-top on the heading instead.
========================================================================= */
.single-gcc_podcast_episode .entry-content h2.wp-block-heading > br:first-child,
.single-gcc_podcast_episode .entry-content h2.wp-block-heading > br:only-child {
display: none;
}
.single-gcc_podcast_episode .entry-content h2.wp-block-heading {
margin-top: 2.5rem;
margin-bottom: 0.75rem;
}
.single-gcc_podcast_episode .entry-content h3.wp-block-heading {
margin-top: 1.75rem;
margin-bottom: 0.5rem;
}
/* =========================================================================
5. LEGACY FLOATED IMAGES — Backwards compatibility
=========================================================================
Kept for episodes that still use alignright / alignleft images directly.
New episodes should use the Media & Text block instead (see section 3).
========================================================================= */
.single-gcc_podcast_episode .entry-content .wp-block-image.alignright {
margin-left: 2rem;
margin-bottom: 1.5rem;
max-width: 300px;
}
.single-gcc_podcast_episode .entry-content .wp-block-image.alignleft {
margin-right: 2rem;
margin-bottom: 1.5rem;
max-width: 300px;
}
@media ( max-width: 640px ) {
.single-gcc_podcast_episode .entry-content .wp-block-image.alignright,
.single-gcc_podcast_episode .entry-content .wp-block-image.alignleft {
float: none;
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
}
/* =========================================================================
6. VIDEO BLOCKS
========================================================================= */
.single-gcc_podcast_episode .entry-content .wp-block-video video {
display: block;
max-width: 100%;
height: auto;
border-radius: 6px;
}
/* =========================================================================
7. EMPTY BLOCKS — Suppress stray empty elements from the editor
========================================================================= */
.single-gcc_podcast_episode .entry-content .wp-block-list li:empty {
display: none;
}
.single-gcc_podcast_episode .entry-content p:empty {
display: none;
}
/* =========================================================================
8. EPISODE FOOTER — Platform links
========================================================================= */
.single-gcc_podcast_episode .gcc-episode-footer {
border-top: 1px solid rgba( 0, 0, 0, 0.08 );
margin-top: 3rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
.single-gcc_podcast_episode .gcc-episode-platforms {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
justify-content: center;
}