/* ============================================================
   ALGORIXSTUDIOS — BLOG LISTING
   File: assets/blog.css

   Blog-specific styles only.
   Shared navbar / footer / buttons / reveal animations
   remain in shared.css.
============================================================ */


/* ============================================================
   PAGE
============================================================ */

body.has-algorix-blog-page .ax-blog-page {
    --ax-blog-dark: #0d3540;
    --ax-blog-dark-2: #143f50;
    --ax-blog-teal: #1c7080;
    --ax-blog-accent: #4a8fa3;
    --ax-blog-accent-light: #a7d7e0;

    --ax-blog-text: #14333c;
    --ax-blog-heading: #102b36;
    --ax-blog-muted: #647d84;

    --ax-blog-line: #d8e5e8;
    --ax-blog-surface: #f5f9fa;
    --ax-blog-surface-2: #edf5f7;

    --ax-blog-white: #ffffff;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: clip;

    color: var(--ax-blog-text);
    background: #ffffff;
}


/* ============================================================
   ASTRA / GUTENBERG RESET
   Blog page only.
============================================================ */

/* Hide Astra's default "Blog" page title. */
body.has-algorix-blog-page .entry-header,
body.has-algorix-blog-page header.entry-header,
body.has-algorix-blog-page .entry-title,
body.has-algorix-blog-page .page-title,
body.has-algorix-blog-page .ast-single-post-order {
    display: none !important;
}


/*
 * Remove Astra + Gutenberg restrictions around the shortcode.
 */
body.has-algorix-blog-page .wp-block-shortcode,
body.has-algorix-blog-page .entry-content > *,
body.has-algorix-blog-page #content,
body.has-algorix-blog-page #content > .ast-container,
body.has-algorix-blog-page .site-content,
body.has-algorix-blog-page .site-content > .ast-container,
body.has-algorix-blog-page #primary,
body.has-algorix-blog-page .content-area,
body.has-algorix-blog-page #main,
body.has-algorix-blog-page .site-main,
body.has-algorix-blog-page article.page,
body.has-algorix-blog-page .ast-article-single,
body.has-algorix-blog-page .entry-content {
    width: 100% !important;
    max-width: none !important;

    flex: 0 0 100% !important;
    float: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Astra may leave its content container as flex. */
body.has-algorix-blog-page #content > .ast-container,
body.has-algorix-blog-page .site-content > .ast-container {
    display: block !important;
}


/* Blog listing has no Astra sidebar. */
body.has-algorix-blog-page #secondary,
body.has-algorix-blog-page .secondary,
body.has-algorix-blog-page .widget-area.secondary {
    display: none !important;
}


/* ============================================================
   BLOG CONTENT CONTAINER
   Same proven width system as Contact / Portfolio.
============================================================ */

body.has-algorix-blog-page
.ax-blog-page
.ax-shell {
    width: min(
        1180px,
        calc(100% - clamp(32px, 7vw, 96px))
    ) !important;

    max-width: 1180px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


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

.ax-blog-hero {
    position: relative;
    isolation: isolate;

    width: 100%;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(88, 173, 191, 0.28),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(255, 255, 255, 0.04),
            transparent 26%
        ),
        linear-gradient(
            105deg,
            #103c49 0%,
            #155666 58%,
            #287789 100%
        );
}


.ax-blog-hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -2;

    pointer-events: none;

    opacity: 0.14;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.09) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


.ax-blog-hero::after {
    content: "";

    position: absolute;
    right: -180px;
    bottom: -270px;
    z-index: -1;

    width: 560px;
    height: 560px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.025);
}


