/* ============================================================
 * 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: 1em;
    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: 5px 0 10px;
    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, rgb(255 153 1) 0%, rgb(254 186 56) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 7px 40px;
    font-family: sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.2em;
    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; }
}