.post__detail {
    margin-top: 7rem;
}

.post__detail .img__con {
    width: 100%;
    /* max-height: 500px; */
    border-radius: calc(var(--border-radius)*2);
    overflow: hidden;
    aspect-ratio: 16/9;
}

.post__detail .img__con img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post__detail header h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    font-weight: 600;
    transition: all 0.15s ease;
    display: inline-block;
    color: var(--theme-heading-clr);
    margin-bottom: 1.25rem;
    line-height: 1.25;
}

.post__detail .sub__content {
    font-size: .75rem;
    color: color-mix(in oklab, var(--theme-body) 75%, var(--theme-divider-clr) 25%) !important;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    margin-bottom: .375rem;
}

.post__detail .sub__content a,
.post__detail .sub__content div {
    color: color-mix(in oklab, var(--theme-body) 25%, var(--theme-divider-clr) 75%) !important;
    font-size: clamp(.825rem, 2vw, .875rem);
}

.post__detail .sub__content .author {
    transition: all .4s ease;
}

.post__detail .sub__content .author:hover,
.post__detail .content__header .author:hover {
    color: var(--hover-clr);
}

.post__detail .content__section {
    color: var(--theme-p-clr);
    /* font-family: "Rubik", sans-serif !important; */
}

.post__detail .content__section p {
    line-height: var(--line-height, 1.75);
    font-size: clamp(.9375rem, 2.5vw, 1rem);
    letter-spacing: var(--letter-spacing);
    margin-bottom: 0;
}

.post__detail .content__section p video,
.post__detail .content__section p img {
    max-width: 100% !important;
}

.post__detail .report__section {
    padding-top: clamp(1.875rem, 5vw, 2.5rem);
    padding-bottom: 5rem;
    border-top: 1px solid color-mix(in oklab, var(--theme-body) 90%, var(--theme-divider-clr) 10%);
    margin-top: clamp(2rem, 5vw, 2.75rem);
}

.post__detail .report__section form>div {
    margin-bottom: 1.125rem;
}

.post__detail .report__section form .title {
    color: var(--theme-sub-heading-clr);
    margin-bottom: 1em;
    letter-spacing: var(--letter-spacing);
    font-size: clamp(1.375rem, 4vw, 1.75rem);
    font-weight: 600;
}

.post__detail .report__section form .title i {
    color: var(--primary-clr);
    margin-inline-end: .375em;
}

.post__detail .report__section form>div input,
.post__detail .report__section form>div textarea {
    padding: .75rem .875rem;
    border: 1px solid color-mix(in oklab, var(--theme-body) 90%, var(--theme-divider-clr) 18%);
    background-color: var(--theme-layout);
    border-radius: calc(var(--border-radius)*1.375);
    font-size: clamp(.875rem, 3vw, 1rem);
    color: var(--theme-p-clr);
    transition: border .25s ease-in-out, color .25s ease-in-out;
}

.post__detail .report__section form>div input:focus,
.post__detail .report__section form>div textarea:focus {
    outline: unset;
    box-shadow: unset;
    border-color: var(--primary-clr);
}

.post__detail .report__section label {
    color: color-mix(in oklab, var(--theme-body) 25%, var(--theme-divider-clr) 75%) !important;
    margin-bottom: .375rem;
    font-size: .875rem;
    letter-spacing: var(--letter-spacing);
}

.post__detail .report__section button.bttn {
    --padding: 0 80px;
    display: block;
    border: unset;
    margin-inline: auto;
    margin-top: 2rem;
}

.post__cats .cat {
    border: 1px solid var(--primary-clr);
    color: var(--theme-sub-heading-clr);
    background-color: unset;
    padding: .25rem .75rem;
    text-decoration: none;
    font-size: .875rem;
    border-radius: var(--border-radius);
    transition: color .2s ease-in-out;
    letter-spacing: var(--letter-spacing);
}

