/* ==========================================================
   VED VAIDYA MEDIA
   PREMIUM BLOG ARCHIVE / EDITORIAL JOURNAL

   File: assets/css/blog-archive.css

   FEATURES
   - Premium dark navy hero banner
   - Turquoise editorial typography
   - Animated hero artwork
   - Featured article magazine layout
   - Premium hover interactions
   - Responsive blog archive grid
   - Category filters and search
   - Entrance animations
   - Pagination
   - Full mobile responsiveness

   Brand: Navy / Cyan / Turquoise / White
========================================================== */


/* ==========================================================
   01. GLOBAL BLOG PAGE
========================================================== */

.vvja-page {
    --vvja-navy: #052d46;
    --vvja-deep: #031e33;
    --vvja-teal: #078995;
    --vvja-mint: #88efd4;
    --vvja-text: #456776;
    --vvja-line: #dce9e9;
    --vvja-ease: cubic-bezier(.22, 1, .36, 1);

    position: relative;

    width: 100%;
    margin: 0;
    padding: 0;

    background: #ffffff;
    color: var(--vvja-navy);

    font-family: "Manrope", Arial, sans-serif;

    -webkit-font-smoothing: antialiased;
}

.vvja-page,
.vvja-page *,
.vvja-page *::before,
.vvja-page *::after {
    box-sizing: border-box;
}

.vvja-page a {
    text-decoration: none;
}

.vvja-page h1,
.vvja-page h2,
.vvja-page h3,
.vvja-page p {
    margin: 0;
}

.vvja-page a:focus-visible,
.vvja-page button:focus-visible,
.vvja-page input:focus-visible {
    outline: 3px solid #13ada7;
    outline-offset: 3px;
}

.vvja-container {
    position: relative;

    width: min(1420px, calc(100% - 86px));

    margin-inline: auto;
}


/* ==========================================================
   02. PREMIUM DARK BLOG HERO BANNER
========================================================== */

.vvja-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 440px;

    padding: 28px 0 70px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 82% 25%,
            rgba(13, 172, 163, .18),
            transparent 44%
        ),
        radial-gradient(
            ellipse at 12% 100%,
            rgba(9, 100, 172, .16),
            transparent 50%
        ),
        linear-gradient(
            118deg,
            #03192e 0%,
            #042b45 53%,
            #075669 100%
        );

    color: #ffffff;
}


/* SUBTLE GRID BACKGROUND */

.vvja-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background-image:
        linear-gradient(
            rgba(153, 243, 215, .046) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(153, 243, 215, .046) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 28%,
        #000 100%
    );

    mask-image: linear-gradient(
        90deg,
        transparent 28%,
        #000 100%
    );

    pointer-events: none;
}


/* LARGE DECORATIVE CIRCLES */

.vvja-hero::after {
    content: "";

    position: absolute;

    top: -360px;
    right: -240px;

    width: 650px;
    height: 650px;

    z-index: -1;

    border: 1px solid rgba(143, 244, 219, .16);
    border-radius: 50%;

    box-shadow:
        0 0 0 65px rgba(143, 244, 219, .025),
        0 0 0 135px rgba(143, 244, 219, .012);

    pointer-events: none;
}


/* ==========================================================
   BREADCRUMBS
========================================================== */

.vvja-breadcrumb {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;

    margin-bottom: 40px;

    color: #a7c9d0;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.vvja-breadcrumb a {
    color: #d4e9ed;

    transition: color .25s ease;
}

.vvja-breadcrumb a:hover {
    color: #91f3d1;
}

.vvja-breadcrumb span[aria-current="page"] {
    color: #91f3d1;
}


/* ==========================================================
   HERO CONTENT LAYOUT
========================================================== */

.vvja-hero-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(210px, 280px);

    align-items: center;

    gap: clamp(35px, 5vw, 90px);
}

.vvja-hero-copy {
    position: relative;
    z-index: 2;

    min-width: 0;
}


/* HERO EYEBROW */

.vvja-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 23px;

    color: #a5f1de;

    font-size: 11px;
    font-weight: 850;
    line-height: 1.5;
    letter-spacing: .15em;
}

.vvja-eyebrow-dot {
    flex: none;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #80f4d0;

    box-shadow:
        0 0 0 6px rgba(128, 244, 208, .12),
        0 0 20px rgba(128, 244, 208, .25);

    animation: vvjaDarkPulse 3s ease-in-out infinite;
}