.ax-blog-hero__inner {
    position: relative;
    z-index: 1;

    min-height: clamp(590px, 72vh, 760px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(330px, 0.82fr);

    align-items: center;

    gap: clamp(50px, 7vw, 104px);

    padding-top: clamp(100px, 10vw, 140px);
    padding-bottom: clamp(88px, 9vw, 126px);
}


.ax-blog-hero__copy {
    max-width: 800px;
}


body.has-algorix-blog-page
.ax-blog-hero
.ax-eyebrow {
    color: var(--ax-blog-accent-light) !important;
}


.ax-blog-hero__title {
    max-width: 820px;

    margin: 16px 0 26px;

    color: #ffffff;

    font-size: clamp(48px, 5.7vw, 82px);
    line-height: 0.99;

    letter-spacing: -0.052em;

    font-weight: 700;
}


.ax-blog-hero__body {
    max-width: 720px;

    margin: 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.76;
}


/* ============================================================
   HERO NETWORK VISUAL
============================================================ */

.ax-blog-hero__visual {
    min-height: 390px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.ax-blog-network {
    position: relative;

    width: clamp(300px, 31vw, 420px);

    aspect-ratio: 1;
}


.ax-blog-network::before,
.ax-blog-network::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    border-radius: 50%;

    transform: translate(-50%, -50%);
}


.ax-blog-network::before {
    width: 76%;
    height: 76%;

    border: 1px solid rgba(255, 255, 255, 0.13);
}


.ax-blog-network::after {
    width: 100%;
    height: 100%;

    border: 1px dashed rgba(255, 255, 255, 0.11);

    animation:
        axBlogNetworkSpin 34s linear infinite;
}


.ax-blog-network__core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;

    width: clamp(100px, 9vw, 126px);

    aspect-ratio: 1;

    display: grid;
    place-items: center;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 28%;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0.07)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.ax-blog-network__core span {
    font-size: clamp(31px, 4vw, 46px);
    line-height: 1;

    font-weight: 650;

    letter-spacing: -0.05em;
}


/* Connector lines */
.ax-blog-network__line {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 1px;
    height: 70%;

    transform-origin: center;

    background:
        linear-gradient(
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );
}


.ax-blog-network__line--one {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}


.ax-blog-network__line--two {
    transform:
        translate(-50%, -50%)
        rotate(60deg);
}


.ax-blog-network__line--three {
    transform:
        translate(-50%, -50%)
        rotate(-60deg);
}


/* Nodes */
.ax-blog-network__node {
    position: absolute;
    z-index: 6;

    min-width: 62px;
    height: 58px;

    padding: 0 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 18px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.10);

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.12);

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

    font-size: 10px;
    line-height: 1;

    font-weight: 750;

    letter-spacing: 0.08em;
}


.ax-blog-network__node--ai {
    top: 2%;
    left: 44%;

    animation:
        axBlogFloat 4.4s ease-in-out infinite;
}


.ax-blog-network__node--api {
    top: 45%;
    left: -2%;

    animation:
        axBlogFloat 5s ease-in-out infinite 0.5s;
}


.ax-blog-network__node--cloud {
    top: 45%;
    right: -6%;

    animation:
        axBlogFloat 4.8s ease-in-out infinite 0.9s;
}


.ax-blog-network__node--code {
    bottom: 1%;
    left: 42%;

    animation:
        axBlogFloat 5.2s ease-in-out infinite 1.2s;
}


/* ============================================================
   BLOG CONTENT
============================================================ */

.ax-blog-content {
    width: 100%;

    padding:
        clamp(82px, 8vw, 122px)
        0
        clamp(90px, 9vw, 140px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fafb 100%
        );
}


/* ============================================================
   BLOG HEADING
============================================================ */

.ax-blog-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.72fr);

    gap: clamp(36px, 6vw, 90px);

    align-items: end;

    margin-bottom: 42px;
}


.ax-blog-heading > div {
    max-width: 680px;
}


.ax-blog-heading__body {
    max-width: 560px;

    margin-bottom: 4px !important;
}


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

.ax-blog-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 48px;

    padding-bottom: 22px;

    border-bottom: 1px solid var(--ax-blog-line);
}


