/* ==========================================================================
   blog.css — Styles unique to blog.php
   --------------------------------------------------------------------------
   Requires: tokens.css, base.css (in that order, before this file).

   The .blog-page wrapper and its duplicate palette are gone — tokens.css owns
   the colours. Class names are prefixed .bl-* rather than reusing .card and
   .hero, which already mean something else in base.css and index.css. The old
   file only got away with .card because everything was scoped under
   .blog-page; that works until someone moves a block.

   Shared from base.css — do not redefine:
     .eyebrow / .seal, .lbl, .stitle, .container, .btn, .link

   Contents:
     1. Hero
     2. Forbes band
     3. Tabs
     4. Section
     5. Post card
     6. Modal
     7. Responsive
   ========================================================================== */


/* ==========================================================================
   1. Hero
   ========================================================================== */
.bl-hero {
    position: relative;
    padding: 70px var(--space-5) 80px;
    background: var(--gradient-brand-hero);
    color: var(--color-text-inverse);
    text-align: center;
    overflow: hidden;
}

/* .bl-hero__portrait and @keyframes blFloat REMOVED 2026-07-15 — the hero
   portrait is gone from blog.php, and blFloat had exactly one user. Deleted
   rather than left behind: dead CSS that still parses is worse than none,
   because the next person reads it as intent.

   The image file itself (images/Rani-Yadav-Ranjan-682x1024.jpg) stays put —
   about.php uses it twice and experience.php once. Only the blog usage is
   gone.

   h1 keeps margin-top: --space-6. It was spacing the headline off the
   portrait, and with the portrait gone that gap now sits between the header
   and the headline, where it still reads correctly against the hero's 70px
   padding-top. */
/* ==========================================================================
   1b. On air — the podcast band
   --------------------------------------------------------------------------
   Sits between the Forbes band and the writing tabs: Rani's best-performing
   single piece of content (60,000+ views) had no place on her own content
   page. The .ytf facade itself is base.css — this is only the band around it.
   ========================================================================== */
.bl-air {
    padding: var(--space-12) var(--space-5);
    background: var(--gradient-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.bl-air__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.bl-air__grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.15fr);
    gap: var(--space-9);
    align-items: center;
    margin-top: var(--space-6);
}

.bl-air__video {
    min-width: 0;
}

.bl-air__body h3 {
    margin: var(--space-2) 0 var(--space-3);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(20px, 2.6vw, 27px);
    line-height: 1.16;
    color: var(--color-brand);
}

.bl-air__body p {
    font-size: var(--text-md);
    line-height: var(--leading-card);
    color: var(--color-text-body);
}

.bl-air__meta {
    margin-top: var(--space-4);
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

.bl-air__meta a {
    color: var(--color-action);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.bl-air__meta a:hover,
.bl-air__meta a:focus {
    border-bottom-color: var(--color-action);
}

@media (max-width: 820px) {
    .bl-air__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}


.bl-hero h1 {
    margin: var(--space-6) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(30px, 4.6vw, 48px);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-inverse);
}

.bl-hero__sub {
    max-width: 46ch;
    margin: var(--space-3) auto 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(15px, 2vw, 19px);
    color: #cdd6e6;
}

.bl-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: 10px var(--space-6);
    background: rgba(176, 141, 79, 0.14);
    border: 1px solid rgba(205, 177, 130, 0.5);
    border-radius: 40px;
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-soft);
}


/* ==========================================================================
   2. Forbes band
   ========================================================================== */
.bl-forbes {
    padding: 58px var(--container-padding-x);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.bl-forbes__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.bl-forbes__eyebrow {
    margin-bottom: var(--space-1);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--color-action);
    text-align: center;
}

.bl-forbes__h {
    margin-bottom: var(--space-8);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(24px, 3.2vw, 32px);
    color: var(--color-brand);
    text-align: center;
}

.bl-forbes__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.bl-fcard {
    padding: var(--space-8);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-action);
    border-radius: var(--radius-md);
    transition: transform var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease);
}

.bl-fcard:hover {
    transform: var(--lift-md);
    box-shadow: var(--shadow-card-hover);
}

.bl-fcard__src {
    font-size: 11px;
    font-weight: var(--weight-black);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-action);
}

.bl-fcard h3 {
    margin: var(--space-3) 0 var(--space-3);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 22px;
    line-height: 1.22;
    color: var(--color-brand);
}

.bl-fcard p {
    margin-bottom: var(--space-4);
    color: var(--color-text-body);
    font-size: 15px;
    line-height: 1.62;
}

.bl-fcard a {
    font-size: 14.5px;
    font-weight: var(--weight-bold);
    color: var(--color-action);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast) var(--ease);
}

.bl-fcard a:hover,
.bl-fcard a:focus-visible { border-bottom-color: var(--color-action); }

.bl-fcard a::after { content: " \2192"; }


/* ==========================================================================
   3. Tabs
   Real ARIA tabs now — role="tablist"/"tab"/"tabpanel", roving tabindex,
   arrow keys. They were plain <button>s toggling inline display before, which
   a screen reader reads as two unrelated buttons and two unrelated regions.
   ========================================================================== */
