/* ==========================================================
   UBUD ADVENTURES
   BLOG HERO
   PART 1
   Hero Layout • Background • Overlay • Container
========================================================== */

/* ==========================================================
   HERO
========================================================== */

.ua-blog-hero {

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

    min-height: 60vh;

    max-height: 620px;

    padding: 110px 0 70px;

    background: #0F172A;

}

.ua-blog-hero-media {

    position: absolute;

    inset: 0;

    z-index: -2;

}

.ua-blog-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    transform: none;

    will-change: auto;

}

/* ==========================================================
   HERO OVERLAY
========================================================== */

.ua-blog-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(10, 18, 32, .82) 0%,
            rgba(10, 18, 32, .62) 38%,
            rgba(10, 18, 32, .32) 72%,
            rgba(10, 18, 32, .18) 100%);

}

/* Gradient Fade Bottom */

.ua-blog-overlay::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 180px;

    background:
        linear-gradient(180deg,
            rgba(15, 23, 42, 0) 0%,
            rgba(15, 23, 42, .18) 35%,
            rgba(15, 23, 42, .55) 100%);

}

/* ==========================================================
   CONTAINER
========================================================== */

.ua-blog-hero .container {

    position: relative;

    z-index: 5;

}

/* ==========================================================
   INNER
========================================================== */

.ua-blog-inner {

    width: 100%;

    max-width: 760px;

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991px) {

    .ua-blog-hero {

        min-height: auto;

        padding: 90px 0 40px;

        display: flex;

    }

    .ua-blog-inner {

        max-width: 680px;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px) {

    .ua-blog-hero {

        min-height: auto;

        align-items: flex-end;

        padding: 55px 0 34px;

    }

    .ua-blog-image {

        transform: scale(1.14);

        object-position: center top;

    }

    .ua-blog-overlay {

        background:
            linear-gradient(180deg,
                rgba(10, 18, 32, .35) 0%,
                rgba(10, 18, 32, .30) 25%,
                rgba(10, 18, 32, .58) 55%,
                rgba(10, 18, 32, .88) 100%);

    }

    .ua-blog-overlay::after {

        display: none;

    }

    .ua-blog-inner {

        max-width: 100%;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:576px) {

    .ua-blog-hero {

        padding: 55px 0 26px
    }

    .ua-blog-inner {

        position: relative;

        margin-top: 21px;

    }

    .ua-blog-hero-breadcrumb {

        margin-top: -24px;

        margin-bottom: 1.5rem;

    }

    .ua-blog-image {

        transform: scale(1.18);

        object-position: 60% top;

    }

}

/* ==========================================================
   UBUD ADVENTURES
   BLOG HERO
   PART 2
   Breadcrumb • Category • Header • Typography
========================================================== */


/* ==========================================================
   BREADCRUMB
========================================================== */

.ua-blog-breadcrumb {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: .65rem;

    margin-bottom: 1.35rem;

    padding: .6rem 1rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .14);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

}

.ua-blog-breadcrumb a {

    color: rgba(255, 255, 255, .82);

    font-size: .88rem;

    font-weight: 500;

    transition: .25s ease;

}

.ua-blog-breadcrumb a:hover {

    color: #ffffff;

}

.ua-blog-breadcrumb span {

    color: #ffffff;

    font-size: .88rem;

    font-weight: 600;

}

.ua-blog-breadcrumb i {

    color: rgba(255, 255, 255, .42);

    font-size: .7rem;

}


/* ==========================================================
   CATEGORY
========================================================== */

.ua-blog-category {

    display: inline-flex;

    align-items: center;

    gap: .7rem;

    margin-bottom: 1.6rem;

    padding: .68rem 1.15rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .14);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

}

.ua-blog-category i {

    color: var(--primary);
    opacity: 1;

    font-size: .95rem;

}

.ua-blog-category span {

    color: #ffffff;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

}


/* ==========================================================
   HEADER
========================================================== */

.ua-blog-header {

    margin-bottom: 2rem;

}


/* ==========================================================
   TITLE
========================================================== */

