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

.single-page{

    width:100%;

    padding:40px 0 80px;
}

.single-container{

    width:1172px;

    margin:0 auto;
}


/*====================================================
ARTICLE HEADER
====================================================*/

.single-header{

    width:1140px;

    margin:0 auto 24px;

    padding:0;
}


/*====================================================
BREADCRUMB
====================================================*/

.single-breadcrumb{

    width:1140px;

    display:flex;

    align-items:center;

    gap:4px;

    margin:0;

    padding:0;

    font-family:"Poppins",sans-serif;

    font-size:12px;

    font-weight:500;
}

.single-breadcrumb a{

    color:#666;

    text-decoration:none;
}

.single-breadcrumb a:hover{

    color:#dd111a;
}

.breadcrumb-separator{

    display:inline-flex;

    align-items:center;

    color:#999;

    font-size:14px;

    font-weight:600;

    line-height:1;
}


/*====================================================
TITLE
====================================================*/

.single-title{

    width:1140px;

    display:block;

    margin:20px 0 36px;

    min-height:auto;

    font-family:"Poppins",sans-serif;

    font-size:48px;

    font-weight:800;

    line-height:1.2;

    color:#111;
}

.single-subtitle{

    width:1140px;

    margin:-10px 0 19px;

    color:#555;

    font:400 14.6px/1.5 "Poppins",sans-serif;
}


/*====================================================
META
====================================================*/