.bl-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 44px var(--space-5) var(--space-6);
}

.bl-tab {
    padding: var(--space-3) var(--space-7);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-brand);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                background-color var(--duration-fast) var(--ease);
}

.bl-tab:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.bl-tab[aria-selected="true"] {
    background: var(--navy-800);
    border-color: var(--navy-800);
    color: var(--color-text-inverse);
}


/* ==========================================================================
   4. Section
   ========================================================================== */
.bl-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-9) var(--container-padding-x) 90px;
}

.bl-section > h2 {
    margin-bottom: 44px;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(26px, 3.4vw, 36px);
    color: var(--color-brand);
    text-align: center;
}

.bl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--space-7);
}


/* ==========================================================================
   5. Post card
   ========================================================================== */
.bl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease),
                border-color var(--duration-base) var(--ease);
}

.bl-card:hover,
.bl-card:focus-within {
    transform: translateY(-7px);
    box-shadow: 0 16px 34px rgba(14, 27, 51, 0.13);
    border-color: var(--color-accent-soft);
}

/* Garnet→brass hairline on hover */
.bl-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--garnet-600), var(--brass-500));
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease);
    z-index: 2;
}

.bl-card:hover::before,
.bl-card:focus-within::before { opacity: 1; }

.bl-card__img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-bottom: 1px solid var(--color-border);
    background: var(--navy-800);
}

/* Rendered by blog_img() when the file isn't on disk. */
.bl-card__img--empty {
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(45deg,
            rgba(176, 141, 79, 0.05) 0 12px,
            transparent 12px 24px),
        var(--navy-800);
}

.bl-card__img--empty span {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    color: rgba(205, 177, 130, 0.65);
}

.bl-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-7);
}

.bl-card__body h3 {
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 21px;
    line-height: 1.22;
    color: var(--color-brand);
}

.bl-card__body p {
    flex: 1;
    margin-bottom: var(--space-4);
    color: var(--color-text-body);
    font-size: 15px;
    line-height: var(--leading-card);
}

.bl-card__body a,
.bl-card__body button.bl-more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    color: var(--color-action);
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: var(--weight-bold);
    text-decoration: none;
    cursor: pointer;
    transition: gap var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease);
}

.bl-card__body a:hover,
.bl-card__body button.bl-more:hover,
.bl-card__body a:focus-visible,
.bl-card__body button.bl-more:focus-visible {
    gap: 11px;
    border-bottom-color: var(--color-action);
}

.bl-card__body a::after,
.bl-card__body button.bl-more::after { content: "\2192"; }

.bl-source {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 5px 13px;
    background: var(--navy-800);
    border-radius: 20px;
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    color: var(--color-accent-soft);
}

.bl-date {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}


/* ==========================================================================
   6. Modal
   <dialog> now, not a div with display:none. The browser gives focus
   trapping, Escape, inertness of the page behind, and returns focus to the
   trigger — all of which the old version lacked.
   ========================================================================== */
.bl-modal {
    width: min(800px, 100%);
    max-height: 88vh;
    padding: 0;
    border: 0;
    border-top: 4px solid var(--color-action);
    border-radius: var(--radius-md);
    background: var(--color-bg-raised);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: visible;
}

.bl-modal::backdrop {
    background: rgba(9, 17, 34, 0.9);
    backdrop-filter: blur(5px);
}

.bl-modal__inner {
    padding: 46px;
    max-height: calc(88vh - 4px);
    overflow-y: auto;
}

.bl-modal__img {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-6);
    border-radius: var(--radius-md);
}

.bl-modal__title {
    margin-bottom: var(--space-4);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(22px, 3vw, 30px);
    color: var(--color-brand);
}

.bl-modal__text {
    color: #2b3340;
    font-size: 16px;
    line-height: 1.8;
    white-space: pre-line;
}

.bl-modal__close {
    position: absolute;
    top: 16px;
    right: 20px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 0;
    border-radius: var(--radius-round);
    color: var(--color-text-muted);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease),
                background-color var(--duration-fast) var(--ease);
}

.bl-modal__close:hover,
.bl-modal__close:focus-visible {
    color: var(--color-action);
    background: rgba(125, 31, 43, 0.08);
}

.bl-modal__share {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.bl-modal__share p {
    margin-bottom: var(--space-3);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
}

.bl-share {
    margin: 6px 6px 0 0;
    padding: 10px var(--space-6);
    background: var(--color-bg-raised);
    border: 1px solid var(--navy-800);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

.bl-share:hover,
.bl-share:focus-visible {
    background: var(--navy-800);
    color: var(--color-text-inverse);
}


/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .bl-grid,
    .bl-forbes__grid { grid-template-columns: 1fr; }

    .bl-tabs {
        flex-direction: column;
        align-items: center;
    }

    .bl-modal__inner { padding: var(--space-7) var(--space-5); }
}