.vvja-eyebrow-line {
    width: 35px;
    height: 1px;

    background: rgba(165, 241, 222, .65);
}


/* MAIN HERO HEADING */

.vvja-hero h1 {
    max-width: 1050px;

    margin: 0;

    color: #ffffff !important;

    font-family: "Manrope", Arial, sans-serif;

    font-size: clamp(47px, 5.5vw, 80px);
    font-weight: 850;

    line-height: 1.09;
    letter-spacing: -.065em;

    text-wrap: balance;
}

.vvja-hero h1 em {
    position: relative;

    display: block;

    width: fit-content;
    max-width: 100%;

    margin-top: 5px;

    color: #91f3d1 !important;

    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -.06em;
}


/* ANIMATED UNDERLINE */

.vvja-hero h1 em::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 72%;
    height: 3px;

    border-radius: 100px;

    background: linear-gradient(
        90deg,
        #79f0cf,
        rgba(121, 240, 207, 0)
    );

    transform-origin: left;
}


/* HERO DESCRIPTION */

.vvja-hero-copy > p {
    max-width: 650px;

    margin-top: 29px;

    color: #c8e2e8 !important;

    font-size: clamp(16px, 1.4vw, 19px) !important;
    font-weight: 450;
    line-height: 1.75 !important;
}


/* ==========================================================
   03. PREMIUM ANIMATED HERO ARTWORK
========================================================== */

.vvja-hero-art {
    position: relative;
    isolation: isolate;

    display: grid;
    place-items: center;

    width: 270px;
    height: 270px;

    justify-self: end;
}

.vvja-hero-art-word {
    position: absolute;

    top: -4px;
    right: 0;

    color: #b2e5e1;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .24em;
}


/* CIRCULAR RINGS */

.vvja-art-ring {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}

.vvja-art-ring-one {
    width: 240px;
    height: 240px;

    border: 1px solid rgba(162, 245, 222, .32);

    box-shadow:
        0 0 0 20px rgba(162, 245, 222, .025),
        0 0 0 42px rgba(162, 245, 222, .013);
}

.vvja-art-ring-two {
    width: 180px;
    height: 180px;

    border: 1px dashed rgba(160, 249, 225, .52);

    animation: vvjaDarkRotate 35s linear infinite;
}


/* FLOATING CENTRE SYMBOL */

.vvja-art-symbol {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 112px;
    height: 112px;

    border: 1px solid #c6ffea;
    border-radius: 30px;

    background: linear-gradient(
        135deg,
        #b4ffe8,
        #79e8d1
    );

    color: #06465c;

    box-shadow:
        0 19px 45px rgba(0, 16, 32, .3),
        0 0 40px rgba(100, 235, 208, .15);

    animation: vvjaDarkFloat 5s ease-in-out infinite;
}

.vvja-art-symbol svg {
    width: 67px;
    height: 67px;

    stroke: currentColor;
}


/* ARTWORK CAPTION */

.vvja-art-caption {
    position: absolute;
    bottom: -4px;

    color: #a4d7d8;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;

    white-space: nowrap;
}


/* ==========================================================
   04. PREMIUM HERO ANIMATIONS
========================================================== */

@keyframes vvjaDarkRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes vvjaDarkFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-10deg);
    }

    50% {
        transform: translateY(-10px) rotate(-4deg);
    }
}

@keyframes vvjaDarkPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(128, 244, 208, .12),
            0 0 12px rgba(128, 244, 208, .18);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(128, 244, 208, .04),
            0 0 23px rgba(128, 244, 208, .34);
    }
}


/* HERO ENTRANCE */

.vvja-page.is-ready .vvja-hero-copy {
    animation:
        vvjaHeroReveal .95s
        cubic-bezier(.22, 1, .36, 1)
        both;
}

.vvja-page.is-ready .vvja-hero-art {
    animation:
        vvjaHeroReveal 1.1s .15s
        cubic-bezier(.22, 1, .36, 1)
        both;
}

