/* ============================================================
   FarmersBD — Blog Details Page Styles
   Premium aquatic-themed single blog article design
   ============================================================ */

/* ── Hero Header ─────────────────────────────────────────── */
.blog-hero {
    background: linear-gradient(135deg, #0c2d48 0%, #0a4d68 40%, #0e7490 100%);
    padding: 2.5rem 0 3rem;
    position: relative;
    overflow: hidden;
}

.blog-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.blog-hero .breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 1rem;
}

.blog-hero .breadcrumb-item a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
}

.blog-hero .breadcrumb-item a:hover {
    color: #fff;
}

.blog-hero .breadcrumb-item.active {
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
}

.blog-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.4);
    content: '›';
}

.blog-hero-title {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.blog-hero-excerpt {
    color: rgba(255,255,255,0.8);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 700px;
    margin-bottom: 1.25rem;
}

.blog-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
}

.blog-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
}

.blog-hero-meta-item i {
    color: #38bdf8;
    font-size: 0.9rem;
}

/* Decorative stamp badge */
.blog-hero-stamp {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%) rotate(8deg);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 3px dashed rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    animation: stampFloat 4s ease-in-out infinite;
}

@keyframes stampFloat {
    0%, 100% { transform: translateY(-50%) rotate(8deg); }
    50% { transform: translateY(calc(-50% - 6px)) rotate(10deg); }
}

/* ── Content Area ────────────────────────────────────────── */
.blog-details-wrap {
    padding: 2rem 0 3rem;
    background: #f0f9ff;
    min-height: 60vh;
}

.blog-article-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    border: 1px solid rgba(14, 116, 144, 0.08);
}

/* Featured Image */
.blog-featured-img-wrap {
    position: relative;
    overflow: hidden;
    max-height: 420px;
}

.blog-featured-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-article-card:hover .blog-featured-img-wrap img {
    transform: scale(1.02);
}

.blog-img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    color: #fff;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-img-caption i {
    color: #38bdf8;
}

/* Article Body */
.blog-article-body {
    padding: 2rem 2.5rem 2.5rem;
}

/* ── Blog Content — Numbered H3 Sections ─────────────────── */
.blog-rendered-content {
    font-size: 1rem;
    line-height: 1.85;
    color: #334155;
    counter-reset: blog-step;
}

.blog-rendered-content p {
    margin-bottom: 1.1rem;
}

.blog-rendered-content h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0c4a6e;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0f2fe;
}

.blog-rendered-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0e7490;
    margin: 0 0 0.5rem;
    padding: 1.25rem 0 0.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    counter-increment: blog-step;
}

.blog-rendered-content h3:first-of-type {
    border-top: none;
    padding-top: 0.25rem;
}

