/* Club România Studio page (slug club-romania-studio). Scoped by body.rrd-studio-page. Uses tokens.css. */

/* Page title: navy brand type. The parent prints an empty .featured box above it
   (whitespace only, so :empty never matches; :not(:has(*)) does). */
.rrd-studio-page h1.the-page-title {
    margin: 0 0 var(--rrd-space-3);
    color: var(--rrd-navy);
    font-family: var(--rrd-font);
    font-size: var(--rrd-text-28);
    font-weight: 600;
    line-height: 1.2;
}
.rrd-studio-page .post-header .featured:not(:has(*)) { display: none; }

/* Empty content: the leading empty paragraph and the last row of empty columns.
   Rows that hold iframes (plugin inactive: PHP falls back to the iframe) stay. */
.rrd-studio-page .post-content > p:empty { display: none; }
.rrd-studio-page .wp-block-columns:not(:has(lite-youtube, iframe)) { display: none; }

/* Rows: 3 columns on desktop (WP default), 1 column at <=781px (WP core). */
.rrd-studio-page .wp-block-columns {
    gap: var(--rrd-space-3);
    margin-bottom: var(--rrd-space-4);
}
.rrd-studio-page .wp-block-columns:last-child { margin-bottom: 0; }
.rrd-studio-page .wp-block-column { min-width: 0; }

/* Embed figures: the facade sits inside .wp-block-embed__wrapper. WP core adds a
   16:9 padding ::before that an absolutely positioned iframe fills; with the facade
   it would be an empty block above each poster, so remove it only when a facade is
   there (an iframe fallback still needs it). The full-width first figure gets row spacing. */
.rrd-studio-page figure.wp-block-embed { margin: 0; }
.rrd-studio-page .post-content > figure.wp-block-embed { margin-bottom: var(--rrd-space-4); }
.rrd-studio-page .wp-block-embed__wrapper:has(> .rrd-studio-video-item)::before { content: none; }

/* Flat posters (plugin CSS gives a white card with shadow and hover lift). */
.rrd-studio-page .rrd-studio-video-item,
.rrd-studio-page .rrd-studio-video-item:hover {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
}
.rrd-studio-page lite-youtube {
    border-radius: var(--rrd-radius-img);
    overflow: hidden;
}

/* Play button: 56px white disc, navy triangle, accent on hover/focus. */
.rrd-studio-page lite-youtube > .lty-playbtn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6.5v11l9-5.5z" fill="%23174172"/></svg>');
    background-position: center;
    background-size: 28px 28px;
    background-repeat: no-repeat;
    filter: none;
}
.rrd-studio-page lite-youtube:hover > .lty-playbtn,
.rrd-studio-page lite-youtube > .lty-playbtn:focus { background-color: var(--rrd-accent); filter: none; }

/* Caption under each poster. */
.rrd-studio-page p.rrd-studio-video-title {
    height: auto;
    margin: var(--rrd-space-1) 0 0;
    padding: 0;
    background: transparent;
    color: var(--rrd-ink);
    font-family: var(--rrd-font);
    font-size: var(--rrd-text-16);
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}
.rrd-studio-page .post-content > figure.wp-block-embed p.rrd-studio-video-title { font-size: var(--rrd-text-19); }

@media (max-width: 767px) {
    .rrd-studio-page h1.the-page-title { font-size: var(--rrd-text-24); }
    .rrd-studio-page .wp-block-columns { gap: var(--rrd-space-3); margin-bottom: var(--rrd-space-3); }
    .rrd-studio-page .post-content > figure.wp-block-embed { margin-bottom: var(--rrd-space-3); }
    .rrd-studio-page p.rrd-studio-video-title,
    .rrd-studio-page .post-content > figure.wp-block-embed p.rrd-studio-video-title { font-size: var(--rrd-text-16); }
}