.single-meta{

    width:1140px;

    min-height:40px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.single-meta-left{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:4px;
}

.single-author{

    display:flex;

    align-items:center;

    gap:6px;
}

.meta-label{

    color:#999;

    font:600 9px "Poppins",sans-serif;

    text-transform:uppercase;

    letter-spacing:.5px;
}

.single-author a{

    color:#111;

    text-decoration:none;

    font:700 12px "Poppins",sans-serif;

    text-transform:uppercase;

    letter-spacing:.4px;
}

.single-author a:hover{

    color:#dd111a;
}

.single-date{

    color:#666;

    font:500 12px "Poppins",sans-serif;
}


/*====================================================
TOP SHARE
====================================================*/

.hh24-share{

    width:300px;

    height:40px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:20px;
}

.hh24-share-btn{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #111;

    border-radius:50%;

    background:#fff;

    text-decoration:none;

    transition:.25s;
}

.hh24-share-btn i{

    font-size:21px;

    line-height:1;
}

.hh24-facebook{

    color:#3c5a9a;
}

.hh24-x{

    color:#111;
}

.hh24-reddit{

    color:#ff4500;
}

.hh24-copy{

    color:#222;
}

.hh24-comments{

    color:#222;
}

.hh24-facebook:hover{

    background:#3c5a9a;

    border-color:#3c5a9a;

    color:#fff;
}

.hh24-x:hover{

    background:#111;

    border-color:#111;

    color:#fff;
}

.hh24-reddit:hover{

    background:#ff4500;

    border-color:#ff4500;

    color:#fff;
}

.hh24-copy:hover,

.hh24-comments:hover{

    background:#222;

    border-color:#222;

    color:#fff;
}

/*====================================================
LAYOUT
====================================================*/

.single-layout{

    width:1172px;

    display:grid;

    grid-template-columns:824px 326px;
    

    column-gap:22px;

    align-items:start;
}

.single-content{

    width:824px;
}

.single-sidebar{

    width:300px;

    position:sticky;

    top:95px;
}


/*====================================================
FEATURED IMAGE
====================================================*/

/*====================================================
FEATURED IMAGE
====================================================*/

.single-featured-image{

    position:relative;

    isolation:isolate;

    width:824px;

    height:480px;

    overflow:hidden;

    margin-bottom:12px;

    background:#111;
}

.single-featured-image img{

    width:824px;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .35s ease;
}

.single-featured-image:hover img{

    transform:scale(1.02);
}


/*====================================================
IMAGE CAPTION
====================================================*/

.single-image-caption{

    width:824px;

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:32px;

    color:#777;

    font:500 12px "Poppins",sans-serif;

    line-height:16px;
}

.caption-camera-icon{

    width:14px;

    height:12px;

    flex-shrink:0;
}


/*====================================================
POST BODY
====================================================*/

.single-post-body{

    width:824px;

    display:grid;

    grid-template-columns:40px 752px;

    column-gap:32px;

    align-items:start;
}


/*====================================================
STICKY SHARE
====================================================*/

.hh24-share-sticky{

    width:40px;

    display:flex;

    flex-direction:column;

    gap:16px;

    position:sticky;

    top:120px;
}


/*====================================================
ARTICLE
====================================================*/

.single-article-content{

    width:752px;

    color:#111;

    font-family:"Lora",serif;

    font-size:19px;

    line-height:1.8;
}

.single-article-content p{

    margin:0 0 28px;
}

/* Article links use the 24Hip-Hop theme red without affecting buttons. */
.single-article-body a:not(.wp-block-button__link):not(.wp-element-button),
.single-article-body a:not(.wp-block-button__link):not(.wp-element-button):visited{

    color:#da3437;
}

.single-article-body a:not(.wp-block-button__link):not(.wp-element-button):hover,
.single-article-body a:not(.wp-block-button__link):not(.wp-element-button):focus{

    color:#b52a2d;
}

.single-article-content h1,
.single-article-content h2,
.single-article-content h3,
.single-article-content h4,
.single-article-content h5,
.single-article-content h6{

    font-family:"Poppins",sans-serif;

    color:#111;

    font-weight:700;
}

.single-article-content h2{

    margin:50px 0 20px;

    font-size:34px;
}

.single-article-content h3{

    margin:40px 0 18px;

    font-size:28px;
}

.single-article-content img{

    max-width:100%;

    height:auto;
}

/* Center every image placed inside the article body, including legacy and block-editor images. */
.single-article-body img,
.single-article-body .alignleft,
.single-article-body .alignright,
.single-article-body .aligncenter{

    display:block;

    float:none;

    margin-left:auto !important;

    margin-right:auto !important;
}

.single-article-body figure,
.single-article-body .wp-block-image,
.single-article-body .wp-caption{

    margin-left:auto !important;

    margin-right:auto !important;

    text-align:center;
}

.single-article-body a > img{

    display:block;

    margin-left:auto;

    margin-right:auto;
}

.single-article-content ul,
.single-article-content ol{

    margin:0 0 28px 30px;
}

.single-article-content blockquote{

    margin:40px 0;

    padding-left:24px;

    border-left:4px solid #dd111a;

    font:italic 24px "Lora",serif;
}

/*====================================================
24HIPHOP SHARE
====================================================*/

.hh24-facebook{

    color:#3c5a9a;
}

.hh24-facebook:hover{

    background:#3c5a9a;

    border-color:#3c5a9a;
}

.hh24-facebook:hover i{

    color:#fff;
}

.hh24-x{

    color:#111;
}

.hh24-x:hover{

    background:#111;

    border-color:#111;
}

.hh24-x:hover i{

    color:#fff;
}

.hh24-reddit{

    color:#ff4500;
}

.hh24-reddit:hover{

    background:#ff4500;

    border-color:#ff4500;
}

.hh24-reddit:hover i{

    color:#fff;
}

.hh24-copy,
.hh24-comments{

    color:#222;
}

.hh24-copy:hover,
.hh24-comments:hover{

    background:#222;

    border-color:#222;
}

.hh24-copy:hover i,
.hh24-comments:hover i{

    color:#fff;
}


/*====================================================
SIDEBAR
====================================================*/

.single-sidebar .trending-item{

    display:grid;

    grid-template-columns:130px 1fr;

    column-gap:12px;

    align-items:start;

    padding:6px;

    margin-top:15px;

    margin-bottom:4px;

    border-bottom:1px solid rgba(0,0,0,.06);
}

.single-sidebar .trend-info{

    order:2;

    width:auto;
}

.single-sidebar .trend-info h4{

    width:auto;

    margin:0;
}

.single-sidebar .trend-thumb{

    order:1;

    width:130px;

    height:90px;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.single-sidebar .trend-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .3s ease;
}

.single-sidebar .trending-item:hover .trend-thumb img{

    transform:scale(1.04);
}

/* Hide the ranking number */

.single-sidebar .trend-number,
.single-sidebar .trending-number,
.single-sidebar .trend-rank{

    display:none;
}


/*====================================================
POST FOOTER
====================================================*/

.hh24-post-footer{

    width:752px;

    margin-top:48px;
}


/*====================================================
TAGS
====================================================*/

.hh24-tags{

    width:752px;

    display:grid;

    grid-template-columns:45px 695px;

    column-gap:16px;

    align-items:start;

    margin-bottom:10px;
}

.hh24-tags-title{

    font-family:"Poppins",sans-serif;

    font-size:18px;

    font-weight:700;

    line-height:28px;

    color:#111;
}

.hh24-tags-list{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:4px;
}

.hh24-tags-list a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:21px;

    padding:4px 6px 0;

    background:#efefef;

    color:#444;

    font-family:"Poppins",sans-serif;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    text-decoration:none;
}


