/*
##################################
Cineverse Modular Stylesheet: Realms, Topics, (Taxonomies) & Search.
Loaded conditionally on is_archive() || is_search()
##################################
*/

/*
------------
Master Grid & Containers
------------
*/

/* The Master Background and Wrappers */
#cs, #cs-realm, #cs-topic {
    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
}

/* Set all sections to Relative for adaptive canvas */
section {
    position: relative;
}

/* Unify the sub-section headers */
#cs-realm .cs-section-header, #cs-topic .cs-section-header {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 12;
    grid-template-rows: auto auto auto;
    gap: 1rem;
}

#cs-realm h2.cs-tile-card-headline,
#cs-topic h2.cs-tile-card-headline {
    font-size: var(--cs-font-size-h3);
    grid-column: 1 / span 8;
}

/* Make the query container adapt to section grid */
#cs-realm .cs-tile-card-query,
#cs-topic .cs-tile-card-query {
    display: contents;
}

/* Here is how we adapt the tile grid to the section 12 grid */
.cs-tile-card-grid {
    display: grid;
    grid-template-columns: subgrid;
    gap: 1rem;
    grid-column: 1 / span 12;
}

/* Displays when no content available */
.no-content-box {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / span 12;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* H4 Heading */
.no-content-box h4 {
    grid-column: 1 / span 12;
    grid-row: 1; /* Places it precisely in the 3rd row */
}

/* span class */
.no-content-box span {
    grid-column: 1 / span 12;
    grid-row: 2; /* Places it precisely in the 4th row */
}

/*
------------
Header Module (.cs-section-header)
------------
*/

#topic-header .cs-section-header {
    display: contents;
    /* Allows children to participate in the .cs-wrap 12-col grid */
}

/* --- Left Side: Title & Tagline (9 Columns) --- */
#topic-header .cs-section-head:not(.image) {
    grid-column: 1 / 10;
    display: grid;
    flex-direction: column;
    align-items: flex-start;
    /* Keeps text left-aligned */
    justify-content: flex-end;
    padding-bottom: 1rem;
}

#topic-header .cs-section-headline {
    display: inline-flex;
    text-align: left;
    margin-bottom: 0.5rem;
    gap: 1rem;
    word-spacing: 0.25rem;
}

#topic-header h1.topic-snarkline {
    margin-bottom: 0;
    word-spacing: 0.25rem;
}

#topic-header .cs-section-tagline {
    display: block;
    width: 100%;
    text-align: left;
    color: var(--primary-text-color);
    /* Optional: adjust to your variable */
    margin-bottom: 1rem;
}

/* --- Right Side: Image Thumbnails (3 Columns) --- */
#topic-header .cs-section-head.image {
    grid-column: 10 / 13;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: end;
}

#topic-header .cs-section-head.image img {
    width: 100%;
    height: auto;
    max-height: 225px;
    border-radius: 4px;
    object-fit: cover;
}

/* --- Full Width Border --- */
#topic-header .cinesist-border-red,
#topic-header .cinesist-border-brand {
    grid-column: 1 / -1;
    height: 5px;
    width: 100%;
}

#topic-header .cinesist-border-brand {
    background-blend-mode: screen;
    background-image: linear-gradient(100deg, var(--cs-brand) 35%, var(--cs-brand) 50%, rgba(0, 0, 0, 0) 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* =========================================
   3. MOBILE RESPONSIVE OVERRIDES
   ========================================= */
@media (max-width: 768px) {

    /* Stack everything and center for mobile */
    #topic-header .cs-section-head:not(.image),
    #topic-header .cs-section-head.image {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
    }

    #topic-header .cs-section-headline,
    #topic-header .cs-tile-card-tagline {
        text-align: center;
    }

    #topic-header .cs-section-head.image {
        flex-direction: row;
        /* Stack images side-by-side or hide one on mobile */
        justify-content: center;
        margin-top: 1rem;
    }
}

/* =========================================
   4. Archive Feed Hero Tile Grid
   ========================================= */

/* 1. The Grid Container: 4 Columns, 1 Fixed Row */
#topic-pinned ul.cs-tile-card-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    /* 4 equal columns */
    grid-template-rows: 400px;
    /* Fixed 1st row height */
    grid-auto-rows: 0;
    /* Hide overflow items if any */
    overflow: hidden;
    /* Keep it strictly to one row */
    gap: 1rem;
}

/* 2. Item 1: Spans 2 columns (50%) */
#topic-pinned ul.cs-tile-card-grid>li:first-child {
    grid-column: span 2;
}

/* 3. Items 2 and 3: Span 1 column each (25% each) */
#topic-pinned ul.cs-tile-card-grid>li:nth-child(2),
#topic-pinned ul.cs-tile-card-grid>li:nth-child(3) {
    grid-column: span 1;
}

#topic-pinned ul.cs-tile-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 400px;
    /* Lock the row height */

    row-gap: 0 !important;
    /* Remove the vertical gap that's causing the mismatch */
    column-gap: 1rem;
    /* Keep the horizontal gap between tiles */

    align-items: stretch;
    /* Forces all tiles to be 400px exactly */
}

#topic-pinned ul.cs-tile-card-grid>li {
    height: 400px;
    margin-bottom: 0;
    /* Remove any bottom margin that might push tiles up */
}

#topic-pinned ul.cs-tile-card-grid {
    grid-template-rows: 400px;
    row-gap: 0px;
    align-items: stretch;
    column-gap: 1rem;
}

#topic-pinned ul.cs-tile-card-grid>li:first-child {
    height: 400px;
    display: flex;
    flex-direction: column;
    margin: 0px;
    margin-bottom: 0px;
}

#topic-pinned ul.cs-tile-card-grid>li:nth-child(2) {
    height: 400px;
    display: flex;
    flex-direction: column;
    margin: 0px;
    margin-bottom: 0px;
}

#topic-pinned ul.cs-tile-card-grid>li:nth-child(3) {
    height: 400px;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

/* The Category Feed Cards - Span 3 columns each (4-across layout) */
#topic-pinned .cs-tile-card-item {
    grid-column: span 3;
    border-radius: var(--round-5);
    transition: transform 0.3s ease;
    overflow: hidden;
}

#topic-pinned .cs-tile-card-item:hover {
    transform: translateY(-5px);
}

/* Mobile Responsiveness - Collapse the Grid */
@media (max-width: 992px) {
    #topic-pinned .cs-tile-card-item,
    #realm-pinned .cs-tile-card-item {
        grid-column: span 6;
        /* 2-across on Tablets */
    }
}

@media (max-width: 767px) {
    .cs-grid-12 {
        grid-template-columns: 1fr;
        /* Demotes the 12-columns to 1 single column */
    }

    #topic-pinned ul.cs-tile-card-grid,
    #realm-pinned ul.cs-tile-card-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 400px;
        /* Lock the row height */

        row-gap: 0 !important;
        /* Remove the vertical gap that's causing the mismatch */
        column-gap: 1rem;
        /* Keep the horizontal gap between tiles */

        align-items: stretch;
        /* Forces all tiles to be 400px exactly */
    }

    #topic-pinned ul.cs-tile-card-grid>li,
    #realm-pinned ul.cs-tile-card-grid>li {
        height: 400px;
        margin-bottom: 0;
        /* Remove any bottom margin that might push tiles up */
    }


    /* The Red Border (Full Width) */
    #topic-pinned .cinesist-border-red, #topic-feed .cinesist-border-red,
    #realm-pinned .cinesist-border-red
     {
        grid-column: 1 / 13;
        /* Spans all 12 columns */
    }
}

#topic-pinned a.cs-tile-card-anchor:hover,
#realm-pinned a.cs-tile-card-anchor:hover {
    text-decoration: underline 2px var(--topic-accent);
}

#topic-pinned h2.cs-tile-card-title:hover,
#realm-pinned h2.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;
}

#topic-pinned h3.cs-tile-card-title:hover,
#realm-pinned h3.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;
}

#topic-pinned h4.cs-tile-card-title:hover,
#realm-pinned h4.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;
}

