/* ============================================================
 * randyblue.hero.css
 *
 * Hero slideshow styles for RandyBlue.com — ported from the
 * CockyBoys hero block in cockyboys.main.css (sections 3.8–3.15)
 * and adapted to RandyBlue's markup classes (rb-* prefix) and brand.
 *
 * Server location: /styles/randyblue.hero.css   (randyblue.com web root)
 * Loaded via common/head_styles.tpl as:
 *   profile://publicResources/styles/randyblue.hero.css
 * which the framework rewrites into a signed CDN URL at output time.
 *
 * Brand color swaps vs CockyBoys:
 *   - CockyBoys red  #d6352c  →  RandyBlue amber  #ffaf00  (pill / progress)
 *   - CockyBoys panel #003761 →  RandyBlue blue   #0f4c81  (mobile panel/bg)
 *
 * Breakpoint: desktop hero >= 768px, mobile hero < 768px.
 * ============================================================ */


/* ============================================================
   HERO SLIDESHOW — shared
   ============================================================ */

.rb-hero {
    width: 100%;
    overflow: hidden;
    background: #000;
}

.rb-slide {
    box-sizing: border-box;
}

/* Prev/next buttons (desktop hero) */
.rb-hero .cb-prev,
.rb-hero .cb-next {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    z-index: 200;
    background: transparent;
    color: #fff;
    border: 0;
    width: auto;
    height: 110px;
    font-size: 170px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    opacity: 0.8;
}

.rb-hero .cb-prev { left: 5px; }
.rb-hero .cb-next { right: 5px; }

@media (max-width: 1023px) {
    .rb-hero .cb-prev,
    .rb-hero .cb-next {
        font-size: 110px;
    }
}

@media (hover: hover) {
    .rb-hero .cb-prev:hover,
    .rb-hero .cb-next:hover {
        opacity: 1;
    }
}


/* ============================================================
   HERO — DESKTOP (>= 768px)
   Aspect ratio 1920:600 (tour banners only — no member variant)
   ============================================================ */

.rb-hero-desktop {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 600;
    min-height: 240px; /* Fallback for browsers without aspect-ratio */
    background: #000;
}

.rb-hero-desktop .rb-slide {
    width: 100%;
    height: 100%;
}

.rb-hero-desktop .rb-slide img,
.rb-hero-desktop .rb-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Full-slide link overlay for banner slides */
.rb-hero-desktop .rb-slide--banner .rb-overlay {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: block;
    text-indent: -9000em;
    overflow: hidden;
}


/* ============================================================
   HERO — MOBILE (< 768px)
   Aspect ratio 640:665. Video fills ~72% top, blue panel ~28%
   bottom, transition image bridges them.
   ============================================================ */

.rb-hero-mobile {
    position: relative;
    width: 100%;
    aspect-ratio: 640 / 665;
    min-height: 380px; /* Fallback for browsers without aspect-ratio */
    background: #0f4c81;
    display: none; /* hidden by default; shown < 768px below */
}

.rb-hero-mobile .rb-slide {
    width: 100%;
    height: 100%;
    background: #000;
    display: block;
    color: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.rb-hero-mobile a.rb-slide:hover,
.rb-hero-mobile a.rb-slide:focus {
    text-decoration: none;
    color: #fff;
}

.rb-hero-mobile .rb-slide--banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video fills top portion */
.rb-hero-mobile .rb-slide--video video,
.rb-hero-mobile .rb-slide--video .rb-hero-mobile__poster {
    display: block;
    width: 100%;
    height: 72%;
    object-fit: cover;
    background: #000;
    overflow: hidden;
}

/* Transition image straddling video and panel */
.rb-hero-mobile__divider {
    position: absolute;
    bottom: 28%;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

/* Full-slide link overlay (video slides) */
.rb-hero-mobile .rb-slide--video .rb-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    text-indent: -9000em;
    overflow: hidden;
}

/* Blue text panel below the video */
.rb-hero-mobile__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28%;
    background: #0f4c81;
    color: #fff;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
    padding: 0 15px 25px;
    box-sizing: border-box;
}

