/* ========================================
   Moss Blog Styles
   Clean, modern blog design using Moss design system
   ======================================== */

/* Navigation - uses main site navigation from style.css */
/* No blog-specific navigation overrides needed */

/* Main Content Area */
.blog-main {
    min-height: calc(100vh - 200px);
    background: white;
}

/* Blog Index */
.blog-index {
    background: linear-gradient(180deg, #f5fcf0 0%, #ffffff 100%);
}

.blog-index-header {
    padding: var(--spacing-2xl, 120px) var(--spacing-md, 24px) var(--spacing-xl, 80px);
    text-align: center;
}

.blog-index-header-container {
    max-width: 800px;
    margin: 0 auto;
}

.blog-index-title {
    font-family: 'Mossville-v2', var(--heading-font-family);
    font-size: 66px;
    font-weight: 400;
    line-height: 0.99;
    letter-spacing: -1.98px;
    color: black;
    margin: 0 0 var(--spacing-md, 24px);
}

.blog-index-subtitle {
    font-family: var(--body-font-family);
    font-size: 20px;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
}

/* Blog Posts Grid */
.blog-posts-container {
    background: transparent;
    padding: var(--spacing-xl, 80px) var(--spacing-md, 24px);
}

.blog-posts-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--spacing-lg, 48px);
}

