/* ============================================================
   Article page styles
   Shared across long-form article pages in Bayani.AI.CorporateWeb.
   ============================================================ */

/* Constrain the background image on long-form article pages.
   background-size: cover on a position:absolute element that spans the full
   page height causes the image to scale up to cover the height dimension,
   making it appear oversized. 100% auto keeps the width at 100% and lets
   height scale proportionally, matching the appearance of shorter pages. */
.public-site-shell::before {
    background-size: 100% auto !important;
}

/* Article subheader bar */
.article-subheader {
    background: rgba(6, 10, 22, 0.88);
    border-top: 2px solid rgba(0, 210, 255, 0.12);
    border-bottom: 2px solid rgba(0, 210, 255, 0.12);
    padding: 0.75rem 0;
}

.article-subheader__avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 2px solid rgba(0, 210, 255, 0.6);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.35);
    object-fit: contain;
    flex-shrink: 0;
    padding: 4px;
}

.article-subheader__sep {
    width: 1px;
    height: 1.5rem;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.article-subheader__icon {
    color: rgba(0, 210, 255, 0.55);
    flex-shrink: 0;
}

.article-subheader__label {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.9);
    white-space: nowrap;
}

/* Decorative filler line after icon */
.article-subheader__filler {
    display: inline-block;
    width: 6rem;
    height: 1px;
    background: linear-gradient(to right, rgba(148, 163, 184, 0.35), transparent);
}

/* Push anchor targets below the fixed top navigation bar when jumping to a section.
   Adjust this value if the header height changes. */
.article-anchor-target {
    scroll-margin-top: 5rem;
}

/* Semi-transparent dark surface behind article content for readability.
   Uses a plain background — no backdrop-filter — to avoid affecting the
   background image rendering. */
.article-body {
/*    background: rgba(8, 13, 26, 0.72);*/
    border-top: 0px solid rgba(0, 210, 255, 0.08);
    border-bottom: 2px solid rgba(0, 210, 255, 0.08);
}

/* Reusable article teaser card used on article listings and homepage feature spots.
   The background image lives on ::after so it can be scaled independently on hover.
   Apply a custom --teaser-bg on the element to set the image for each teaser. */
.article-teaser {
    position: relative;
    min-height: 18.125rem;
    max-height: 26.125rem;
    overflow: hidden;
    border-radius: inherit;
    border: 1px solid rgba(0, 210, 255, 0.16);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0, 210, 255, 0.05), 0 0 30px rgba(0, 210, 255, 0.14);
    isolation: isolate;
}

/* Background image layer — scales on hover without affecting the overlay or content. */
.article-teaser::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--teaser-bg) right top / 80% no-repeat;

    transform: scale(1);
    transition: transform 0.5s ease;
    pointer-events: none;
}

.article-teaser:hover::after {
    transform: scale(1.03);
}

.article-teaser::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6, 10, 22, 0.9) 2%, transparent 100%);
    pointer-events: none;
}

.article-teaser__content {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: inherit;
    align-items: center;
    padding: 1.9rem 2rem;
}

.article-teaser__copy {
    max-width: 36rem;
}

.article-teaser__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 1rem 0.42rem;
    margin-bottom: 1.1rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(0, 210, 255, 0.38);
    background: linear-gradient(180deg, rgba(0, 210, 255, 0.12) 0%, rgba(0, 210, 255, 0.05) 100%);
    color: #7cecff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: inset 0 0 18px rgba(0, 210, 255, 0.08), 0 0 18px rgba(0, 210, 255, 0.12);
}

.article-teaser__title {
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.article-teaser__description {
    margin: 0 0 1.35rem;
    color: rgba(203, 213, 225, 0.82);
    font-size: clamp(0.96rem, 1.05vw, 1.06rem);
    line-height: 1.55;
    max-width: 34rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
}

.article-teaser__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.35rem;
    margin-bottom: 1.4rem;
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.9rem;
}

.article-teaser__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.article-teaser__meta-icon {
    width: 1rem;
    height: 1rem;
    color: rgba(226, 232, 240, 0.9);
    flex-shrink: 0;
}

.article-teaser__cta {
    min-width: 11.5rem;
    padding-inline: 1.5rem;
}