.ax-blog-filter {
    min-height: 38px;

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

    padding: 8px 15px;

    border: 1px solid #d6e3e6;
    border-radius: 999px;

    color: #49666e !important;

    background: #ffffff;

    text-decoration: none !important;

    font-size: 12px;
    line-height: 1;

    font-weight: 700;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}


.ax-blog-filter:hover {
    transform: translateY(-2px);

    color: var(--ax-blog-teal) !important;

    border-color: #b9d1d6;

    background: #f2f8f9;
}


.ax-blog-filter.is-active {
    color: #ffffff !important;

    border-color: var(--ax-blog-teal);

    background: var(--ax-blog-teal);
}


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

.ax-blog-featured {
    min-height: 480px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(360px, 0.9fr);

    overflow: hidden;

    margin-bottom: clamp(58px, 7vw, 84px);

    border: 1px solid var(--ax-blog-line);
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 28px 76px rgba(18, 61, 72, 0.08);
}


.ax-blog-featured__media {
    position: relative;

    display: block;

    min-height: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #123e4a,
            #287789
        );
}


.ax-blog-featured__media img {
    width: 100%;
    height: 100%;
    min-height: 480px;

    display: block;

    object-fit: cover;

    transition:
        transform 600ms cubic-bezier(.2, .7, .2, 1);
}


.ax-blog-featured:hover
.ax-blog-featured__media img {
    transform: scale(1.035);
}


.ax-blog-featured__placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(255, 255, 255, 0.12),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #103d49,
            #287789
        );
}


.ax-blog-featured__placeholder::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
}


.ax-blog-featured__placeholder span {
    position: relative;
    z-index: 1;

    font-size: clamp(48px, 6vw, 78px);

    line-height: 1;

    font-weight: 650;

    letter-spacing: -0.06em;
}


.ax-blog-featured__placeholder small {
    position: relative;
    z-index: 1;

    color: rgba(255, 255, 255, 0.65);

    font-size: 10px;

    font-weight: 750;

    letter-spacing: 0.20em;
}


.ax-blog-featured__content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(36px, 4.5vw, 62px);
}


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

.ax-blog-meta {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    color: #789098;

    font-size: 11px;
    line-height: 1.4;

    font-weight: 650;
}


.ax-blog-category {
    color: var(--ax-blog-teal);

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* ============================================================
   FEATURED ARTICLE CONTENT
============================================================ */

.ax-blog-featured__title {
    margin: 0 0 20px;

    color: var(--ax-blog-heading);

    font-size: clamp(34px, 3.5vw, 52px);
    line-height: 1.04;

    letter-spacing: -0.045em;
}


.ax-blog-featured__title a {
    color: inherit !important;

    text-decoration: none !important;
}


.ax-blog-featured__excerpt {
    max-width: 580px;

    margin: 0 0 28px;

    color: var(--ax-blog-muted);

    font-size: 15px;
    line-height: 1.75;
}


.ax-blog-read-link {
    width: fit-content;

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

    gap: 10px;

    color: var(--ax-blog-teal) !important;

    text-decoration: none !important;

    font-size: 13px;

    font-weight: 800;
}


.ax-blog-read-link span {
    display: inline-block;

    font-size: 18px;

    transition:
        transform 180ms ease;
}


.ax-blog-read-link:hover span {
    transform: translateX(4px);
}


/* ============================================================
   ARTICLES GRID
============================================================ */

.ax-blog-grid {
    display: grid;

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

    gap: 24px;
}


/* ============================================================
   ARTICLE CARD
============================================================ */

.ax-blog-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--ax-blog-line);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 18px 48px rgba(17, 62, 73, 0.045);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}


.ax-blog-card:hover {
    transform: translateY(-6px);

    border-color: #bfd3d8;

    box-shadow:
        0 28px 64px rgba(17, 62, 73, 0.09);
}


.ax-blog-card__media {
    position: relative;

    display: block;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #123e4a,
            #287789
        );
}


.ax-blog-card__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 500ms cubic-bezier(.2, .7, .2, 1);
}


