/* =============================================================================
   COMMON — PAGE HERO SCAFFOLD
   Shared ".pg-hero" breadcrumb-bar / label / title / tagline / desc / badges /
   actions component used by every inner page across every category. Loaded
   once from the common layout (layout/header.blade.php) so it never needs to
   be duplicated inside a category or page-specific CSS file again.
   ========================================================================== */

:root {
    --red-dim: #A81515; /* hover shade for .btn-red-ug — some category CSS
                            files don't (re)declare this, so it's guaranteed
                            here since this file loads on every page */
}



.pg-hero .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 32%;
    background-repeat: no-repeat;
}



.pg-hero .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to right, rgba(10, 11, 13, .92) 40%, rgba(10, 11, 13, .35) 75%, rgba(10, 11, 13, .15) 100%),
        linear-gradient(to top, rgba(10, 11, 13, .85) 0%, rgba(10, 11, 13, 0) 55%); */
}



.hero-crumb-bar {
    position: relative;
    z-index: 2;
    padding: 1rem 0 0;
}



.hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 15px;
    color: rgba(255, 255, 255, .4);
    flex-wrap: wrap;
        margin-bottom: 10px;
}



.hero-breadcrumb a {
    color: rgba(255, 255, 255, .45);
    text-decoration: none;
    transition: color .2s;
}



.hero-breadcrumb a:hover {
    color: var(--red);
}



.pg-hero .hero-body {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 0px;
}



.pg-hero .hero-label {
    display: inline-block;
    background: rgba(217, 28, 28, .18);
    border: 1px solid rgba(217, 28, 28, .4);
    color: var(--red);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    padding: .28rem .75rem;
    border-radius: 3px;
    margin-bottom: 1rem;
}



.pg-hero .hero-title .accent {
    color: var(--red) !important;
}



.pg-hero .hero-tagline {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin: 1rem 0 1.3rem;
}



.pg-hero .hero-badges {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: 1.9rem;
}



.pg-hero .badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    padding: .32rem .85rem;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}



.pg-hero .badge-pill i {
    color: var(--red);
    font-size: 13.12px;
}



.pg-hero .hero-actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
}



.pg-hero .btn-red-ug,
.pg-hero .btn-ghost-ug {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    padding: .82rem 1.7rem;
    border-radius: 4px;
    transition: .2s ease;
    cursor: pointer;
    text-decoration: none;
}



.pg-hero .btn-red-ug {
    background: var(--red);
    border: 1.5px solid var(--red);
    color: #fff;
}



.pg-hero .btn-red-ug:hover {
    background: var(--red-dim);
    border-color: var(--red-dim);
}



.pg-hero .btn-ghost-ug {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .85);
}



.pg-hero .btn-ghost-ug:hover {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

@media(max-width: 767px) {
    .pg-hero .hero-bg::after {
    background: linear-gradient(to right, rgba(10, 11, 13, .92) 40%, rgba(10, 11, 13, .35) 75%, rgba(10, 11, 13, .15) 100%),
        linear-gradient(to top, rgba(10, 11, 13, .85) 0%, rgba(10, 11, 13, 0) 55%);
}
}