@import url('../constants.css');
/*=========== Blogfeed ===============*/
    .section.construction-article {
    }
    .construction-article .story-panel.grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0 48px;
        width: 100%;
    }

    .construction-article .title h2{
        
    }

    .construction-article .story-panel.grid-3.grid-3.articles .grid {
        padding-bottom: 0;
    }

    .construction-article .story-panel .overlay {
        padding: 6px;
    }

    .construction-article .story-panel.grid-3 .grid {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
        padding-bottom: 80px;
    }

    .construction-article .story-panel .image {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
        height: 283px;
        width: 100%;
        overflow: hidden;
    }

    .construction-article .story-panel.articles .content {
     
    }

    .construction-article .story-panel .content .articles {
        text-align: left;
        width: 100%;
        z-index:2;
        position:relative;
    }

    .construction-article .story-panel .content .articles h3,
    .construction-article .story-panel .content .articles h4 {
        color: var(--headcolor);
        font-family: var(--heading);
        margin-bottom: 0;
        /* Heading/H4 */
        font-size: 30px;
        margin-bottom: 24px;
        font-style: normal;
        font-weight: var(--dbold);
        line-height: var(--lh); /* 28.8px */
    }

    .construction-article .story-panel .content .articles p {
        color: var(--color);
       margin-bottom: 0;
    }
    .construction-article .story-panel .content a.readmore{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
    }

    .category-tag-overlay {position: absolute;top: 15px;left: 15px;z-index: 10;}
            
    .category-tag {
        color: #ffffff;
        padding: 8px 16px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-radius: 3px;
        display: inline-block;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
    }
    
    /* Corner Triangle with Circle Arrow */
    .corner-triangle-overlay {
        position: absolute;
        top: auto;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 138px 100px;
        z-index: 10;
        transition: all 0.3s ease;
    }
    
    .circle-arrow {
        position: absolute;
        bottom: -120px;
        right: 20px;
        width: 36px;
        height: 36px;
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: #333;
        transition: all 0.3s ease;
    }
    
    /* Color variations for triangle */
    .corner-triangle-overlay.tag-orange {border-color: transparent transparent var(--secondary) transparent;}            
    .corner-triangle-overlay.tag-green {border-color: transparent transparent var(--green) transparent;}            
    .corner-triangle-overlay.tag-purple {border-color: transparent transparent var(--tertiary) transparent;}
    
    /* Color variations for category tags */
    .category-tag.tag-orange {background: var(--secondary);}            
    .category-tag.tag-green {background: var(--green);}            
    .category-tag.tag-purple {background: var(--tertiary);}

    /* Hover effects for category tags */
            .case-col:hover .category-tag.tag-orange {
                background: var(--secondary);
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            }
            
            .case-col:hover .category-tag.tag-green {
                background: var(--green);
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            }
            
            .case-col:hover .category-tag.tag-purple {
                background: var(--tertiary);
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            }
            
            /* Hover effects for corner triangles */
            .case-col:hover .corner-triangle-overlay.tag-orange {
                border-color: transparent transparent var(--secondary) transparent;
            }
            
            .case-col:hover .corner-triangle-overlay.tag-green {
                border-color: transparent transparent var(--green) transparent;
            }
            
            .case-col:hover .corner-triangle-overlay.tag-purple {
                border-color: transparent transparent var(--tertiary) transparent;
            }
            
            .case-col:hover .circle-arrow {
                transform: scale(1.1);
                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            }
            
    /*================== Construction ====================*/
    @media screen and (max-width: 1024px) {
      .construction-article .story-panel.grid-3 {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 48px;
        }
    }
    @media screen and (max-width: 767px) {
        .section.construction-article{
            padding: 40px 0;
        }
        .construction-article .story-panel.grid-3 {
            grid-template-columns: 1fr;
            grid-gap: 0;
            width: 100%;
            text-align: left;
        }
        .construction-article .story-panel .content a.btn {
            position: relative;
            bottom: 0;
            text-align: left;
        }
        .construction-article .story-panel .content .articles {
            padding-bottom: 20px;
        }
        .construction-article .story-panel.grid-3.articles .grid {
            margin-bottom: 36px;            
        }
        .construction-article .story-panel.grid-3.articles .grid:last-child{margin-bottom: 0;}

        .construction-article .story-panel .content a.readmore {
            position: relative;
        }
    }