@keyframes vvjaHeroReveal {

    from {
        opacity: .25;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* HEADING UNDERLINE ENTRANCE */

.vvja-page.is-ready .vvja-hero h1 em::after {
    animation:
        vvjaDarkLine 1.15s .45s
        cubic-bezier(.22, 1, .36, 1)
        both;
}

@keyframes vvjaDarkLine {

    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}


/* ==========================================================
   05. SHARED EDITORIAL SECTION HEADINGS
========================================================== */

.vvja-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 31px;
}

.vvja-section-kicker {
    display: block;

    margin-bottom: 12px;

    color: #078994;

    font-size: 10px;
    font-weight: 850;
    line-height: 1.5;
    letter-spacing: .15em;
}

.vvja-section-head h2,
.vvja-library-head h2 {
    color: #052f47;

    font-size: clamp(35px, 3.7vw, 54px);
    font-weight: 850;

    line-height: 1.14;
    letter-spacing: -.055em;
}

.vvja-section-head h2 em,
.vvja-library-head h2 em {
    color: #078a94;

    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 500;
}

.vvja-section-index {
    color: #7999a1;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;

    white-space: nowrap;
}


/* ==========================================================
   06. PREMIUM FEATURED STORIES SECTION
========================================================== */

.vvja-featured {
    padding: 69px 0 82px;

    background: #ffffff;
}

.vvja-featured-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, .85fr);

    align-items: stretch;

    gap: 23px;
}


/* ==========================================================
   MAIN FEATURED ARTICLE
========================================================== */

.vvja-lead-story {
    min-width: 0;
}

.vvja-lead-media {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    height: 100%;

    min-height: 440px;

    overflow: hidden;

    border-radius: 19px;

    background: #063c55;

    box-shadow: 0 18px 48px rgba(3, 45, 65, .12);

    transition:
        transform .5s var(--vvja-ease),
        box-shadow .5s ease;
}

.vvja-lead-media:hover {
    transform: translateY(-5px);

    box-shadow: 0 29px 60px rgba(3, 45, 65, .21);
}


/* FEATURED IMAGE */

.vvja-lead-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s var(--vvja-ease);
}

.vvja-lead-media:hover .vvja-lead-image {
    transform: scale(1.075);
}


/* IMAGE FALLBACK */

.vvja-image-fallback {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    background: linear-gradient(
        130deg,
        #062b45,
        #087c84
    );

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

    font-size: clamp(90px, 12vw, 180px);
    font-weight: 850;
    letter-spacing: -.13em;
}

.vvja-image-fallback span {
    color: #9af7d8;
}


/* PREMIUM IMAGE OVERLAY */

.vvja-lead-shade {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        180deg,
        rgba(2, 22, 37, .02) 10%,
        rgba(2, 24, 39, .22) 35%,
        rgba(2, 25, 41, .94) 100%
    );
}


/* FEATURED ARTICLE CONTENT */

.vvja-lead-content {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;

    padding: clamp(25px, 3vw, 43px);
}


/* FEATURED LABEL */

.vvja-lead-label {
    position: absolute;

    top: 27px;
    left: 31px;

    display: inline-flex;
    align-items: center;

    gap: 11px;

    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 100px;

    background: rgba(4, 45, 61, .72);

    color: #ffffff;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .1em;

    backdrop-filter: blur(10px);
}

.vvja-live-dot {
    width: 7px;
    height: 7px;
    flex: none;

    border-radius: 50%;

    background: #9ef5d7;

    box-shadow: 0 0 0 4px rgba(158, 245, 215, .12);
}


/* CATEGORY */

.vvja-lead-category {
    color: #a4f8dd;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;

    text-transform: uppercase;
}


/* TITLE */

.vvja-lead-title {
    display: block;

    max-width: 690px;

    margin-top: 13px;

    color: #ffffff;

    font-size: clamp(28px, 3vw, 45px);
    font-weight: 800;

    letter-spacing: -.047em;
    line-height: 1.23;

    transition:
        transform .5s var(--vvja-ease);
}

.vvja-lead-media:hover .vvja-lead-title {
    transform: translateY(-4px);
}


/* BOTTOM DATE AND ARROW */

.vvja-lead-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;

    margin-top: 25px;
    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, .29);

    color: #dceef0;

    font-size: 13px;
    font-weight: 650;
}

.vvja-round-arrow {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: #a0f3d8;
    color: #063e52;

    font-size: 25px;

    transition:
        background .3s ease,
        transform .45s var(--vvja-ease);
}

.vvja-lead-media:hover .vvja-round-arrow {
    background: #ffffff;
    transform: rotate(45deg);
}


