/* ============================================================
   BLOG PAGE — UNIQUE DESIGN SYSTEM (bl- prefix)
   Warm orange/dark hero, editorial card grid, sidebar.
   ============================================================ */

:root {
    --bl-o-900: #2A1200;
    --bl-o-800: #3D1A00;
    --bl-o-700: #5A2600;
    --bl-orange: var(--tf-orange, #FF6B00);
    --bl-teal: #1e9a84;
    --bl-ink: var(--tf-black, #0A0A0A);
    --bl-grey: var(--tf-grey, #7A8580);
    --bl-radius: 18px;
}

.bl-page { overflow-x: hidden; }

/* ============================================================
   0. BANNER
   ============================================================ */
.bl-banner {
    position: relative;
    padding: 150px 0 70px;
    background: linear-gradient(150deg, var(--bl-o-900) 0%, #0A0A0A 70%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.bl-banner__panel {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(560px 320px at 90% -10%, rgba(255, 107, 0, .28), transparent 70%),
        radial-gradient(420px 260px at 6% 120%, rgba(30, 154, 132, .16), transparent 70%);
    z-index: -2;
}

.bl-banner__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(circle at 80% 0%, #000 0%, transparent 65%);
            mask-image: radial-gradient(circle at 80% 0%, #000 0%, transparent 65%);
    z-index: -1;
}

.bl-banner__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: -1;
    opacity: .55;
}

.bl-banner__orb--1 { width: 260px; height: 260px; right: 8%; top: -60px; background: var(--bl-teal); }
.bl-banner__orb--2 { width: 200px; height: 200px; left: 4%; bottom: -60px; background: var(--bl-teal); }

.bl-banner__crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    color: rgba(255,255,255,.6);
    margin-bottom: 18px;
}

.bl-banner__crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.bl-banner__crumb a:hover { color: var(--bl-teal); }
.bl-banner__crumb-sep { opacity: .5; }

.bl-banner__title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.bl-banner__title span {     color: #1c9a84; }

.bl-banner__desc {
    max-width: 620px;
    color: rgba(255,255,255,.7);
    font-size: 1.02rem;
    line-height: 1.7;
}

/* ============================================================
   1. BLOG GRID
   ============================================================ */
.bl-wrap {
    padding: 90px 0 100px;
    background: var(--tf-light, #F5F5F5);
}

.bl-post {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 16px;
}

/* -------- Card (image + footer + heading, all in one box) -------- */
.bl-post__card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #fff;
    border-radius: var(--bl-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    transition: var(--tf-transition, .3s ease);
}

.bl-post:hover .bl-post__card {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(0,0,0,.14);
}

.bl-post__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16/11;
}

.bl-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.bl-post:hover .bl-post__media img {
    transform: scale(1.08);
}

/* -------- Date badge — floats above the card, never clipped -------- */
.bl-post__badge {
position: absolute;
    top: 25px;
    left: 5px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(120deg, var(--bl-teal), #146957);
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .02em;
    padding: 8px 18px;
    border-radius: 40px;
    box-shadow: 0 12px 26px rgba(20, 105, 87, .4);
    border: 3px solid #fff;
    white-space: nowrap;
}

.bl-post__badge i { font-size: .76rem; }

.bl-post__badge--split {
    padding: 6px 18px 6px 6px;
}

.bl-post__badge-day {
    background: #fff;
    color: var(--bl-teal);
    font-weight: 800;
    font-size: .92rem;
    line-height: 1;
    padding: 7px 11px;
    border-radius: 40px;
}

.bl-post__badge-rest {
    font-size: .74rem;
    font-weight: 700;
    padding-left: 2px;
}

/* -------- Footer meta row -------- */
.bl-post__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-top: 1px solid rgba(0,0,0,.06);
}

.bl-post__stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: .84rem;
    color: var(--bl-grey);
    font-weight: 600;
}

.bl-post__stat { display: flex; align-items: center; gap: 6px; }
.bl-post__stat i { color: var(--bl-teal); font-size: 1rem; }

.bl-post__arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bl-teal);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 10px 22px rgba(30,154,132,.35);
    transition: var(--tf-transition, .3s ease);
}

.bl-post:hover .bl-post__arrow {
    background: var(--bl-ink);
    transform: rotate(45deg);
}

/* -------- Title (now inside the card, proper contained layout) -------- */
.bl-post__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--bl-ink);
    line-height: 1.5;
    margin: 0;
    padding: 4px 22px 24px;
}

.bl-post__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--bl-teal), var(--bl-teal));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size .35s ease, color .25s ease;
    padding-bottom: 2px;
}

.bl-post__title a:hover {
    color: var(--bl-teal);
    background-size: 100% 2px;
}

/* ============================================================
   2. NEWSLETTER STRIP
   ============================================================ */
.bl-newsletter {
    padding: 70px 0;
    background: linear-gradient(120deg, #1e9a84, #1e9a84);
    text-align: center;
    color: #fff;
}

.bl-newsletter h3 {
    font-size: 1.7rem;
    margin-bottom: 10px;
}

.bl-newsletter p {
    color: rgba(255,255,255,.85);
    max-width: 560px;
    margin: 0 auto 26px;
}

.bl-newsletter__form {
    display: flex;
    max-width: 460px;
    margin: 0 auto;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.bl-newsletter__form input {
    flex: 1;
    min-width: 220px;
    padding: 13px 18px;
    border-radius: 40px;
    border: none;
    font-size: .9rem;
}

.bl-newsletter__form button {
    padding: 13px 26px;
    border-radius: 40px;
    border: none;
    background: var(--bl-ink);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tf-transition, .3s ease);
}

.bl-newsletter__form button:hover {
    background: #146957;
}

@media (max-width: 767px) {
    .bl-banner__title { font-size: 2.2rem; }
}


.bs-article__figure h3 {
    font-size: 22px;
    line-height: 1.2;
}