.article-teaser__cta-arrow {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.group:hover .article-teaser__cta-arrow {
    transform: translateX(0.2rem);
}

/* ============================================================
   Article listing card (image-led)
   Used on the Articles landing grid and the homepage insights grid.
   Wrap in:
     <BayaniCard Theme="bayani"
                 BodyCssClass="bc-card__body--flush overflow-hidden h-full">
   and set a custom --article-card-bg on the .articles-card element.
   The :has(.articles-card) rules make the Bayani card shell transparent
   and full-height so the image-led layout fills the card on any page.
   ============================================================ */
[data-bayani-component="card"].bc-card.e-card:has(.articles-card),
[data-bayani-component="card"].bc-card.e-card.bc-panel:has(.articles-card) {
    background: transparent !important;
}

[data-bayani-component="card"].bc-card.e-card:has(.articles-card) .e-card-content,
[data-bayani-component="card"].bc-card.e-card:has(.articles-card) .bc-card__body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.articles-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: transparent;
    isolation: isolate;
}

.articles-card__media {
    position: relative;
    min-height: 15rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 210, 255, 0.08);
}

.articles-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(1, 8, 18, 0.12) 0%, rgba(1, 8, 18, 0.18) 100%),
        var(--article-card-bg) center center / cover no-repeat;
    transform: scale(1);
    transition: transform 0.55s ease;
}

.articles-card:hover .articles-card__media::before {
    transform: scale(1.06);
}

.articles-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(0, 210, 255, 0.2), transparent 28%),
        linear-gradient(180deg, rgba(4, 8, 20, 0.05) 0%, rgba(4, 8, 20, 0.26) 50%, rgba(4, 8, 20, 0.55) 100%);
}

.articles-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1.35rem;
    min-height: 0;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.articles-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.articles-card__eyebrow {
    margin-bottom: 0;
    padding-inline: 0.8rem;
    font-size: 0.68rem;
}

.articles-card__status {
    color: rgba(255, 196, 0, 0.88);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.articles-card__title {
    color: #FFF;
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0 0 0.9rem;
}

.articles-card__description {
    color: rgba(203, 213, 225, 0.76);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.2rem;
    flex: 1 1 auto;
}

.articles-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
    margin-top: auto;
    padding-top: 0.6rem;
    color: rgba(203, 213, 225, 0.74);
    font-size: 0.84rem;
}

.articles-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.articles-card__meta-item svg {
    color: rgba(226, 232, 240, 0.88);
    flex-shrink: 0;
}

.articles-card--placeholder {
    cursor: default;
}

@media (max-width: 767px) {
    .articles-card {
        min-height: 29rem;
    }

    .articles-card__title {
        font-size: 1.85rem;
    }

    .articles-card__description {
        font-size: 0.95rem;
    }
}