.rb-hero-mobile__panel .rb-pill {
    background: #ffaf00;
    color: #fff;
    border-radius: 4px;
    padding: 0 6px;
    font-family: sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.8em;
    margin-bottom: 6px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.rb-hero-mobile__panel h1 {
    font-family: 'Anton', sans-serif;
    font-size: 1.7em;
    margin: 0 0 7px;
    padding: 0 10px;
    line-height: 1em;
    font-weight: 800;
    color: #fff;
    white-space: wrap;
    text-overflow: ellipsis;
    max-width: 95%;
}

.rb-hero-mobile__watchbutton {
    display: inline-block;
    background: linear-gradient(to top, rgba(46, 143, 195, 1) 0%, rgba(105, 185, 220, 1) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 7px 40px;
    font-family: sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 1.4em;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.6);
}

@media (min-width: 650px) and (max-width: 767px) {
    .rb-hero-mobile__panel h1 {
        font-size: 2.5em;
        line-height: 1.1em;
    }
    .rb-hero-mobile__watchbutton {
        font-size: 1.4em;
    }
}


/* ============================================================
   HERO — VISIBILITY SWAP
   Desktop hero >= 768px (desktop AND tablet). Mobile < 768px.
   ============================================================ */

@media (max-width: 767px) {
    .rb-hero-desktop { display: none; }
    .rb-hero-mobile  { display: block; }
}

@media (min-width: 768px) {
    .rb-hero-desktop { display: block; }
    .rb-hero-mobile  { display: none; }
}


/* ============================================================
   Screen-reader-only utility
   ============================================================ */

.rb-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   iPhone "shrink-to-fit" fix
   ============================================================ */

html,
body {
    overflow-x: hidden;
}


/* ============================================================
   HERO PROGRESS BAR
   ============================================================ */

.rb-hero-progress {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    line-height: 0;
}

.rb-hero-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: #ffaf00;          /* RandyBlue amber */
    transform-origin: left center;
}

.rb-hero-progress--desktop { display: block; }
.rb-hero-progress--mobile  { display: none; }

@media (max-width: 767px) {
    .rb-hero-progress--desktop { display: none; }
    .rb-hero-progress--mobile  { display: block; }
}

@media (min-width: 768px) {
    .rb-hero-progress--desktop { display: block; }
    .rb-hero-progress--mobile  { display: none; }
}


/* ============================================================
   MEMBERS HERO — CockyBoys class names
   Used by the !$trial (members) hero in 5spot.tpl.
   Mirrors cockyboys.main.css hero sections exactly, with
   RandyBlue brand color substitutions:
     CockyBoys red  #d6352c → RandyBlue amber #ffaf00
     CockyBoys panel #003761 → RandyBlue blue #0f4c81
   ============================================================ */

/* Shared container */
.hero {
    width: 100%;
    overflow: hidden;
    background: #000;
}

/* ── Desktop hero ── */

.hero-desktop {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 600;
    min-height: 240px;
    background: #000;
    display: none;
}

.hero-desktop .cb-slide {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.hero-desktop .hero-slide--video {
    position: relative;
}

.hero-desktop .hero-slide--video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Invisible full-slide link */
.hero-slide__overlay {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: block;
    overflow: hidden;
}

.hero-slide__overlay .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Left-side gradient CTA panel */
.hero-slide__cta {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    padding: 0 30px 0 20px;
    text-decoration: none;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.55) 50%,
        rgba(0,0,0,0)    100%
    );
}

.hero-slide__cta h1 {
    font-family: 'Anton', sans-serif;
    color: #fff;
    font-size: 3.5em;
    margin: 0 0 10px;
    line-height: 1.1em;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}

.hero-pill {
    display: inline-block;
    background: #ffaf00;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-family: sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.35em;
    margin-bottom: 8px;
    vertical-align: middle;
}