/* --- Consolidated Mobile Styles --- */
@media (max-width: 767px) {

    /* 1. Reset the section padding */
    section#topic-pinned,
    section#realm-pinned {
        padding-top: 0 !important;
    }

    /* 2. THE GRID: Pull it out to touch the screen edges */
    #topic-pinned ul.cs-tile-card-grid,
    #realm-pinned ul.cs-tile-card-grid {
        display: flex;
        flex-direction: column;
        width: 100vw !important;
        /* Force to full screen width */
        margin-left: calc(var(--margin-site, 21px) * -1) !important;
        /* Pull left */
        gap: 1.5rem;
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* 3. HERO TILE (Tile 1): Naturally fills the 100vw grid */
    #topic-pinned ul.cs-tile-card-grid li:first-child,
    #realm-pinned ul.cs-tile-card-grid li:first-child {
        width: 100% !important;
        height: 320px !important;
        border-radius: 0 !important;
        position: relative;
    }

    #topic-pinned ul.cs-tile-card-grid li:first-child article,
    #topic-pinned ul.cs-tile-card-grid li:first-child img,
    #realm-pinned ul.cs-tile-card-grid li:first-child article,
    #realm-pinned ul.cs-tile-card-grid li:first-child img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border-radius: 0 !important;
    }

    #topic-pinned ul.cs-tile-card-grid li:first-child .cs-tile-card-title,
    #topic-pinned ul.cs-tile-card-grid li:first-child .cs-tile-card-title a,
    #realm-pinned ul.cs-tile-card-grid li:first-child .cs-tile-card-title,
    #realm-pinned ul.cs-tile-card-grid li:first-child .cs-tile-card-title a {
        color: #ffffff !important;
        text-align: left;
        font-weight: 700;
        font-size: 1.3rem;
        margin: 0;
    }

    /* 4. SECONDARY TILES (Tiles 2-4): Just add margin back */
    #topic-pinned ul.cs-tile-card-grid li:not(:first-child),
    #realm-pinned ul.cs-tile-card-grid li:not(:first-child)      {
        margin: 0 1rem !important;
        /* This creates the 'small gap' you want */
        width: auto !important;
        display: block;
    }

    #topic-pinned ul.cs-tile-card-grid li:not(:first-child) article,
    #realm-pinned ul.cs-tile-card-grid li:not(:first-child) article {
        border-radius: 8px;
        overflow: hidden;
    }
}

#topic-pinned a.cs-tile-card-anchor:hover,
#realm-pinned a.cs-tile-card-anchor:hover {
    text-decoration: underline 2px var(--topic-accent);
}

#topic-pinned .cs-tile-card-details,
#realm-pinned .cs-tile-card-details {
    margin-block-end: 0;
    border-radius: 8px;
}

#topic-pinned .cs-tile-card-details .tile-card-date,
#topic-pinned .cs-tile-card-details .tile-card-byline {
    font-size: 0.8rem;
}

#topic-pinned .cs-tile-card-details .tile-card-byline a,
#realm-pinned .cs-tile-card-details .tile-card-byline a {
    color: var(--topic-accent);
    font-weight: 700;
    text-decoration: none;
}

#topic-pinned .cs-tile-card-details .tile-card-byline a:hover,
#realm-pinned .cs-tile-card-details .tile-card-byline a:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;
}

/* 6 Tile Grid */
#topic-pinned ul.cs-tile-card-grid.archive,
#realm-pinned ul.cs-tile-card-grid.archive {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: none;
    gap: 1rem;
}

#topic-pinned ul.cs-tile-card-grid.archive li:nth-child(1),
#realm-pinned ul.cs-tile-card-grid.archive li:nth-child(1) {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}

#topic-pinned ul.cs-tile-card-grid.archive li:nth-child(2),
#realm-pinned ul.cs-tile-card-grid.archive li:nth-child(2) {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}

#topic-pinned ul.cs-tile-card-grid.archive li:nth-child(3),
#realm-pinned ul.cs-tile-card-grid.archive li:nth-child(3) {
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
}

#topic-pinned ul.cs-tile-card-grid.archive li:nth-child(4),
#realm-pinned ul.cs-tile-card-grid.archive li:nth-child(4) {
    grid-column: 4 / span 1;
    grid-row: 1 / span 1;
}

#topic-pinned .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title,
#realm-pinned .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.15;
    -webkit-line-clamp: 2;
    margin-bottom: 0;
}

#topic-pinned .cs-tile-card-grid>.cs-tile-card-item:nth-child(1) .cs-tile-card-title,
#realm-pinned .cs-tile-card-grid>.cs-tile-card-item:nth-child(1) .cs-tile-card-title {
    font-size: 2rem;
}

#topic-pinned h3.cs-tile-card-title:hover,
#realm-pinned h3.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;
}

/* --- Consolidated Mobile Styles --- */
@media (max-width: 767px) {

    /* 1. Make the wrapper a flex column so we can reorder children */
    #topic-pinned .cs-wrap,
    #realm-pinned .cs-wrap {
        display: flex !important;
        flex-direction: column !important;
    }

    #topic-pinned .cs-section-headline,
    #realm-pinned .cs-section-headline {
        font-size: 1.8rem;
        text-align: center;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    #topic-pinned .cs-tile-card-tagline,
    #realm-pinned .cs-tile-card-tagline {
        text-align: center;
        font-size: 0.9rem;
        opacity: 0.8;
    }

    /* 3. Hide the original anchor in the header on mobile */
    #topic-pinned .cs-section-head .cs-tile-card-anchor,
    #realm-pinned .cs-section-head .cs-tile-card-anchor {
        display: none !important;
    }

    /* 4. Grid to 1 Column Stack */
    #topic-pinned .cs-section-inner,
    #realm-pinned .cs-section-inner {
        order: 2;
        /* Grid comes second */
    }

    #topic-pinned ul.cs-tile-card-grid,
    #realm-pinned ul.cs-tile-card-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        width: 100% !important;
    }

    #topic-pinned ul.cs-tile-card-grid li,
    #realm-pinned ul.cs-tile-card-grid li {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 5. Style the "Get More Rants" button at the bottom */
    #topic-pinned .get-more-mobile-wrap,
    #realm-pinned .get-more-mobile-wrap {
        display: flex;
        justify-content: center;
        margin-top: 2.5rem;
        padding: 0 1rem;
    }

    #topic-pinned .get-more-mobile-wrap a,
    #realm-pinned .get-more-mobile-wrap a {
        display: inline-block;
        padding: 12px 30px;
        background-color: var(--cs-brand);
        color: var(--cs-text-primary);
        text-decoration: none;
        font-weight: bold;
        border-radius: 5px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
}

/* =========================================
   5. Archive Feed Tile Grid
   ========================================= */

#topic-feed ul.cs-tile-card-grid,
#realm-feed ul.cs-tile-card-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
    gap: 1rem;
}

#topic-feed ul.cs-tile-card-grid li:nth-child(n+1),
#realm-feed ul.cs-tile-card-grid li:nth-child(n+1) {
    grid-column: span 1;
    grid-row: auto;
}

/* The Category Feed Cards - Span 3 columns each (4-across layout) */
#topic-feed .cs-tile-card-item,
#realm-feed .cs-tile-card-item {
    border: 1px solid var(--flex-decor-border);
    border-radius: var(--round-5);
    transition: transform 0.3s ease;
    overflow: hidden;
}

#topic-feed .cs-tile-card-item:hover,
#realm-feed .cs-tile-card-item:hover {
    transform: translateY(-5px);
}

/* Mobile Responsiveness - Collapse the Grid */
@media (max-width: 992px) {
    #topic-feed .cs-tile-card-item,
    #realm-feed .cs-tile-card-item {
        grid-column: span 6;
        /* 2-across on Tablets */
    }
}

@media (max-width: 767px) {
    .cs-grid-12 {
        grid-template-columns: 1fr;
        /* Demotes the 12-columns to 1 single column */
    }

    #topic-feed ul.cs-tile-card-grid,
    #realm-feed ul.cs-tile-card-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        row-gap: 0.5rem;
        /* Remove the vertical gap that's causing the mismatch */
        column-gap: 1rem;
        /* Keep the horizontal gap between tiles */
    }

    #topic-feed ul.cs-tile-card-grid>li,
    #realm-feed ul.cs-tile-card-grid>li {
        height: 400px;
        margin-bottom: 0;
        /* Remove any bottom margin that might push tiles up */
    }

    /* The Red Border (Full Width) */
    #topic-feed .cinesist-border-topic,
    #realm-feed .cinesist-border-topic {
        grid-column: 1 / 13;
        /* Spans all 12 columns */
    }
}

#topic-feed a.cs-tile-card-anchor:hover,
#realm-feed a.cs-tile-card-anchor:hover {
    text-decoration: underline 2px var(--topic-accent);
}

#topic-feed h2.cs-tile-card-title:hover,
#realm-feed h2.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;
}

#topic-feed h3.cs-tile-card-title:hover,
#realm-feed h3.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;
}

#topic-feed h4.cs-tile-card-title:hover,
#realm-feed h4.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;
}