/* ==========================================================
   07. SECONDARY FEATURED ARTICLES
========================================================== */

.vvja-feature-stack {
    display: grid;

    grid-template-rows: repeat(2, minmax(0, 1fr));

    gap: 20px;

    min-width: 0;
}

.vvja-mini-story {
    display: grid;

    grid-template-columns:
        41%
        minmax(0, 1fr);

    align-items: center;

    gap: 19px;

    min-width: 0;
    padding-bottom: 17px;

    border-bottom: 1px solid #dce9e9;
}

.vvja-mini-image {
    position: relative;

    display: block;

    height: 100%;
    min-height: 168px;

    overflow: hidden;

    border-radius: 12px;

    background: #e5f2ef;
}

.vvja-mini-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .75s var(--vvja-ease);
}

.vvja-mini-story:hover .vvja-mini-image img {
    transform: scale(1.09);
}

.vvja-mini-fallback {
    display: grid;
    place-items: center;

    height: 100%;
    min-height: 168px;

    background: linear-gradient(
        130deg,
        #063e58,
        #0b9995
    );

    color: #b3ffe9;

    font-size: 43px;
    font-weight: 850;
    letter-spacing: -.09em;
}


/* TEXT */

.vvja-mini-copy {
    min-width: 0;
}

.vvja-mini-category {
    display: block;

    margin-bottom: 11px;

    color: #098a92;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .1em;

    text-transform: uppercase;
}

.vvja-mini-story h3 {
    margin: 0;

    font-size: clamp(18px, 1.65vw, 24px);
    font-weight: 800;

    line-height: 1.35;
    letter-spacing: -.033em;
}

.vvja-mini-story h3 a {
    color: #073c52;

    transition: color .3s ease;
}

.vvja-mini-story:hover h3 a {
    color: #088a94;
}

.vvja-mini-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-top: 15px;

    color: #78939c;

    font-size: 12px;
}

.vvja-mini-bottom span {
    color: #0b9298;
    font-size: 23px;

    transition: transform .3s ease;
}

.vvja-mini-story:hover .vvja-mini-bottom span {
    transform: translate(3px, -3px);
}


/* FEATURED PLACEHOLDER */

.vvja-feature-note {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 13px;

    min-height: 175px;

    padding: 23px;

    background: #eef9f6;
    border-radius: 12px;
}

.vvja-feature-note > span {
    color: #078a92;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .14em;
}

.vvja-feature-note strong {
    color: #073c52;

    font-size: 23px;
    font-weight: 850;
}

.vvja-feature-note p {
    color: #557683;

    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* ==========================================================
   08. BLOG ARTICLE LIBRARY SECTION
========================================================== */

.vvja-library {
    padding: 78px 0 97px;

    background: linear-gradient(
        145deg,
        #f6fbfa,
        #ffffff 65%,
        #f2faf8
    );

    border-top: 1px solid #e6eeee;
}

.vvja-library-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 24px;

    margin-bottom: 30px;
}

.vvja-library-head p {
    margin-top: 15px;

    color: #567583;

    font-size: 16px !important;
    line-height: 1.65 !important;
}


/* ==========================================================
   09. PREMIUM BLOG SEARCH
========================================================== */

.vvja-search {
    display: flex;
    align-items: center;

    width: min(100%, 325px);
    min-height: 53px;

    padding: 5px;

    border: 1px solid #cce2e3;
    border-radius: 100px;

    background: #ffffff;

    box-shadow: 0 8px 20px rgba(4, 60, 79, .035);

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.vvja-search:focus-within {
    border-color: #0aa5a2;

    box-shadow: 0 0 0 4px rgba(10, 165, 162, .08);
}

.vvja-search input {
    flex: 1;

    min-width: 0;

    padding: 10px 14px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #083d54;

    font-family: inherit;
    font-size: 16px;
}

.vvja-search input::placeholder {
    color: #829da5;
}

.vvja-search button {
    display: grid;
    place-items: center;
    flex: none;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #074d69;
    color: #ffffff;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .35s var(--vvja-ease);
}

.vvja-search button:hover {
    background: #089c9c;

    transform: rotate(-9deg);
}

.vvja-search button svg {
    width: 19px;
    height: 19px;
}


/* ==========================================================
   10. CATEGORY FILTERS
========================================================== */

.vvja-filters {
    display: flex;
    align-items: center;

    gap: 9px;

    flex-wrap: nowrap;

    margin-bottom: 37px;
    padding-bottom: 23px;

    overflow-x: auto;

    scrollbar-width: thin;
    scrollbar-color: #c0ddda transparent;

    border-bottom: 1px solid #dce9e9;
}

.vvja-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: none;

    min-height: 42px;

    padding: 10px 19px;

    border: 1px solid #d7e7e5;
    border-radius: 100px;

    background: #ffffff;
    color: #567583;

    font-size: 13px;
    font-weight: 750;

    white-space: nowrap;

    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease,
        transform .3s var(--vvja-ease);
}

