/**
Theme Name: Detail News
Theme URI: https://ascendoor.com/themes/detail-news/
Author: Ascendoor
Author URI: https://ascendoor.com/
Version: 1.0.0
Requires PHP: 7.4
Tested up to: 6.8
Requires at least: 5.0
Template: macro-news
Text Domain: detail-news
Description: Detail News ( child theme of Macro News ) theme is a versatile magazine template ideal for news sites, blogs, publishing platforms, and review websites. It offers numerous layouts and can be customized for different industries such as business, finance, healthcare, sports, fashion, and more. Featuring demo content that can be tailored to specific needs, the theme’s homepage showcases a clean, simple magazine-style design. It includes a post banner slider, the latest posts, and a custom widget layout. With its modern and minimalist aesthetic, the theme is user-friendly and easy to set up, especially with the provided pre-built demo. Additionally, the Detail News theme is responsive, ensuring optimal viewing across different screen resolutions and browsers. It is compatible with multiple browsers and has been optimized for speed, performance, and search engine optimization (SEO). Demo link: Demo link: https://demos.ascendoor.com/detail-news/
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: custom-background, custom-logo, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, footer-widgets, full-width-template, left-sidebar, right-sidebar, news, blog

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Detail News is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
:root{
	--primary-color: #0072e5;
}

/* -----------------------------------------
Banner slider  
----------------------------------------- */
.banner-section.banner-section-style-1 .banner-section-wrapper {
    display: flex;
    align-items: flex-start;
    margin-inline: -10px;
}

@media (max-width: 991px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper {
        flex-direction: column;
        gap: 20px;
    }
}

.banner-section.banner-section-style-1 .banner-section-wrapper > * {
    padding-inline: 10px;
}

@media (min-width: 992px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper > * {
        position: sticky;
        top: 40px;
    }
}

.banner-section.banner-section-style-1 .banner-section-wrapper > *:not(.slider-part) {
    width: 25%;
    container-type: inline-size;
}

@media (max-width: 991px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper > *:not(.slider-part) {
        width: 50%;
    }
}

@media (max-width: 600px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper > *:not(.slider-part) {
        width: 100%;
    }
}

.banner-section.banner-section-style-1 .banner-section-wrapper .slider-part {
    width: 50%;
}

@media (max-width: 991px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper .slider-part {
        width: 100%;
        order: 1;
    }
}

.banner-section.banner-section-style-1 .banner-section-wrapper .slider-part .mag-post-single .mag-post-img {
    aspect-ratio: 1 / 0.7;
}

.banner-section.banner-section-style-1 .banner-section-wrapper .slider-part .mag-post-single .mag-post-detail .mag-post-title {
    font-size: var(--font-size-md);
}

@media (min-width: 1024px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper .slider-part .mag-post-single .mag-post-detail .mag-post-title {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

@media (max-width: 991px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper .editors-pick-part {
        order: 2;
    }
}

.banner-section.banner-section-style-1 .banner-section-wrapper .editors-pick-part .editors-pick-wrapper .mag-post-single {
    margin-bottom: 20px;
}

@container (max-width: 480px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper .editors-pick-part .editors-pick-wrapper .mag-post-single .mag-post-detail .mag-post-title {
        margin: 0 0 5px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: calc(var(--font-size-sm) + 2px);
    }
}

@media (max-width: 991px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper .trending-part {
        order: 3;
    }
}

.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single {
    margin-bottom: 20px;
    gap: 15px;
}

.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single .mag-post-img {
    width: 35%;
}

.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single .mag-post-img .trending-no {
    position: absolute;
    inset-inline-start: 5px;
    bottom: 5px;
    z-index: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--theme-color);
    color: var(--white);
    font-size: calc(var(--font-size-sm) + 2px);
    line-height: 1;
}

.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single .mag-post-img + .mag-post-detail {
    width: calc(65% - 20px);
}

.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single .mag-post-detail {
    align-self: center;
    padding: 10px 0;
    padding-inline-end: 5px;
}

@container (max-width: 480px) {
    .banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single .mag-post-detail .mag-post-title {
        margin: 0 0 5px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: calc(var(--font-size-sm) + 2px);
    }
}

/* -----------------------------------------
Tile Posts Widget  
----------------------------------------- */
.magazine-tile-section.style-2 .magazine-tile-section-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@container (max-width: 991px) {
    .magazine-tile-section.style-2 .magazine-tile-section-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 600px) {
    .magazine-tile-section.style-2 .magazine-tile-section-wrapper {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@container (min-width: 601px) {
    .magazine-tile-section.style-2 .magazine-tile-section-wrapper .mag-post-single:first-child {
        grid-column: span 2;
    }
    .magazine-tile-section.style-2 .magazine-tile-section-wrapper .mag-post-single:first-child .mag-post-detail .mag-post-title {
        font-size: var(--font-size-md);
    }
}

@container (min-width: 601px) {
    .magazine-tile-section.style-2 .magazine-tile-section-wrapper .mag-post-single:nth-child(2) {
        grid-row: span 2;
    }
}

/* -----------------------------------------
Trending Posts Widget  
----------------------------------------- */
.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single {
    min-height: 60px;
}

.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-img {
    max-width: 70px;
    background-color: transparent;
    box-shadow: unset;
}

.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-img a {
    display: none;
}

.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-img .trending-counter {
    background-color: transparent;
    color: var(--clr-foreground);
    font-size: var(--font-size-lg);
    bottom: unset;
    top: 50%;
    opacity: 0.2;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-detail {
    padding: 5px;
    padding-block: 15px;
    padding-inline-end: 15px;
}

@container (max-width: 480px) {
    .magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-detail {
        padding-block: 5px;
    }
}

@container (max-width: 480px) {
    .magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-detail .mag-post-title {
        margin: 0 0 5px;
        font-size: calc(var(--font-size-base) - 3px);
    }
}

@container (max-width: 375px) {
    .magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-detail .mag-post-title {
        font-size: var(--font-size-sm);
    }
}

.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single:focus-within .mag-post-img .trending-counter, .magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single:hover .mag-post-img .trending-counter {
    opacity: 0.7;
}

.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single:not(:nth-child(n+10)) .mag-post-img .trending-counter::before {
    content: "0";
}