.hero-watchbutton {
    display: inline-block;
    background: linear-gradient(to top, rgba(46,143,195,1) 0%, rgba(105,185,220,1) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 7px 35px;
    font-family: sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.4em;
    line-height: 1.4em;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 7px rgba(0,0,0,0.6);
    margin-top: 15px;
    cursor: pointer;
}

.hero-slide__cta:hover .hero-watchbutton {
    transform: scale(1.05);
}

@media (max-width: 1550px) { .hero-slide__cta { width: 40%; } }
@media (max-width: 1250px) { .hero-slide__cta { width: 45%; } }

@media (max-width: 860px) {
    .hero-slide__cta {
        width: 50%;
        padding-bottom: 15px;
    }
    .hero-slide__cta h1 {
        font-size: 1.8em;
        margin-bottom: 5px;
    }
    .hero-watchbutton {
        font-size: 0.9em;
        padding: 5px 20px;
        margin-top: 8px;
    }
}

/* Prev/next buttons */
.hero-desktop .cb-prev,
.hero-desktop .cb-next {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    z-index: 200;
    background: transparent;
    color: #fff;
    border: 0;
    width: auto;
    height: 110px;
    font-size: 170px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.hero-desktop .cb-prev { left: 5px; }
.hero-desktop .cb-next { right: 5px; }

@media (hover: hover) {
    .hero-desktop .cb-prev:hover,
    .hero-desktop .cb-next:hover { opacity: 1; }
}

/* ── Mobile hero ── */

.hero-mobile {
    position: relative;
    width: 100%;
    aspect-ratio: 640 / 665;
    min-height: 380px;
    background: #0f4c81;
    display: none;
}

.hero-mobile .cb-slide {
    box-sizing: border-box;
}

.hero-mobile__slide {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #000;
}

.hero-mobile__slide:hover,
.hero-mobile__slide:focus {
    text-decoration: none;
    color: #fff;
}

.hero-mobile__slide--video video {
    display: block;
    width: 100%;
    height: 72%;
    object-fit: cover;
    background: #000;
}

.hero-mobile__divider {
    position: absolute;
    bottom: 28%;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

.hero-mobile__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28%;
    background: #0f4c81;
    color: #fff;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
    padding: 0 15px 25px;
    box-sizing: border-box;
}

.hero-mobile__panel h1 {
    font-family: 'Anton', sans-serif;
    font-size: 1.7em;
    margin: 0 0 7px;
    padding: 0 10px;
    line-height: 1em;
    font-weight: 800;
    color: #fff;
}

.hero-mobile__watchbutton {
    display: inline-block;
    background: linear-gradient(to top, rgba(46,143,195,1) 0%, rgba(105,185,220,1) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 7px 40px;
    font-family: sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 1.4em;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 7px rgba(0,0,0,0.6);
}

/* ── Progress bars ── */

.hero-progress {
    width: 100%;
    height: 5px;
    background: rgba(0,0,0,0.08);
    overflow: hidden;
    position: relative;
    line-height: 0;
}

.hero-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: #ffaf00;
    transform-origin: left center;
}

.hero-progress--desktop { display: block; }
.hero-progress--mobile  { display: none; }

/* ── Visibility swap ── */

@media (max-width: 767px) {
    .hero-desktop        { display: none; }
    .hero-mobile         { display: block; }
    .hero-progress--desktop { display: none; }
    .hero-progress--mobile  { display: block; }
}

@media (min-width: 768px) {
    .hero-desktop        { display: block; }
    .hero-mobile         { display: none; }
    .hero-progress--desktop { display: block; }
    .hero-progress--mobile  { display: none; }
}


/* ============================================================
   COUNTDOWN BANNER — #cbCountdownBanner / .cbCountdown
   Ported from cockyboys.main.css. Used by countdown-banner.tpl.
   ============================================================ */

#cbCountdownBanner {
    position: relative;
    margin:   0 0 20px;
    padding:  0;
    line-height: 1;
}

#cbCountdownBanner picture,
#cbCountdownBanner img {
    display: block;
    width:   100%;
    margin:  0;
    padding: 0;
}

/* Countdown overlay — positioned over the banner image.
   left/bottom are % so the overlay stays proportional as the
   banner scales with the viewport. Adjust after reviewing the image. */