/* Numbered circle before each h3 */
.blog-rendered-content h3::before {
    content: counter(blog-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7, #0e7490);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.blog-rendered-content ul,
.blog-rendered-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.blog-rendered-content li {
    margin-bottom: 0.4rem;
}

.blog-rendered-content strong {
    color: #0f172a;
    font-weight: 600;
}

.blog-rendered-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1rem 0;
}

/* ── Tip / Note Callout ──────────────────────────────────── */
.blog-rendered-content blockquote {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-left: 4px solid #0284c7;
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 1rem;
    font-size: 0.93rem;
    color: #0c4a6e;
    line-height: 1.7;
}

.blog-tip-box {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-left: 4px solid #0284c7;
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 1rem;
    font-size: 0.93rem;
    color: #0c4a6e;
    line-height: 1.7;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.blog-tip-box .tip-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
    color: #0284c7;
}

.blog-tip-box strong {
    color: #0c4a6e;
}

/* ── Tags ────────────────────────────────────────────────── */
.blog-tags-section {
    padding: 1.25rem 2.5rem 1.75rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.blog-tag {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #0284c7, #0e7490);
    border: none;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.25s;
}

.blog-tag:hover {
    background: linear-gradient(135deg, #0369a1, #0c5a6e);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.3);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.blog-sidebar-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid rgba(14, 116, 144, 0.08);
    margin-bottom: 1.25rem;
}

.blog-sidebar-header {
    padding: 1rem 1.25rem;
    border-bottom: 2px solid #e0f2fe;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-sidebar-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.blog-sidebar-header i {
    color: #0284c7;
    font-size: 1.1rem;
}

/* Related Posts */
.related-post-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.related-post-item:last-child {
    border-bottom: none;
}

.related-post-item:hover {
    background: #f0f9ff;
}

.related-post-thumb {
    width: 70px;
    height: 55px;
    min-width: 70px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}

.related-post-info h6 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-post-date {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.related-post-date i {
    font-size: 0.7rem;
}

/* ── CTA Card (Exact Reference Match) ────────────────────── */
.blog-cta-card {
    background: linear-gradient(135deg, #0a4d68 0%, #0e7490 50%, #0284c7 100%);
    border-radius: 16px;
    padding: 2rem 1.5rem 2rem 2rem;
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 4px 20px rgba(10, 77, 104, 0.25);
}

/* Seaweed / botanical left decoration */
.blog-cta-card::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 300'%3E%3Cpath d='M20 300 C20 260 5 240 10 210 C15 180 25 170 20 140 C15 110 5 100 10 70 C15 40 25 30 20 0' fill='none' stroke='%23065f46' stroke-width='8' opacity='0.2'/%3E%3Cpath d='M10 210 C-5 200 -10 185 5 175' fill='none' stroke='%23065f46' stroke-width='5' opacity='0.15'/%3E%3Cpath d='M10 140 C-5 130 -10 115 5 105' fill='none' stroke='%23065f46' stroke-width='5' opacity='0.15'/%3E%3Cpath d='M50 300 C50 270 40 255 45 230 C50 205 55 195 50 170 C45 145 40 135 45 110 C50 85 55 75 50 50 C45 25 40 15 50 0' fill='none' stroke='%23065f46' stroke-width='6' opacity='0.12'/%3E%3Ccircle cx='10' cy='210' r='4' fill='%23065f46' opacity='0.12'/%3E%3Ccircle cx='45' cy='170' r='3' fill='%23065f46' opacity='0.1'/%3E%3Ccircle cx='20' cy='100' r='5' fill='%23065f46' opacity='0.08'/%3E%3C/svg%3E") no-repeat left center;
    background-size: contain;
    pointer-events: none;
}

/* Wave decoration at bottom */
.blog-cta-card::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 50px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23065f7c' fill-opacity='0.25' d='M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,69.3C960,85,1056,107,1152,101.3C1248,96,1344,64,1392,48L1440,32L1440,120L0,120Z'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: cover;
    pointer-events: none;
}

.blog-cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.blog-cta-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    border: 1px solid rgba(255,255,255,0.15);
}

.blog-cta-icon i {
    font-size: 1.5rem;
    color: #7dd3fc;
}

.blog-cta-card h5 {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

.blog-cta-card p {
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    margin-bottom: 1.1rem;
    line-height: 1.6;
}

.blog-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: #0284c7;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.65rem 1.6rem;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s;
    border: 2px solid #fff;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.blog-cta-btn i {
    color: #0e7490;
    font-size: 1rem;
}

.blog-cta-btn:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.blog-cta-btn:hover i {
    color: #7dd3fc;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .blog-hero-stamp {
        display: none;
    }
    .blog-hero-title {
        font-size: 1.75rem;
    }
    .blog-article-body {
        padding: 1.5rem 1.25rem 2rem;
    }
    .blog-tags-section {
        padding: 1.25rem 1.25rem 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .blog-hero {
        padding: 1.5rem 0 2rem;
    }
    .blog-hero-title {
        font-size: 1.4rem;
    }
    .blog-hero-excerpt {
        font-size: 0.9rem;
    }
    .blog-hero-meta {
        gap: 0.75rem;
    }
    .blog-article-body {
        padding: 1.25rem 1rem 1.5rem;
    }
    .blog-rendered-content h3 {
        font-size: 1rem;
    }
    .blog-tags-section {
        padding: 1rem;
    }
}