/* Mobile: subheader metadata bar wraps instead of overflowing the viewport */
@media (max-width: 639px) {
    .article-subheader__bar {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    .article-subheader__sep {
        display: none;
    }
}

/* Base rule: images must never exceed their container regardless of viewport.
   Without this, .be-article-img has no desktop styles and renders at its full
   intrinsic width, which can overflow the flex wrapper and break the page layout. */
.be-article-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile: un-float article images and stack them above the surrounding text */
@media (max-width: 767px) {
    .articleContentfloatLeft,
    .articleContentfloatRight {
        float: none !important;
        display: block;
        max-width: 100% !important;
        width: 100%;
        margin: 0 0 1.5rem 0 !important;
    }

    .be-article-img {
        max-width: 100% !important;
        width: 100%;
        height: auto;
    }

    .article-teaser {
        min-height: 18.125rem;
        max-height: none;
        background-position: 68% center;
    }

    .article-teaser__content {
        min-height: 18.125rem;
        padding: 1.4rem 1.25rem;
        align-items: flex-end;
    }

    .article-teaser__title {
        font-size: clamp(1.6rem, 6.4vw, 2rem);
    }

    .article-teaser__description {
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .article-teaser__meta {
        gap: 0.7rem 0.95rem;
        font-size: 0.82rem;
    }

    .article-teaser__cta {
        width: 100%;
        justify-content: center;
    }
}

/* Hero section vertical rhythm in rem — reduced on mobile, full on md+ */
.article-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .article-hero {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

/* ============================================================
   Inline body links
   Replaces onmouseover/onmouseout event handlers with :hover.
   --color-accent-primary-rgb and --color-accent-secondary-rgb
   are defined in bayani.css :root.
   ============================================================ */
.article-link {
    color: rgba(var(--color-accent-primary-rgb), 0.75);
    text-decoration: none;
    border-bottom: 1px dotted rgba(var(--color-accent-primary-rgb), 0.4);
    transition: color 0.15s;
}
.article-link:hover { color: var(--color-accent-primary); }

/* Source / citation links — slightly dimmer than body links */
.article-link--source {
    color: rgba(var(--color-accent-primary-rgb), 0.65);
    border-bottom-color: rgba(var(--color-accent-primary-rgb), 0.3);
}
.article-link--source:hover { color: var(--color-accent-primary); }

/* Warning / caution-block links */
.article-link--warning {
    color: rgba(var(--color-accent-secondary-rgb), 0.85);
    border-bottom: 1px dotted rgba(var(--color-accent-secondary-rgb), 0.4);
    text-decoration: none;
    transition: color 0.15s;
}
.article-link--warning:hover { color: var(--color-accent-secondary); }

/* ============================================================
   Table of Contents
   ============================================================ */
.article-toc__container {
    background: rgba(6, 10, 22, 0.82);
    border: 1px solid rgba(var(--color-accent-primary-rgb), 0.18);
    border-radius: 0.625rem;
    overflow: hidden;
}

.article-toc__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(var(--color-accent-primary-rgb), 0.12);
    background: rgba(var(--color-accent-primary-rgb), 0.05);
}

.article-toc__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--color-accent-primary-rgb), 0.85);
}

.article-toc__list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.article-toc__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    text-decoration: none;
    transition: background 0.15s;
}
.article-toc__link:hover { background: rgba(var(--color-accent-primary-rgb), 0.07); }

.article-toc__num {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(var(--color-accent-primary-rgb), 0.5);
    letter-spacing: 0.08em;
    flex-shrink: 0;
    min-width: 1.6rem;
}

.article-toc__sep {
    width: 1px;
    height: 0.9rem;
    background: rgba(var(--color-accent-primary-rgb), 0.18);
    flex-shrink: 0;
}

.article-toc__text {
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.9);
    line-height: 1.35;
}

.article-toc__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid rgba(var(--color-accent-primary-rgb), 0.1);
    background: rgba(var(--color-accent-primary-rgb), 0.03);
}

.article-toc__readtime {
    font-size: 0.68rem;
    color: rgba(148, 163, 184, 0.55);
    letter-spacing: 0.06em;
}

/* ============================================================
   Bullet / numbered list items
   ============================================================ */
.article-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(var(--color-accent-primary-rgb), 0.04);
    border: 1px solid rgba(var(--color-accent-primary-rgb), 0.15);
    border-left: 3px solid var(--color-accent-primary);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
}

.article-item__bullet {
    color: var(--color-accent-primary);
    flex-shrink: 0;
    padding-top: 0.15rem;
}

.article-item__num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(var(--color-accent-primary-rgb), 0.12);
    border: 1px solid rgba(var(--color-accent-primary-rgb), 0.35);
    color: var(--color-accent-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.article-item__body {
    color: #94A3B8;
    padding-top: 0.2rem;
}

.article-item__body strong { color: #fff; }

/* ============================================================
   Tables in article context
   ============================================================ */

/* Clip border-radius and apply article border style */
.article-body .be-table-scroll {
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--color-accent-primary-rgb), 0.15);
    overflow: hidden;
}

.article-body .be-table { font-size: 0.875rem; }

/* Article table header cells — accent background and colour */
.article-body .be-th {
    background: rgba(var(--color-accent-primary-rgb), 0.07);
    color: var(--color-accent-primary);
    border-bottom: 1px solid rgba(var(--color-accent-primary-rgb), 0.25);
}

/* First-column header indent */
.be-th--first { padding-left: 1.25rem; }