.ua-blog-title {

    margin: 0;

    max-width: 760px;

    color: var(--ua-blog-title-color, #ffffff);

    font-size: clamp(3rem, 5vw, 4.8rem);

    line-height: 1.02;

    letter-spacing: -.055em;

    font-weight: 800;

    text-wrap: balance;

    text-shadow:
        0 10px 30px rgba(0, 0, 0, .35);

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.ua-blog-description {

    margin: 1.5rem 0 0;

    max-width: 650px;

    color: var(--ua-blog-text-color, rgba(255, 255, 255, .92));

    font-size: 1.08rem;

    line-height: 1.9;

    font-weight: 400;

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width:1200px) {

    .ua-blog-title {

        max-width: 820px;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991px) {

    .ua-blog-breadcrumb {

        margin-bottom: 1.1rem;

    }

    .ua-blog-category {

        margin-bottom: 1.35rem;

    }

    .ua-blog-title {

        font-size: 3.2rem;

    }

    .ua-blog-description {

        max-width: 600px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px) {

    .ua-blog-breadcrumb {

        gap: .45rem;

        margin-bottom: .9rem;

        padding: .45rem .8rem;

    }

    .ua-blog-breadcrumb a,

    .ua-blog-breadcrumb span {

        font-size: .78rem;

    }

    .ua-blog-breadcrumb i {

        font-size: .62rem;

    }

    .ua-blog-category {

        gap: .55rem;

        margin-bottom: 1rem;

        padding: .5rem .9rem;

    }

    .ua-blog-category span {

        font-size: .72rem;

        letter-spacing: .06em;

    }

    .ua-blog-category i {

        font-size: .82rem;

    }

    .ua-blog-header {

        margin-bottom: 1.6rem;

    }

    .ua-blog-title {

        max-width: 100%;

        font-size: 2.35rem;

        line-height: 1.08;

        letter-spacing: -.04em;

    }

    .ua-blog-description {

        margin-top: 1rem;

        max-width: 100%;

        font-size: 1rem;

        line-height: 1.75;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:576px) {

    .ua-blog-title {

        font-size: 2rem;

    }

    .ua-blog-description {

        font-size: .95rem;

    }

}

/* ==========================================================
   UBUD ADVENTURES
   BLOG HERO
   PART 3
   Meta • Responsive • Finishing
========================================================== */


/* ==========================================================
   META
========================================================== */

.ua-blog-meta {

    display: flex;

    flex-wrap: wrap;

    gap: .85rem;

}

.ua-blog-meta-item {

    display: inline-flex;

    align-items: center;

    gap: .7rem;

    min-height: 46px;

    padding: 0 1.1rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .16);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition: all .3s ease;

}

.ua-blog-meta-item:hover {

    transform: translateY(-2px);

    background: rgba(255, 255, 255, .12);

    border-color: rgba(255, 255, 255, .25);

}

.ua-blog-meta-item i {

    font-size: .95rem;

    color: var(--primary);

}

.ua-blog-meta-item span {

    color: var(--ua-blog-meta-color, #ffffff);

    font-size: .85rem;

    font-weight: 600;

    line-height: 1;

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width:1200px) {

    .ua-blog-inner {

        max-width: 780px;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991px) {

    .ua-blog-meta {

        gap: .7rem;

    }

    .ua-blog-meta-item {

        min-height: 42px;

        padding: 0 1rem;

    }

    .ua-blog-meta-item span {

        font-size: .82rem;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px) {

    .ua-blog-meta {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

        width: 100%;

    }

    .ua-blog-meta-item {

        min-height: 52px;

        padding: 0 16px;

        border-radius: 16px;

        justify-content: flex-start;

        width: 100%;

    }

    .ua-blog-meta-item i {

        font-size: .9rem;

    }

    .ua-blog-meta-item span {

        font-size: .78rem;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px) {

    .ua-blog-meta {

        grid-template-columns: repeat(2, 1fr);

    }

    .ua-blog-meta-item {

        min-height: 34px;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.ua-blog-breadcrumb a:focus-visible,
.ua-blog-category:focus-visible,
.ua-blog-meta-item:focus-visible {

    outline: 2px solid var(--ua-blog-accent);

    outline-offset: 3px;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce) {

    .ua-blog-image,
    .ua-blog-meta-item {

        transition: none;

    }

}