/* ============================================
   SINGLE BLOG POST STYLES
   FIGMA MATCH v2.0 - Font & Color Migration
   Dev: Paul .Y 20260202

   v2.0: Roboto → Afacad Flux, colors → Figma tokens
         Layout: badge → title → date (Figma order)
   v1.0: Initial single blog styles

   Figma tokens:
   Dark-Text:  #2A2A2A  (titles, body, badge, breadcrumb)
   Light-Text: #666666  (date, secondary)
   Primary:    #928572  (interactive accents)
   bg-200:     #EFEDEB  (breadcrumb bg, blockquote bg)
   bg-100:     #FAF9F7  (related posts bg)
   outline-400:#CCC8C0  (dividers)
   ============================================ */


/* ============================================
   BREADCRUMB SECTION
   Figma: w-[1440px] px-20 py-3.5 bg-200
          1200px inner container
   ============================================ */

.blog-breadcrumb-section {
    background: #EFEDEB;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px !important;
}

.blog-breadcrumb-container {
    width: 100%;
    max-width: 1440px;
    padding: 14px 80px;  /* py-3.5 px-20 */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.blog-breadcrumb {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 5px;  /* gap-[5px] */
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;  /* text-sm */
}

/* "Blogs" text — Afacad Flux 14px 300 Dark-Text */
.breadcrumb-text {
    color: #2A2A2A;
    font-weight: 300;  /* font-light */
}

/* "/" separator */
.breadcrumb-separator {
    color: #2A2A2A;
    font-weight: 300;
}

/* Current page — Afacad Flux 14px 400 Dark-Text */
.breadcrumb-current {
    color: #2A2A2A;
    font-weight: 400;  /* font-normal */
}


/* ============================================
   HERO SECTION - Featured Image
   Figma: w-[1440px] h-[600px]
   ============================================ */

.blog-hero-section {
    width: 100%;
    background: #EFEDEB;
    display: flex;
    justify-content: center;
}

.blog-hero-image {
    width: 100%;
    max-width: 1440px;
    height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* ============================================
   POST HEADER SECTION
   Figma: w-[1200px] gap-2.5 (10px)
          Order: badge → title → date (stacked)
   ============================================ */

.blog-post-header {
    background: #FFFFFF;
    padding: 60px 0 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.blog-content-container {
    width: 100%;
    max-width: 1200px;
    padding: 0 80px;  /* px-20 */
    box-sizing: border-box;
}

/* Header container — flex column, gap-2.5 (10px) */
.blog-post-header .blog-content-container {
    display: flex;
    flex-direction: column;
    gap: 10px;  /* gap-2.5 */
}

/* Category badge — ABOVE title per Figma
   Afacad Flux 16px 400 Dark-Text, 0.5px border */
.blog-post-category-badge {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;  /* text-base */
    font-weight: 400;  /* font-normal */
    color: #2A2A2A;  /* text-Dark-Text */
    padding: 5px 14px;  /* py-[5px] px-3.5 */
    border: 0.5px solid #2A2A2A;  /* outline-Dark-Text */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    align-self: flex-start;  /* Don't stretch full width */
}

/* Title — Afacad Flux 36px 500 Dark-Text */
.blog-post-title {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 36px;  /* text-4xl */
    font-weight: 500;  /* font-medium */
    line-height: 1.3;
    color: #2A2A2A;  /* text-Dark-Text */
    margin: 0;
}

/* Date — BELOW title per Figma
   Afacad Flux 16px 300 Light-Text */
.blog-post-date {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;  /* text-base */
    font-weight: 300;  /* font-light */
    color: #666666;  /* text-Light-Text */
}

/* Legacy horizontal meta — keep for backward compat, hide if not used */
.blog-post-meta-horizontal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}


/* ============================================
   POST CONTENT SECTION
   Figma: gap-14 (56px) between content blocks
          gap-2.5 (10px) between h2 and body text
   ============================================ */

.blog-post-content {
    background: #FFFFFF;
    padding: 28px 0 80px 0;  /* gap-7 from header to content */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Content Typography */
.blog-post-content .blog-content-container {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 56px;  /* gap-14 between major blocks */
}

/* First paragraph - Introduction
   Afacad Flux 18px 300 Dark-Text */
.blog-post-content p:first-of-type {
    font-size: 18px;  /* text-lg */
    font-weight: 300;  /* font-light */
    line-height: 1.8;
    color: #2A2A2A;  /* text-Dark-Text */
    margin: 0;
}

/* Regular paragraphs
   Afacad Flux 18px 300 Dark-Text */
.blog-post-content p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    color: #2A2A2A;
    margin: 0 0 10px 0;  /* gap-2.5 between p within same section */
}

/* Section headings — Afacad Flux 24px 500 Dark-Text */
.blog-post-content h2 {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;  /* text-2xl */
    font-weight: 500;  /* font-medium */
    line-height: 1.4;
    color: #2A2A2A;
    margin: 0 0 10px 0;  /* gap-2.5 to following text */
}

.blog-post-content h3 {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #2A2A2A;
    margin: 0 0 10px 0;
}

.blog-post-content h4 {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: #2A2A2A;
    margin: 0 0 10px 0;
}

.blog-post-content ul,
.blog-post-content ol {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    color: #2A2A2A;
    margin: 0 0 10px 0;
    padding-left: 30px;
}

.blog-post-content li {
    margin-bottom: 12px;
}

.blog-post-content a {
    color: #928572;  /* Primary for links */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.blog-post-content a:hover {
    color: #7A7062;
}

.blog-post-content blockquote {
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: #2A2A2A;
    margin: 0;
    padding: 30px;
    background: #EFEDEB;  /* bg-200 */
    border-left: 4px solid #928572;  /* Primary */
}

/* Content Images — Figma: self-stretch h-96 (384px) */
.blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin: 0;  /* gap-14 handles spacing via parent flex gap */
    display: block;
}

.blog-post-content .wp-block-image,
.blog-post-content figure {
    margin: 0;
}

.blog-post-content figcaption {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    color: #666666;  /* Light-Text */
    text-align: center;
    margin-top: 12px;
}

/* Full Width Images (1200px) */
.blog-post-content .alignfull img,
.blog-post-content .size-full img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Medium Images (800px) */
.blog-post-content .aligncenter img,
.blog-post-content .size-medium img {
    width: 800px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================
   RELATED POSTS SECTION
   bg-100 (#FAF9F7)
   ============================================ */

.blog-related-posts {
    background: #FAF9F7;  /* bg-100 */
    padding: 80px 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.blog-related-posts .blog-content-container {
    width: 100%;
    max-width: 1200px;
}

.related-posts-title {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    color: #2A2A2A;  /* Dark-Text */
    margin: 0 0 40px 0;
    text-align: center;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


/* ============================================
   RESPONSIVE - TABLET (1024px - 1439px)
   ============================================ */

@media (max-width: 1439px) {
    .blog-breadcrumb-container {
        padding: 14px 60px;
    }

    .blog-content-container {
        padding: 0 60px;
    }

    .blog-hero-image {
        height: 500px;
    }
}


/* ============================================
   RESPONSIVE - TABLET PORTRAIT (768px - 1023px)
   ============================================ */

@media (max-width: 1023px) {
    .blog-breadcrumb-container {
        padding: 14px 40px;
    }

    .blog-content-container {
        padding: 0 40px;
    }

    .blog-hero-image {
        height: 400px;
    }

    .blog-post-header {
        padding: 50px 0 0 0;
    }

    .blog-post-title {
        font-size: 28px;
    }

    .blog-post-content {
        padding: 24px 0 60px 0;
    }

    .blog-post-content .blog-content-container {
        gap: 40px;
    }

    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }

    .related-posts-title {
        font-size: 28px;
    }
}


/* ============================================
   RESPONSIVE - MOBILE (≤767px)
   ============================================ */

@media (max-width: 767px) {
    .blog-breadcrumb-section {
        padding: 0;
    }

    .blog-breadcrumb-container {
        padding: 12px 20px;
    }

    .blog-content-container {
        padding: 0 20px;
    }

    .blog-breadcrumb {
        font-size: 12px;
        gap: 6px;
    }

    .blog-hero-image {
        height: 300px;
    }

    .blog-post-header {
        padding: 30px 0 0 0;
    }

    .blog-post-title {
        font-size: 24px;
    }

    .blog-post-category-badge {
        font-size: 14px;
        padding: 4px 12px;
    }

    .blog-post-date {
        font-size: 14px;
    }

    .blog-post-content {
        padding: 20px 0 50px 0;
    }

    .blog-post-content .blog-content-container {
        gap: 30px;
    }

    .blog-post-content p {
        font-size: 16px;
    }

    .blog-post-content p:first-of-type {
        font-size: 16px;
    }

    .blog-post-content h2 {
        font-size: 20px;
    }

    .blog-post-content h3 {
        font-size: 18px;
    }

    .blog-post-content h4 {
        font-size: 16px;
    }

    .blog-post-content ul,
    .blog-post-content ol {
        font-size: 16px;
        padding-left: 25px;
    }

    .blog-post-content blockquote {
        font-size: 18px;
        padding: 20px;
    }

    .blog-related-posts {
        padding: 50px 0;
    }

    .related-posts-title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* ============================================
   RESPONSIVE - SMALL MOBILE (≤480px)
   ============================================ */

@media (max-width: 480px) {
    .blog-hero-image {
        height: 250px;
    }

    .blog-post-title {
        font-size: 20px;
    }

    .blog-post-content p,
    .blog-post-content ul,
    .blog-post-content ol {
        font-size: 15px;
    }

    .blog-post-content h2 {
        font-size: 18px;
    }

    .blog-post-content blockquote {
        font-size: 16px;
        padding: 15px;
    }
}