/* Post Card */
.blog-post-card {
    background: white;
    border: 2px solid var(--color-moss-primary, #e0eed5);
    border-radius: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.blog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.post-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Post Card Image */
.post-card-image,
.post-card-image-placeholder {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card-image-placeholder {
    background: linear-gradient(135deg, var(--color-moss-primary, #e0eed5) 0%, var(--color-leaf-accent, #a8c89f) 100%);
}

/* Post Card Content */
.post-card-content {
    padding: var(--spacing-md, 24px);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: white;
    border-radius: 20px 20px 0 0;
    margin-top: -20px;
    position: relative;
    border-top: 2px solid var(--color-moss-primary, #e0eed5);
}

.post-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm, 16px);
}

.post-card-tag {
    font-family: var(--body-font-family);
    font-size: 11px;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    color: #3d4a38;
    background: #e8f0e3;
    padding: 4px 8px;
    border-radius: 6px;
}

.post-card-title {
    font-family: 'Mossville-v2', var(--heading-font-family);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: black;
    margin: 0 0 var(--spacing-sm, 16px);
}

.post-card-excerpt {
    font-family: var(--body-font-family);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
    margin: 0 0 var(--spacing-md, 24px);
    /* fills the card and fades out at the bottom instead of ending in "..." */
    flex: 1 1 135px;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}

/* blur that ramps in toward the bottom of the excerpt */
.post-card-excerpt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    bottom: 0;
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
    mask-image: linear-gradient(to bottom, transparent, #000);
    pointer-events: none;
}

/* Post Card Meta (Author & Date) */
.post-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.post-card-author-avatar,
.post-card-author-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.post-card-author-avatar {
    object-fit: cover;
}

.post-card-author-avatar-placeholder {
    background: linear-gradient(135deg, var(--color-leaf-accent, #a8c89f) 0%, var(--color-moss-primary, #e0eed5) 100%);
}

.post-card-meta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.post-card-author {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 600;
    color: black;
}

.post-card-date {
    font-family: var(--body-font-family);
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

/* Empty State */
.blog-empty-state {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: var(--spacing-2xl, 120px) var(--spacing-md, 24px);
}

.blog-empty-state p {
    font-family: var(--body-font-family);
    font-size: 20px;
    color: rgba(0, 0, 0, 0.6);
}

/* Individual Post */
.blog-post {
    background: white;
}

/* Post Hero (Two-column layout) */
.post-hero {
    background: var(--color-earth-bg, #f5fcf0);
    padding: var(--spacing-2xl, 120px) var(--spacing-md, 24px);
}

.post-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl, 80px);
    align-items: center;
}

.post-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 24px);
}

/* Post Header Tags */
.post-header-tags {
    display: flex;
    gap: var(--spacing-xs, 8px);
    flex-wrap: wrap;
}

.post-header-tag {
    font-family: var(--body-font-family);
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
    color: #3d4a38;
    background: #e8f0e3;
    padding: 8px 18px;
    border-radius: 8px;
}

.post-hero-title {
    font-family: 'Mossville-v2', var(--heading-font-family);
    font-size: 52px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: black;
    margin: 0;
}

/* Post Hero Meta (Author & Date) */
.post-hero-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.post-author-avatar,
.post-author-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.post-author-avatar {
    object-fit: cover;
}

.post-author-avatar-placeholder {
    background: linear-gradient(135deg, var(--color-leaf-accent, #a8c89f) 0%, var(--color-moss-primary, #e0eed5) 100%);
}

.post-meta-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.post-author-name {
    font-family: var(--body-font-family);
    font-size: 16px;
    font-weight: 600;
    color: black;
}

.post-date {
    font-family: var(--body-font-family);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}

/* Post Hero Image */
.post-hero-image,
.post-hero-image-placeholder {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
}

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

.post-hero-image-placeholder {
    background: linear-gradient(135deg, var(--color-moss-primary, #e0eed5) 0%, var(--color-leaf-accent, #a8c89f) 100%);
}

/* Post hero showing a whole logo on the gradient instead of a cropped image */
.post-hero-image-contain {
    box-sizing: border-box;
    padding: var(--spacing-lg, 48px);
    background: linear-gradient(135deg, var(--color-moss-primary, #e0eed5) 0%, var(--color-leaf-accent, #a8c89f) 100%);
}

.post-hero-image-contain img {
    object-fit: contain;
}

/* Post hero showing a grid of tool icons instead of a single image */
.post-hero-icons {
    display: grid;
    grid-template-columns: repeat(5, 64px);
    gap: 24px;
    align-content: center;
    justify-content: center;
}

.post-hero-icons img {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: contain;
}

/* Post Content */
.post-content {
    padding: var(--spacing-xl, 80px) var(--spacing-md, 24px);
}

.post-content-container {
    max-width: 700px;
    margin: 0 auto;
}

/* Dropcap for first paragraph */
.post-content-container > p:first-of-type::first-letter {
    font-family: 'Mossville-v2', var(--heading-font-family);
    font-size: 72px;
    line-height: 0.8;
    float: left;
    margin: 8px 12px 0 0;
    color: var(--color-forest-dark, #151a11);
}

.post-content-container h2 {
    font-family: 'Mossville-v2', var(--heading-font-family);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    color: black;
    margin: var(--spacing-lg, 48px) 0 var(--spacing-md, 24px);
}

.post-content-container h3 {
    font-family: var(--body-font-family);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: black;
    margin: var(--spacing-lg, 48px) 0 var(--spacing-sm, 16px);
}

.post-content-container p {
    font-family: "Libre Baskerville", serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    color: #000;
    margin: 0 0 var(--spacing-md, 24px);
}

.post-content-container ul,
.post-content-container ol {
    font-family: "Libre Baskerville", serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    color: #000;
    margin: 0 0 var(--spacing-md, 24px);
    padding-left: var(--spacing-lg, 48px);
}

.post-content-container li {
    margin-bottom: var(--spacing-sm, 16px);
}

.post-content-container a {
    color: var(--color-forest-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-leaf-accent);
    text-decoration-thickness: 2px;
    transition: text-decoration-color 0.2s ease;
}

.post-content-container a:hover {
    text-decoration-color: var(--color-forest-dark);
}

.post-content-container blockquote {
    border-left: 4px solid var(--color-moss-primary);
    padding-left: var(--spacing-md, 24px);
    margin: var(--spacing-lg, 48px) 0;
    font-style: italic;
    color: rgba(0, 0, 0, 0.7);
}

.post-content-container code {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 16px;
    background: var(--color-moss-primary);
    padding: 2px 6px;
    border-radius: 4px;
}

.post-content-container pre {
    background: var(--color-forest-dark);
    color: #e0eed5;
    padding: var(--spacing-md, 24px);
    border-radius: 8px;
    overflow-x: auto;
    margin: var(--spacing-lg, 48px) 0;
}

.post-content-container pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.post-content-container img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: var(--spacing-lg, 48px) 0;
}

/* Post Footer */
.post-footer {
    padding: var(--spacing-xl, 80px) var(--spacing-md, 24px);
    border-top: 1px solid var(--color-moss-primary);
}

.post-footer-container {
    max-width: 700px;
    margin: 0 auto;
}

.back-to-blog {
    font-family: var(--body-font-family);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-forest-dark);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.back-to-blog:hover {
    opacity: 1;
}

/* Blog Footer */
.blog-footer {
    background: var(--color-earth-bg, #f5fcf0);
    padding: var(--spacing-lg, 48px) var(--spacing-md, 24px);
    border-top: 1px solid var(--color-moss-primary);
}

.blog-footer-container {
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
}

.blog-footer p {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: black;
    margin: 0;
}

.footer-muted {
    color: rgba(0, 0, 0, 0.4);
}

.blog-footer a {
    color: black;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.blog-footer a:hover {
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-index-header {
        padding: var(--spacing-xl, 80px) var(--spacing-md, 24px) var(--spacing-lg, 48px);
    }

    .blog-index-title {
        font-size: 42px;
        letter-spacing: -1.26px;
    }

    .blog-posts-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md, 24px);
    }

    .post-card-image,
    .post-card-image-placeholder {
        height: 200px;
    }

    /* Single column layout for mobile */
    .post-hero {
        padding: var(--spacing-xl, 80px) var(--spacing-md, 24px);
    }

    .post-hero-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg, 48px);
    }

    .post-hero-title {
        font-size: 36px;
        letter-spacing: -1.08px;
    }

    .post-hero-image,
    .post-hero-image-placeholder {
        height: 300px;
    }

    .post-hero-icons {
        grid-template-columns: repeat(5, 44px);
        gap: 16px;
    }

    .post-hero-icons img {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .post-content-container h2 {
        font-size: 28px;
    }

    .post-content-container p,
    .post-content-container ul,
    .post-content-container ol {
        font-size: 17px;
        line-height: 28px;
    }

    /* Smaller dropcap on mobile */
    .post-content-container > p:first-of-type::first-letter {
        font-size: 56px;
        margin: 4px 8px 0 0;
    }
}

/* ========================================
   Rich post content: tables, tool icons, callouts, figures
   ======================================== */

.post-content-container h2 {
    clear: both;
}

.post-content-container .table-scroll {
    overflow-x: auto;
    margin: 0 0 var(--spacing-md, 24px);
}

.post-content-container table {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--body-font-family);
    font-size: 15px;
    line-height: 1.4;
}

.post-content-container th,
.post-content-container td {
    text-align: left;
    vertical-align: top;
    padding: 8px 16px 8px 0;
    border-bottom: 1px solid var(--color-moss-primary);
    white-space: nowrap;
}

.post-content-container td.wrap {
    white-space: normal;
    min-width: 14rem; /* on phones the table scrolls instead of crushing this column */
}

.post-content-container th {
    font-weight: 600;
    border-bottom: 2px solid var(--color-leaf-accent);
}

/* Tool icons in posts: a grid of linked icons, inline chips, and icon headings */

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 18px 8px;
    margin: var(--spacing-md, 24px) 0 var(--spacing-lg, 48px);
}

.post-content-container .tool-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.post-content-container .tool-grid a:hover {
    text-decoration: underline;
}

.post-content-container .tool-grid img {
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 12px;
    object-fit: contain;
}

.post-content-container a.tool {
    white-space: nowrap;
}

.post-content-container a.tool img {
    width: 1.25em;
    height: 1.25em;
    margin: 0 .25em 0 0;
    vertical-align: -.25em;
    border-radius: 4px;
    object-fit: contain;
}

.post-content-container h3.tool-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-content-container h3.tool-head img {
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 8px;
    object-fit: contain;
}

.post-callout {
    margin: 0 0 var(--spacing-md, 24px);
    padding: var(--spacing-sm, 16px) var(--spacing-md, 24px);
    border-left: 4px solid var(--color-leaf-accent);
    border-radius: 0 8px 8px 0;
    background: var(--color-earth-bg);
}

.post-callout > :last-child {
    margin-bottom: 0;
}

/* a screenshot with a caption */
.post-figure {
    margin: var(--spacing-lg, 48px) 0;
    text-align: center;
}

.post-content-container .post-figure img {
    margin: 0;
    border: 1px solid var(--color-mycelium-light);
    border-radius: 8px;
}

/* a screenshot cut out to its own rounded shape: shadow the shape, not the box */
.post-content-container .post-figure img.cutout {
    border: none;
    border-radius: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25));
}

/* a small figure floated right, with text wrapping around it; full width on a narrow screen */
.post-figure.float-right {
    float: right;
    width: 20rem;
    max-width: 50%;
    margin: 4px 0 var(--spacing-sm, 16px) var(--spacing-md, 24px);
}

.post-figure figcaption {
    margin-top: 6px;
    font-family: var(--body-font-family);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

/* two screenshots side by side, stacking on a narrow screen */
.post-figure-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md, 24px);
    margin: var(--spacing-lg, 48px) 0;
}

.post-figure-row .post-figure {
    flex: 1 1 16rem;
    margin: 0;
}

/* the Syn layer picture: three stacked bands */
.layer-stack {
    max-width: 34rem;
    margin: var(--spacing-md, 24px) auto;
    font-family: var(--body-font-family);
    font-size: 16px;
    line-height: 1.375;
}

.layer-stack > div {
    padding: 10px 16px;
    border: 1px solid var(--color-mycelium-light);
    border-radius: 8px;
    background: #fff;
}

.layer-stack > div + div {
    margin-top: 6px;
}

.layer-stack > div.syn {
    border-color: var(--color-leaf-accent);
    background: var(--color-earth-bg);
}

.layer-stack b {
    font-weight: 600;
}

.layer-stack span {
    color: rgba(0, 0, 0, 0.6);
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 10px;
    margin: var(--spacing-md, 24px) 0;
}

.stat-row > div {
    padding: 12px 8px;
    border: 1px solid var(--color-mycelium-light);
    border-radius: 8px;
    text-align: center;
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.6);
}

.stat-row b {
    display: block;
    color: #000;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 500;
}

@media (max-width: 600px) {
    .post-figure.float-right {
        float: none;
        width: auto;
        max-width: 100%;
        margin: var(--spacing-lg, 48px) 0;
    }
}

/* Post card showing a grid of tool icons instead of a single image */
.post-card-icons {
    display: grid;
    grid-template-columns: repeat(5, 44px);
    gap: 14px 16px;
    align-content: center;
    justify-content: center;
}

.post-card-icons img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
}

/* Post card showing a whole logo on the gradient instead of a cropped image */
.post-card-image-contain {
    box-sizing: border-box;
    padding: 32px 40px 52px;
    background: linear-gradient(135deg, var(--color-moss-primary, #e0eed5) 0%, var(--color-leaf-accent, #a8c89f) 100%);
}

.post-card-image-contain img {
    object-fit: contain;
}