/* --- Consolidated Mobile Styles --- */
@media (max-width: 767px) {

    /* 1. Reset the section padding */
    section#topic-feed,
    section#realm-feed {
        padding-top: 0 !important;
    }

    /* 2. THE GRID: Pull it out to touch the screen edges */
    #topic-feed ul.cs-tile-card-grid,
    #realm-feed ul.cs-tile-card-grid {
        display: flex;
        flex-direction: column;
        width: 100vw !important;
        /* Force to full screen width */
        margin-left: calc(var(--margin-site, 21px) * -1) !important;
        /* Pull left */
        gap: 1.5rem;
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* 3. HERO TILE (Tile 1): Naturally fills the 100vw grid */
    #topic-feed ul.cs-tile-card-grid li:first-child,
    #realm-feed ul.cs-tile-card-grid li:first-child {
        width: 100% !important;
        height: 320px !important;
        border-radius: 0 !important;
        position: relative;
    }

    #topic-feed ul.cs-tile-card-grid li:first-child article,
    #topic-feed ul.cs-tile-card-grid li:first-child img,
    #realm-feed ul.cs-tile-card-grid li:first-child article,
    #realm-feed ul.cs-tile-card-grid li:first-child img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border-radius: 0 !important;
    }

    #topic-feed ul.cs-tile-card-grid li:first-child .cs-tile-card-title,
    #topic-feed ul.cs-tile-card-grid li:first-child .cs-tile-card-title a,
    #realm-feed ul.cs-tile-card-grid li:first-child .cs-tile-card-title,
    #realm-feed ul.cs-tile-card-grid li:first-child .cs-tile-card-title a {
        color: #ffffff !important;
        text-align: left;
        font-weight: 700;
        font-size: 1.3rem;
        margin: 0;
    }

    /* 4. SECONDARY TILES (Tiles 2-4): Just add margin back */
    #topic-feed ul.cs-tile-card-grid li:not(:first-child),
    #realm-feed ul.cs-tile-card-grid li:not(:first-child) {
        margin: 0 1rem !important;
        /* This creates the 'small gap' you want */
        width: auto !important;
        display: block;
    }

    #topic-feed ul.cs-tile-card-grid li:not(:first-child) article,
    #realm-feed ul.cs-tile-card-grid li:not(:first-child) article {
        border-radius: 8px;
        overflow: hidden;
    }
}

#topic-feed a.cs-tile-card-anchor:hover,
#realm-feed a.cs-tile-card-anchor:hover {
    text-decoration: underline 2px var(--topic-accent);
}

#topic-feed .cs-tile-card-details,
#realm-feed .cs-tile-card-details {
    margin-block-end: 0;
    border-radius: 8px;
}

#topic-feed .cs-tile-card-details .tile-card-date,
#topic-feed .cs-tile-card-details .tile-card-byline,
#realm-feed .cs-tile-card-details .tile-card-date,
#realm-feed .cs-tile-card-details .tile-card-byline {
    font-size: 0.8rem;
}

#topic-feed .cs-tile-card-details .tile-card-byline a,
#realm-feed .cs-tile-card-details .tile-card-byline a {
    color: var(--cinesist-red);
    font-weight: 700;
    text-decoration: none;
}

#topic-feed .cs-tile-card-details .tile-card-byline a:hover,
#realm-feed .cs-tile-card-details .tile-card-byline a:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;
}

#topic-feed .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title,
#realm-feed .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.15;
    -webkit-line-clamp: 2;
    margin-bottom: 0;
}

#topic-feed h3.cs-tile-card-title:hover,
#realm-feed h3.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;
}

/* --- Consolidated Mobile Styles --- */
@media (max-width: 767px) {

    /* 1. Make the wrapper a flex column so we can reorder children */
    #topic-feed .cs-wrap,
    #realm-feed .cs-wrap {
        display: flex !important;
        flex-direction: column !important;
    }

    #topic-feed .cs-section-headline,
    #realm-feed .cs-section-headline {
        grid-column: auto;
        font-size: 1.8rem;
        text-align: center;
        width: 100%;
        margin-bottom: 0.5rem;
        row-gap: 1rem;
    }

    #topic-feed .cs-tile-card-tagline,
    #realm-feed .cs-tile-card-tagline {
        text-align: center;
        font-size: 0.9rem;
        opacity: 0.8;
    }

    /* 3. Hide the original anchor in the header on mobile */
    #topic-feed .cs-section-head .cs-tile-card-anchor,
    #realm-feed .cs-section-head .cs-tile-card-anchor {
        display: none !important;
    }

    /* 4. Grid to 1 Column Stack */
    #topic-feed .cs-section-inner,
    #realm-feed .cs-section-inner {
        order: 2;
        /* Grid comes second */
    }

    #topic-feed ul.cs-tile-card-grid,
    #realm-feed ul.cs-tile-card-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        width: 100% !important;
    }

    #topic-feed ul.cs-tile-card-grid li,
    #realm-feed ul.cs-tile-card-grid li {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 5. Style the "Get More Rants" button at the bottom */
    #topic-feed .get-more-mobile-wrap,
    #realm-feed .get-more-mobile-wrap {
        display: flex;
        justify-content: center;
        margin-top: 2.5rem;
        padding: 0 1rem;
    }

    #topic-feed .get-more-mobile-wrap a,
    #realm-feed .get-more-mobile-wrap a {
        display: inline-block;
        padding: 12px 30px;
        background-color: var(--cs-brand);
        color: var(--cs-text-primary);
        text-decoration: none;
        font-weight: bold;
        border-radius: 5px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
}

/*
 -----------------
#Section Topic Header #topic-header
 -----------------
*/

/* --- THE MASTER GRID --- */
.topic-wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  max-width: 1300px;
  margin: 0 auto;
}

/* --- SECTION 1: TOPIC HEADER PLACEMENT --- */

/* Title & Follow: Spans the left 7 columns */
#topic-header .topic-heading {
  grid-column: 1 / 8;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Images: Spans the right 5 columns */
#topic-header .topic-image-container {
  grid-column: 8 / 13;
  position: relative;
}

/* Description: Below the heading, spanning the same 7 columns */
#topic-header .topic-description {
  grid-column: 1 / 8;
  grid-row: 2; /* Forces it below the heading */
}

/* Border: Spans the full 12 columns at the very bottom */
#topic-header .topic-border {
  grid-column: 1 / -1;
  border-bottom: 1px solid #eee;
  padding-top: 24px;
}

/* --- FULL WIDTH BACKGROUNDS --- */
.topic-section {
  width: 100%;
  background: transparent; /* Add colors/images here if needed */
  padding: 32px 0;
}

/*
##################################
Cinesist Realm Styles
##################################
*/

/* Realm/Topic Page Default Background */
main#cs-realm,
main#cs-topic {
    background-color: var(--flex-gray-2);
}

/* --- Universal Elements --- */
/* We make section-header a subgrid element */
#cs-realm .cs-section-header,
#cs-topic .cs-section-header {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 12;
    grid-template-rows: auto auto auto;
    gap: 1rem;
}

/* Section Heading on Left (9 columns) */
#cs-realm .cs-section-headline,
#cs-topic .cs-section-headline {
    display: inline-flex;
    text-align: left;
    grid-column: span 8;
    grid-row: 1;
    grid-row-start: 1;
    margin-bottom: 0;
    gap: 1rem;
    word-spacing: 0.25rem;
    margin-block-end: 0;
    align-items: center;
}

/* Section Meta Snarky Description on Left (8 columns) */
#cs-realm .cs-section-tagline,
#cs-topic .cs-section-tagline {
    grid-column: span 7;
    grid-row: 2;
    text-align: left;
    color: var(--primary-text-color);
    margin-bottom: 0;
    max-height: 100px;
    overflow: hidden;
}

/* Different formatting for Topics */
#cs-topic .cs-section-tagline {
    grid-column: 1 / span 7;
    grid-row: 2;
    text-align: left;
    color: var(--primary-text-color);
    margin-bottom: 0;
    max-height: 100px;
    overflow: hidden;
}

/*
------------
Realm & Topic Header
------------
*/

/* --- Left Side: Title & Tagline (9 Columns) --- */
#realm-header .cs-section-head:not(.image),
#topic-header .cs-section-head:not(.image) {
    grid-column: 1 / 10;
    display: grid;
    flex-direction: column;
    align-items: flex-start;
    /* Keeps text left-aligned */
    justify-content: flex-end;
    padding-bottom: 1rem;
}

/* We add color and effects to the Track icon
to follow topics */
#cs-topic .cs-recruit-wrapper:not(.followed) {
    color: var(--flex-gray-900);
    background-color: rgba(0, 0, 0, 0) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0);
    transition: transform 0.3s ease, filter 0.3s ease, color 0.1s ease;
    transform: translate3d(0, 0, 0) !important;
}

#cs-topic .cs-recruit-wrapper:not(.followed):hover {
    color: var(--topic-accent);
    /* background-color: rgba(0, 0, 0, 0) !important; */
}

.cs-follow-btn:hover, .cs-bookmark-btn:hover {
    filter: brightness(var(--flex-hover-brightness, 1.1));
    transform: translateY(-2px);
    border-color: var(--topic-accent);
}

#cs-topic .cs-follow-btn:hover {
    border-color: color-mix(in srgb, var(--topic-accent), transparent 10%) !important;
    background: none !important;
    transform: translate3d(0, -2px, 0);
    filter: drop-shadow(0px 4px 6px color-mix(in srgb, var(--topic-accent), transparent 10%)) !important;
    box-shadow: none !important;
}

/* Overthrow the strong declares */
#cs-topic .cs-follow-btn:hover {
    border-color: unset !important;
    background: unset !important;
    box-shadow: unset !important;
}