/* Article table body cells default to muted slate */
.article-body .be-td { color: #94A3B8; }

/* First-column label cells — accent colour, bold, no wrap */
.article-body .be-td--label {
    color: var(--color-accent-primary);
    font-weight: 600;
    padding-left: 1.25rem;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .article-body .be-th,
    .article-body .be-th--first,
    .article-body .be-td--label {
        white-space: normal;
        overflow-wrap: normal;
        word-break: keep-all;
        hyphens: manual;
    }
}

/* ============================================================
   Strong text and h3 headings inside corner-accent content blocks
   ============================================================ */
.be-corner-accent strong { color: #fff; }
.be-corner-accent h3 { color: #E2E8F0; }

/* ============================================================
   Article tag pills (footer)
   ============================================================ */
.article-tag {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--color-accent-primary-rgb), 0.75);
    background: rgba(var(--color-accent-primary-rgb), 0.07);
    border: 1px solid rgba(var(--color-accent-primary-rgb), 0.18);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}

/* ============================================================
   Author meta bar (article footer)
   ============================================================ */
.article-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: rgba(6, 10, 22, 0.7);
    border: 1px solid rgba(var(--color-accent-primary-rgb), 0.12);
    border-radius: 0.75rem;
}

.article-meta__info {
    min-width: 0;
    flex: 1;
}

.article-meta__name {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.9);
    margin-bottom: 0.15rem;
}

.article-meta__subtitle {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.55);
    letter-spacing: 0.04em;
}

.article-meta__readtime {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.article-meta__readtime-text {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.45);
    letter-spacing: 0.05em;
}

/* ============================================================
   Article CTA section (article footer)
   ============================================================ */
.article-cta {
    text-align: center;
    padding: 3rem 2rem;
    background: rgba(6, 10, 22, 0.6);
    border: 1px solid rgba(var(--color-accent-primary-rgb), 0.14);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

.article-cta__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--color-accent-primary-rgb), 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.article-cta__body { position: relative; }

.article-cta__overline {
    font-size: 1.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-accent-primary-rgb), 0.6);
    margin-bottom: 0.75rem;
}

.article-cta__heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: #E2E8F0;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.article-cta__desc {
    font-size: 0.9rem;
    color: rgba(148, 163, 184, 0.75);
    max-width: 38rem;
    margin: 0 auto 1.75rem;
    line-height: 1.65;
}

.article-cta__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    background: linear-gradient(135deg, var(--color-accent-primary), #0099CC);
    color: #060A16;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 0.5rem;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: opacity 0.15s;
}
.article-cta__btn-primary:hover { opacity: 0.88; }

.article-cta__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    background: transparent;
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.article-cta__btn-secondary:hover {
    border-color: rgba(var(--color-accent-primary-rgb), 0.35);
    color: rgba(var(--color-accent-primary-rgb), 0.85);
}

/* Source label used before citation lists */
.article-source-label {
    color: rgba(148, 163, 184, 0.6);
    font-weight: 600;
}

/* ============================================================
   Particle network hero
   Background powered by tsParticles (wwwroot/js/particle-hero.js).
   Used via the <ParticleHero> Blazor component.
   ============================================================ */

/* Section wrapper — dark page-color base so the canvas has a solid
   ground before tsParticles finishes loading. */
.particle-hero {
    position: relative;
    overflow: hidden;
    background-color: #010812; /* matches --color-bg-page */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (min-width: 768px) {
    .particle-hero {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

/* tsParticles mounts a <canvas> inside this div; it must fill the hero. */
.particle-hero__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Radial vignette: darkens only the center behind the text so the
   surrounding particle network remains visible at the edges. */
.particle-hero__vignette {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(
        ellipse 55% 45% at 50% 47%,
        rgba(1, 8, 18, 0.72) 0%,
        rgba(1, 8, 18, 0.45) 45%,
        rgba(1, 8, 18, 0) 80%
    );
}

/* Thin gradient at the base of the hero for clean section stacking. */
.particle-hero__bottom-fade {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 5rem;
    background: linear-gradient(to bottom, transparent, #010812);
}

/* Content layer floats above the canvas, vignette, and bottom fade. */
.particle-hero__content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Rise-in entrance animations for title and subtitle. */
@keyframes particle-hero-rise {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

.particle-hero__title {
    animation: particle-hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.12s;
}

.particle-hero__subtitle {
    animation: particle-hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.22s;
    margin-top: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(248, 255, 255, 0.90);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1.5));
}

@media (min-width: 640px) {
    .particle-hero__subtitle {
        font-size: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .particle-hero__title,
    .particle-hero__subtitle {
        animation: none !important;
    }
}