/**
 * ============================================================
 * RAK & ROLL — Episodes Hub
 * ============================================================
 *
 * Media-led browsing layout:
 * - compact episode rail
 * - circular guest rail
 * - RAK & ROLL visual system
 * - no JavaScript required
 */


/* ==========================================================
   PAGE
   ========================================================== */

.hub-page {
    min-height: 100vh;

    color: var(--rr-white);

    background:
        var(--rr-charcoal);
}


.hub-shell {
    width:
        min(
            calc(
                100%
                - (2 * var(--rr-gutter))
            ),
            var(--rr-content)
        );

    margin-inline: auto;
}


/* ==========================================================
   HERO
   ========================================================== */

.hub-hero {
    position: relative;
    overflow: hidden;

    padding:
        clamp(8rem,13vw,11rem)
        0
        clamp(3.5rem,7vw,6rem);

   background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.64) 42%,
        rgba(0,0,0,.28) 72%,
        rgba(0,0,0,.12) 100%
    ),
    linear-gradient(
        180deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.18) 60%,
        rgba(0,0,0,.62) 100%
    ),
    url("/assets/images/brand/rak-roll-desert-microphone.webp")
    68% center / cover no-repeat;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.hub-hero::after {
    content: "";

    position: absolute;
    right: -8rem;
    bottom: -11rem;

    width: 28rem;
    height: 28rem;

    border:
        1px solid
        rgba(220,200,177,.08);

    border-radius: 50%;

    pointer-events: none;
}


.hub-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;

    margin: 0 0
        clamp(2.4rem,5vw,4rem);

    color:
        rgba(255,255,255,.5);

    font-size: .8rem;
}


.hub-breadcrumb a {
    color:
        rgba(255,255,255,.78);
}


.hub-breadcrumb a:hover {
    color: var(--rr-sand);
}


.hub-label {
    margin: 0 0 .75rem;

    color: var(--rr-copper);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.hub-hero .hub-label {
    color: var(--rr-sand);
}


.hub-hero h1 {
    max-width: 900px;

    margin: 0;

    color: var(--rr-white);

    font-family:
        var(--rr-display);

    font-size:
        clamp(4rem,9vw,8rem);

    font-weight: 400;
    line-height: .88;

    letter-spacing: -.04em;
}


.hub-hero__intro {
    max-width: 620px;

    margin:
        clamp(1.4rem,3vw,2rem)
        0
        0;

    color:
        rgba(255,255,255,.72);

    font-size:
        clamp(1.05rem,1.6vw,1.3rem);

    line-height: 1.5;
}


/* ==========================================================
   CONTENT
   ========================================================== */

.hub-content {
    padding-bottom:
        clamp(5rem,9vw,8rem);
}


.hub-section {
    padding:
        clamp(3.5rem,7vw,6rem)
        0;
}


.hub-section + .hub-section {
    border-top:
        1px solid
        rgba(255,255,255,.09);
}


.hub-section-heading {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(240px,420px);

    gap:
        clamp(1.5rem,4vw,4rem);

    align-items: end;

    margin-bottom:
        clamp(1.8rem,4vw,3rem);
}


.hub-section-heading h2 {
    margin: 0;

    font-family:
        var(--rr-display);

    font-size:
        clamp(2.4rem,4.8vw,4.8rem);

    font-weight: 400;
    line-height: .96;

    letter-spacing: -.025em;
}


.hub-section-heading > p {
    margin: 0;

    color:
        rgba(255,255,255,.52);

    font-size: .95rem;
}


/* ==========================================================
   HORIZONTAL RAILS
   ========================================================== */

.hub-rail {
    display: grid;
    grid-auto-flow: column;

    justify-content: start;

    gap:
        clamp(1rem,2vw,1.4rem);

    overflow-x: auto;
    overflow-y: hidden;

    padding:
        .3rem
        .15rem
        1.25rem;

    overscroll-behavior-inline: contain;

    scroll-snap-type:
        inline proximity;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(220,200,177,.26)
        transparent;
}


.hub-rail::-webkit-scrollbar {
    height: 7px;
}


.hub-rail::-webkit-scrollbar-track {
    background: transparent;
}


.hub-rail::-webkit-scrollbar-thumb {
    background:
        rgba(220,200,177,.24);

    border-radius: 999px;
}


.hub-rail::-webkit-scrollbar-thumb:hover {
    background:
        rgba(220,200,177,.42);
}


.hub-rail--episodes {
    grid-auto-columns:
        clamp(275px,28vw,340px);
}


.hub-rail--guests {
    grid-auto-columns:
        clamp(150px,14vw,190px);
}


/* ==========================================================
   EPISODE CARD
   ========================================================== */

.hub-episode-card {
    scroll-snap-align: start;

    min-width: 0;

    padding: .7rem;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        var(--rr-card-radius);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.hub-episode-card:hover {
    background:
        rgba(255,255,255,.065);

    border-color:
        rgba(220,200,177,.18);

    transform:
        translateY(-3px);
}


.hub-episode-card__media,
.hub-episode-card__placeholder {
    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    color: var(--rr-white);

    background: #101010;

    border-radius: 8px;

    text-decoration: none;
}


.hub-episode-card__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .28s ease;
}


.hub-episode-card:hover
.hub-episode-card__media img {
    transform:
        scale(1.025);
}


.hub-episode-card__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0,0,0,.3)
        );

    pointer-events: none;
}