#realm-header h1.topic-snarkline,
#topic-header h1.topic-snarkline {
    margin-bottom: 0;
    word-spacing: 0.25rem;
}

/* --- Right Side: Image Thumbnails (3 Columns) --- */
#realm-header .cs-section-head.image,
#topic-header .cs-section-head.image {
    grid-column: 9 / span 4;
    grid-row: 1 / span 3;
    grid-column-start: 9;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-start;
    align-self: start;
}

#realm-header .cs-section-head.image img,
#topic-header .cs-section-head.image img {
    width: 100%;
    height: 100%;
    min-height: 120px;
    max-height: 265px;
    border-radius: 4px;
    object-fit: cover;
}

/* Realm feature thumbnail shadow glow */
#realm-header .realm-feature-thumbnail,
#topic-header .topic-feature-thumbnail {
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.4s ease;
}

#realm-header .cs-section-head.image:hover .realm-feature-thumbnail {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--cs-brand);
    box-shadow: 0 20px 40px var(--cs-brand-40) !important;
}

/* Topic Colored Border and Shadow Hovers */
#topic-header .topic-feature-thumbnail {
    background-color: var(--topic-accent);
    border: 2px solid var(--topic-accent);
}

#topic-header .cs-section-head.image:hover .topic-feature-thumbnail {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--topic-accent);
    box-shadow: 0 20px 40px color-mix(in srgb, var(--topic-accent), transparent 25%) !important;
}

/* --- Full Width Border --- */
#realm-header .cinesist-border-red,
#realm-header .cinesist-border-brand,
#topic-header .cinesist-border-red,
#topic-header .cinesist-border-brand {
    grid-column: 1 / -1;
    height: 5px;
    width: 100%;
}

#realm-header .cinesist-border-brand,
#topic-header .cinesist-border-brand {
    grid-column: span 8 / span 8;
    grid-row: span 1 / span 1;
    grid-row-start: 3;
    background-blend-mode: screen;
    background-image: linear-gradient(100deg, var(--cs-brand) 35%, var(--cs-brand) 50%, rgba(0, 0, 0, 0) 100%);
}

/* Border needs to be in a different location */
#cs-topic .cs-section-header-border {
    grid-row: 3;
    grid-column: 1 / span 8;
    margin-block: 0;
}

/*
------------
Responsive Mobile Headers
------------
*/

/* =========================================
   3. MOBILE RESPONSIVE OVERRIDES
   ========================================= */
@media (max-width: 768px) {

    /* Stack everything and center for mobile */
    #realm-header .cs-section-head:not(.image),
    #realm-header .cs-section-head.image,
    #topic-header .cs-section-head:not(.image),
    #topic-header .cs-section-head.image {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
    }

    #realm-header .cs-section-headline,
    #realm-header .cs-tile-card-tagline,
    #topic-header .cs-section-headline,
    #topic-header .cs-tile-card-tagline {
        text-align: center;
    }

    #realm-header .cs-section-head.image,
    #topic-header .cs-section-head.image {
        flex-direction: row;
        /* Stack images side-by-side or hide one on mobile */
        justify-content: center;
        margin-top: 1rem;
    }
}

/*
 -----------------
#Section Pinned Topic Posts(hero) #realm-pinned
 -----------------
*/

#realm-pinned .cs-tile-card-pinned,
#topic-pinned .cs-tile-card-pinned {
    display: grid;
    grid-template-columns: subgrid;
    overflow: hidden;
    gap: 1.5rem;
    padding: 0;
    margin: 0;
    grid-column: span 12;
    /* width: 100%; */
}

/* Dissolve Extra Containers */
.cs-tile-card-query.pinned,
.cs-tile-card-query.topic-pinned {
    display: contents;
}
.realm-pinned.grid,
.topic-pinned.grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 12;
    grid-row: span 2;
    list-style: none;
    gap: 1rem;
}

#realm-pinned .cs-tile-card-query.pinned,
#topic-pinned .cs-tile-card-query.pinned {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 12;
    list-style: none;
}

#realm-pinned .cs-tile-card-query.realm-hero-grid,
#topic-pinned .cs-tile-card-query.topic-hero-grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 12;
}

#realm-pinned .cs-hero-grid.grid-loop,
#topic-pinned .cs-hero-grid.grid-loop {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / span 12;
    overflow: hidden;
    /* gap: 1.5rem; */
    padding: 0;
    margin: 0;
    width: 100%;
}

#realm-pinned .cs-hero-grid.grid-loop > li:first-child,
#topic-pinned .cs-hero-grid.grid-loop > li:first-child {
    grid-column: span 6;
    grid-row: span 2;
    height: 100%;
}

#realm-pinned .cs-hero-grid.grid-loop > li:not(:first-child),
#topic-pinned .cs-hero-grid.grid-loop > li:not(:first-child) {
    grid-column: span 1;
    grid-row: span 1;
    height: 100%;
}

#realm-pinned .cs-hero-grid.grid-loop li img,
#topic-pinned .cs-hero-grid.grid-loop li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#realm-pinned .cs-hero-grid.grid-loop .cs-tile-card,
#topic-pinned .cs-hero-grid.grid-loop .cs-tile-card {
    aspect-ratio: auto !important;
    height: 100% !important;
}

/* The Category Feed Cards - Span 3 columns each (4-across layout) */
#realm-pinned .cs-tile-card-item,
#topic-pinned .cs-tile-card-item {
    grid-column: span 3;
    border-radius: var(--round-5);
    transition: transform 0.3s ease;
    overflow: clip;
}

/* Make First Tile Span 6 Columns by 2 Rows */
#realm-pinned .cs-tile-card-item:nth-child(1) {
    grid-column: span 6;
    grid-row: span 2;
    min-height: 524px;
}

#topic-pinned .cs-tile-card-item:nth-child(1) {
    grid-column: span 5;
    grid-row: span 2;
    min-height: 400px;
}

/* Give the Main tile Title h2 Energy */
#realm-pinned .cs-tile-card-item:nth-child(1) h2.cs-tile-card-title,
#topic-pinned .cs-tile-card-item:nth-child(1) h2.cs-tile-card-title {
    font-size: var(--cs-font-size-h2);
    -webkit-line-clamp: 2;
}
/* Give Main Tile a Bigger Underline */
#realm-pinned .cs-tile-card-item:nth-child(1) h2.cs-tile-card-title:hover {
    text-decoration: solid underline var(--cs-brand) 3px;
}

/* Realm Cube Tiles Span 3 columns by 1 row to make
4 equal cubes */
#realm-pinned .cs-tile-card-item:nth-child(n+2) {
    grid-column: span 3;
    grid-row: span 1;
}

#topic-pinned .cs-tile-card-item:nth-child(2) {
    grid-column: span 4;
    grid-row: span 2;
}

#topic-pinned .cs-tile-card-item:nth-child(3) {
    grid-column: span 3;
    grid-row: span 2;
}

/* Making the cubes have smaller titles */
#realm-pinned .cs-tile-card-item:nth-child(n+2) h2.cs-tile-card-title,
#topic-pinned .cs-tile-card-item:nth-child(n+2) h2.cs-tile-card-title {
    font-size: var(--cs-font-size-h4);
    -webkit-line-clamp: 2;
}

#topic-pinned .cs-tile-card-item:nth-child(2) h2.cs-tile-card-title {
    font-size: var(--cs-font-size-h3);
    -webkit-line-clamp: 2;
}

#topic-pinned .cs-tile-card-item:nth-child(3) h2.cs-tile-card-title {
    font-size: var(--cs-font-size-h4);
    -webkit-line-clamp: 2;
}

/* Mobile Responsiveness - Collapse the Grid */
@media (max-width: 992px) {
    #realm-pinned .cs-tile-card-item,
    #topic-pinned .cs-tile-card-item {
        grid-column: span 6;
        /* 2-across on Tablets */
    }
}

@media (max-width: 767px) {
    .cs-grid-12 {
        grid-template-columns: 1fr;
        /* Demotes the 12-columns to 1 single column */
    }

    #realm-pinned ul.cs-tile-card-grid,
    #topic-pinned ul.cs-tile-card-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 400px;
        /* Lock the row height */

        row-gap: 0 !important;
        /* Remove the vertical gap that's causing the mismatch */
        column-gap: 1rem;
        /* Keep the horizontal gap between tiles */

        align-items: stretch;
        /* Forces all tiles to be 400px exactly */
    }

    #realm-pinned ul.cs-tile-card-grid>li,
    #topic-pinned ul.cs-tile-card-grid>li {
        height: 400px;
        margin-bottom: 0;
        /* Remove any bottom margin that might push tiles up */
    }


    /* The Red Border (Full Width) */
    #topic-pinned .cinesist-border-red, 
    #topic-feed .cinesist-border-red
     {
        grid-column: 1 / 13;
        /* Spans all 12 columns */
    }
}