.ax-blog-card:hover
.ax-blog-card__media img {
    transform: scale(1.045);
}


.ax-blog-card__placeholder {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: rgba(255, 255, 255, 0.92);

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(255, 255, 255, 0.12),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #143f50,
            #2b7181
        );
}


.ax-blog-card__placeholder::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}


.ax-blog-card__placeholder span {
    position: relative;
    z-index: 1;

    font-size: 42px;

    line-height: 1;

    font-weight: 650;

    letter-spacing: -0.06em;
}


.ax-blog-card__content {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 26px 26px 24px;
}


.ax-blog-card__title {
    margin: 0 0 14px;

    color: var(--ax-blog-heading);

    font-size: clamp(21px, 1.8vw, 27px);
    line-height: 1.14;

    letter-spacing: -0.032em;
}


.ax-blog-card__title a {
    color: inherit !important;

    text-decoration: none !important;
}


.ax-blog-card__excerpt {
    margin: 0 0 24px;

    color: var(--ax-blog-muted);

    font-size: 13px;
    line-height: 1.7;
}


.ax-blog-card__footer {
    margin-top: auto;
    padding-top: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    border-top: 1px solid #e8eff1;

    color: #82969c;

    font-size: 11px;
}


.ax-blog-card__footer a {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--ax-blog-teal) !important;

    background: var(--ax-blog-surface);

    text-decoration: none !important;

    font-size: 17px;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.ax-blog-card__footer a:hover {
    transform: translateX(3px);

    color: #ffffff !important;

    background: var(--ax-blog-teal);
}


/* ============================================================
   EMPTY STATE
============================================================ */

.ax-blog-empty {
    max-width: 780px;

    margin: 54px auto 0;

    padding:
        clamp(48px, 6vw, 78px)
        clamp(30px, 5vw, 64px);

    border: 1px solid var(--ax-blog-line);
    border-radius: 24px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% -5%,
            rgba(74, 143, 163, 0.09),
            transparent 40%
        ),
        #ffffff;

    box-shadow:
        0 24px 64px rgba(17, 62, 73, 0.06);
}


.ax-blog-empty__mark {
    width: 84px;
    height: 84px;

    display: grid;
    place-items: center;

    margin:
        0
        auto
        28px;

    border-radius: 24px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #174b58,
            #287789
        );

    box-shadow:
        0 18px 42px rgba(28, 112, 128, 0.18);

    font-size: 27px;

    font-weight: 650;

    letter-spacing: -0.05em;
}


.ax-blog-empty h3 {
    max-width: 580px;

    margin: 8px auto 18px;

    color: var(--ax-blog-heading);

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.06;

    letter-spacing: -0.04em;
}


.ax-blog-empty > p:not(.ax-eyebrow) {
    max-width: 620px;

    margin:
        0
        auto
        26px;

    color: var(--ax-blog-muted);

    font-size: 15px;
    line-height: 1.75;
}


