@import "./common-var.css";

/* -------------------------------------------------------
   Main 2-Column Grid: Left (Heading + Deco) | Right (Stats)
   ------------------------------------------------------- */
.highlights-grid {
    display: grid;
    grid-template-columns: 6fr 7fr;
    gap: 80px;
    align-items: center;
    
    @media (max-width: 1200px) {
        gap: 40px;
        grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 992px) {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------
   Left Column
   ------------------------------------------------------- */
.highlights-left {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 112px;
    @media (max-width: 1440px) { gap: 80px; }
    @media (max-width: 1200px) {
        gap: 50px;
    }
    @media (max-width: 992px) {
        gap: 40px;
    }
}

/* Decoration Illustration */
.highlights-decoration {
    .decoration-img {
        display: block;
        width: 100%;
        max-width: 340px;
        height: auto;

        @media (max-width: 1440px) { max-width: 220px; }
        @media (max-width: 767px)  { max-width: 180px; }
    }
}

/* -------------------------------------------------------
   Right Column: Stat List
   ------------------------------------------------------- */
.highlights-right {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
}

/* Stat List */
.stat-list {
    display: flex;
    flex-direction: column;
}
.stat-label{
    @media (max-width: 576px)  { margin-bottom: 10px; }
}

/* -------------------------------------------------------
   Each Stat Row — 2-col grid: [label] | [value group]
   ------------------------------------------------------- */
.stat-item {
    display: grid;
    grid-template-columns: minmax(160px, 200px) 1fr;
    align-items: end;
    padding: 30px 0;
    border-bottom: 1px solid rgba(15, 63, 71, 0.45);

    @media (max-width: 1440px) { padding: 20px 0; }
    @media (max-width: 1200px) { 
        grid-template-columns: minmax(140px, 180px) 1fr;
    }
    @media (max-width: 767px) {
        grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 576px) {
        grid-template-columns: 1fr;
    }
}
.stat-item:first-child {
    padding-top: 0;
}

/* Value Group: icon + number — right-aligned */
.stat-value-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    @media (max-width: 576px) { justify-content: flex-start; }
    .stat-icon-wrap{
        @media(max-width: 1680px){
            width: 90px;
            height: 90px;
        }
        @media (max-width: 1200px) { 
            width: 80px;
            height: 80px
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
}

/* Large number */
.stat-number {
    color: var(--light-teal);
    font-size: 88px;
    font-weight: 800;
    line-height: 1;

    @media (max-width: 1680px) { font-size: 64px; }
    @media (max-width: 1440px) { font-size: 56px; }
    @media (max-width: 1200px) { font-size: 44px; }
    @media (max-width: 767px)  { font-size: 40px; }
    @media (max-width: 576px)  { font-size: 36px; }
}

/* Unit suffix (MN, %) */
.stat-unit {
    color: var(--light-teal);
    font-family: var(--font-type1);
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    align-self: flex-end;
    padding-bottom: 8px;

    @media (max-width: 1440px) { font-size: 26px; padding-bottom: 6px; }
    @media (max-width: 1200px) { font-size: 22px; }
    @media (max-width: 767px)  { font-size: 20px; padding-bottom: 4px; }
    @media (max-width: 576px)  { font-size: 18px; }
}

/* -------------------------------------------------------
   Footer Note — uses cms-text5 from common.css
   ------------------------------------------------------- */
.stat-note {
    text-align: right;
    margin: 16px 0 0;

    @media (max-width: 1440px) { margin: 0; }
    @media (max-width: 767px) { margin: 20px 0 0; }
}

/* -------------------------------------------------------
   RTL Support
   ------------------------------------------------------- */
[dir="rtl"] {

    .highlights-heading { text-align: right; }

    .highlights-decoration {
        .decoration-img { transform: scaleX(-1); }
    }

    .stat-item {
        grid-template-columns: minmax(100px, 100px) 1fr;
        @media (max-width: 767px) { direction: rtl; }
    }

    .stat-note { 
        text-align: left;
    }
    .stat-value-group{
        flex-direction: row-reverse;
        justify-content: flex-start;
    }
}