/* =============================================================
 * randyblue.gallery-cb.css
 * =============================================================
 * New stylesheet for the RandyBlue public/free trailer page
 * (gallery.tpl, type=vids). Layout/breakpoints below are taken
 * directly from CockyBoys' cockyboys.main.css rules for
 * #trailerJoin / .movie_wrapper / #signupframe / #cbMobileIframe /
 * .sceneList.alsolike, translated onto RB's new "rb-" prefixed
 * classes (RB's trailer player itself — #trailer_player_container
 * and children — is untouched and only sized to fill .rb-playerBox).
 *
 * Breakpoints match CB's own convention: max-width:767px (mobile),
 * 768–1023px (tablet), everything else = desktop.
 *
 * Loaded site-wide from common/head_styles.tpl at
 * /styles/randyblue.gallery-cb.css.
 * ============================================================= */

/* -------------------------------------------------------------
 * Page wrapper — intentionally NOT capped narrower than RB's own
 * .content-wrapper.container (which this sits inside). CB's own
 * #cbGalleryPage is a transparent, full-width wrapper; this does
 * the same rather than imposing an extra max-width.
 * ------------------------------------------------------------- */
#rbGalleryPage {
    display: block;
    width: 98%;
    max-width: 1560px;
	margin: 0 auto;
    padding: 20px 0 40px;
    box-sizing: border-box;
}

/* -------------------------------------------------------------
 * #rbTrailerJoin — desktop: flex row, player+text on the left
 * (.rb-movieWrapper, 60%), join iframe on the right (.rb-joinFrame,
 * 40%). Matches CB's #trailerJoin > .movie_wrapper + #signupframe.
 * ------------------------------------------------------------- */
#rbTrailerJoin {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

#signup {
	font-family: "Poppins", "Arial Narrow", "Helvetica Neue", sans-serif;
    font-weight: 700 !important;
    font-size: 2.5em;
    color: #0F4C81;
    text-align: center;
    margin: 20px 0 30px;
}

@media (max-width: 767) {
	#signup {
		font-size: 1.7em;
	}
}

.rb-movieWrapper {
    width: 60%;
    box-sizing: border-box;
}

.rb-playerBox {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}

/* The preserved trailer markup (trailerSceneTab.tpl) fills this box;
   its own inline <style> blocks (#pause-zone, #trailer_player_finished,
   etc.) are untouched and still apply as before. */
.rb-playerBox #trailer_player_container,
.rb-playerBox .video-js,
body.page-scene #trailer_player{
    width: 100% !important;
    height: 100% !important;
	min-height: auto !important;
}

#rbGalleryPage .free-pause {
	height: 100% !important;
	min-height: auto;
}

/* Desktop join iframe — flex sibling of .rb-movieWrapper */
.rb-joinFrame {
    width: 40%;
    max-width: 570px;
    aspect-ratio: 580 / 800;
    box-sizing: border-box;
}

.rb-joinFrame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Mobile/tablet iframe copy — hidden on desktop, shown ≤1023px
   in place of .rb-joinFrame (same pattern as CB's #cbMobileIframe). */
#rbMobileIframe {
    display: none;
}

/* -------------------------------------------------------------
 * Title / meta / description / tags (inside .rb-movieWrapper)
 * ------------------------------------------------------------- */
.rb-trailerTitle {
    font-family: "Poppins", "Arial Narrow", "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    color: #0F4C81;
    margin: 20px 0 6px;
}

.darkmode .rb-trailerTitle {
    color: #fff;
}

.rb-trailerMeta {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #0f4c81;
	font-size: 1.4em;
}

.darkmode .rb-trailerMeta {
    color: #ccc;
}

.rb-trailerModels {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rb-trailerModels li {
    display: inline-block;
}

.rb-trailerModels a {
    color: #0F4C81;
    text-decoration: none;
}

.darkmode .rb-trailerModels a {
    color: #5aadd6;
}

.rb-trailerModels a:hover {
    text-decoration: underline;
}

.rb-trailerDesc {
    font-size: 1.2em;
    font-family: "Poppins", "Arial Narrow", "Helvetica Neue", sans-serif;
    color: #0f4c81;
    line-height: 1.6em;
	padding: 0 5px;
}

.darkmode .rb-trailerDesc {
    color: #ddd;
}

.rb-tags {
    margin-bottom: 10px;
}

@media (max-width: 767px) {
	.rb-tags {
		margin-bottom: 30px;
	}
}

.rb-tags ul.scene-tags {
    display: flex;
    flex-flow: row wrap;
    gap: 7px;
    list-style: none;
    margin: 30px 0 0 0;
    padding: 0;
}

.scene-tags li {
	padding: 0;
}

.rb-tags ul.scene-tags li a {
    display: inline-block;
    background: #eee;
    color: #ffaf00;
    padding: 4px 14px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.85em;
    white-space: nowrap;
    text-decoration: none;
}

.rb-tags ul.scene-tags li a:hover {
    background: #003761;
	color: #fff !important;
}

.darkmode .rb-tags ul.scene-tags li a {
    background: #5aadd6;
}

/* =============================================================
 * TABLET  768px – 1023px
 * Stack #trailerJoin vertically; swap join iframe for the mobile
 * copy; 2-column "You Might Also Like" grid. Matches CB's tablet
 * media query exactly.
 * ============================================================= */
@media (min-width: 768px) and (max-width: 1023px) {

    #rbTrailerJoin {
        flex-flow: column nowrap;
        gap: 0;
    }

    .rb-movieWrapper {
        width: 100%;
    }

    .rb-joinFrame {
        display: none;
    }

    #rbMobileIframe {
        display: block;
        width: 100%;
        margin: 16px 0;
    }

    #rbMobileIframe iframe {
        width: 100%;
        height: 700px;
        border: 0;
    }
}

