/* ==========================================================================
   CLARVIDA BLOG & ARTICLE SYSTEM (single.css)
   Requires: global.css (tokens, typography, buttons, layout primitives)
   Structure: section.name > .container > .wrapper > .row > .content
   ========================================================================== */

/* Reading Progress Indicator */
.reading-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 99999;

  .reading-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--clarvida-yellow);
    transition: width 0.1s ease-out;
  }
}

/* ==========================================================================
   1. HERO SECTION
   ========================================================================== */
section.post-hero {
  background: linear-gradient(135deg, #eaf6fa 0%, #f7fcfe 100%);
  padding: 55px 0 50px 0;
  border-bottom: 1px solid var(--clarvida-border);

  .wrapper {
    .content {
      .breadcrumb {
        font-size: 0.88rem;
        margin-bottom: 18px;
        color: var(--clarvida-text-muted);

        a {
          color: var(--clarvida-primary);
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
        .separator {
          margin: 0 8px;
          color: #b3c5cd;
        }
        .current {
          color: var(--clarvida-dark);
          font-weight: 600;
        }
      }

      .hero-badge-wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 1.25rem;
      }

      .post-title {
        font-family: var(--font-heading);
        font-size: 2.75rem;
        font-weight: 700;
        color: var(--clarvida-navy);
        line-height: 1.22;
        margin-bottom: 1.5rem;

        @media (max-width: 768px) {
          font-size: 2.1rem;
        }
      }

      .post-meta-strip {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 28px;
        margin-bottom: 2.5rem;
        padding-bottom: 1.75rem;
        border-bottom: 1px solid var(--clarvida-border);

        .author-info {
          display: flex;
          align-items: center;
          gap: 12px;

          .author-avatar {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 2px solid var(--clarvida-sky);
            object-fit: cover;
          }

          .author-label {
            display: block;
            font-size: 0.75rem;
            color: var(--clarvida-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
          }

          .author-name {
            font-family: var(--font-heading);
            font-weight: 700;
            color: var(--clarvida-dark);
            text-decoration: none;
            font-size: 0.95rem;

            &:hover {
              color: var(--clarvida-primary);
            }
          }
        }

        .date-info {
          display: flex;
          flex-direction: column;

          .meta-label {
            font-size: 0.75rem;
            color: var(--clarvida-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
          }

          time {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--clarvida-text-main);
          }
        }
      }

      .post-featured-media {
        margin: 0;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-card);
        background: var(--clarvida-white);

        .featured-img {
          width: 100%;
          height: auto;
          max-height: 520px;
          object-fit: cover;
          display: block;
        }

        .featured-caption {
          padding: 10px 16px;
          font-size: 0.82rem;
          color: var(--clarvida-text-muted);
          background: #fdfdfd;
          border-top: 1px solid var(--clarvida-border-light);
          font-style: italic;
        }
      }
    }
  }
}

/* ==========================================================================
   2. MAIN BODY & SIDEBAR LAYOUT
   ========================================================================= */
section.post-body-layout {
  padding: 60px 0 80px 0;
  background-color: var(--clarvida-white);

  .wrapper {
    .content {
      .layout-grid {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 56px;
        align-items: start;

        @media (max-width: 980px) {
          grid-template-columns: 1fr;
          gap: 40px;
        }
      }

      /* Article Main Column */
      .article-main {
        min-width: 0;

        /* Table of Contents */
        .toc-wrapper {
          background: var(--clarvida-sky);
          border-left: 4px solid var(--clarvida-primary);
          border-radius: var(--radius-md);
          padding: 24px;
          margin-bottom: 36px;

          .toc-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;

            .toc-icon {
              font-size: 1.3rem;
            }

            h4 {
              font-family: var(--font-heading);
              color: var(--clarvida-navy);
              font-size: 1.15rem;
              margin: 0;
            }
          }

          .toc-list {
            display: flex;
            flex-direction: column;
            gap: 8px;

            a {
              color: var(--clarvida-dark);
              font-size: 0.92rem;
              text-decoration: none;
              transition:
                color 0.2s ease,
                transform 0.2s ease;

              &:hover {
                color: var(--clarvida-primary);
                transform: translateX(4px);
              }

              &.toc-sub-item {
                padding-left: 18px;
                font-size: 0.88rem;
                color: var(--clarvida-text-muted);
              }
            }
          }
        }

        /* Typography & Core Content */
        .article-entry-content {
          font-size: 1.1rem;
          line-height: 1.8;
          color: var(--clarvida-text-main);

          p {
            margin-bottom: 1.6rem;
          }

          h2 {
            font-family: var(--font-heading);
            font-size: 1.85rem;
            color: var(--clarvida-navy);
            margin: 2.5rem 0 1rem 0;
            line-height: 1.3;
          }

          h3 {
            font-family: var(--font-heading);
            font-size: 1.45rem;
            color: var(--clarvida-dark);
            margin: 2rem 0 0.85rem 0;
            line-height: 1.35;
          }

          ul,
          ol {
            margin: 0 0 1.6rem 1.6rem;
            li {
              margin-bottom: 0.5rem;
            }
          }

          blockquote {
            background: #f6fbfe;
            border-left: 4px solid var(--clarvida-yellow);
            padding: 22px 26px;
            margin: 2.2rem 0;
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            font-style: italic;
            color: var(--clarvida-dark);
            font-size: 1.15rem;
          }

          img {
            border-radius: var(--radius-md);
            margin: 2rem 0;
            box-shadow: var(--shadow-subtle);
          }

          a {
            color: var(--clarvida-primary);
            text-decoration: underline;
            font-weight: 600;
            &:hover {
              color: var(--clarvida-dark);
            }
          }
        }

        /* In-Article Conversion Banner */
        .in-content-cta {
          background: linear-gradient(
            135deg,
            var(--clarvida-sky) 0%,
            #ddf1f7 100%
          );
          border: 1px solid var(--clarvida-border);
          border-radius: var(--radius-lg);
          padding: 34px;
          margin: 40px 0;

          .cta-inner {
            .cta-kicker {
              font-family: var(--font-heading);
              font-size: 0.78rem;
              text-transform: uppercase;
              letter-spacing: 1px;
              color: var(--clarvida-primary);
              font-weight: 700;
              display: block;
              margin-bottom: 6px;
            }

            h3 {
              font-family: var(--font-heading);
              font-size: 1.4rem;
              color: var(--clarvida-navy);
              margin-bottom: 10px;
            }

            p {
              font-size: 0.95rem;
              color: var(--clarvida-text-muted);
              margin-bottom: 20px;
              line-height: 1.6;
            }
          }
        }

        /* Post Tags */
        .post-tags-wrap {
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
          padding-top: 24px;
          margin-top: 30px;
          border-top: 1px solid var(--clarvida-border-light);

          .tags-title {
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--clarvida-dark);
          }

          .tags-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .tag-pill {
              background: var(--clarvida-bg-light);
              border: 1px solid var(--clarvida-border);
              color: var(--clarvida-text-muted);
              padding: 5px 12px;
              border-radius: var(--radius-pill);
              font-size: 0.8rem;
              font-weight: 600;
              text-decoration: none;
              transition: all 0.2s ease;

              &:hover {
                background: var(--clarvida-primary);
                color: var(--clarvida-white);
                border-color: var(--clarvida-primary);
              }
            }
          }
        }

        /* Social Share Strip */
        .post-share-strip {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 16px;
          background: #fdfdfd;
          border: 1px solid var(--clarvida-border);
          border-radius: var(--radius-md);
          padding: 16px 20px;
          margin: 30px 0;

          .share-title {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 0.92rem;
            color: var(--clarvida-dark);
          }

          .share-buttons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;

            .btn-share {
              background: var(--clarvida-white);
              border: 1px solid var(--clarvida-border);
              color: var(--clarvida-dark);
              font-size: 0.8rem;
              font-weight: 600;
              padding: 6px 14px;
              border-radius: var(--radius-pill);
              text-decoration: none;
              cursor: pointer;
              transition: all 0.2s ease;

              &:hover {
                background: var(--clarvida-sky);
                border-color: var(--clarvida-primary);
                color: var(--clarvida-primary);
              }
            }
          }
        }

        /* Author Biography Card */
        .post-author-box {
          display: flex;
          gap: 24px;
          background: var(--clarvida-bg-light);
          border: 1px solid var(--clarvida-border);
          border-radius: var(--radius-lg);
          padding: 30px;
          margin-top: 36px;
          align-items: flex-start;

          @media (max-width: 600px) {
            flex-direction: column;
            align-items: center;
            text-align: center;
          }

          .author-bio-avatar {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            border: 3px solid var(--clarvida-white);
            box-shadow: var(--shadow-subtle);
            flex-shrink: 0;
            object-fit: cover;
          }

          .author-bio-details {
            .author-role {
              font-size: 0.78rem;
              text-transform: uppercase;
              letter-spacing: 0.8px;
              color: var(--clarvida-primary);
              font-weight: 700;
              display: block;
              margin-bottom: 4px;
            }

            h4 {
              font-family: var(--font-heading);
              font-size: 1.3rem;
              color: var(--clarvida-navy);
              margin-bottom: 8px;
            }

            p {
              font-size: 0.92rem;
              color: var(--clarvida-text-muted);
              line-height: 1.6;
              margin-bottom: 12px;
            }

            .author-more-link {
              font-size: 0.88rem;
              font-weight: 700;
              color: var(--clarvida-primary);
              text-decoration: none;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }

      /* Sidebar Column */
      .article-sidebar {
        .sidebar-sticky-wrapper {
          position: sticky;
          top: 30px;
          display: flex;
          flex-direction: column;
          gap: 28px;

          .sidebar-widget {
            background: var(--clarvida-white);
            border: 1px solid var(--clarvida-border);
            border-radius: var(--radius-lg);
            padding: 30px 24px;
            box-shadow: var(--shadow-subtle);

            &.inquiry-widget {
              background: linear-gradient(
                180deg,
                #f7fdff 0%,
                var(--clarvida-white) 100%
              );
              border-color: var(--clarvida-primary);

              h3 {
                font-family: var(--font-heading);
                font-size: 1.25rem;
                color: var(--clarvida-navy);
                margin-bottom: 10px;
              }

              p {
                font-size: 0.9rem;
                color: var(--clarvida-text-muted);
                margin-bottom: 16px;
              }

              .widget-bullets {
                list-style: none;
                margin-bottom: 22px;

                li {
                  font-size: 0.86rem;
                  color: var(--clarvida-text-main);
                  margin-bottom: 8px;
                  padding-left: 20px;
                  position: relative;

                  &::before {
                    content: "✔";
                    position: absolute;
                    left: 0;
                    color: var(--clarvida-primary);
                    font-weight: 700;
                  }
                }
              }
            }

            .sidebar-cat-list {
              list-style: none;
              margin-top: 14px;

              li {
                border-bottom: 1px solid var(--clarvida-border-light);

                &:last-child {
                  border-bottom: none;
                }

                a {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 10px 0;
                  font-size: 0.92rem;
                  color: var(--clarvida-dark);
                  text-decoration: none;
                  font-weight: 600;
                  transition:
                    color 0.2s ease,
                    transform 0.2s ease;

                  &:hover {
                    color: var(--clarvida-primary);
                    transform: translateX(3px);
                  }

                  .cat-count {
                    font-size: 0.8rem;
                    color: var(--clarvida-text-muted);
                    font-weight: 400;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
   3. RELATED ARTICLES SECTION
   ========================================================================= */
section.post-related-section {
  padding: 80px 0;
  background-color: var(--clarvida-bg-light);
  border-top: 1px solid var(--clarvida-border);

  .wrapper {
    .content {
      .related-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
        gap: 28px;

        .related-card {
          background: var(--clarvida-white);
          border: 1px solid var(--clarvida-border);
          border-radius: var(--radius-lg);
          overflow: hidden;
          box-shadow: var(--shadow-subtle);
          display: flex;
          flex-direction: column;
          transition:
            transform 0.25s ease,
            box-shadow 0.25s ease;

          &:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-card);
          }

          .related-img-wrap {
            display: block;
            height: 190px;
            overflow: hidden;
            background: var(--clarvida-sky);

            .related-thumb {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.3s ease;
            }

            .related-thumb-placeholder {
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: var(--font-heading);
              color: var(--clarvida-primary);
              font-weight: 700;
            }

            &:hover .related-thumb {
              transform: scale(1.04);
            }
          }

          .related-card-body {
            padding: 24px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;

            .related-meta {
              font-size: 0.8rem;
              color: var(--clarvida-text-muted);
              margin-bottom: 10px;

              a {
                color: var(--clarvida-primary);
                font-weight: 600;
                text-decoration: none;
              }

              .meta-dot {
                margin: 0 4px;
              }
            }

            h3 {
              font-family: var(--font-heading);
              font-size: 1.25rem;
              color: var(--clarvida-navy);
              margin-bottom: 10px;
              line-height: 1.35;

              a {
                color: inherit;
                text-decoration: none;
                &:hover {
                  color: var(--clarvida-primary);
                }
              }
            }

            p {
              font-size: 0.9rem;
              color: var(--clarvida-text-muted);
              margin-bottom: 18px;
              flex-grow: 1;
              line-height: 1.55;
            }

            .read-more-link {
              font-family: var(--font-heading);
              font-weight: 700;
              font-size: 0.92rem;
              color: var(--clarvida-primary);
              text-decoration: none;

              &:hover {
                color: var(--clarvida-dark);
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}