@import url("./foundation/tokens.css?v=18");
@import url("./foundation/base.css");
@import url("./foundation/typography.css");
@import url("./foundation/utilities.css");

/* salamandra */
.sala-page .main,
.sala-page .header{
    width: auto; 
}
.modal-window{ max-width: none!important; }
.modal-window iframe {width:100% !important;}

.salamandra-popup,
.salamandra-wrapper{
    --block-gap: 45px;
    /* margin-top: var(--block-gap);
    padding-top: 30px; */
}

.block_item{
    --padding-inline: 80px;
    --content-max-width: 1280px;
    --breakout-max-width: 1440px;
    --grid-gap: 20px;
    --add-grid-gap: 20px;
    --column-gap: 40px;

    --breakout-size: calc(
        (var(--breakout-max-width) - var(--content-max-width)) / 2 
    );

    display: grid;
    grid-template-columns:
        [full-width-start] minmax(var(--padding-inline), 1fr)
        [breakout-start] minmax(0, var(--breakout-size))
        [content-start] min( 100% - (var(--padding-inline) * 2), var(--content-max-width) ) [content-end]
        minmax(0, var(--breakout-size)) [breakout-end]
        minmax(var(--padding-inline), 1fr) [full-width-end];
    row-gap: var(--grid-gap);

    --block-bg1: #EBE6DF;
    --block-bg2: #E5EAF0;
    --block-bg3: #FFF9EE;
    --block-bg4: #F3E7E7;
}

.block_item{
    margin-bottom: var(--block-gap);
}