.vvja-filter:hover {
    color: #087f8b;

    border-color: #85cfca;

    transform: translateY(-2px);
}

.vvja-filter.is-active {
    background: #06435c;
    border-color: #06435c;
    color: #ffffff;
}

.vvja-filter.is-active:hover {
    color: #ffffff;
}


/* FILTERED RESULT SUMMARY */

.vvja-results-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;

    margin-bottom: 27px;

    color: #6b8793;

    font-size: 13px;
    font-weight: 650;
}

.vvja-results-info a {
    margin-left: auto;

    color: #07858f;

    font-weight: 800;

    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ==========================================================
   11. PREMIUM BLOG GRID
========================================================== */

.vvja-post-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap: 27px;
    row-gap: 56px;
}

.vvja-post-card {
    --vvja-mx: 50%;
    --vvja-my: 50%;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-width: 0;
}


/* CURSOR-FOLLOWING SPOTLIGHT */

.vvja-post-card::before {
    content: "";

    position: absolute;

    inset: -13px;
    z-index: -1;

    border-radius: 18px;

    background: radial-gradient(
        270px circle at
        var(--vvja-mx)
        var(--vvja-my),
        rgba(11, 179, 170, .095),
        transparent 75%
    );

    opacity: 0;

    transition: opacity .4s ease;

    pointer-events: none;
}

.vvja-post-card:hover::before {
    opacity: 1;
}


/* ==========================================================
   12. BLOG CARD IMAGE
========================================================== */

.vvja-card-media {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 1.6 / 1;

    overflow: hidden;

    border-radius: 13px;

    background: #e0eeee;
}

.vvja-card-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .85s var(--vvja-ease);
}

.vvja-post-card:hover .vvja-card-media img {
    transform: scale(1.075);
}


/* NO IMAGE FALLBACK */

.vvja-card-fallback {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: 100%;

    padding: 23px;

    background: linear-gradient(
        130deg,
        #052e47,
        #087e89
    );

    color: #baf7e4;
}

.vvja-card-fallback > span {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .15em;
}

.vvja-card-fallback strong {
    font-size: clamp(68px, 8vw, 130px);
    font-weight: 850;

    line-height: 1;
    letter-spacing: -.13em;

    color: #ffffff;
}

.vvja-card-fallback strong span {
    color: #99f4d8;
}


/* HOVER ARROW */

.vvja-card-arrow {
    position: absolute;

    right: 15px;
    bottom: 15px;

    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: #ffffff;
    color: #086f80;

    font-size: 24px;

    transform: translateY(12px);

    opacity: 0;

    transition:
        transform .4s var(--vvja-ease),
        opacity .35s ease,
        background .3s ease,
        color .3s ease;
}

.vvja-post-card:hover .vvja-card-arrow,
.vvja-card-media:focus-visible .vvja-card-arrow {
    transform: translateY(0) rotate(45deg);

    opacity: 1;

    background: #a7f5dc;
    color: #063d53;
}


/* ==========================================================
   13. BLOG CARD TYPOGRAPHY
========================================================== */

.vvja-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;

    color: #7a949e;

    font-size: 11px;
    font-weight: 700;
}

.vvja-card-category {
    color: #078a93;

    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: .1em;
}

.vvja-card-separator {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #9cb4ba;
}


/* ARTICLE TITLE */

.vvja-card-title {
    margin: 12px 0 0 !important;

    color: #083a51;

    font-size: clamp(21px, 1.8vw, 27px);
    font-weight: 850;

    line-height: 1.35;
    letter-spacing: -.04em;
}

.vvja-card-title a {
    color: inherit;

    transition: color .3s ease;
}

.vvja-post-card:hover .vvja-card-title a {
    color: #068996;
}


/* EXCERPT */

