/*
 * Observatorul National
 * Combustibil HUB
 */

.on-fuel-hub{
    background:#f4f7fb;
    min-height:70vh;
    color:#172033;
}

.on-fuel-hub .container{
    width:min(1180px,calc(100% - 36px));
    margin:0 auto;
}

.on-fuel-hero{
    padding:68px 0 58px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(29,78,216,.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8fbff,
            #eef4fb
        );
    border-bottom:1px solid #dfe6ef;
}

.on-fuel-kicker,
.on-fuel-section-kicker{
    display:block;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    color:#1d4ed8;
}

.on-fuel-hero h1{
    max-width:850px;
    margin:0;
    font-size:clamp(34px,5vw,58px);
    line-height:1.04;
    letter-spacing:-.035em;
    color:#111827;
}

.on-fuel-lead{
    max-width:760px;
    margin:22px 0 0;
    font-size:18px;
    line-height:1.7;
    color:#536176;
}

.on-fuel-hero-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
}

.on-fuel-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border:1px solid #ccd6e4;
    border-radius:10px;
    background:#fff;
    color:#172033;
    font-weight:750;
    text-decoration:none;
    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.on-fuel-button:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(15,23,42,.08);
}

.on-fuel-button-primary{
    background:#172033;
    border-color:#172033;
    color:#fff;
}

.on-fuel-comparison,
.on-fuel-destinations{
    padding:54px 0;
}

.on-fuel-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin-bottom:24px;
}

.on-fuel-section-head h2{
    margin:0;
    font-size:30px;
    letter-spacing:-.025em;
    color:#172033;
}

.on-fuel-status{
    padding:7px 10px;
    border-radius:999px;
    background:#e8edf4;
    color:#64748b;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
}

.on-fuel-status.is-live{
    background:#dcfce7;
    color:#166534;
}

.on-fuel-table-wrap{
    overflow:hidden;
    background:#fff;
    border:1px solid #dde5ee;
    border-radius:16px;
    box-shadow:0 12px 30px rgba(15,23,42,.05);
}

.on-fuel-table{
    width:100%;
    border-collapse:collapse;
}

.on-fuel-table th,
.on-fuel-table td{
    padding:23px 25px;
    text-align:left;
    border-bottom:1px solid #e7edf4;
}

.on-fuel-table thead th{
    background:#172033;
    color:#fff;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.on-fuel-table tbody th{
    width:26%;
    font-size:17px;
    color:#172033;
}

.on-fuel-table tbody tr:last-child th,
.on-fuel-table tbody tr:last-child td{
    border-bottom:0;
}

.on-fuel-price{
    display:inline-block;
    margin-right:5px;
    font-size:27px;
    line-height:1;
    color:#111827;
}

.on-fuel-unit{
    font-size:13px;
    font-weight:700;
    color:#64748b;
}

.on-fuel-table small{
    display:block;
    margin-top:7px;
    color:#718096;
    font-size:12px;
}

.on-fuel-updates{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
}

.on-fuel-updates div{
    padding:15px 18px;
    border:1px solid #dde5ee;
    border-radius:12px;
    background:#fff;
}

.on-fuel-updates span{
    display:block;
    margin-bottom:4px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#64748b;
}

.on-fuel-updates strong{
    font-size:14px;
    color:#172033;
}

.on-fuel-note{
    margin:15px 2px 0;
    color:#64748b;
    font-size:13px;
    line-height:1.6;
}

.on-fuel-destinations{
    background:#fff;
    border-top:1px solid #e3e9f0;
}