#realm-pinned a.cs-tile-card-anchor:hover,
#topic-pinned a.cs-tile-card-anchor:hover {
    text-decoration: underline 2px var(--cs-brand);
}

#realm-pinned h2.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--cs-brand);
    text-decoration-thickness: 2px;
}

/* Custom Dynamic Link Treatment for Topics */
#topic-pinned h2.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--topic-accent);
    text-decoration-thickness: 2px;   
}

#realm-pinned h3.cs-tile-card-title:hover,
#topic-pinned h3.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--cs-brand);
    text-decoration-thickness: 2px;
}

#realm-pinned h4.cs-tile-card-title:hover,
#topic-pinned h4.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--cs-brand);
    text-decoration-thickness: 2px;
}

/* --- Consolidated Mobile Styles --- */
@media (max-width: 767px) {

    /* 1. Reset the section padding */
    section#realm-pinned,
    section#topic-pinned {
        padding-top: 0 !important;
    }

    /* 2. THE GRID: Pull it out to touch the screen edges */
    #realm-pinned ul.cs-tile-card-grid,
    #topic-pinned ul.cs-tile-card-grid {
        display: flex;
        flex-direction: column;
        width: 100vw !important;
        /* Force to full screen width */
        margin-left: calc(var(--margin-site, 21px) * -1) !important;
        /* Pull left */
        gap: 1.5rem;
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* 3. HERO TILE (Tile 1): Naturally fills the 100vw grid */
    #realm-pinned ul.cs-tile-card-grid li:first-child,
    #topic-pinned ul.cs-tile-card-grid li:first-child {
        width: 100% !important;
        height: 320px !important;
        border-radius: 0 !important;
        position: relative;
    }

    #realm-pinned ul.cs-tile-card-grid li:first-child article,
    #realm-pinned ul.cs-tile-card-grid li:first-child img,
    #topic-pinned ul.cs-tile-card-grid li:first-child article,
    #topic-pinned ul.cs-tile-card-grid li:first-child img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border-radius: 0 !important;
    }

    #realm-pinned ul.cs-tile-card-grid li:first-child .cs-tile-card-title,
    #realm-pinned ul.cs-tile-card-grid li:first-child .cs-tile-card-title a,
    #topic-pinned ul.cs-tile-card-grid li:first-child .cs-tile-card-title,
    #topic-pinned ul.cs-tile-card-grid li:first-child .cs-tile-card-title a {
        color: #ffffff !important;
        text-align: left;
        font-weight: 700;
        font-size: 1.3rem;
        margin: 0;
    }

    /* 4. SECONDARY TILES (Tiles 2-4): Just add margin back */
    #realm-pinned ul.cs-tile-card-grid li:not(:first-child),
    #topic-pinned ul.cs-tile-card-grid li:not(:first-child) {
        margin: 0 1rem !important;
        /* This creates the 'small gap' you want */
        width: auto !important;
        display: block;
    }

    #realm-pinned ul.cs-tile-card-grid li:not(:first-child) article,
    #topic-pinned ul.cs-tile-card-grid li:not(:first-child) article {
        border-radius: 8px;
        overflow: hidden;
    }
}

#realm-pinned .cs-tile-card-details,
#topic-pinned .cs-tile-card-details {
    margin-block-end: 0;
    border-radius: 8px;
}

#realm-pinned .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title,
#topic-pinned .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.15;
    -webkit-line-clamp: 2;
    margin-bottom: 0;
}

/* --- Consolidated Mobile Styles --- */
@media (max-width: 767px) {

    /* 1. Make the wrapper a flex column so we can reorder children */
    #realm-pinned .cs-wrap,
    #topic-pinned .cs-wrap {
        display: flex !important;
        flex-direction: column !important;
    }

    #realm-pinned .cs-section-headline,
    #topic-pinned .cs-section-headline {
        font-size: 1.8rem;
        text-align: center;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    #realm-pinned .cs-tile-card-tagline,
    #topic-pinned .cs-tile-card-tagline {
        text-align: center;
        font-size: 0.9rem;
        opacity: 0.8;
    }

    /* 3. Hide the original anchor in the header on mobile */
    #realm-pinned .cs-section-head .cs-tile-card-anchor,
    #topic-pinned .cs-section-head .cs-tile-card-anchor {
        display: none !important;
    }

    /* 4. Grid to 1 Column Stack */
    #realm-pinned .cs-section-inner,
    #topic-pinned .cs-section-inner {
        order: 2;
        /* Grid comes second */
    }

    #realm-pinned ul.cs-tile-card-grid,
    #topic-pinned ul.cs-tile-card-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        width: 100% !important;
    }

    #realm-pinned ul.cs-tile-card-grid li,
    #topic-pinned ul.cs-tile-card-grid li {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 5. Style the "Get More Rants" button at the bottom */
    #realm-pinned .get-more-mobile-wrap,
    #topic-pinned .get-more-mobile-wrap {
        display: flex;
        justify-content: center;
        margin-top: 2.5rem;
        padding: 0 1rem;
    }

    #realm-pinned .get-more-mobile-wrap a,
    #topic-pinned .get-more-mobile-wrap a {
        display: inline-block;
        padding: 12px 30px;
        background-color: var(--cs-brand);
        color: var(--cs-text-primary);
        text-decoration: none;
        font-weight: bold;
        border-radius: 5px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
}

/*
 -----------------
#Section Realm Rants
#realm-rants,
#Section Topic Rants
#topic-rants
 -----------------
*/

/* We change the padding settings for sections here */
section#cs-realm,
section#cs-topic {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

/* WE change the realm topics section header size */
#cs-realm h2.cs-tile-card-headline,
#cs-topic h2.cs-tile-card-headline {
    font-size: var(--cs-font-size-h3);
    grid-column: 1 / span 8;
}

/* Putting our anchor to the Topics Archive where we want it - Column 11 span 2 column in Row 1 */
#cs-realm a.cs-tile-card-anchor,
#cs-topic a.cs-tile-card-anchor {
    grid-column: 11 / span 2;
}

/* Placing the Topic Section in column 1 span 12 in row 2 */
#cs-realm .cs-section-header-border {
    grid-row: 2;
    grid-column: 1 / span 12;
    margin-block: 0;
}

/* Card Feed needs a separate spot */
#cs-topic .cs-section-header-border.feed {
    grid-row: 2;
    grid-column: 1 / span 12;
    margin-block: 0;
}

/* Our Query Controls - add {topic-name} to Specify the section We are controlling in the Realm */
#cs-realm .cs-tile-card-query.rants {
    display: contents;
    grid-column: 1 / span 12;
    grid-row: 2;
}

/* Need Topic Query to have the no display Messages */
#cs-topic .cs-tile-card-query.rants {
    display: contents;
    grid-column: 1 / span 12;
    grid-row: 2;
}

/* Give the Rants 5 tiles in the section */


/* Make the rant tiles span 2 columns */
#cs-realm .cs-tile-card-item.rants:nth-child(1n),
#cs-topic .cs-tile-card-item.rants:nth-child(1n) {
    grid-column: span 2;
}

/* Our Tile Feed Grid for the sections .feed sets it 
to the spcific section */
.realm-pinned.feed,
.topic-pinned.feed {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 12;
    grid-row: span 1;
    list-style: none;
    gap: 1rem;
}
/* 1. Global Card Enhancements */
.cs-tile-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-2);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. Predictions Play Button Glow and Animations */
.cs-tile-card-play.predictions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 12;
    background: rgba(246, 51, 154, 0.15) !important;
    border: 2px solid rgba(246, 51, 154, 0.6) !important;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 15px rgba(246, 51, 154, 0.3);
}

.cs-tile-card-play.predictions .gb-shape svg {
    color: #ffffff !important;
    width: 24px;
    height: 24px;
    margin-left: 2px; /* Center the play triangle visually */
    transition: all 0.3s ease;
}

.cs-tile-card-item:hover .cs-tile-card-play.predictions {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--cinesist-pink, #f6339a) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 25px var(--cinesist-pink, #f6339a), 0 0 10px rgba(255, 255, 255, 0.5);
}

.tile-card-byline a {
    color: #ffffff;
    font-weight: 700;
}

.cs-tile-card-chat {
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    padding: 2px 8px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.cs-tile-card-comment svg {
    height: 14px !important;
    width: 14px !important;
    margin-right: 3px;
}

/*
------------
Dark Mode Realm/Topic Wrapper
------------
*/

#cs-realm,
#cs-topic {
    min-height: 100vh;
    padding-bottom: 4rem;
}

/* Immersive Dark Mode overrides */
[data-theme="dark"] #cs-realm,
[data-theme="dark"] #cs-topic {
    background-color: var(--flex-gray-2);
}