.vvja-card-excerpt {
    margin: 14px 0 20px !important;

    color: #607d8a;

    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* READ ARTICLE */

.vvja-card-read {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    width: fit-content;

    margin-top: auto;
    padding-bottom: 7px;

    border-bottom: 1px solid #78bcb7;

    color: #087887;

    font-size: 13px;
    font-weight: 850;

    transition:
        color .3s ease,
        border-color .3s ease;
}

.vvja-card-read span {
    font-size: 19px;

    transition:
        transform .3s var(--vvja-ease);
}

.vvja-card-read:hover {
    color: #064c60;

    border-color: currentColor;
}

.vvja-card-read:hover span {
    transform: translateX(5px);
}


/* ==========================================================
   14. EMPTY BLOG STATE
========================================================== */

.vvja-empty {
    padding: 65px 25px;

    text-align: center;

    border: 1px dashed #b9d9d7;
    border-radius: 16px;
}

.vvja-empty > span {
    color: #0ba49a;

    font-size: 43px;
}

.vvja-empty h3 {
    margin: 10px 0;

    color: #073d52;

    font-size: 26px;
}

.vvja-empty p {
    margin-bottom: 18px;

    color: #637f8d;

    font-size: 16px !important;
}

.vvja-empty a {
    color: #07818e;

    font-weight: 800;
    text-decoration: underline;
}


/* ==========================================================
   15. PAGINATION
========================================================== */

.vvja-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 19px;

    margin-top: 75px;
    padding-top: 29px;

    border-top: 1px solid #dceaea;
}

.vvja-page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;
}

.vvja-page-numbers a {
    display: grid;
    place-items: center;

    min-width: 43px;
    height: 43px;

    padding: 0 10px;

    border: 1px solid #d4e7e5;
    border-radius: 50%;

    color: #527482;

    font-size: 13px;
    font-weight: 800;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.vvja-page-numbers a:hover {
    border-color: #0aa69c;
    color: #07848c;

    transform: translateY(-2px);
}

.vvja-page-numbers a.is-current {
    background: #06445c;
    border-color: #06445c;

    color: #ffffff;
}

.vvja-page-numbers > span {
    padding: 0 6px;

    color: #7c979e;
}

.vvja-page-direction {
    color: #087789;

    font-size: 14px;
    font-weight: 800;

    transition: color .25s ease;
}

.vvja-page-direction:hover {
    color: #03465a;
}


/* ==========================================================
   16. FINAL PREMIUM DARK CTA
========================================================== */

.vvja-cta {
    padding: 67px 0;

    background: linear-gradient(
        115deg,
        #052c47,
        #065269 70%,
        #087b83
    );

    color: #ffffff;
}

.vvja-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 45px;
}

.vvja-cta-kicker {
    display: block;

    margin-bottom: 12px;

    color: #a7f3dc;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

.vvja-cta h2 {
    color: #ffffff;

    font-size: clamp(32px, 3.4vw, 51px);
    font-weight: 850;

    line-height: 1.17;
    letter-spacing: -.055em;
}

.vvja-cta h2 em {
    color: #99f3d7;

    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 500;
}

.vvja-cta p {
    margin-top: 13px;

    color: #cbe5e9;

    font-size: 16px !important;
    line-height: 1.65 !important;
}


/* CTA BUTTON */

.vvja-cta-inner > a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 23px;

    flex: none;

    min-width: 188px;
    min-height: 53px;

    padding: 6px 6px 6px 21px;

    border-radius: 100px;

    background: #a1f5db;
    color: #063c50;

    font-size: 14px;
    font-weight: 850;

    transition:
        transform .35s var(--vvja-ease),
        background .3s ease,
        box-shadow .3s ease;
}

.vvja-cta-inner > a span {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: #06556a;
    color: #ffffff;

    font-size: 23px;

    transition: transform .35s ease;
}

.vvja-cta-inner > a:hover {
    transform: translateY(-3px);

    background: #ffffff;

    box-shadow: 0 15px 32px rgba(0, 20, 38, .19);
}

.vvja-cta-inner > a:hover span {
    transform: rotate(45deg);
}


/* ==========================================================
   17. SCROLL ENTRANCE ANIMATIONS
========================================================== */

/*
   Content remains visible without JavaScript.
   JS adds .is-visible to elements entering viewport.
*/