/*====================================================
AUTHOR
====================================================*/

.hh24-author-box{

    width:752px;

    margin-top:24px;

    padding-top:24px;

    border-top:1px solid #ececec;
}

.hh24-author-heading{

    margin-bottom:18px;

    font:700 18px "Poppins",sans-serif;
}

.hh24-author-content{

    width:720px;

    margin-left:32px;
}

.hh24-author-name{

    margin-bottom:10px;

    font:700 12px "Poppins",sans-serif;
}

.hh24-author-description{

    width:720px;

    color:#555;

    font:400 14px/21px "Poppins",sans-serif;
}


/*====================================================
RECOMMENDED
====================================================*/

.hh24-recommended{

    width:752px;

    margin-top:48px;
}

.hh24-recommended-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:50px;

    border-top:1px solid #111;

    border-bottom:1px solid #111;

    margin-bottom:26px;
}

.hh24-recommended-header span{

    font:700 24px "Poppins",sans-serif;

    text-transform:uppercase;
}

.hh24-recommended-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:28px 38px;
}

.hh24-rec-card{

    display:flex;

    gap:20px;
}

.hh24-rec-thumb{

    width:190px;

    height:106px;

    overflow:hidden;

    flex-shrink:0;
}

.hh24-rec-thumb img{

    width:190px;

    height:106px;

    object-fit:cover;
}

.hh24-rec-content{

    flex:1;
}

.hh24-rec-category{

    margin-bottom:8px;

    color:#dd111a;

    font:400 14px "Poppins",sans-serif;

    text-transform:uppercase;
}

.hh24-rec-content h3{

    margin:0 0 10px;

    font:700 14px/20px "Poppins",sans-serif;
}

.hh24-rec-content h3 a{

    color:#111;

    text-decoration:none;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;
}

.hh24-rec-content h3 a:hover{

    color:#dd111a;
}

.hh24-rec-date{

    color:#777;

    font:italic 12px "Poppins",sans-serif;
}


/*====================================================
SQUARE FEATURED IMAGE BACKDROP + REVIEW BOX
====================================================*/

.single-featured-image{
    position:relative;
    isolation:isolate;
    background:#111;
}

.single-featured-image--contain::before{
    content:"";
    position:absolute;
    inset:-32px;
    z-index:-2;
    background-image:var(--single-featured-bg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    filter:blur(26px);
    transform:scale(1.12);
    opacity:.78;
}

.single-featured-image--contain::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:rgba(0,0,0,.18);
}

.single-featured-image--contain > img{
    position:relative;
    z-index:1;
    object-fit:contain;
    object-position:center;
}

.single-featured-image--contain:hover > img{
    transform:none;
}

.single-review-box{
    position:absolute;
    right:30px;
    bottom:30px;
    z-index:5;
    min-width:262px;
    padding:13px 17px 12px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(10px) saturate(1.08);
    -webkit-backdrop-filter:blur(10px) saturate(1.08);
    border:1px solid rgba(255,255,255,.46);
    border-radius:4px;
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    box-sizing:border-box;
}

.single-review-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.single-review-stars{
    display:flex;
    align-items:center;
    gap:1px;
    white-space:nowrap;
}

.single-review-star{
    color:#d5d9df;
    font-size:27px;
    line-height:1;
}