/* Dark mode breadcrumbs text styling */
[data-theme="dark"] #cs-realm .breadcrumbs-wrapper,
[data-theme="dark"] #cs-realm .writer-header-breadcrumbs,
[data-theme="dark"] #cs-realm .rank-math-breadcrumb,
[data-theme="dark"] #cs-realm .rank-math-breadcrumb a,
[data-theme="dark"] #cs-topic .breadcrumbs-wrapper,
[data-theme="dark"] #cs-topic .writer-header-breadcrumbs,
[data-theme="dark"] #cs-topic .rank-math-breadcrumb,
[data-theme="dark"] #cs-topic .rank-math-breadcrumb a {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] #cs-realm .rank-math-breadcrumb a:hover,
[data-theme="dark"] #cs-topic .rank-math-breadcrumb a:hover {
    color: var(--cs-brand, #8a2be2) !important;
}

/* Dark mode Page Section Headings & Taglines */
[data-theme="dark"] #cs-realm .cs-section-headline,
[data-theme="dark"] #cs-topic .cs-section-headline {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] #cs-realm .cs-section-tagline,
[data-theme="dark"] #cs-topic .cs-section-tagline {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Dark mode Section Title Headlines (Rants, Reviews, News, Predictions) */
[data-theme="dark"] #cs-realm .cs-tile-card-headline,
[data-theme="dark"] #cs-topic .cs-tile-card-headline {
    color: #ffffff !important;
}

[data-theme="dark"] #cs-realm .cs-tile-card-tagline,
[data-theme="dark"] #cs-topic .cs-tile-card-tagline {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Dark mode "Get More" links styling */
[data-theme="dark"] #cs-realm .cs-tile-card-anchor,
[data-theme="dark"] #cs-topic .cs-tile-card-anchor {
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] #cs-realm .cs-tile-card-anchor:hover,
[data-theme="dark"] #cs-topic .cs-tile-card-anchor:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile responsive padding and adjustments */
@media (max-width: 767px) {
    #cs-realm,
    #cs-topic {
        padding-inline: 10px;
    }
}

/*
------------
Hero Grid Typography Override
------------
*/

#realm-pinned .cs-hero-grid.grid-loop > li:first-child .cs-tile-card-title,
#topic-pinned .cs-hero-grid.grid-loop > li:first-child .cs-tile-card-title {
    font-size: 1.75rem !important; /* Reduction of huge 48px GB title */
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

#realm-pinned .cs-hero-grid.grid-loop > li:not(:first-child) .cs-tile-card-title,
#topic-pinned .cs-hero-grid.grid-loop > li:not(:first-child) .cs-tile-card-title {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
}

/*
------------
Rants 5-Column Grid Layout
------------
*/

/* =========================================
   8. Movie Rants 5-Column Grid Layout
   ========================================= */
.cs-rants-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#realm-rants .cs-tile-card-grid,
#topic-rants .cs-tile-card-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
}

#realm-rants .cs-tile-card-grid.rants > .cs-tile-card-item,
#topic-rants .cs-tile-card-grid.rants > .cs-tile-card-item {
    background: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid var(--cinesist-red);
    border-radius: 8px;
}
#realm-rants .cs-tile-card-grid.rants > .cs-tile-card-item:hover,
#topic-rants .cs-tile-card-grid.rants > .cs-tile-card-item:hover {
    transform: translateY(-5px) translateZ(0);
    box-shadow: 10px 10px 20px var(--cinesist-red);
    border: 2px solid var(--cinesist-red);
    border-radius: 8px;
}

@media (min-width: 1025px) {
    #realm-rants ul.cs-tile-card-grid,
    #topic-rants ul.cs-tile-card-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    #realm-rants ul.cs-tile-card-grid,
    #topic-rants ul.cs-tile-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 767px) and (min-width: 480px) {
    #realm-rants ul.cs-tile-card-grid,
    #topic-rants ul.cs-tile-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 479px) {
    #realm-rants ul.cs-tile-card-grid,
    #topic-rants ul.cs-tile-card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Rants Card Styling Override to match Mockup */
#realm-rants article.cs-tile-card,
#topic-rants article.cs-tile-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid var(--cinesist-red);
}

#realm-rants .gb-loop-item .cs-tile-card:hover,
#topic-rants .gb-loop-item .cs-tile-card:hover {
    box-shadow: 0 4px 40px 0 var(--cinesist-red);
}

#realm-rants .cs-tile-card-img,
#topic-rants .cs-tile-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

#realm-rants .cs-tile-card-title,
#topic-rants .cs-tile-card-title {
    margin-bottom: 0;
    font-size: var(--cs-font-size-h4);
    padding-bottom: 0; /* Prevents underline clipping */
    /* overflow: hidden; */
    -webkit-line-clamp: 2 !important;
}

#realm-rants .cs-tile-card-title a,
#topic-rants .cs-tile-card-title a {
    color: #ffffff;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
}

#realm-rants h4.cs-tile-card-title:hover,
#topic-rants h4.cs-tile-card-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--cinesist-red);
    text-decoration-thickness: 2px;
}

#realm-rants .cs-tile-card-meta,
#topic-rants .cs-tile-card-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 0;
}

#realm-rants .tile-card-byline a,
#topic-rants .tile-card-byline a {
    color: var(--cinesist-red);
    font-weight: 700;
    text-decoration: none;
}

#realm-rants .tile-card-byline a:hover,
#topic-rants .tile-card-byline a:hover {
    text-decoration: underline;
}

#realm-rants .tile-card-date,
#topic-rants .tile-card-date {
    margin-left: 8px;
}

#realm-rants .cs-tile-card-chat,
#topic-rants .cs-tile-card-chat {
    margin-left: auto; /* Position chat bubble on the bottom right */
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2px 8px;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
}

#realm-rants .cs-tile-card-chat svg,
#topic-rants .cs-tile-card-chat svg {
    fill: currentColor;
    color: #ffffff;
    width: 11px;
    height: 11px;
    margin-right: 4px;
}

#hp-rants a.cs-tile-card-anchor:hover, 
#realm-rants a.cs-tile-card-anchor:hover,
#topic-rants a.cs-tile-card-anchor:hover {
  text-decoration: underline 2px var(--cinesist-red);
}

#hp-rants .cs-tile-card-details, 
#realm-rants .cs-tile-card-details,
#topic-rants .cs-tile-card-details {
  margin-block-end: 0;
  border-radius: 8px;
}

#hp-rants .cs-tile-card-details .tile-card-date, 
#realm-rants .cs-tile-card-details .tile-card-date,
#hp-rants .cs-tile-card-details .tile-card-byline,
#realm-rants .cs-tile-card-details .tile-card-byline,
#topic-rants .cs-tile-card-details .tile-card-date,
#topic-rants .cs-tile-card-details .tile-card-byline {
  font-size: 0.8rem;
}

#hp-rants .cs-tile-card-details .tile-card-byline a,
#realm-rants .cs-tile-card-details .tile-card-byline a,
#topic-rants .cs-tile-card-details .tile-card-byline a {
  color: var(--cinesist-red);
  font-weight: 700;
  text-decoration: none;
}

#hp-rants .cs-tile-card-details .tile-card-byline a:hover, 
#realm-rants .cs-tile-card-details .tile-card-byline a:hover,
#topic-rants .cs-tile-card-details .tile-card-byline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--cinesist-red);
  text-decoration-thickness: 2px;
}

/* 6 Tile Grid */
#hp-rants ul.cs-tile-card-grid,
#realm-rants ul.cs-tile-card-grid,
#topic-rants ul.cs-tile-card-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: none;
  gap: 1rem;
}

#hp-rants ul.cs-tile-card-grid li:nth-child(1) {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

#hp-rants ul.cs-tile-card-grid li:nth-child(2) {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}

#hp-rants ul.cs-tile-card-grid li:nth-child(3) {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}

#hp-rants ul.cs-tile-card-grid li:nth-child(4) {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
}

#hp-rants .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  margin-bottom: 0;
}

#hp-rants h3.cs-tile-card-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--cinesist-red);
  text-decoration-thickness: 2px;
}
/*
------------
Consolidated Mobile Styles
------------
*/