.vvja-page .vvja-reveal.is-visible {
    animation:
        vvjaEnter .8s
        var(--vvja-delay, 0ms)
        var(--vvja-ease)
        both;
}

@keyframes vvjaEnter {

    from {
        opacity: .42;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================
   18. RESPONSIVE - LARGE LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .vvja-container {
        width: calc(100% - 62px);
    }

    .vvja-hero {
        min-height: 405px;
    }

    .vvja-hero-layout {
        grid-template-columns:
            minmax(0, 1fr)
            200px;

        gap: 35px;
    }

    .vvja-hero h1 {
        font-size: clamp(44px, 5vw, 68px);
    }

    .vvja-hero-art {
        width: 195px;
        height: 195px;
    }

    .vvja-art-ring-one {
        width: 190px;
        height: 190px;
    }

    .vvja-art-ring-two {
        width: 145px;
        height: 145px;
    }

    .vvja-art-symbol {
        width: 88px;
        height: 88px;
        border-radius: 25px;
    }

    .vvja-art-symbol svg {
        width: 53px;
        height: 53px;
    }

    .vvja-featured-layout {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(290px, .8fr);

        gap: 17px;
    }

    .vvja-mini-story {
        grid-template-columns:
            38%
            minmax(0, 1fr);

        gap: 12px;
    }

    .vvja-mini-story h3 {
        font-size: 20px;
    }

    .vvja-post-grid {
        column-gap: 20px;
    }
}


/* ==========================================================
   19. RESPONSIVE - TABLET
========================================================== */

@media (max-width: 1000px) {

    .vvja-hero {
        min-height: 0;

        padding: 28px 0 65px;
    }

    .vvja-hero-layout {
        grid-template-columns: 1fr;
    }

    .vvja-hero-art {
        display: none;
    }

    .vvja-hero h1 {
        max-width: 790px;

        font-size: clamp(44px, 6vw, 66px);
    }

    .vvja-hero-copy > p {
        max-width: 680px;
    }

    .vvja-featured-layout {
        grid-template-columns: 1fr;
    }

    .vvja-lead-media {
        min-height: 430px;
    }

    .vvja-feature-stack {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: auto;

        gap: 21px;
    }

    .vvja-mini-story {
        grid-template-columns: 1fr;

        align-items: start;
    }

    .vvja-mini-image {
        aspect-ratio: 1.9 / 1;

        min-height: 0;
    }

    .vvja-post-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================
   20. RESPONSIVE - MOBILE
========================================================== */

@media (max-width: 700px) {

    .vvja-container {
        width: calc(100% - 34px);
    }

    /* HERO */

    .vvja-hero {
        padding: 23px 0 57px;
    }

    .vvja-breadcrumb {
        margin-bottom: 36px;

        font-size: 11px;
    }

    .vvja-eyebrow {
        gap: 9px;

        margin-bottom: 20px;

        font-size: 10px;
        letter-spacing: .09em;
    }

    .vvja-eyebrow-line {
        width: 19px;
    }

    .vvja-hero h1 {
        font-size: clamp(41px, 9.3vw, 59px);

        line-height: 1.12;
    }

    .vvja-hero h1 em {
        margin-top: 6px;
    }

    .vvja-hero-copy > p {
        margin-top: 25px;

        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .vvja-hero::after {
        right: -390px;
    }

    /* FEATURED */

    .vvja-featured {
        padding: 53px 0 57px;
    }

    .vvja-section-head {
        align-items: flex-start;
    }

    .vvja-section-index {
        display: none;
    }

    .vvja-lead-media {
        min-height: 410px;

        border-radius: 13px;
    }

    .vvja-lead-content {
        padding: 23px;
    }

    .vvja-lead-label {
        top: 19px;
        left: 19px;
    }

    .vvja-lead-title {
        font-size: 30px;
    }

    .vvja-feature-stack {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .vvja-mini-story {
        grid-template-columns:
            38%
            minmax(0, 1fr);
    }

    .vvja-mini-image {
        min-height: 140px;

        aspect-ratio: auto;
    }

    /* ARTICLE LIBRARY */

    .vvja-library {
        padding: 57px 0 69px;
    }

    .vvja-library-head {
        align-items: stretch;
    }

    .vvja-search {
        width: 100%;
    }

    .vvja-filters {
        margin-bottom: 28px;
    }

    .vvja-post-grid {
        grid-template-columns: 1fr;

        gap: 39px;
    }

    .vvja-card-media {
        aspect-ratio: 1.65 / 1;
    }

    .vvja-card-arrow {
        opacity: 1;

        transform: translateY(0);
    }

    /* PAGINATION */

    .vvja-pagination {
        gap: 16px;

        margin-top: 55px;
    }

    /* CTA */

    .vvja-cta {
        padding: 57px 0;
    }

    .vvja-cta-inner {
        flex-direction: column;
        align-items: flex-start;

        gap: 25px;
    }
}


/* ==========================================================
   21. SMALL MOBILE
========================================================== */

@media (max-width: 410px) {

    .vvja-hero h1 {
        font-size: 40px;
    }

    .vvja-eyebrow {
        font-size: 9px;
        gap: 8px;
    }

    .vvja-eyebrow-line {
        width: 18px;
    }

    .vvja-lead-media {
        min-height: 365px;
    }

    .vvja-lead-title {
        font-size: 27px;
    }

    .vvja-mini-story {
        grid-template-columns: 1fr;
    }

    .vvja-mini-image {
        aspect-ratio: 1.8 / 1;
    }

    .vvja-page-numbers a {
        min-width: 37px;
        height: 37px;
    }
}


/* ==========================================================
   22. TOUCH DEVICES
========================================================== */

@media (hover: none) {

    .vvja-lead-media:hover,
    .vvja-filter:hover {
        transform: none;
    }

    .vvja-card-arrow {
        opacity: 1;

        transform: none;
    }

    .vvja-post-card:hover .vvja-card-media img,
    .vvja-mini-story:hover .vvja-mini-image img,
    .vvja-lead-media:hover .vvja-lead-image {
        transform: none;
    }
}


/* ==========================================================
   23. REDUCED MOTION ACCESSIBILITY
========================================================== */

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

    .vvja-page *,
    .vvja-page *::before,
    .vvja-page *::after {
        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;
    }

    .vvja-page .vvja-reveal.is-visible,
    .vvja-page .vvja-hero-copy,
    .vvja-page .vvja-hero-art {
        opacity: 1 !important;

        transform: none !important;
    }

    .vvja-page .vvja-hero h1 em::after {
        transform: scaleX(1) !important;

        opacity: 1 !important;
    }
}

/* =====================================================
   VED VAIDYA - PREMIUM BLOG SEARCH FOCUS FIX
   Removes rectangular focus border inside rounded search
===================================================== */

.vvja-page .vvja-search {
    display: flex;
    align-items: center;

    width: min(100%, 360px);
    height: 56px;
    padding: 5px;

    border: 1px solid #d3e5e4;
    border-radius: 100px;

    background: #ffffff;

    box-shadow: 0 7px 24px rgba(4, 48, 67, .055);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

/* Premium focus effect on the outer pill */

.vvja-page .vvja-search:focus-within {
    border-color: #0b9c9b;

    box-shadow:
        0 0 0 4px rgba(10, 168, 157, .10),
        0 12px 30px rgba(5, 68, 82, .08);
}

/* Remove the rectangular input focus styling */

.vvja-page .vvja-search input,
.vvja-page .vvja-search input:focus,
.vvja-page .vvja-search input:focus-visible {
    flex: 1;

    width: 100%;
    min-width: 0;
    height: 100%;

    padding: 0 17px;
    margin: 0;

    border: 0 !important;
    border-radius: 100px;

    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;

    background: transparent !important;
    color: #073e54;

    font-size: 16px !important;
    font-family: inherit;

    appearance: none;
    -webkit-appearance: none;
}

.vvja-page .vvja-search input::placeholder {
    color: #8aa3ab;
    opacity: 1;
}

/* Search button */

.vvja-page .vvja-search button {
    display: grid;
    place-items: center;
    flex: 0 0 44px;

    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 50%;

    background: #06445e;
    color: #ffffff;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .35s ease;
}

.vvja-page .vvja-search button:hover {
    background: #078f98;
    transform: rotate(-8deg);
}

.vvja-page .vvja-search button:focus-visible {
    outline: 2px solid #079d9b;
    outline-offset: 3px;
}

/* Mobile */

@media (max-width: 700px) {
    .vvja-page .vvja-search {
        width: 100%;
        height: 54px;
    }

    .vvja-page .vvja-search button {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }
}