.single-review-star.is-filled:nth-child(1){ color:#ffb000; }
.single-review-star.is-filled:nth-child(2){ color:#ff9100; }
.single-review-star.is-filled:nth-child(3){ color:#ff7200; }
.single-review-star.is-filled:nth-child(4){ color:#ff5200; }
.single-review-star.is-filled:nth-child(5){ color:#ff3b00; }

.single-review-score{
    color:#050505;
    font:800 13px/1.2 "Poppins",sans-serif;
    white-space:nowrap;
}

.single-review-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:9px;
    position:relative;
}

.single-review-count{
    display:block;
    color:#050505;
    font:800 12px/1.2 "Poppins",sans-serif;
}

.single-review-actions{
    position:relative;
    flex-shrink:0;
}

.hh24-review-toggle{
    min-width:70px;
    height:24px;
    padding:0 12px;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg, #111827 0%, #29364d 100%);
    color:#fff;
    font:700 10px/1 "Poppins",sans-serif;
    letter-spacing:.12em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 6px 12px rgba(17,24,39,.12);
    transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.hh24-review-toggle:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 14px rgba(17,24,39,.16);
}

.hh24-review-widget[data-reviewed="1"] .hh24-review-toggle,
.hh24-review-toggle[data-reviewed="1"]{
    background:linear-gradient(135deg, #1f7a52 0%, #2aa36f 100%);
}

.hh24-review-picker{
    position:absolute;
    right:0;
    top:auto;
    bottom:calc(100% + 38px);
    z-index:10;
    width:172px;
    padding:7px;
    border:1px solid #ececec;
    border-radius:10px;
    background:#fff;
    box-shadow:0 12px 24px rgba(0,0,0,.10);
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:5px;
}

.hh24-review-picker[hidden],
.hh24-review-picker.is-reviewed{
    display:none !important;
}

.hh24-review-option{
    height:30px;
    border:1px solid #ececec;
    border-radius:8px;
    background:#fff;
    color:#111;
    font:700 11px/1 "Poppins",sans-serif;
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease, transform .2s ease;
}

.hh24-review-option:hover{
    color:#dd111a;
    border-color:#dd111a;
    transform:translateY(-1px);
}

.hh24-review-picker.is-reviewed .hh24-review-option{
    display:none;
}

/*====================================================
RESPONSIVE EMBEDS
====================================================*/

.single-article-content iframe,
.single-article-content embed,
.single-article-content object,
.single-article-content video{

    display:block;

    width:100% !important;

    max-width:100% !important;

    margin:24px auto;

    border:0;
}

/* YouTube, Vimeo and other video embeds */

.single-article-content iframe[src*="youtube"],
.single-article-content iframe[src*="youtu.be"],
.single-article-content iframe[src*="vimeo"]{

    aspect-ratio:16/9;

    height:auto !important;
}

/* Spotify, Apple Music, SoundCloud and similar players */

.single-article-content iframe[src*="spotify"],
.single-article-content iframe[src*="music.apple"],
.single-article-content iframe[src*="soundcloud"]{

    width:100% !important;

    max-width:100% !important;
}

/* WordPress embed wrappers */

.single-article-content .wp-block-embed,
.single-article-content .wp-block-embed__wrapper,
.single-article-content .wp-embed-aspect-16-9,
.single-article-content .wp-embed-aspect-4-3{

    width:100%;

    max-width:100%;

    margin-left:auto;

    margin-right:auto;
}

.single-article-content .wp-block-embed__wrapper{

    position:relative;

    overflow:hidden;
}

.single-article-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper{

    aspect-ratio:16/9;
}

.single-article-content .wp-embed-aspect-4-3 .wp-block-embed__wrapper{

    aspect-ratio:4/3;
}

.single-article-content .wp-block-embed__wrapper iframe{

    width:100% !important;

    max-width:100% !important;
}

.single-article-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe,
.single-article-content .wp-embed-aspect-4-3 .wp-block-embed__wrapper iframe{

    height:100% !important;
}


/*====================================================
X / TWITTER EMBEDS + LONG LINK SAFETY
====================================================*/

.single-content,
.single-post-body,
.single-article-content,
.single-article-body{

    min-width:0;

    max-width:100%;
}

.single-article-body,
.single-article-body p,
.single-article-body li,
.single-article-body a{

    overflow-wrap:anywhere;

    word-break:break-word;
}

.single-article-body a{

    max-width:100%;
}

.single-article-body pre,
.single-article-body code{

    max-width:100%;
}

.single-article-body pre{

    overflow-x:auto;

    white-space:pre-wrap;

    overflow-wrap:anywhere;
}

.single-article-body table{

    width:100%;

    max-width:100%;
}

.single-article-content blockquote.twitter-tweet,
.single-article-content .wp-block-embed-twitter,
.single-article-content .wp-block-embed-x{

    width:100% !important;

    max-width:550px !important;

    min-width:0 !important;

    margin:24px auto !important;

    box-sizing:border-box;
}

.single-article-content iframe.twitter-tweet,
.single-article-content iframe.twitter-tweet-rendered{

    display:block !important;

    width:100% !important;

    max-width:550px !important;

    min-width:0 !important;

    margin:24px auto !important;
}

.single-article-content .wp-block-embed-twitter .wp-block-embed__wrapper,
.single-article-content .wp-block-embed-x .wp-block-embed__wrapper{

    width:100% !important;

    max-width:550px !important;

    min-height:0 !important;

    aspect-ratio:auto !important;

    overflow:visible !important;

    margin-left:auto !important;

    margin-right:auto !important;
}