@media (max-width: 767px) {

  /* 1. Make the wrapper a flex column so we can reorder children */
  #hp-rants .cs-wrap, 
  #realm-rants .cs-wrap,
  #topic-rants .cs-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. Header Styling */
  #hp-rants .cs-section-header,
  #realm-rants .cs-section-header,
  #topic-rants .cs-section-header {
    margin-bottom: 2rem;
    padding: 0 1rem;
    order: 1;
    /* Keep title at top */
  }

  #hp-rants .cs-tile-card-headline,
  #realm-rants .cs-tile-card-headline,
  #topic-rants .cs-tile-card-headline {
    font-size: 1.8rem;
    text-align: center;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  #hp-rants .cs-tile-card-tagline,
  #realm-rants .cs-tile-card-tagline,
  #topic-rants .cs-tile-card-tagline {
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.8;
  }

  /* 3. Hide the original anchor in the header on mobile */
  #hp-rants .cs-section-head .cs-tile-card-anchor,
  #realm-rants .cs-section-head .cs-tile-card-anchor,
  #topic-rants .cs-section-head .cs-tile-card-anchor {
    display: none !important;
  }

  /* 4. Grid to 1 Column Stack */
  #hp-rants .cs-section-inner,
  #realm-rants .cs-section-inner,
  #topic-rants .cs-section-inner {
    order: 2;
    /* Grid comes second */
  }

  #hp-rants ul.cs-tile-card-grid,
  #realm-rants ul.cs-tile-card-grid,
  #topic-rants ul.cs-tile-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
    width: 100% !important;
  }

  #hp-rants ul.cs-tile-card-grid li,
  #realm-rants ul.cs-tile-card-grid li,
  #topic-rants ul.cs-tile-card-grid li {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 5. Style the "Get More Rants" button at the bottom */
  #hp-rants .get-more-mobile-wrap,
  #realm-rants .get-more-mobile-wrap,
  #topic-rants .get-more-mobile-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
    padding: 0 1rem;
  }

  #hp-rants .get-more-mobile-wrap a,
  #realm-rants .get-more-mobile-wrap a,
  #topic-rants .get-more-mobile-wrap a {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--cs-brand);
    color: var(--cs-text-primary);
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
}

/*
------------
ARCHIVE & REALM HUB PILLAR OVERVIEW GRIDS (archive.css)
400px track definitions with multi-post overflow.
------------
*/

/* *Inner Section Container* cs-section > cs-wrap > cs-section-inner */
.cs-section-inner.cs-tile-card-feed.realm,
.cs-section-inner.cs-tile-card-feed.topic {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
}

/* GenerateBlocks Query Container - Hero Grid */
.cs-tile-card-query.realm,
.cs-tile-card-query.topic {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1/-1;
}

/* GenerateBlocks Looper Container - The Card Grid Tiles */
.cs-tile-card-grid.realm-hero,
.cs-tile-card-grid.topic-hero {
    display: grid;
  /* width: 100%; */
  grid-template-columns: subgrid;
  grid-column: 1/-1;
  /* grid-template-rows: auto auto; */
  gap: 24px;
}

/* Apply Style to 1st Tile in this use-case its 6 columns by 2 rows
Front Page Hero - Large Tile */
/* Front Page Hero - Large Tile */
.cs-tile-card-grid.realm-hero :nth-child(1),
.cs-tile-card-grid.topic-hero :nth-child(1) {
    grid-column: 1 / span 6;
    grid-row: 1 / span 2;
}

/* Front Page Hero - Tower Column Tile its 3 columns by 2 rows */
.cs-tile-card-grid.realm-hero :nth-child(2),
.cs-tile-card-grid.topic-hero :nth-child(2) {
    grid-column: 7 / span 3;
    grid-row: 1 / span 2;
}

/* Remaining 2 Tiles span a single row and are 3 columns each */
.cs-tile-card-grid.realm-hero :nth-child(3),
.cs-tile-card-grid.topic-hero :nth-child(3) {
    grid-column: 10 / span 3;
    grid-row: 1 / span 1;
}

.cs-tile-card-grid.realm-hero :nth-child(4),
.cs-tile-card-grid.topic-hero :nth-child(4) {
    grid-column: 10 / span 3;
    grid-row: 2 / span 1;
}

/*
------------
CATEGORY ARCHIVES ARCHITECTURE (#topic-pinned)
1 Large Feature, 2 Secondary Stacked Sidebar Columns. Target: 400px
------------
*/

#topic-pinned .gb-query-loop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 190px x 2 Rows + 20px CSS Gap = Precisely your 400px Target Height Limit */
    grid-auto-rows: 190px;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    max-width: 1300px;
}

@media (min-width: 1024px) {
    #topic-pinned .gb-query-loop > .gb-element-looper-item:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }
    #topic-pinned .gb-query-loop > .gb-element-looper-item:nth-child(2) {
        grid-column: 3 / span 1;
        grid-row: 1 / span 1;
    }
    #topic-pinned .gb-query-loop > .gb-element-looper-item:nth-child(3) {
        grid-column: 3 / span 1;
        grid-row: 2 / span 1;
    }
    /* Dynamic Category Overflow */
    #topic-pinned .gb-query-loop > .gb-element-looper-item:nth-child(n+4) {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/*
------------
MASTER REALM HUB PILLARS OVERVIEW (#realm-pinned)
1 Large Left Highlight Panel, 4 Right Tight Structural Tracks. Target: 400px.
------------
*/

#realm-pinned .gb-query-loop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 85px x 4 Rows + (20px gap x 3) = Precisely your 400px Target Height Limit */
    grid-auto-rows: 85px;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    max-width: 1300px;
}

@media (min-width: 1024px) {
    #realm-pinned .gb-query-loop > .gb-element-looper-item:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1 / span 4;
    }
    #realm-pinned .gb-query-loop > .gb-element-looper-item:nth-child(2) { grid-column: 3 / span 1; grid-row: 1 / span 1; }
    #realm-pinned .gb-query-loop > .gb-element-looper-item:nth-child(3) { grid-column: 3 / span 1; grid-row: 2 / span 1; }
    #realm-pinned .gb-query-loop > .gb-element-looper-item:nth-child(4) { grid-column: 3 / span 1; grid-row: 3 / span 1; }
    #realm-pinned .gb-query-loop > .gb-element-looper-item:nth-child(5) { grid-column: 3 / span 1; grid-row: 4 / span 1; }
    
    /* Dynamic Realm Hub Overflow: Drops beneath the master feature cluster cleanly */
    #realm-pinned .gb-query-loop > .gb-element-looper-item:nth-child(n+6) {
        grid-column: span 1;
        grid-row: span 2; /* Automatically populates clean 190px secondary rows below */
    }
}

/*
------------
Feed Archive Tiles 5 in a row.
------------
*/

#topic-feed .gb-query-loop,
#realm-rants .gb-query-loop,
#realm-reviews .gb-query-loop,
#realm-predictions .gb-query-loop,
#realm-news .gb-query-loop,
#realm-rumors .gb-query-loop,
#topic-news .gb-query-loop,
#topic-reviews .gb-query-loop,
#topic-rumors .gb-query-loop,
#topic-predictions .gb-query-loop,
#topic-rants .gb-query-loop {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    max-width: 1300px;
}

@media (min-width: 1024px) {
    #topic-feed .gb-query-loop > .gb-element-looper-item,
    #realm-rants .gb-query-loop > .gb-element-looper-item,
    #realm-reviews .gb-query-loop > .gb-element-looper-item,
    #realm-predictions .gb-query-loop > .gb-element-looper-item,
    #realm-news .gb-query-loop > .gb-element-looper-item,
    #realm-rumors .gb-query-loop > .gb-element-looper-item,
    #topic-news .gb-query-loop > .gb-element-looper-item,
    #topic-reviews .gb-query-loop > .gb-element-looper-item,
    #topic-rumors .gb-query-loop > .gb-element-looper-item,
    #topic-predictions .gb-query-loop > .gb-element-looper-item,
    #topic-rants .gb-query-loop > .gb-element-looper-item {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/*
------------
Responsive Matrix Deployment Core
------------
*/

@media (max-width: 1023px) {
    #hp-hero .gb-query-loop,
    #realm-pinned .gb-query-loop,
    #topic-pinned .gb-query-loop {
        grid-template-columns: 1fr;
        grid-auto-rows: 280px;
    }
    
    #hp-hero .gb-query-loop > .gb-element-looper-item,
    #realm-pinned .gb-query-loop > .gb-element-looper-item,
    #topic-pinned .gb-query-loop > .gb-element-looper-item {
        grid-column: span 1;
        grid-row: span 1;
    }

    #topic-feed .gb-query-loop,
    #realm-rants .gb-query-loop,
    #realm-reviews .gb-query-loop,
    #realm-predictions .gb-query-loop,
    #realm-news .gb-query-loop,
    #realm-rumors .gb-query-loop,
    #topic-news .gb-query-loop,
    #topic-reviews .gb-query-loop,
    #topic-rumors .gb-query-loop,
    #topic-predictions .gb-query-loop,
    #topic-rants .gb-query-loop {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    #topic-feed .gb-query-loop,
    #realm-rants .gb-query-loop,
    #realm-reviews .gb-query-loop,
    #realm-predictions .gb-query-loop,
    #realm-news .gb-query-loop,
    #realm-rumors .gb-query-loop,
    #topic-news .gb-query-loop,
    #topic-reviews .gb-query-loop,
    #topic-rumors .gb-query-loop,
    #topic-predictions .gb-query-loop,
    #topic-rants .gb-query-loop {
        grid-template-columns: 1fr;
    }
}

/*
------------
#realm-reviews The Realms Review Section,
#topic-reviews The Topic Review Section 
------------
*/

/* The Reviews Grid for #realm-reviews #topic-reviews */
#realm-reviews .cs-tile-card-grid,
#topic-reviews .cs-tile-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(240px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    width: 100%;
}