.post__cats .cat:hover {
    color: var(--primary-clr);
}

.post__detail .tags {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.4rem;
    row-gap: .25rem;
    padding-top: .5rem;
}

.post__detail .tags .tag {
    background-color: color-mix(in oklab, var(--theme-body) 94%, var(--theme-divider-clr) 6%);
    padding: 2px 10px;
    text-decoration: none;
    font-size: .875rem;
    border: 1px solid color-mix(in oklab, var(--theme-body) 88%, var(--theme-divider-clr) 12%);
    color: var(--theme-sub-heading-clr);
    border-radius: 25px;
    letter-spacing: .25px;
}


.post__detail .tags .tag:hover {
    background-color: color-mix(in oklab, var(--theme-body) 88%, var(--theme-divider-clr) 12%);
}


/* ================================================ */
/* Related Posts Styles */
/* ================================================ */
.related__posts {
    border-top: 1px solid color-mix(in oklab, var(--theme-body) 90%, var(--theme-divider-clr) 10%);
    background-color: var(--theme-body);
}

.related__posts .post {
    margin-bottom: 1.5rem;
    border-radius: calc(var(--border-radius)*2);
    box-shadow: var(--theme-box-shadow);
    border: 1px solid color-mix(in oklab, var(--theme-body-2) 90%, var(--theme-divider-clr) 10%);
    background-color: color-mix(in oklab, var(--theme-body) 94%, white 6%);
}

.related__posts .post .img__con {
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    display: block;
    border-radius: calc(var(--border-radius)*1.875);
}

.related__posts .post .img__con img {
    width: 100%;
    height: 100%;
    transition: transform .5s ease;
    object-fit: cover;
}

.related__posts .post .img__con:hover img {
    transform: scale(110%);
    filter: brightness(85%);
}

.related__posts .post .content {
    padding: 1rem .875rem .75rem;
}

.related__posts .post h4 {
    color: var(--theme-sub-heading-clr);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .5em;
    transition: all 0.15s ease-in-out;
    display: inline-block;
    letter-spacing: var(--letter-spacing);
    line-height: 1.325;
}

.related__posts .post h4:hover {
    color: var(--primary-clr);
}

.related__posts .post .sub__content {
    margin-bottom: .875rem;
    display: flex;

    align-items: center;
    justify-content: space-between;
    font-size: .875rem;
    font-weight: 300;
    color: color-mix(in oklab, var(--theme-body-2) 75%, var(--theme-divider-clr) 25%);
    letter-spacing: .25px;
    line-height: 1;
}

.related__posts .post .sub__content div,
.related__posts .post .sub__content a {
    color: color-mix(in oklab, var(--theme-p-clr) 75%, var(--theme-divider-clr) 25%);
}

.related__posts .post .sub__content .author {
    line-height: 1.5;
}

.related__posts .post .author i {
    font-size: 1rem;
}

.related__posts .post .author:hover {
    color: var(--hover-clr);
    text-decoration: underline;
}

.related__posts .post .overview {
    margin-bottom: .75rem;
}


/* ===============================
   Start: Post Detail Horizontal Ad
   =============================== */
.post__detail .ad__container {
    width: 100%;

    overflow: hidden;
    margin: 1rem 0;
    position: relative;
}



.post__detail .ad__link,
.post__detail .ad_script_con {
    width: 100%;
    height: 100%;
    max-height: 250px;
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

.post__detail .ad__link img {
    width: 100%;
    height: 100%;
    max-height: 250px;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
    /* smooth scaling */
}

.post__detail .ad__link:hover img {
    transform: scale(1.05);
    /* slightly zoom in on hover */
}

.post__detail .ad_script_con {
    /* if the ad is a script, ensure it fills the container */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* ===============================
    End: Post Detail Horizontal Ad
=============================== */


@media screen and (max-width: 767px) {

    .post__detail .content__section p video,
    .post__detail .content__section p img {
        max-height: 720px;
    }

}