/*! Draftingware Confidential. Copyright (c) 2024–2026 Draftingware Technologies Pvt. Ltd. All rights reserved. */

/* ── Page wrapper ── */
.blog-page {
   padding-top: 74px;
   padding-left: 20px;
   padding-right: 20px;
}

.blog-page > .section-box {
   padding-bottom: 100px;
}

/* ── Field Notes listing ── */

.blog-hero {
   padding: 56px 0 48px;
}

.blog-hero-heading {
   font-size: clamp(40px, 4vw, 56px);
   font-weight: 700;
   letter-spacing: -0.03em;
   line-height: 1.05;
   color: #1d1d1f;
   margin: 8px 0 20px;
}

.blog-hero-sub {
   font-size: 16px;
   color: #6e6e73;
   line-height: 1.6;
   max-width: 480px;
   margin: 0;
}

.blog-year-divider {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 0;
   padding: 32px 0 0;
}

.blog-year-label {
   font-family: var(--font-mono, "Fira Code", "Courier New", monospace);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.06em;
   color: #6e6e73;
   flex-shrink: 0;
}

.blog-year-rule {
   flex: 1;
   height: 0.5px;
   background: rgba(0, 0, 0, 0.1);
}

.blog-entry {
   display: flex;
   align-items: center;
   gap: 24px;
   padding: 20px 0;
   border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
   text-decoration: none;
   cursor: pointer;
   transition: background 200ms ease;
}

.blog-entry:hover .blog-entry-title {
   color: #4b61dd;
}

.blog-entry:hover .blog-entry-arrow {
   transform: translateX(4px);
   color: #4b61dd;
}

.blog-entry:hover .blog-entry-thumb {
   opacity: 0.85;
}

.blog-entry:focus-visible {
   outline: 2px solid var(--color-accent-amber);
   outline-offset: 3px;
   border-radius: 4px;
}