.ax-blog-empty .ax-blog-read-link {
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   PAGINATION
============================================================ */

.ax-blog-pagination {
    margin-top: 58px;
}


.ax-blog-pagination ul {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.ax-blog-pagination li {
    margin: 0;
}


.ax-blog-pagination .page-numbers {
    min-width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0 12px;

    border: 1px solid var(--ax-blog-line);
    border-radius: 11px;

    color: #4b6971 !important;

    background: #ffffff;

    text-decoration: none !important;

    font-size: 13px;

    font-weight: 700;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.ax-blog-pagination a.page-numbers:hover {
    transform: translateY(-2px);

    color: var(--ax-blog-teal) !important;

    border-color: #b8d0d5;

    background: #f3f8f9;
}


.ax-blog-pagination .page-numbers.current {
    color: #ffffff !important;

    border-color: var(--ax-blog-teal);

    background: var(--ax-blog-teal);
}


/* ============================================================
   BLOG CTA
============================================================ */

.ax-blog-cta {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        clamp(72px, 7vw, 104px)
        0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(255, 255, 255, 0.10),
            transparent 25%
        ),
        linear-gradient(
            110deg,
            #103c49,
            #176173 65%,
            #287789
        );
}


.ax-blog-cta::after {
    content: "";

    position: absolute;

    right: -100px;
    bottom: -180px;

    width: 360px;
    height: 360px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}


.ax-blog-cta__inner {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.72fr);

    gap: clamp(40px, 7vw, 100px);

    align-items: center;
}


body.has-algorix-blog-page
.ax-blog-cta
.ax-eyebrow {
    color: var(--ax-blog-accent-light) !important;
}


.ax-blog-cta__title {
    max-width: 690px;

    margin: 14px 0 0;

    color: #ffffff;

    font-size: clamp(38px, 4.7vw, 66px);
    line-height: 1;

    letter-spacing: -0.048em;
}


.ax-blog-cta__action {
    max-width: 520px;

    justify-self: end;
}


.ax-blog-cta__action p {
    margin: 0 0 24px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;
    line-height: 1.75;
}


/* ============================================================
   SHARED FOOTER WIDTH
   Footer appearance remains in shared.css.
============================================================ */

body.has-algorix-blog-page
.ax-blog-page
.ax-site-footer {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ============================================================
   BLOG-SPECIFIC ANIMATIONS
============================================================ */

@keyframes axBlogNetworkSpin {
    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


@keyframes axBlogFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* ============================================================
   SMALL DESKTOP / LAPTOP
============================================================ */

@media (max-width: 1180px) {

    .ax-blog-hero__inner {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(310px, 0.9fr);

        gap: 42px;
    }


    .ax-blog-featured {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, 0.9fr);
    }


    .ax-blog-grid {
        gap: 20px;
    }
}


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

@media (max-width: 920px) {

    body.has-algorix-blog-page
    .ax-blog-page
    .ax-shell {
        width: min(
            calc(100% - 44px),
            760px
        ) !important;
    }


    .ax-blog-hero__inner {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 26px;

        padding-top: 90px;
        padding-bottom: 80px;
    }


    .ax-blog-hero__copy {
        max-width: 740px;
    }


    .ax-blog-hero__title {
        max-width: 720px;
    }


    .ax-blog-hero__visual {
        min-height: 330px;

        justify-content: flex-start;
    }


    .ax-blog-network {
        width: min(350px, 70vw);

        margin-left: 24px;
    }


    .ax-blog-heading {
        grid-template-columns: 1fr;

        gap: 18px;

        align-items: start;
    }


    .ax-blog-heading__body {
        max-width: 650px;
    }


    .ax-blog-featured {
        min-height: auto;

        grid-template-columns: 1fr;
    }


    .ax-blog-featured__media {
        min-height: 380px;
    }


    .ax-blog-featured__media img {
        min-height: 380px;
    }


    .ax-blog-featured__content {
        padding: 40px;
    }


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


    .ax-blog-cta__inner {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .ax-blog-cta__action {
        max-width: 650px;

        justify-self: start;
    }
}


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

@media (max-width: 620px) {

    body.has-algorix-blog-page
    .ax-blog-page
    .ax-shell {
        width: min(
            calc(100% - 30px),
            560px
        ) !important;
    }


    .ax-blog-hero__inner {
        padding-top: 70px;
        padding-bottom: 66px;
    }


    .ax-blog-hero__title {
        margin-top: 12px;
        margin-bottom: 20px;

        font-size: clamp(42px, 12.5vw, 58px);
        line-height: 0.99;
    }


    .ax-blog-hero__body {
        font-size: 16px;
        line-height: 1.68;
    }


    .ax-blog-hero__visual {
        min-height: 270px;

        justify-content: center;
    }


    .ax-blog-network {
        width: min(270px, 76vw);

        margin-left: 0;
    }


    .ax-blog-network__node {
        min-width: 48px;
        height: 48px;

        padding: 0 9px;

        border-radius: 15px;

        font-size: 8px;
    }


    .ax-blog-content {
        padding-top: 66px;
        padding-bottom: 82px;
    }


    .ax-blog-heading {
        margin-bottom: 30px;
    }


    .ax-blog-filters {
        gap: 8px;

        margin-bottom: 34px;

        padding-bottom: 18px;
    }


    .ax-blog-filter {
        min-height: 36px;

        padding: 7px 12px;

        font-size: 11px;
    }


    .ax-blog-featured {
        margin-bottom: 50px;

        border-radius: 18px;
    }


    .ax-blog-featured__media {
        min-height: 250px;
    }


    .ax-blog-featured__media img {
        min-height: 250px;
    }


    .ax-blog-featured__content {
        padding: 28px 22px 30px;
    }


    .ax-blog-featured__title {
        font-size: 31px;
    }


    .ax-blog-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .ax-blog-card {
        border-radius: 18px;
    }


    .ax-blog-card__content {
        padding: 24px 21px 22px;
    }


    .ax-blog-card__title {
        font-size: 24px;
    }


    .ax-blog-empty {
        margin-top: 36px;

        padding:
            42px
            22px;

        border-radius: 18px;
    }


    .ax-blog-empty__mark {
        width: 72px;
        height: 72px;

        border-radius: 20px;

        font-size: 24px;
    }


    .ax-blog-pagination {
        margin-top: 44px;
    }


    .ax-blog-cta {
        padding-top: 66px;
        padding-bottom: 72px;
    }


    .ax-blog-cta__title {
        font-size: clamp(36px, 10vw, 50px);
    }


    .ax-blog-cta__action .ax-button {
        width: 100%;
    }
}


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

@media (max-width: 390px) {

    body.has-algorix-blog-page
    .ax-blog-page
    .ax-shell {
        width: calc(100% - 24px) !important;
    }


    .ax-blog-hero__title {
        font-size: 40px;
    }


    .ax-blog-featured__content {
        padding:
            25px
            18px
            27px;
    }


    .ax-blog-card__content {
        padding:
            22px
            18px
            20px;
    }


    .ax-blog-pagination .page-numbers {
        min-width: 38px;
        height: 38px;

        padding: 0 10px;
    }
}


/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
============================================================ */

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

    .ax-blog-network::after,
    .ax-blog-network__node {
        animation: none !important;
    }


    .ax-blog-featured__media img,
    .ax-blog-card,
    .ax-blog-card__media img,
    .ax-blog-filter,
    .ax-blog-read-link span,
    .ax-blog-card__footer a,
    .ax-blog-pagination .page-numbers {
        transition: none !important;
    }


    .ax-blog-featured:hover
    .ax-blog-featured__media img,
    .ax-blog-card:hover,
    .ax-blog-card:hover
    .ax-blog-card__media img,
    .ax-blog-filter:hover,
    .ax-blog-card__footer a:hover,
    .ax-blog-pagination a.page-numbers:hover {
        transform: none !important;
    }
}

/* ============================================================
   BLOG CTA — START A CONVERSATION BUTTON
   ============================================================ */

.ax-blog-cta .ax-button.ax-button--light {
    min-height: 46px;

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

    padding: 12px 22px;

    border: 1px solid rgba(255,255,255,.92);
    border-radius: 12px;

    color: #174b58 !important;
    background: #ffffff !important;

    box-shadow:
        0 10px 26px
        rgba(7, 35, 43, .18);

    font-size: .9rem;
    font-weight: 800;
    line-height: 1;

    text-decoration: none !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.ax-blog-cta .ax-button.ax-button--light:hover {
    color: #174b58 !important;
    background: #f3fafb !important;

    transform: translateY(-2px);

    box-shadow:
        0 14px 32px
        rgba(7, 35, 43, .24);
}


.ax-blog-cta .ax-button.ax-button--light:focus-visible {
    outline: 3px solid rgba(255,255,255,.35);
    outline-offset: 3px;
}