.hub-episode-card__play {
    position: absolute;
    z-index: 2;

    right: .85rem;
    bottom: .85rem;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding-left: 2px;

    color: var(--rr-white);

    background:
        var(--rr-copper);

    border-radius: 50%;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.28);

    font-size: .78rem;

    opacity: 0;

    transform:
        translateY(5px);

    transition:
        opacity .18s ease,
        transform .18s ease,
        background-color .18s ease;
}


.hub-episode-card:hover
.hub-episode-card__play,
.hub-episode-card__media:focus-visible
.hub-episode-card__play {
    opacity: 1;

    transform:
        translateY(0);
}


.hub-episode-card__media:hover
.hub-episode-card__play {
    background:
        var(--rr-copper-hover);
}


.hub-episode-card__placeholder {
    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(184,90,52,.26),
            transparent 8rem
        ),
        #151515;

    font-family:
        var(--rr-display);

    font-size: 1.4rem;
}


.hub-episode-card__placeholder b {
    color: var(--rr-copper);

    font-weight: inherit;
}


.hub-episode-card__body {
    padding:
        1rem
        .35rem
        .4rem;
}


.hub-episode-card__meta {
    display: flex;
    flex-wrap: wrap;

    gap:
        .3rem
        .75rem;

    margin-bottom: .7rem;

    color:
        var(--rr-taupe);

    font-size: .68rem;
    font-weight: 750;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.hub-episode-card h3 {
    margin: 0;

    font-family:
        var(--rr-display);

    font-size:
        clamp(1.35rem,2vw,1.75rem);

    font-weight: 400;
    line-height: 1.04;

    letter-spacing: -.015em;
}


.hub-episode-card h3 a {
    color: var(--rr-white);

    text-decoration: none;
}


.hub-episode-card h3 a:hover {
    color: var(--rr-sand);
}


.hub-episode-card__guest {
    margin:
        .85rem
        0
        0;

    color:
        rgba(255,255,255,.76);

    font-size: .84rem;
    font-weight: 650;
}


.hub-episode-card__context {
    margin:
        .25rem
        0
        0;

    color:
        rgba(255,255,255,.43);

    font-size: .76rem;
}


/* ==========================================================
   GUEST CARD
   ========================================================== */

.hub-guest-card {
    scroll-snap-align: start;

    min-width: 0;

    text-align: center;
}


.hub-guest-card__link {
    display: block;

    color: inherit;

    text-decoration: none;
}


.hub-guest-card__link--upcoming {
    cursor: pointer;
}


.hub-guest-card__portrait {
    position: relative;

    display: block;

    overflow: hidden;

    width: 100%;

    aspect-ratio: 1;

    margin: 0 auto;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(220,200,177,.25),
            transparent 48%
        ),
        #242424;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 50%;

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.2);

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.hub-guest-card__portrait::after {
    content: "";

    position: absolute;
    inset: 0;

    border:
        1px solid
        rgba(255,255,255,.05);

    border-radius: inherit;

    pointer-events: none;
}