/* Make the cards taller than normal cards
with Aspect Ratio 2/3 */
#realm-reviews article.cs-tile-card.reviews,
#topic-reviews article.cs-tile-card.reviews {
    aspect-ratio: 2 / 3;
    position: relative;
    border-radius: var(--border-radius-2) !important;
}

/* Uniform the titles */
#realm-reviews .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title,
#topic-reviews .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title {
    font-size: var(--cs-font-size-h4);
    font-weight: 900;
    line-height: 1.15;
    -webkit-line-clamp: 2;
}
/* Make those Titles have a gold underline */
#realm-reviews h4.cs-tile-card-title a:hover,
#topic-reviews h4.cs-tile-card-title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--tier-color);
    text-decoration-thickness: 2px;
}

/* Uniform our Tile Card Meta */
#realm-reviews .cs-tile-card-meta,
#topic-reviews .cs-tile-card-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 0;
}

/* We need to shrink the font for the details and byline */
#realm-reviews .cs-tile-card-details .tile-card-byline, #realm-reviews .cs-tile-card-details .tile-card-date,
#topic-reviews .cs-tile-card-details .tile-card-byline, #topic-reviews .cs-tile-card-details .tile-card-date {
font-size: 0.8rem;
}

/* Decorate the Writer Link */
 #realm-reviews .cs-tile-card-details .tile-card-byline a,
 #topic-reviews .cs-tile-card-details .tile-card-byline a {
    color: var(--cinesist-gold);
    font-weight: 700;
    text-decoration: none;
}
/* Now We underline it on hover */
#realm-reviews .cs-tile-card-details .tile-card-byline a:hover,
#topic-reviews .cs-tile-card-details .tile-card-byline a:hover {
     --decoration-type: underline;
     text-decoration: var(--decoration-type);
     --decoration-color: var(--cinesist-gold);
     text-decoration-color: var(--decoration-color);
     --underline-thickness: 2px;
     text-decoration-thickness: var(--underline-thickness);
     --underline-offset: 3px;
     text-underline-offset: var(--underline-offset);
}

/* Cinescore Style on Tiles */
#realm-reviews .cs-tile-card-item .cinescore-value,
#topic-reviews .cs-tile-card-item .cinescore-value {
    color: var(--wp--preset--color--custom-frost-white,#fafafa);
    color: var(--tier-color);
    font-size: 2rem;
    font-weight: 600;
    z-index: 10;
    position: absolute;
    left: 10px;
    top: 0px;
}

/*
 -----------------
#Section Realm Predictions,
#Section Topic Predictions
#realm-predictions,
#topic-predictions
 -----------------
*/

#realm-predictions a.cs-tile-card-anchor.predictions,
#topic-predictions a.cs-tile-card-anchor.predictions {
    grid-column: 11 / span 2;
}

/* Give our Video Tiles 16/9 Ratio for unique appeal */
#realm-predictions img.cs-tile-card-img,
#topic-predictions img.cs-tile-card-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    display: block;
}

/* Here we make the tiles 4 tile grid */
#realm-predictions .cs-tile-card-grid,
#topic-predictions .cs-tile-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* A little personalization to Arkahna's Titles */
#realm-predictions .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title, #realm-predictions .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a,
#topic-predictions .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title, #topic-predictions .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a {
    font-size: var(--cs-font-size-h4);
    font-weight: 700;
    line-height: 1.15;
    -webkit-line-clamp: 2;
}

/* Link Treatments */
#realm-predictions .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title:hover, #realm-predictions .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a:hover,
#topic-predictions .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title:hover, #topic-predictions .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a:hover {
    --decoration-type: underline;
    text-decoration: var(--decoration-type);
    --decoration-color: var(--cinesist-pink);
    text-decoration-color: var(--decoration-color);
    --underline-thickness: 2px;
    text-decoration-thickness: var(
    --underline-thickness);
    --underline-offset: 3px;
    text-underline-offset: var(
    --underline-offset);
}

#realm-predictions .cs-tile-card-details .tile-card-byline a:hover,
#topic-predictions .cs-tile-card-details .tile-card-byline a:hover {
    --decoration-type: underline;
    text-decoration: var(--decoration-type);
    --decoration-color: var(--cinesist-pink);
    text-decoration-color: var(--decoration-color);
    --underline-thickness: 2px;
    text-decoration-thickness: var(--underline-thickness);
    --underline-offset: 2px;
    text-underline-offset: var(--underline-offset);
}

#realm-predictions .cs-tile-card-details .tile-card-byline a,
#topic-predictions .cs-tile-card-details .tile-card-byline a {
    color: var(--cinesist-pink);
    font-weight: 700;
    text-decoration: none;
}

/*
 -----------------
#Section Realm News,
#Section Topic News
#realm-news,
#topic-news
 -----------------
*/

/* Give our News Tiles 1/1 Ratio to jam content */
#realm-news img.cs-tile-card-img,
#topic-news img.cs-tile-card-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    display: block;
}

/* Here we make the tiles 5 tile grid */
#realm-news .cs-tile-card-grid,
#topic-news .cs-tile-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* A little personalization to Cinefox's Titles */
#realm-news .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title, #realm-news .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a,
#topic-news .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title, #topic-news .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a {
    font-size: var(--cs-font-size-h4);
    font-weight: 700;
    line-height: 1.15;
    -webkit-line-clamp: 2;
}

/* Link Treatments */
#realm-news .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title:hover, #realm-news .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a:hover,
#topic-news .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title:hover, #topic-news .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a:hover {
    --decoration-type: underline;
    text-decoration: var(--decoration-type);
    --decoration-color: var(--cinesist-cyan);
    text-decoration-color: var(--decoration-color);
    --underline-thickness: 2px;
    text-decoration-thickness: var(
    --underline-thickness);
    --underline-offset: 3px;
    text-underline-offset: var(
    --underline-offset);
}

#realm-news .cs-tile-card-details .tile-card-byline a:hover,
#topic-news .cs-tile-card-details .tile-card-byline a:hover {
    --decoration-type: underline;
    text-decoration: var(--decoration-type);
    --decoration-color: var(--cinesist-cyan);
    text-decoration-color: var(--decoration-color);
    --underline-thickness: 2px;
    text-decoration-thickness: var(--underline-thickness);
    --underline-offset: 2px;
    text-underline-offset: var(--underline-offset);
}

#realm-news .cs-tile-card-details .tile-card-byline a,
#topic-news .cs-tile-card-details .tile-card-byline a {
    color: var(--cinesist-cyan);
    font-weight: 700;
    text-decoration: none;
}

/*
 -----------------
#Section Realm Rumors,
#Section Topic Rumors
#realm-rumors,
#topic-rumors
 -----------------
*/

#realm-rumors a.cs-tile-card-anchor.predictions,
#topic-rumors a.cs-tile-card-anchor.predictions {
    grid-column: 11 / span 2;
}

/* Give our Video Tiles 16/9 Ratio for unique appeal */
/* Make the cards taller than normal cards
with Aspect Ratio 2/3 */
#realm-rumors article.cs-tile-card.rumors,
#topic-rumors article.cs-tile-card.rumors {
    aspect-ratio: 2 / 3;
    position: relative;
    border-radius: var(--border-radius-2) !important;
}

/* Here we make the tiles 4 tile grid */
#realm-rumors .cs-tile-card-grid,
#topic-rumors .cs-tile-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(240px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* A little personalization to Arkahna's Titles */
#realm-rumors .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title, #realm-rumors .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a,
#topic-rumors .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title, #topic-rumors .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a {
    font-size: var(--cs-font-size-h4);
    font-weight: 700;
    line-height: 1.15;
    -webkit-line-clamp: 2;
}

/* Link Treatments */
#realm-rumors .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title:hover, #realm-rumors .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a:hover,
#topic-rumors .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title:hover, #topic-rumors .cs-tile-card-grid > .cs-tile-card-item .cs-tile-card-title a:hover {
    --decoration-type: underline;
    text-decoration: var(--decoration-type);
    --decoration-color: var(--cinesist-pink);
    text-decoration-color: var(--decoration-color);
    --underline-thickness: 2px;
    text-decoration-thickness: var(
    --underline-thickness);
    --underline-offset: 3px;
    text-underline-offset: var(
    --underline-offset);
}

#realm-rumors .cs-tile-card-details .tile-card-byline a:hover,
#topic-rumors .cs-tile-card-details .tile-card-byline a:hover {
    --decoration-type: underline;
    text-decoration: var(--decoration-type);
    --decoration-color: var(--cinesist-pink);
    text-decoration-color: var(--decoration-color);
    --underline-thickness: 2px;
    text-decoration-thickness: var(--underline-thickness);
    --underline-offset: 2px;
    text-underline-offset: var(--underline-offset);
}

#realm-rumors .cs-tile-card-details .tile-card-byline a,
#topic-rumors .cs-tile-card-details .tile-card-byline a {
    color: var(--cinesist-pink);
    font-weight: 700;
    text-decoration: none;
}