.block_item.has_bg{
    padding-block: calc(var(--block-gap) + 5px);
}
.block_item.has_bg:has(+ .block_item.has_bg) {
  margin-bottom: 0;
}
/* block with section title module */
.block_item.has_bg:has(.grid:last-child > .column:last-child > .module.section-title){
    padding-bottom: 0;
    margin-bottom: 0;
}
.block_item.has_bg:has(.grid:last-child > .column:last-child > .module.section-title):has(+ .block_item:not(.has_bg)){
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.block_item.has_bg:has(.grid:last-child > .column:last-child > .module.section-title) + .block_item.has_bg {
    padding-top: var(--grid-gap);
}
.block_item:has(.grid:last-child > .column:last-child > .module.section-title){   
    margin-bottom: var(--grid-gap);
}


.block_item.bg-bg1{
    background: var(--block-bg1);
}
.block_item.bg-bg2{
    background: var(--block-bg2);
}
.block_item.bg-bg3{
    background: var(--block-bg3);
}
.block_item.bg-bg4{
    background: var(--block-bg4);
}

@media (width < 1280px) {
    .salamandra-wrapper{
       --block-gap: 30px;
    }
    .block_item{
        --padding-inline: 30px;
    }
}
@media (width <  950px) {
    .block_item{
        --padding-inline: 20px;
        --add-grid-gap: 10px;
    }
}
@media (width < 480px) {
    .salamandra-wrapper{
       --block-gap: 20px;
    }
}


/* Grids */
.grid{ 
    display: grid; 
    padding-top: 20px; 
    /* border-top: 1px solid rgba(0, 0, 0, 0.3); */
    border-top: 1px dotted #ABABAB;
    gap: var(--column-gap);
}

.grid:has(> .column:first-child > .module-feeder),
.grid:has(> .column:first-child > .section-title){
    border-top: none;
    padding-top: 0;
}
/* .grid:has(.section-title){
    border-top: none;
    padding-top: 0;
} */

.block_item > .grid_id-1,
.block_item > .grid_id-2,
.block_item > .grid_id-3,
.block_item > .grid_id-4,
.block_item > .grid_id-5,
.block_item > .grid_id-7,
.block_item > .placeholder-el,
.block_item > .grid_id-6{
    grid-column: content;
}

.block_item > .grid_id-10{
    grid-column: full-width;
}

/* .grid.grid-0.container{ width: 100%;border: none;padding-top: 0; }
.grid.module-first{border: none; } */
.block_item:first-child .container-wrap:first-child .grid{border: none; padding-top: 0; }

.grid-id_1{ grid-template-columns: 1fr; }
.grid-50-50{ grid-template-columns: repeat(2, 1fr); }
.grid-33-33-33{ grid-template-columns: repeat(3, 1fr); }
.grid-25-25-25-25{ grid-template-columns: repeat(4, 1fr); }
.grid-20-20-20-20-20{ grid-template-columns: repeat(5, 1fr);}
.grid-70-30{ grid-template-columns: 7fr 3fr; }

.grid .column{ position: relative; gap: var(--column-gap); display: flex; flex-direction: column; }
.column:not(:last-child)::after { content: ''; position: absolute; top: 0px; right: calc(var(--column-gap) / -2); width: 1px; height: 100%; background-color: #d6d6d6; }
/* dotted line */
/* .column:not(:last-child)::after { content: ''; position: absolute; top: 0px; right: calc(var(--column-gap) / -2); width: 1px; height: 100%; background-image: repeating-linear-gradient( to bottom, #ABABAB, #ABABAB 2px, transparent 2px, transparent 6px ); } */
/* .column .card + .card { margin-top: 20px; padding-top: 20px; border-top:1px solid rgba(0, 0, 0, 0.3);} */
.column .card + .card{
    position: relative;
}
.column .card + .card::before {
    content: '';
    position: absolute;
    top: calc(var(--column-gap) / -2);
    left: 0px;
    width: 100%;
    height: 1px;
    background-color: #ABABAB;
}

@media (width < 768px) {
    .grid-50-50,
    .grid-33-33-33,
    .grid-25-25-25-25,
    .grid-20-20-20-20-20,
    .grid-70-30{ grid-template-columns: 1fr; }
    .column:not(:last-child)::after { height: 1px; width: 100%; top: auto; bottom: calc(var(--column-gap) / -2); left: 0px; background: none; border-top: 1px dotted #ABABAB; }
}


/* Templates */
.grid .card {
    container: card / inline-size;
}
.card-media .media{
    float: none;
    width: auto;
    height: auto;
    margin-bottom: 0;
}
.card-media .media img{
    aspect-ratio: var(--semiwide);
}
.card-bottom {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.card-top {
    grid-area: media;
}
.card-byline.byline {
    margin-bottom: 0;
    letter-spacing: normal;
}

.card-label-and-overline{
    display: flex;
    align-items: center;
    gap: 5px;
}
.card-label-separator{
    color: #ababab;
    font-family: var(--condensed-font);
    font-size: 14px;
    font-weight: 700;
}
.card.negative .card-label-separator{
    color: var(--color-negative-95);
}

/* News Large */
.card.news-large{
    .card-inner{
        display: grid;
        grid-template-columns: 2fr 4fr;
        grid-template-areas: "text media";
        gap: 20px;
    }
    /* without media */
    .card-inner:not(:has(.card-top)) {
        grid-template-columns: 1fr;
        grid-template-areas: "text";
    }

}
@container card (width < 260px) {
    .card-label-and-overline{
        display: none;
    }
}
/* negative */
.card.negative{
    --negative-padding: 20px;
    background-color: var(--color-dark-gray);
}
.card.negative .card-inner{
    padding: var(--negative-padding);
}

.card.negative .byline.color-negative-60 > a{
    color: var(--color-negative-95);
}
/* .card.negative .card-label-and-overline .card-label-separator,
.card.negative .card-label-and-overline .card-label .label{
    color: var(--color-red);
} */
/* .card.negative .card-byline.byline .byline-link{
    color: var(--color-negative-95);
} */
.card.negative .card-overline.color-negative-95 .overline,
.card-bottom .card-label-and-overline .card-label.color-negative-95 .label,
.card.negative .card-byline.byline .byline-link,
.card-inner .card-bottom .card-byline.byline.color-negative-95 > a,
.card-inner .card-bottom .card-byline.byline.color-negative-95,
.byline.color-negative-95{
    color: var(--color-negative-95);
}
/* Column type c */
.column.column_type_c .card:not(.opinion-text){
    .card-inner{
        display: flex;
        /* display: grid;
        grid-template-areas: "media text"; */
        gap: 16px; 
    }
    .card-label-and-overline{
        display: none;
    }
    .video-wrap,
    .media img{
        aspect-ratio: 1 / 1;
        width: 70px;
        object-fit: cover;
    }
}

.column.column_type_c .card:not(.opinion-text){
    .card-headline{
        font:var(--roboto-font-xxs);
        font-weight: var(--roboto-font-weight-medium);
        letter-spacing: var(--roboto-xxs-letter-spacing);
    }
}

.mobile .column.column_type_c .card:not(.opinion-text){
    .card-headline{
        font:var(--roboto-font-4xs);
        font-weight: var(--roboto-font-weight-medium);
        letter-spacing: var(--roboto-4xs-letter-spacing);
    }
}

/*Opinion text Column type c */
.column.column_type_c .card.opinion-text{
    .card-headline{
        font:var(--slab-font-5xs);
        letter-spacing: var(--slab-5xs-letter-spacing);
    }
}
.mobile .column.column_type_c .card.opinion-text{
    .card-headline{
        font:var(--slab-font-3xs);
        letter-spacing: var(--slab-3xs-letter-spacing);
    }
}

@container card (width < 260px) {
    :not(.mobile) .column.column_type_c .card{
        .card-inner{
            display: grid;
            grid-template-areas: "media" "text";
            grid-template-columns: 1fr;
            gap: 13.5px; 
        }
        .media img{
            aspect-ratio: var(--semiwide);
            width: 100%;
        }
    }
}

/* Opinion Picture */
.card.opinion-picture{
    .card-author{
        display: flex;
        align-items: center;
    }
    .avatar img{
        width: 75px;
        height: 75px;
        border-radius: 50%;
    }
    .card-author .card-label .label{
        color:#525252;
    }
    .card-author .card-byline.byline,
    .card-author .card-byline.byline a{
        color: var(--color-red);
    }
}

/* Opinion Negative */
.card.opinion-grey.negative{
    background-color: var(--color-light-gray);
}

/* Opinion Text */
.card.opinion-text{
    .card-bottom{
        align-items: center;
    }
    .avatar{
        margin: 0;
    }
    .card-author{
        text-align: center;
    }
    .label{
        color: #525252;
    }
    .avatar img{
        width: 75px;
        height: 75px;
        border-radius: 50%;
    }
    .card-headline{
        text-align: center;
        max-width: 900px;
        margin-bottom: 10px;
    }
    .card-part-of-content{
        columns: 4 auto;
    }
    .continue-reading{
        font-family: var(--condensed-font);
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        line-height: 14px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-top: 20px;
    }
    .continue-reading::after {
        font-family: "Toi-new";
        content: "\e92a";
        padding-left: 3px;
        font-size: 10px;
    }
}

/* Special */
.card.special{
    .card-inner{
        display: grid;
        grid-template-areas: "stack";
    }
    .card-top {
        grid-area: stack;
        position: relative;
    }
    .card-media {
        position: relative;
        overflow: hidden;
        grid-area: media;
        z-index: 0;
        --gradient-direction: 90deg;
    }
    .card-media::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            var(--gradient-direction),
            #333 0%,
            rgba(51, 51, 51, 0.60) 40%,
            rgba(51, 51, 51, 0.00) 60%,
            rgba(51, 51, 51, 0.00) 100%
        );
    }
    .card-bottom {
        grid-area: stack;
        padding: 20px;
        z-index: 2;
        color: var(--color-negative-95);
        max-width: 40%;
    }
    .card-overline .overline,
    .byline > a{
        color: var(--color-negative-95);
    }
    .card-label-separator,
    .label{
        color: var(--color-negative-60);
    }
}


/* Feature */
.card.feature{
    --bg-color-1: #7B292A;
    --bg-color-2: #4B717E;
    --card-bg-color: var(--bg-color-1);
    &.bg-1{
        background-color: var(--bg-color-1);
        background-color: var(--card-bg-color)
    }
    &.bg-2{
        --card-bg-color: var(--bg-color-2);
        background-color: var(--card-bg-color);
    }
    .card-inner{
        display: grid;
        grid-template-columns: 2fr 4fr;
        grid-template-areas: "text media";
        gap: 20px;
    }
    /* without media */
    .card-inner:not(:has(.card-top)) {
        grid-template-columns: 1fr;
        grid-template-areas: "text";
    }
    .card-bottom {
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .card-label.color-negative-60 .label{
        color: var(--color-negative-60);
    }
    .card-overline.color-negative-95 .overline{
        color: var(--color-negative-95);
    }
}

/* Spotlight */
.card.spotlight{
    .card-inner{
        background:  #FDF5F1;
        box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.20);
        padding: 20px;
    }
    .label,
    .byline a{
        color: #f47963;
    }
}

/* News Dramatic */
.card.news-dramatic{
    .card-inner{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "text media";
        gap: 20px;
    }
    /* without media */
    .card-inner:not(:has(.card-top)) {
        grid-template-columns: 1fr;
        grid-template-areas: "text";
    }
}

@container card (width < 992px) {
    /* News Large */
    .card.news-large { 
        .card-headline{
            font:var(--roboto-font-m);
            letter-spacing: -0.3px;
        }
    }

    /* Opinion Text */
    .card.opinion-text{
        .card-headline{
                max-width: 680px;
                font:var(--slab-font-m);
                letter-spacing: var(--slab-m-letter-spacing);
        }
    }

    /* Special */
    .card.special{
        .card-bottom {
            max-width: 35%;
        }
        .card-headline{
            font:var(--roboto-font-l);
            letter-spacing: var(--roboto-l-letter-spacing);
        }
    }

    /* Feature */
    .card.feature{
        .card-headline{
            font:var(--slab-font-m);
            letter-spacing: var(--slab-m-letter-spacing);
        }
    }

    /* News Dramatic */
    .card.news-dramatic{
        .card-inner{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-areas: "text" "media";
            gap: 20px;
        }
        .card-headline{
            font:var(--roboto-font-xl);
            letter-spacing: var(--roboto-xl-letter-spacing);
        }
    }
}

@container card (width < 768px) {

    /* News Large */
    .card.news-large {
        .card-inner{
            grid-template-columns: 3fr 5fr;
        }
        .card-headline{
            font:var(--roboto-font-xs);
            letter-spacing: var(--roboto-xs-letter-spacing);
        }
        .card-underline{
            font:var(--slab-font-5xs);
            letter-spacing: var(--slab-5xs-letter-spacing);
        }
    }

    /* Opinion Picture */
    .card.opinion-picture{
        .avatar img{
            width: 50px;
            height: 50px;
        }
    }

    /* Opinion Text */
    .card.opinion-text{
        .card-headline{
                max-width: 580px;
        }
        .card-part-of-content{
            column-count: 3;
        }
    }

    /* Special */
    .card.special{
        .card-bottom {
            max-width: 45%;
        }
        .card-headline{
            font:var(--roboto-font-xs);
            letter-spacing: var(--roboto-xs-letter-spacing);
        }
        .card-underline{
            font:var(--slab-font-5xs);
            letter-spacing: var(--slab-5xs-letter-spacing);
        }
    }

    /* Feature */
    .card.feature {
        .card-inner{
            grid-template-columns: 1fr;
            grid-template-areas: "media" "text";
            gap: 0;
            padding: 0;
        }
        .card-media {
            position: relative;
            overflow: hidden;
            z-index: 0;
        }
        .card-media::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(
                180deg,
                rgba(123, 41, 42, 0.00) 0%,
                rgba(66, 22, 23, 0.00) 50%,
                var(--card-bg-color) 100%
            );
        }
        .card-bottom {
            padding-inline: 60px;
            padding-bottom: 30px;
        }
    }

    /* News Dramatic */
    .card.news-dramatic{
        .card-headline{
            font:var(--roboto-font-l);
            letter-spacing: var(--roboto-l-letter-spacing);
        }
        .card-underline{
            font:var(--slab-font-5xs);
            letter-spacing: var(--slab-5xs-letter-spacing);
        }
    }

}

@container card (width < 576px) {
    /* News Large
    .card.news-large {
        .card-inner{
            grid-template-columns: 1fr;
            grid-template-areas: "media" "text";
        }
    } */
    .card.negative .card-inner{
        padding: var(--negative-padding);
    }
    /* Negative */
    .card.negative{
        /* without media */
        .card-inner:not(:has(.card-top)) .card-bottom {
            padding-top: var(--negative-padding);
        }
    }
    /* Opinion Text */
    .card.opinion-text{
        .card-headline{
            margin-bottom: 5px;
        }
        .card-part-of-content{
            column-count: 1;
        }
        .card-part-of-content > a{
            display: -webkit-box;
            -webkit-line-clamp: 10;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }

    /* Special */
    .card.special{
        .card-inner{
            display: block;
            background-color: #333;
        }
        .card-media {
            --gradient-direction: 0deg;
        }
        .card-bottom {
            position: relative;
            max-width: 100%;
            margin-top: -100px;
            padding-inline: 16px;
        }
    }

    /* Feature */
    .card.feature{
        .card-bottom {
            padding-inline: 20px; 
        }
        .card-headline{
            font:var(--slab-font-xs);
            letter-spacing: var(--slab-xs-letter-spacing);
        }
    }

    /* News Dramatic */
    .card.news-dramatic{
        .card-headline{
            font:var(--roboto-font-m);
            letter-spacing: var(--roboto-m-letter-spacing);
        }
    }
}

@container card (width < 480px) {
    /* News Large */
    .card.news-large {
        .card-inner{
            grid-template-columns: 1fr;
            grid-template-areas: "media" "text";
        }
    }
    /* Negative */
    .card.negative{
        .card-inner {
            padding: 0;
        }
        .card-bottom {
            padding-inline: 16px;
            padding-bottom: 20px;
        }
    }
}
@container card (width < 260px) {
    /* News Large */
    .card.news-large {
        .card-inner{
            gap: 15px;
        }
        .card-headline{
            font:var(--roboto-font-4xs);
            letter-spacing: var(--roboto-4xs-letter-spacing);
        }
    }
    /* Negative */
    .card.negative{
        .card-bottom {
            padding-inline: 10px;
            padding-bottom: 16px;
        }
        /* without media */
        .card-inner:not(:has(.card-top)) .card-bottom {
            padding-top: 16px;
        }
    }
    /* Opinion Text */ 
    .card.opinion-text{
        .card-headline{
            font:var(--slab-font-3xs);
            letter-spacing: var(--slab-3xs-letter-spacing);
            margin-bottom: 0;
        }
        .card-part-of-content{
            display: none; 
        }
    }

    /* Special */
    .card.special{
        .card-bottom {
            margin-top: -50px;
            padding-inline: 10px;
            padding-bottom: 15px;
        }
        .card-headline{
            font:var(--roboto-font-4xs);
            letter-spacing: var(--roboto-4xs-letter-spacing);
        }
    }

   /* Feature */
   .card.feature{ 
        .card-bottom {
            padding-bottom: 20px;
        }
        .card-headline{
            font:var(--slab-font-3xs);
            letter-spacing: var(--slab-3xs-letter-spacing);
        }
        .card-underline{
            font:var(--slab-font-5xs);
            letter-spacing: var(--slab-5xs-letter-spacing);
        }
    }

    /* News Dramatic */
    .card.news-dramatic{
        .card-headline{
            font:var(--roboto-font-xs);
            letter-spacing: var(--roboto-xs-letter-spacing);
        }
    }

}


/* Mobile */
.mobile{
    .block_item{
        --padding-inline: 0px; 
    }
    .card-media .media{
        margin-bottom: 0;
    }

    /* News Large */
    .card.news-large {
        .card-bottom{
            padding-inline: 16px;
        }
        .card-underline{
            font:var(--slab-font-3xs);
            letter-spacing: var(--slab-3xs-letter-spacing);
        }
    }

    /* Negative */
    .card.negative{
        .card-top{
            padding-inline: 0px;
        }
    }

    /* News Large Column type b */
    .column_type_b .card.news-large{
        margin-inline: 16px;
        .card-bottom{
            padding-inline: 0px;
        }
    }
    /* Negative */
    .column_type_b .card.negative.news-large{
        .card-bottom{
            padding-inline: 16px;
        }
    }
    /* Liveblog timeline in column B */
    .column_type_b .related-items.liveblog{
        margin-inline: 16px;
    }

    /* Column type c */
    .column_type_c .card{
         margin-inline: 16px;
        .card-bottom {
            padding-inline: 0px;
        }
    }

    /* Opinion Text */ 
    .card.opinion-text{
        margin-inline: 16px;
        .card-headline {
            font: var(--slab-font-3xs);
            letter-spacing: var(--slab-3xs-letter-spacing);
        }
    }

    /* Feature */
    .card.feature{
        .card-bottom {
            padding-inline: 16px;
        }
    }
    /* Feature Column type b */
    .column_type_b .card.feature{
        margin-inline: 16px;
    }

    /* Special */
    .card.special {
        .card-underline{
            font: var(--slab-font-3xs);
            letter-spacing: var(--slab-3xs-letter-spacing);
        }
    }
    /* Special Column type b */
    .column_type_b .card.special{
        margin-inline: 16px;
    }

    /* News Dramatic */
    .card.news-dramatic{
        .card-inner{
            padding-inline: 16px;
        }
        .card-underline{
            font: var(--slab-font-3xs);
            letter-spacing: var(--slab-3xs-letter-spacing);
        }
    }
}


/* Modules */

/* Headline */
.section-title{
    --border-width: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 20px;
    border-top: var(--border-width) solid #333;
    font-family: var(--condensed-font);
    text-transform: uppercase;
}
.section-title-text{
    font-size: 40px;
    line-height: 40px;
}
.section-title-headline{
    color: var(--color-red);
    font-weight: 700;
}
.section-title.section-title-small{
    --border-width: 4px;
}
.section-title-small .section-title-headline{
    font-size: 24px;
    line-height: 24px;
}

/* sponsored topic badge */
.sponsored-topic-badge{
    display: flex;
    align-items: center;
    gap: 10px;
}
.sponsored-topic-badge .logo-wrapper img{
   max-width: 121px;
   aspect-ratio: 2 / 1;
}
.sponsored-topic-badge .main-text{
    color: #525252;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}
.sponsored-topic-badge .main-text > a{
    text-decoration: underline;
}
.sponsored-topic-badge .extra-text{
    color: #333;
    font-family: var(--roboto-font);
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;

}
@media (width < 768px) {
    .section-title-large .section-title-text {
        font-size: 32px;
        line-height: 32px;
    }
}
@media (width < 576px) {
    .section-title{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
.mobile{
    .section-title{
        padding-inline: 20px;
    }
}



/* module feeder */
.slider-title{
    color: var(--community-red);
    font-family: var(--community-font);
    font-size: 24px;
    font-weight: 500;
    line-height: 110%;
    margin-bottom: 20px;
}


/* most popular feeder */
.most-popular-feeder .slider-package .item{
    margin-top: 0;
    padding-top: 0;
    border: none;
    background: var(--color-light-gray);
}

.most-popular-feeder .media{
    float: none;
    position: relative;
    padding-bottom: 15px;
}
.most-popular-feeder .media + .item-content{
    float: none;
    width: auto;
    padding: 0 15px 15px 15px;
    margin: 0;
}
.most-popular-feeder .headline{
    color:  #333;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    margin-bottom: 0;
    letter-spacing: normal;
}
.most-popular-feeder .number{
    position: absolute;
    bottom: 7px;
    left: 20px;
    width: 40px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-bottom: 8px solid #000;
    background: var(--color-red);
    color: #FFF;
    font-family: var(--slab-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
}
.most-popular-feeder .under-headline{
    display: none;
}

/* Vertical feeder in column b or c */
.column_type_c .module-feeder,
.column_type_b .module-feeder{
    background: var(--color-light-gray);
    padding-inline: 15px;
}
.column_type_c .slider-package,
.column_type_b .slider-package{
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 30px;
    --column-gap: 30px;
    background: var(--color-light-gray);
}
.column_type_c .slider-arrows,
.column_type_b .slider-arrows{
    display: none;
}
.column_type_c .most-popular-feeder .number,
.column_type_c .slider-package .card-underline,
.column_type_b .most-popular-feeder .number,
.column_type_b .slider-package .card-underline{
    display: none;
}

.column_type_c .most-popular-feeder .item-wrap,
.column_type_c .slider-package .card-inner,
.column_type_b .most-popular-feeder .item-wrap,
.column_type_b .slider-package .card-inner {
    display: flex;
    gap: 16px;
}
.column_type_c .most-popular-feeder .media,
.column_type_c .slider-package .card-top,
.column_type_b .most-popular-feeder .media,
.column_type_b .slider-package .card-top {
    grid-area: media;
    padding-bottom: 0;
    margin-bottom: 0;
    min-width: 70px;
}
.column_type_c .slider-package .media img,
.column_type_b .slider-package .media img {
    aspect-ratio: 1 / 1;
    width: 70px;
    object-fit: cover;
}
.column_type_c .most-popular-feeder .item-content,
.column_type_c .slider-package .card-bottom,
.column_type_b .most-popular-feeder .item-content,
.column_type_b .slider-package .card-bottom {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}
.column.column_type_c .slider-package .card + .card::before,
.column.column_type_b .slider-package .card + .card::before{
    background: none;
    border-top: 1px dotted #ABABAB;
}

.column_type_c .see-more-wrapper,
.column_type_b .see-more-wrapper{
    border-top: 1px dotted #ABABAB;
    padding-block: 15px;
    margin-top: 15px;
    text-align: end;
}
.column_type_c .see-more-link,
.column_type_b .see-more-link{
    font-family: var(--condensed-font);
    color:  #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-transform: uppercase;
}

.column_type_c .see-more-link::after,
.column_type_b .see-more-link::after {
    margin-left: 5px;
    font-family: "Toi-new";
    content: "\e92a";
}

.column_type_c .most-popular-feeder,
.column_type_b .most-popular-feeder{
    padding-bottom: 15px;
}

@container module-feeder (width < 260px) {
    .column_type_c .most-popular-feeder .media,
    .column_type_c .slider-package .card-top,
    .column_type_b .most-popular-feeder .media,
    .column_type_b .slider-package .card-top {
        display: none;
    }
    .column_type_c .most-popular-feeder .item-wrap,
    .column_type_c .slider-package .module-feeder-card.card .card-inner,
    .column_type_b .most-popular-feeder .item-wrap,
    .column_type_b .slider-package .module-feeder-card.card .card-inner {
        grid-template-areas: "text";
        grid-template-columns: 1fr;
    }
}

.mobile{
    .column_type_a .module-feeder{
        padding-inline: 20px;
    }
    .column_type_c .module-feeder .card {
        margin-inline: 0px;
    }
}

/* Newsletter subscription*/
.nl-subscription.module{
    container: nl-subscription / inline-size;
    padding: 0;
    display: grid;
}
.nl-subscription .module-body{
    background:  var(--color-red);
    padding: 40px;
    text-align: center;
}
.nl-subscription .module-header{
    font-family: var(--condensed-font);
    font-weight: 700;
    text-transform: uppercase;
    color: #FFFDFD;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom:30px;
}

.nl-subscription .logo{
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #D3D1D1;
}
.nl-subscription .module-headline{
    font-family: var(--condensed-font);
    font-size: 120px;
    font-weight: 600;
    line-height: 120px;
}
.nl-subscription .module-underline{
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    text-transform: initial;
}


/* form */
.nl-subscription .module-form{
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}
.nl-subscription.module input[type="email"] {
    color: var(--color-red);
    border: none;
    padding: 10px;
    font-family: var(--roboto-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    width: 284px;
    margin: 0;
}
.nl-subscription.module input[type="email"]::-webkit-input-placeholder {text-align: start;text-transform:capitalize;letter-spacing: normal;opacity:1;}
.nl-subscription.module input[type="email"]::-moz-placeholder {text-align:start;text-transform:capitalize;letter-spacing:normal;opacity:1;}
.nl-subscription.module input[type="email"]:-ms-input-placeholder {text-align:start;text-transform:capitalize;letter-spacing:normal;opacity:1;}
.nl-subscription.module input[type="email"]:-moz-placeholder {text-align:start;text-transform:capitalize;letter-spacing:normal;opacity:1;}
.nl-subscription.module input[type="submit"] {
    background-color: #000;
    padding: 10px 20px;
    color: #FFF;
    font-family: var(--condensed-font);
    font-size: 16px;
    font-weight: 800;
    line-height: 20px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    margin: 0;
}

.nl-subscription .terms{
    color: rgba(255, 255, 255, 0.90);
    font-family: Roboto;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}
.nl-subscription .terms .tooltip{
    font-weight: 700;
    text-decoration: underline;
    border-bottom:none;
}

@container nl-subscription (width < 1020px) {
    .nl-subscription .module-headline{
        font-size: 110px;
        line-height: 110px;
    }
}

@container nl-subscription (width < 768px) {
    .module .module-body{
        padding-block: 30px;
    }
    .nl-subscription .module-header{
        margin-bottom: 20px;
    }
    .nl-subscription .module-headline{
        font-size: 90px;
        line-height: 90px;
    }
}
@container nl-subscription (width < 576px) {
    .module .module-body{
        padding: 32px 16px 16px 16px;
    }
    .nl-subscription .module-header{
        margin-bottom: 30px;
    }
    .nl-subscription .module-headline{
        font-size: 48px;
        line-height: 48px;
    }
    .nl-subscription .module-form{
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .nl-subscription.module input[type="email"] {
        width: 100%;
    }
}

/* Related Link */
.module.related-link{
    display: flex;
    justify-content: center;
}
.module.related-link .related-link-button{
    font-family: var(--condensed-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    padding: 10px 20px 8px;
    border-radius: 25px;
    background: var(--color-dark-gray);
    color: var(--color-white);
}
.module.related-link .related-link-button::after{
    margin-left: 10px;
    font-family: "Toi-new";
    content: "\e92a";
    font-weight: 400;
}
 @media (width < 576px) {
    .module.related-link{
        justify-content: center;
    }
}

/* Live Blog */

/* Live dot on label */
.card-label .label.live{
    position: relative;
    --live-dot-size: 1em;
    --live-dot-gap: 6px;
    --live-dot-offset: calc(var(--live-dot-size) + var(--live-dot-gap));
    padding-inline-start: var(--live-dot-offset);
}

.card-label .label.live::before {
    content: "";
    animation: live-pulse 1.6s ease 0s infinite;
    background-color: var(--color-dark-red);
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--live-dot-size);
    height: var(--live-dot-size);
    border-radius: 50%;
    display: block;
    float: none;
    margin: 0;
}

.card.negative .card-label .label.live::before {
    background-color: var(--color-light-red);
}

/* Liveblog overline uppercase */
.liveblog .card-overline .overline{
    text-transform: uppercase;
}

/* Package liveblog: spacing between card and timeline */
.package-wrapper.package-liveblog {
    display: grid;
    gap: 20px;
    container-type: inline-size;
    container-name: package;
}
.package-wrapper.package-liveblog > .card::before {
    display: none;
}

/* Package liveblog timeline */
.package-wrapper.liveblog{
    .liveblog-timeline {
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 4px;
    }
    .liveblog-timeline .liveblog-item,
    .liveblog-timeline.entries4 .liveblog-item {
        width: auto;
        font-size: 14px;
        line-height: 17px;
        margin: 0;
        border: none;
        background-color: var(--color-dark-red);
    }
}

/* Negative liveblog: no gap, dark background with padding around timeline */
.package-negative.package-liveblog {
    gap: 0;
}
.package-negative.package-liveblog > .related-items.liveblog {
    background-color: var(--color-dark-gray);
    padding-inline: 20px;
    padding-bottom: 20px;
}

@container package (width < 768px) {
    .liveblog-timeline .liveblog-item:nth-child(n+4) {
        display: none;
    }

    .package-negative.package-liveblog > .related-items.liveblog {
        padding-inline: 16px;
    }
}

@container package (width < 576px) {
    .package-wrapper.liveblog .liveblog-timeline {
        grid-template-columns: 1fr;
    }
    .liveblog-timeline .liveblog-item:nth-child(n+4) {
        display: block;
    }
    .liveblog-timeline .liveblog-item:nth-child(n+5) {
        display: none;
    }
}

@container package (width < 260px) {
    .package-wrapper.liveblog .liveblog-timeline {
        display: none;
    }
}

@media (width < 480px) {
    .package-wrapper.liveblog.mobile-full-width{
        gap: 0;
        padding-inline: 0;
    }
}

@keyframes live-pulse {
    0% {opacity:1;}
    10% {opacity:0.25;}
    40% {opacity:1;}
    100% {opacity:1;}
}