.hub-guest-card__portrait img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.hub-guest-card__ribbon {
    position: absolute;
    z-index: 3;
    top: 20px;
    right: -38px;

    width: 142px;
    padding: .35rem 0;

    background: var(--rr-copper);

    color: var(--rr-white);

    font-size: .58rem;
    font-weight: 850;
    line-height: 1;

    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;

    transform: rotate(36deg);

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.22);
}


.hub-guest-card__initials {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: var(--rr-sand);

    font-family:
        var(--rr-display);

    font-size:
        clamp(2.2rem,4vw,3.4rem);

    line-height: 1;
}


.hub-guest-card__link:hover
.hub-guest-card__portrait {
    border-color:
        rgba(184,90,52,.58);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 36px
        rgba(0,0,0,.3);
}


.hub-guest-card h3 {
    margin:
        1rem
        0
        0;

    color: var(--rr-white);

    font-family:
        var(--rr-display);

    font-size:
        clamp(1.1rem,1.7vw,1.35rem);

    font-weight: 400;
    line-height: 1.08;
}


.hub-guest-card p {
    margin:
        .35rem
        0
        0;

    color:
        rgba(255,255,255,.48);

    font-size: .76rem;
    line-height: 1.4;
}


.hub-guest-card__action {
    display: block;

    margin-top: .5rem;

    color: var(--rr-copper);

    font-size: .7rem;
    font-weight: 750;

    letter-spacing: .03em;
}


.hub-guest-card__link:hover
.hub-guest-card__action {
    color: var(--rr-sand);
}


/* ==========================================================
   EMPTY STATE
   ========================================================== */

.hub-empty {
    margin:
        clamp(3rem,7vw,5rem)
        0
        clamp(1.5rem,4vw,3rem);

    padding:
        clamp(1.5rem,4vw,2.75rem)
        0;

    color: var(--rr-white);

    background: transparent;

    border-top:
        1px solid
        rgba(184,90,52,.38);

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.hub-empty h2 {
    max-width: 820px;

    margin: 0;

    color: var(--rr-white);

    font-family:
        var(--rr-display);

    font-size:
        clamp(2rem,4vw,3.45rem);

    font-weight: 400;
    line-height: 1.05;
}


.hub-empty > p:last-child {
    max-width: 680px;

    margin:
        1rem
        0
        0;

    color: var(--rr-sand);

    font-size: 1rem;
    line-height: 1.7;
}


/* ==========================================================
   ERROR PAGE
   ========================================================== */

.hub-error {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding:
        var(--rr-gutter);

    color:
        var(--rr-charcoal);

    background:
        var(--rr-off-white);
}


.hub-error > div {
    width:
        min(
            100%,
            720px
        );
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .hub-section-heading {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 1rem;
    }


    .hub-section-heading > p {
        max-width: 580px;
    }


    .hub-rail--episodes {
        grid-auto-columns:
            clamp(270px,42vw,330px);
    }


    .hub-rail--guests {
        grid-auto-columns:
            clamp(145px,22vw,180px);
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 620px) {

    .hub-hero {
        padding:
            7rem
            0
            3.5rem;
    }


    .hub-breadcrumb {
        margin-bottom: 2rem;
    }


    .hub-hero h1 {
        font-size:
            clamp(3.5rem,19vw,5.5rem);
    }


    .hub-hero__intro {
        max-width: 24rem;

        font-size: 1.05rem;
    }


    .hub-section {
        padding:
            3.5rem
            0;
    }


    .hub-section-heading h2 {
        font-size:
            clamp(2.4rem,12vw,3.5rem);
    }


    .hub-rail {
        margin-right:
            calc(
                -1 * var(--rr-gutter)
            );

        padding-right:
            var(--rr-gutter);
    }


    .hub-rail--episodes {
        grid-auto-columns:
            min(
                82vw,
                310px
            );
    }


    .hub-rail--guests {
        grid-auto-columns:
            145px;
    }


    .hub-episode-card {
        padding: .6rem;
    }


    .hub-episode-card__play {
        opacity: 1;

        transform: none;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .hub-episode-card,
    .hub-episode-card__media img,
    .hub-episode-card__play,
    .hub-guest-card__portrait {
        transition: none;
    }


    .hub-episode-card:hover,
    .hub-episode-card:hover
    .hub-episode-card__media img,
    .hub-guest-card__link:hover
    .hub-guest-card__portrait {
        transform: none;
    }
}