.on-fuel-cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.on-fuel-card{
    display:block;
    min-height:250px;
    padding:26px;
    border:1px solid #dfe6ee;
    border-radius:16px;
    background:#fff;
    color:inherit;
    text-decoration:none;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.on-fuel-card:hover{
    transform:translateY(-3px);
    border-color:#b9c6d6;
    box-shadow:0 14px 32px rgba(15,23,42,.08);
}

.on-fuel-card-number{
    display:inline-flex;
    width:38px;
    height:38px;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#eef3f8;
    color:#475569;
    font-size:12px;
    font-weight:800;
}

.on-fuel-card h3{
    margin:24px 0 10px;
    font-size:24px;
    color:#172033;
}

.on-fuel-card p{
    min-height:72px;
    margin:0 0 24px;
    color:#64748b;
    line-height:1.65;
}

.on-fuel-card strong{
    color:#1d4ed8;
    font-size:14px;
}


/*
 * Dropdown navigation
 */

.main-nav .on-nav-dropdown{
    position:relative;
    display:flex;
    align-items:center;
}

.main-nav .on-nav-dropdown-toggle{
    display:flex;
    align-items:center;
    gap:5px;
}

.main-nav .on-nav-dropdown-toggle::after{
    content:"▾";
    font-size:10px;
}

.main-nav .on-nav-dropdown-menu{
    position:absolute;
    z-index:9999;
    top:calc(100% + 10px);
    left:0;
    display:none;
    min-width:190px;
    padding:8px;
    border:1px solid #dbe3ec;
    border-radius:12px;
    background:#fff;
    box-shadow:0 15px 35px rgba(15,23,42,.14);
}

.main-nav .on-nav-dropdown:hover
.on-nav-dropdown-menu,
.main-nav .on-nav-dropdown:focus-within
.on-nav-dropdown-menu{
    display:block;
}

.main-nav .on-nav-dropdown-menu a{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    white-space:nowrap;
}

.main-nav .on-nav-dropdown-menu a:hover{
    background:#f1f5f9;
}


@media (max-width:800px){

    .on-fuel-hero{
        padding:45px 0 40px;
    }

    .on-fuel-section-head{
        display:block;
    }

    .on-fuel-status{
        display:inline-block;
        margin-top:14px;
    }

    .on-fuel-cards{
        grid-template-columns:1fr;
    }

    .on-fuel-updates{
        grid-template-columns:1fr;
    }

    .on-fuel-table-wrap{
        overflow:visible;
        border:0;
        background:transparent;
        box-shadow:none;
    }

    .on-fuel-table,
    .on-fuel-table tbody,
    .on-fuel-table tr,
    .on-fuel-table th,
    .on-fuel-table td{
        display:block;
        width:100%;
    }

    .on-fuel-table thead{
        display:none;
    }

    .on-fuel-table tbody tr{
        margin-bottom:14px;
        overflow:hidden;
        border:1px solid #dde5ee;
        border-radius:14px;
        background:#fff;
    }

    .on-fuel-table tbody th{
        padding:15px 18px;
        background:#172033;
        color:#fff;
        border:0;
    }

    .on-fuel-table tbody td{
        position:relative;
        padding:17px 18px 17px 120px;
        border-bottom:1px solid #e7edf4;
    }

    .on-fuel-table tbody td::before{
        content:attr(data-label);
        position:absolute;
        left:18px;
        top:20px;
        width:90px;
        font-size:11px;
        font-weight:800;
        text-transform:uppercase;
        color:#64748b;
    }

    .on-fuel-table tbody tr td:last-child{
        border-bottom:0;
    }

    .on-fuel-card{
        min-height:auto;
    }

    .on-fuel-card p{
        min-height:0;
    }


    /*
     * Pe mobil dropdown-ul devine lista normala.
     */

    .main-nav .on-nav-dropdown{
        display:block;
    }

    .main-nav .on-nav-dropdown-menu{
        position:static;
        display:block;
        min-width:0;
        padding:0 0 0 12px;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }

    .main-nav .on-nav-dropdown-menu a{
        padding:7px 10px;
        font-size:13px;
    }

}


@media (max-width:520px){

    .on-fuel-hub .container{
        width:min(100% - 24px,1180px);
    }

    .on-fuel-hero h1{
        font-size:36px;
    }

    .on-fuel-lead{
        font-size:16px;
    }

    .on-fuel-button{
        width:100%;
    }

    .on-fuel-price{
        font-size:23px;
    }

}