.cbCountdown {
    position:        absolute;
    bottom:          11%;
    left:            66%;
    transform:       translateX(-50%);

    display:         flex;
    flex-flow:       row nowrap;
    align-items:     center;
    justify-content: center;
    gap:             0;

    color:           var(--cbcd-color, #000);
    font-family:     sans-serif;
    text-align:      center;
    pointer-events:  none;
}

.cbCountdown__unit {
    display:         flex;
    flex-flow:       column nowrap;
    align-items:     center;
    justify-content: center;
    min-width:       5.5vw;
}

.cbCountdown__num {
    display:       block;
    font-size:     2.5vw;
    font-weight:   300;
    line-height:   1;
    background:    #fff;
    border-radius: 7px;
    padding:       5px 10px;
}

.cbCountdown__label {
    display:        block;
    font-size:      0.7vw;
    font-weight:    400;
    margin-top:     0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          #fff;
}

@media (max-width: 767px) {
    .cbCountdown {
        gap:    1vw;
        bottom: 30%;
        left:   50%;
    }
    .cbCountdown__unit {
        min-width: 14vw;
    }
    .cbCountdown__num {
        font-size: 7vw;
    }
    .cbCountdown__label {
        font-size: 2.2vw;
    }
}


/* ============================================================
   SCENE THUMBNAIL INSTANT PREVIEW
   Ported from cockyboys.main.css (CB.preview / Phase 6).

   Structure per card:
     section.previewThumb.hasClip (or .noClip)  id="{setID}"
       a.turnOn          — play icon (enable previews)
       a.turnOff         — X icon (disable previews)
       a.abso            — full-card transparent link overlay
       div
         a.thumbCover    — the still JPG wrapper
           picture > img
         video.vid       — the preview clip (display:none until played)
         div             — white fill layer
       div.scene-info    — title, badges, models, votes
   ============================================================ */


/* ── Card container ── */

.previewThumb {
    position: relative;
    overflow: hidden;
}

/* The clipping div that holds thumbCover + video */
.previewThumb > div:first-of-type {
    position: relative;
    overflow: hidden;
    display:  block;
}


/* ── Thumbnail cover image ── */

.previewThumb .thumbCover {
    display: block;
    position: relative;
    z-index: 3;
}

.previewThumb .thumbCover picture,
.previewThumb .thumbCover img {
    display:    block;
    width:      100%;
    height:     auto;
}


/* ── Preview video ── */

.previewThumb video.vid {
    position:       absolute;
    inset:          0;
    z-index:        4;
    width:          100%;
    height:         100%;
    object-fit:     cover;
    object-position: center center;
    pointer-events: none;
    display:        none;
}


/* ── Turn on / off icons ── */

.previewThumb .turnOn,
.previewThumb .turnOff {
    position:         absolute;
    z-index:          10;
    top:              8px;
    right:            8px;
    width:            32px;
    height:           32px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background:       rgba(0, 0, 0, 0.55);
    border-radius:    50%;
    color:            #fff;
    text-decoration:  none;
    cursor:           pointer;
    opacity:          0;
    transition:       opacity 0.15s ease, background 0.15s ease;
}

/* turnOff (X) only appears while the card is actively previewing */
body.previewsOn .previewThumb.is-previewing .turnOff {
    opacity:        1;
    pointer-events: auto;
}

/* turnOn (play) only appears on hover when previews are disabled */
body.previewsOff .previewThumb:hover .turnOn {
    opacity:        1;
    pointer-events: auto;
}

/* Whichever icon is not active must not receive pointer events —
   both icons share the same position and the hidden one would
   otherwise intercept hover and click from the visible one */
body.previewsOn .previewThumb .turnOn,
body.previewsOff .previewThumb .turnOff {
    pointer-events: none;
}

@media (hover: hover) {
    body.previewsOn .previewThumb.is-previewing .turnOff:hover,
    body.previewsOff .previewThumb .turnOn:hover {
        background: rgba(0, 0, 0, 0.85);
        opacity:    1;
    }
}


/* ── Icon tooltip labels ── */

.previewThumb .turnOn__label,
.previewThumb .turnOff__label {
    position:      absolute;
    top:           38px;
    right:         0;
    white-space:   nowrap;
    background:    rgba(0, 0, 0, 0.75);
    color:         #fff;
    font-size:     0.75em;
    padding:       4px 8px;
    border-radius: 4px;
    pointer-events: none;
}


/* ── Mobile: disable all icon/overlay behaviour on touch devices ── */

@media (hover: none) {
    .previewThumb .turnOn,
    .previewThumb .turnOff {
        display: none !important;
    }
    .previewThumb {
        touch-action:                manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

body .container section .thumb-list.scenes li .scene-details li.hdlabel span {
	z-index: 3;
}

.thumb-list h3 {
	margin-top: 10px;
    font-weight: 600 !important;
	margin-bottom: 2px;
}

.thumb-list h3 a,
.scene-info,
.scene-info a {
	color: rgb(15, 76, 129);
}

.scene-models {
	display: flex;
	flex-flow: row nowrap;
	text-transform: uppercase;
	margin-bottom: 2px;
}

ul.scene-models li {
    margin-right: 10px;
}

.scene-votes a {
	display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.glyphicons {
	margin-right: 5px;
}

.scene-info {
	padding-bottom: 10px;
}