/* =============================================================
 * MOBILE  ≤767px
 * Same stacking as tablet, plus tighter type/spacing and a
 * single-column "You Might Also Like" grid. Matches CB's mobile
 * media query.
 * ============================================================= */
@media (max-width: 767px) {

    #rbGalleryPage {
        padding: 10px 10px 30px;
    }

    #rbTrailerJoin {
        flex-flow: column nowrap;
        gap: 0;
    }

    .rb-movieWrapper {
        width: 100%;
    }

    .rb-joinFrame {
        display: none;
    }

    #rbMobileIframe {
        display: block;
        width: 100%;
        margin: 10px 0;
    }

    #rbMobileIframe iframe {
        width: 100%;
        height: 680px;
        min-height: 680px;
        border: 0;
    }

    .rb-trailerTitle {
        margin: 16px 0 6px;
    }

    .rb-trailerDesc {
        font-size: 1em;
    }
}

/* -------------------------------------------------------------
 * You Might Also Like — #lastest-updates
 *
 * Intentionally NO CSS here. gallery/recommended.tpl now emits the
 * exact same markup/classes as latestupdates.tpl (section.clearfix
 * .container#lastest-updates > h2.section-title > ul.thumb-list.scenes,
 * with scene_list_item.tpl's own col-md-4/col-sm-6/col-xs-12 on each
 * <li>). That's what makes the homepage's "New Gay Porn Scenes" grid
 * responsive (3/2/1 per row), so this section inherits identical
 * behavior from the site's existing legacy CSS with no extra rules
 * needed. A previous revision added a custom .rb-relatedScenes CSS
 * Grid here, which overrode those Bootstrap column widths and broke
 * the mobile/tablet collapse — removed for that reason.
 * ------------------------------------------------------------- */

/* -------------------------------------------------------------
 * CTA banner — modeled on CB's .cta4
 * ------------------------------------------------------------- */

.cta4 {
    width: 100%;
    margin: 40px 0 0;
    text-align: center;
}

.cta4 .cta-desktop {
    display: block;
}

.cta4 .callBanner img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
}

.cta4__banner--mobile {
    display: none;
}

.cta4__banner--mobile img {
    width: 100%;
    height: auto;
    display: block;
}

.cta4 .cta-bottom-logo {
    display: block;
    max-width: 340px;
    height: auto;
    margin: 24px auto 16px;
}

.cta4 .watchButton.cta2.cta3 {
    display: inline-block;
    font-family: "Poppins", "Arial Narrow", "Helvetica Neue", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    background: rgb(254, 189, 60);
    background: linear-gradient(rgba(254, 189, 60, 1) 0%, rgba(255, 151, 0, 1) 100%);
    padding: 0.7em 2.4em;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1.5em;
    transition: transform 0.2s ease-in-out;
	text-shadow: 1px 1px 7px rgba(0,0,0,0.4);
}

.cta4 .watchButton.cta2.cta3:hover {
    transform: scale(1.05);
    color: #fff !important;
    text-decoration: none;
}

@media (max-width: 767px) {
    .cta4 .cta-desktop {
        display: none;
    }

    .cta4__banner--mobile {
        display: block;
    }
}

body h2.section-title {
	color: #0F4C81;
}

/* -------------------------------------------------------------
 * News ticker — modeled on CB's .newsTicker
 * ------------------------------------------------------------- */

.newsTicker.desktop {
    display: block;
    width: 100%;
    margin: 30px 0 0;
    text-align: center;
    padding: 14px 0;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
}

.darkmode .newsTicker.desktop {
    border-color: #333;
}

.newsTicker.desktop p {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
    color: #0F4C81;
    letter-spacing: 0.02em;
}

.darkmode .newsTicker.desktop p {
    color: #ccc;
}

.newsTicker.desktop p span {
    color: #ff9f0e;
    margin: 0 10px;
}

.newsTicker.mobile-tablet {
    display: none;
}

@media (max-width: 1023px) {
    .newsTicker.desktop {
        display: none;
    }

    .newsTicker.mobile-tablet {
        display: block;
        width: 100%;
        margin: 20px 0 0;
        padding: 10px 20px;
    }

    .newsTicker.mobile-tablet ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .newsTicker.mobile-tablet li {
        padding: 6px 0;
        font-size: 1.3em;
        font-weight: 600;
        color: #0F4C81;
		text-align: center;
    }

    .darkmode .newsTicker.mobile-tablet li {
        color: #ccc;
        border-color: #333;
    }

    .newsTicker.mobile-tablet li span {
        color: #ff9f0e;
        margin-right: 8px;
    }
}