.blog-entry-thumb {
   width: 96px;
   min-width: 96px;
   height: 64px;
   border-radius: 6px;
   background: #f5f5f7;
   border: 0.5px solid rgba(0, 0, 0, 0.08);
   overflow: hidden;
   transition: opacity 200ms ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

.blog-entry-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.blog-entry-thumb-placeholder {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(0, 0, 0, 0.18);
   font-size: 22px;
}

.blog-entry-body {
   flex: 1;
   min-width: 0;
}

.blog-entry-meta {
   font-family: var(--font-mono, "Fira Code", "Courier New", monospace);
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #6e6e73;
   margin: 0 0 5px;
}

.blog-entry-title {
   font-size: 17px;
   font-weight: 600;
   letter-spacing: -0.02em;
   color: #1d1d1f;
   margin: 0 0 5px;
   transition: color 200ms ease;
}

.blog-entry-excerpt {
   font-size: 13px;
   color: #6e6e73;
   margin: 0;
   line-height: 1.5;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.blog-entry-right {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-shrink: 0;
}

.blog-entry-date {
   font-family: var(--font-mono, "Fira Code", "Courier New", monospace);
   font-size: 11px;
   color: #6e6e73;
   white-space: nowrap;
}

.blog-entry-arrow {
   font-size: 16px;
   color: #aeaeb2;
   transition:
      transform 200ms ease,
      color 200ms ease;
}

/* ── Individual post ── */

.post-breadcrumb {
   font-family: var(--font-mono, "Fira Code", "Courier New", monospace);
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #6e6e73;
   text-decoration: none;
   margin-bottom: 40px;
   transition: color 200ms ease;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.post-breadcrumb:hover {
   color: #4b61dd;
}

.post-header {
   padding: 40px 0 32px;
   border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
   margin-bottom: 48px;
}

.post-tags {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 20px;
}

.post-tag {
   font-family: var(--font-mono, "Fira Code", "Courier New", monospace);
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #6e6e73;
   background: #f5f5f7;
   border: 0.5px solid rgba(0, 0, 0, 0.08);
   padding: 4px 10px;
   border-radius: 4px;
}

.post-tag-sep {
   font-family: monospace;
   font-size: 11px;
   color: rgba(0, 0, 0, 0.2);
}

.post-title {
   font-size: clamp(28px, 4vw, 36px);
   font-weight: 700;
   letter-spacing: -0.03em;
   line-height: 1.1;
   color: #1d1d1f;
   margin: 0 0 28px;
   max-width: 640px;
}

.post-author {
   display: flex;
   align-items: center;
   gap: 10px;
}

.post-author-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #f5f5f7;
   border: 0.5px solid rgba(0, 0, 0, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: 500;
   color: #6e6e73;
   flex-shrink: 0;
}

.post-author-name {
   font-size: 14px;
   font-weight: 500;
   color: #1d1d1f;
   margin: 0;
}

.post-author-role {
   font-family: var(--font-mono, "Fira Code", "Courier New", monospace);
   font-size: 11px;
   color: #6e6e73;
   margin: 0;
}

.post-body {
   max-width: 660px;
   margin: 0 auto;
   padding: 0 0 64px;
}

.post-body p {
   font-size: 17px;
   line-height: 1.8;
   color: #1d1d1f;
   margin: 0 0 24px;
}

.post-body h2 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -0.02em;
   color: #1d1d1f;
   margin: 48px 0 16px;
}

.post-img-placeholder {
   width: 100%;
   border-radius: 8px;
   background: #f5f5f7;
   border: 0.5px solid rgba(0, 0, 0, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 32px 0;
   font-family: var(--font-mono, "Fira Code", "Courier New", monospace);
   font-size: 11px;
   color: #aeaeb2;
   letter-spacing: 0.04em;
}

.post-img-placeholder.hero {
   height: 320px;
}
.post-img-placeholder.inline {
   height: 200px;
}

.post-img-hero {
   width: 100%;
   height: 320px;
   object-fit: cover;
   object-position: center;
   display: block;
   border-radius: 8px;
   margin: 32px 0;
}

.post-img-inline {
   height: 400px;
   object-fit: cover;
   object-position: center;
   display: block;
   border-radius: 8px;
   margin: 32px 0;
}

.post-media-row {
   display: flex;
   gap: 24px;
   margin: 32px 0;
   align-items: flex-start;
}

.post-media-row .post-img-placeholder {
   width: 200px;
   min-width: 200px;
   height: 140px;
   margin: 0;
}

.post-media-row p {
   margin: 0;
}

.post-video-wrap {
   width: 100%;
   border-radius: 8px;
   overflow: hidden;
   margin: 32px 0;
   background: #000;
}

.post-video-wrap video {
   width: 100%;
   display: block;
   max-height: 360px;
   object-fit: cover;
}

.post-pullquote {
   border-left: 3px solid #4b61dd;
   padding: 16px 20px;
   margin: 40px 0;
   background: #f5f5f7;
   border-radius: 0 6px 6px 0;
}

.post-pullquote p {
   font-size: 17px;
   line-height: 1.7;
   color: #1d1d1f;
   font-style: italic;
   margin: 0;
}

.post-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 32px 0;
   border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}

.post-back {
   font-family: var(--font-mono, "Fira Code", "Courier New", monospace);
   font-size: 12px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #6e6e73;
   text-decoration: none;
   transition: color 200ms ease;
}

.post-back:hover {
   color: #4b61dd;
}

.blog-entry--disabled {
   cursor: default;
   opacity: 0.45;
   pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 767px) {
   /* Listing page */
   .blog-hero {
      padding-top: 56px;
      padding-bottom: 40px;
   }

   /* Post page */
   .post-header {
      padding-top: 40px;
      padding-bottom: 32px;
   }

   .post-body {
      padding-top: 0;
      padding-bottom: 64px;
   }

   /* Shared sizing */
   .blog-entry-thumb {
      width: 72px;
      min-width: 72px;
      height: 48px;
   }
   .blog-entry-excerpt {
      display: none;
   }
   .blog-entry-title {
      font-size: 15px;
   }
   .post-title {
      font-size: 26px;
   }
   .post-body p {
      font-size: 16px;
   }
   .post-body h2 {
      font-size: 20px;
   }
   .post-media-row {
      flex-direction: column;
   }
   .post-media-row .post-img-placeholder {
      width: 100%;
      min-width: unset;
   }
}