/* ==========================================================================
   Logic Control – Fortune-style Blog & Archive (scoped)
   Affects only: .blog and .archive listings
   ========================================================================== */

/* Base wrapper spacing */
.blog .tt-blog-list,
.archive .tt-blog-list {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 16px;
}

/* --------------------------------------------------------------------------
   Category "file-folder" container
   - Vertical spine on the left
   - Horizontal connector bar across the top
   - Folder-style category tab sitting above the bar
   -------------------------------------------------------------------------- */

.blog .lc-cat-block,
.archive .lc-cat-block {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  margin: 48px 0;
  /* Extra top padding so content starts below the blue connector line */
  padding: 56px 24px 24px 24px; /* (top right bottom left) */
  overflow: visible;            /* ensure the tab can sit outside */
}

/* Vertical blue spine */
.blog .lc-cat-block::before,
.archive .lc-cat-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 56px;         /* aligns with start of content area */
  bottom: 0;
  width: 12px;
  background: #003b80; /* LC blue */
  border-radius: 6px 0 0 6px;
  z-index: 0;
}

/* Horizontal connector bar */
.blog .lc-cat-block::after,
.archive .lc-cat-block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;         /* same as padding-top to align perfectly */
  height: 12px;
  background: #003b80;
  border-radius: 6px 6px 0 0;
  z-index: 0;
}

/* Folder-style category tab (the "pill") */
.blog .lc-cat-head,
.archive .lc-cat-head {
  position: absolute;
  left: 14px;         /* sits just to the right of the spine */
  top: 16px;          /* above the connector bar */
  background: #003b80;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.92rem;
  letter-spacing: 0.4px;
  border-radius: 12px 12px 0 0;
  padding: 8px 20px 10px;
  line-height: 1;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

/* --------------------------------------------------------------------------
   Article items inside the category container
   -------------------------------------------------------------------------- */

.blog .lc-article,
.archive .lc-article {
  position: relative;
  z-index: 1; /* always above the connector bar */
  padding: 20px 0;
  border-bottom: 1px solid #e8edf3;
}

.blog .lc-article:last-child,
.archive .lc-article:last-child {
  border-bottom: none;
}

/* Title above the two columns */
.blog .lc-title,
.archive .lc-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.blog .lc-title a,
.archive .lc-title a {
  color: #0b1220;
  text-decoration: none;
}

.blog .lc-title a:hover,
.archive .lc-title a:hover {
  color: #003b80;
}

/* Two-column body: thumbnail + text */
.blog .lc-body,
.archive .lc-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  align-items: start;
}

/* No-thumb version collapses to one column */
.blog .lc-article.no-thumb .lc-body,
.archive .lc-article.no-thumb .lc-body {
  grid-template-columns: 1fr;
}

/* Thumbnail */
.blog .lc-thumb a,
.archive .lc-thumb a { display: block; }

.blog .lc-thumb img,
.archive .lc-thumb img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Meta + excerpt + CTA */
.blog .lc-text,
.archive .lc-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog .lc-meta,
.archive .lc-meta {
  color: #003b80;
  font-size: 0.92rem;
  font-weight: 700;
}

/* Neat, short preview (2–3 lines) */
.blog .lc-excerpt,
.archive .lc-excerpt {
  color: #2a3140;
  font-size: 1rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;        /* clamp to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read more link */
.blog .lc-read,
.archive .lc-read {
  align-self: start;
  color: #003b80;
  font-weight: 800;
  text-decoration: none;
  margin-top: 2px;
}

.blog .lc-read:hover,
.archive .lc-read:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Kill any stray pseudo stripes from articles (from earlier attempts/themes)
   -------------------------------------------------------------------------- */

.blog article.lc-article::before,
.blog article.lc-article::after,
.archive article.lc-article::before,
.archive article.lc-article::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  width: 0 !important;
  position: static !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .blog .lc-title,
  .archive .lc-title { font-size: 1.35rem; }

  .blog .lc-body,
  .archive .lc-body { grid-template-columns: 1fr; }

  .blog .lc-thumb img,
  .archive .lc-thumb img { height: 180px; }
}

@media (max-width: 640px) {
  .blog .tt-blog-list,
  .archive .tt-blog-list { padding: 20px 12px; }

  .blog .lc-cat-block,
  .archive .lc-cat-block {
    padding: 52px 16px 18px 16px;
  }

  .blog .lc-cat-head,
  .archive .lc-cat-head {
    left: 12px;
    top: 12px;
    font-size: 0.85rem;
    padding: 7px 16px 9px;
  }

  .blog .lc-cat-block::before,
  .archive .lc-cat-block::before,
  .blog .lc-cat-block::after,
  .archive .lc-cat-block::after {
    top: 52px;
  }
}