/* ─────────────────────────────────────────────── crm.bamya.co/blog

   The blog's pieces on top of panel.css and sales.css: a short hero with its
   counts and a ticker of titles, the latest post as a feature card, the
   filter, the timeline of months, and a post's reading page.

   Every colour is a panel.css token. A post's part of the suite is a dot:
   the CRM is teal (--you), Leads violet (--them), Bamya Call a teal ring
   (--live), the Community white, and the whole suite the brand pair as a
   gradient, the same pair as the progress hairline. */

/* ───────────────────────────────────────────── the parts of the suite */

.bl-dot-all,
.bl-dot-crm,
.bl-dot-leads,
.bl-dot-call,
.bl-dot-community,
.bl-tag i {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: 0.05em;
}

.bl-dot-all, .bl-tag-all i { background: linear-gradient(135deg, var(--you), var(--them)); }
.bl-dot-crm, .bl-tag-crm i { background: var(--you); box-shadow: 0 0 8px rgba(56, 217, 190, 0.5); }
.bl-dot-leads, .bl-tag-leads i { background: var(--them); box-shadow: 0 0 8px rgba(167, 139, 250, 0.5); }
.bl-dot-call, .bl-tag-call i { background: transparent; border: 2px solid var(--live); }
.bl-dot-community, .bl-tag-community i { background: var(--text); }

.bl-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}

.bl-tag-crm { border-color: rgba(56, 217, 190, 0.35); }
.bl-tag-leads { border-color: rgba(167, 139, 250, 0.38); }
.bl-tag-call { border-color: rgba(69, 236, 208, 0.35); }

/* One line of mono under or over a title: when, about what, how long. */
.bl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.bl-meta time { color: var(--dim); }

/* ───────────────────────────────────────────── hero

   Off the full screen (.panel is 100svh): the posts start on the first one.
   The top padding clears the fixed header with the same margin the panels
   use. */
.bl-hero {
  min-height: 0;
  padding: 150px 0 0;
  overflow: hidden;
  border-bottom: 0;
}

.bl-hero h1 { max-width: 13em; }

.bl-hero .lede { margin-bottom: 30px; }

.bl-hero-actions { gap: 18px 30px; }

.bl-stats {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--raise) 80%, transparent);
  overflow: hidden;
}

.bl-stats > div {
  padding: 12px 20px 11px;
  border-left: 1px solid var(--line);
}

.bl-stats > div:first-child { border-left: 0; }

.bl-stats dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.bl-stats dd {
  margin-top: 2px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}

/* The feed's icon: a quarter of a broadcast, drawn in CSS. */
.bl-rss { display: inline-flex; align-items: center; gap: 10px; }

.bl-rss i {
  position: relative;
  width: 11px;
  height: 11px;
  border-top-right-radius: 11px;
  border: 2px solid var(--you);
  border-left: 0;
  border-bottom: 0;
}

.bl-rss i::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--you);
}

/* The newest titles running past, faded out at both ends. The row holds the
   list twice and travels half its own width, which lands the second copy
   exactly where the first began. */
.bl-ticker {
  margin-top: clamp(48px, 7vw, 80px);
  padding: 16px 0;
  border-block: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.bl-ticker-row {
  display: flex;
  width: max-content;
  gap: 44px;
  animation: bl-ticker 70s linear infinite;
}

.bl-ticker:hover .bl-ticker-row { animation-play-state: paused; }

.bl-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

@keyframes bl-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 22px)); }
}

/* ───────────────────────────────────────────── the list panel */

.bl-list { padding-top: clamp(48px, 7vw, 80px); align-items: start; }

/* A card is one link: the title's ::after is stretched over the whole card,
   so anywhere on it opens the post and a keyboard still stops once. */
.bl-stretch { color: inherit; text-decoration: none; }

.bl-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.bl-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--you);
}

.bl-read b { font-weight: 400; transition: transform 0.25s; }

/* ───────────────────────────────────────────── the latest post

   A gradient edge (the brand pair, through a transparent border) and a bloom
   behind it, so the newest post is the brightest thing on the page. */
.bl-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    radial-gradient(520px 300px at 0% 0%, rgba(56, 217, 190, 0.10), transparent 70%) padding-box,
    radial-gradient(520px 300px at 100% 100%, rgba(167, 139, 250, 0.10), transparent 70%) padding-box,
    linear-gradient(var(--raise), var(--raise)) padding-box,
    linear-gradient(135deg, rgba(56, 217, 190, 0.65), rgba(255, 255, 255, 0.06) 45%, rgba(167, 139, 250, 0.6)) border-box;
  box-shadow: 0 40px 100px -50px rgba(56, 217, 190, 0.45);
  /* translate, not transform: panel.js's reveal owns this card's transform,
     and the two compose rather than fight. */
  transition: translate 0.3s, box-shadow 0.3s;
}

.bl-feature.is-single { grid-template-columns: minmax(0, 1fr); }

.bl-feature:hover {
  translate: 0 -3px;
  box-shadow: 0 50px 110px -50px rgba(56, 217, 190, 0.6);
}

.bl-feature-copy { display: flex; flex-direction: column; }

.bl-feature-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 22px;
}

.bl-latest {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: rgba(56, 217, 190, 0.12);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--live);
}

.bl-latest .pulse { width: 7px; height: 7px; }

.bl-feature h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  margin-bottom: 16px;
}

.bl-feature-lead {
  max-width: 36em;
  color: var(--dim);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
}

.bl-feature-side {
  align-self: center;
  padding: 24px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
}

.bl-side-head {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.bl-points {
  list-style: none;
  counter-reset: bl-point;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bl-points li {
  counter-increment: bl-point;
  position: relative;
  padding-left: 36px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}

.bl-points li::before {
  content: counter(bl-point, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--you);
}

@media (max-width: 900px) {
  .bl-feature { grid-template-columns: minmax(0, 1fr); }
  .bl-feature-side { align-self: stretch; }
}

/* ───────────────────────────────────────────── the filter */

.bl-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: clamp(48px, 7vw, 76px) 0 clamp(36px, 5vw, 56px);
}

.bl-filter[hidden] { display: none; }

.bl-filter button,
.bl-none button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font: 11.5px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.bl-filter button span { color: var(--faint); }

.bl-filter button:hover { color: var(--text); border-color: var(--line-strong); }

.bl-filter button[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--you);
  background: rgba(56, 217, 190, 0.08);
}

.bl-filter button[aria-pressed="true"] span { color: var(--you); }

.bl-filter button:focus-visible,
.bl-none button:focus-visible { outline: 2px solid var(--you); outline-offset: 3px; }

.bl-none {
  margin-top: 30px;
  text-align: center;
  color: var(--dim);
}

.bl-none button { margin-left: 10px; }

/* ───────────────────────────────────────────── the timeline

   A month on the left, sticky while its posts pass, and the posts beside it.
   One hairline in the brand pair runs down the whole of it, and each month
   sits on it as a dot. */
.bl-timeline { position: relative; }

.bl-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: linear-gradient(180deg, var(--you), var(--them) 60%, transparent);
  opacity: 0.45;
}

.bl-month {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px clamp(24px, 4vw, 48px);
  padding-bottom: clamp(44px, 6vw, 70px);
}

.bl-month[hidden], .bl-card[hidden], .bl-feature[hidden] { display: none !important; }

.bl-month-label {
  position: sticky;
  top: 104px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 30px;
}

.bl-month-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--you);
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(56, 217, 190, 0.5);
}

.bl-month-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.bl-month-year {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--faint);
}

.bl-month-posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bl-month-posts > .bl-card:only-child { grid-column: 1 / -1; }

/* A card left alone on its row takes the whole row (owner, 2026-10-12: "if
   there is a single one on the row - make it double column"), so a month
   with an odd number of posts ends on a wide card, not a hole. Without the
   script that is the last card of an odd count; with it, sales-blog.js marks
   the last VISIBLE card .is-wide, because a filter changes which cards are
   left (data-bl-sized hands the decision over to it). */
.bl-month-posts:not([data-bl-sized]) > .bl-card:last-child:nth-child(odd),
.bl-month-posts > .bl-card.is-wide { grid-column: 1 / -1; }

.bl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--raise);
  transition: border-color 0.25s, opacity 0.6s, translate 0.45s;
}

/* The brand pair along the top edge, drawn in on hover. */
.bl-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--you), var(--them));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s ease;
}

.bl-card:hover { border-color: var(--line-strong); translate: 0 -3px; }
.bl-card:hover::before { transform: scaleX(1); }
.bl-card:hover .bl-read b,
.bl-feature:hover .bl-read b,
.bl-card:focus-within .bl-read b { transform: translateX(4px); }

.bl-card:focus-within,
.bl-feature:focus-within { outline: 2px solid var(--you); outline-offset: 3px; }

.bl-card:focus-within .bl-stretch:focus-visible,
.bl-feature .bl-stretch:focus-visible { outline: none; }

.bl-card .bl-meta { margin-bottom: 14px; }

.bl-card h4 {
  margin-bottom: 10px;
  font-size: 1.14rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.bl-card p { color: var(--dim); font-size: 0.93rem; line-height: 1.6; }

/* Cards rise into place as they come on screen (sales-blog.js adds
   .bl-anim to the timeline and .is-in to each card). Without the script, or
   with reduced motion, .bl-anim is never there and every card just shows. */
.bl-anim .bl-card:not(.is-in) { opacity: 0; translate: 0 26px; }

@media (max-width: 900px) {
  .bl-month { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bl-month-label { position: relative; top: 0; flex-direction: row; align-items: baseline; gap: 12px; }
  .bl-month-posts { padding-left: 30px; }
}

@media (max-width: 640px) {
  .bl-month-posts { grid-template-columns: minmax(0, 1fr); }
  .bl-stats > div { padding: 10px 14px 9px; }
}

/* ───────────────────────────────────────────── nothing to show */

.bl-empty-card {
  padding: 40px 36px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  text-align: center;
  background: var(--raise);
}

.bl-empty-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.bl-empty-card p { color: var(--dim); margin-bottom: 22px; }
.bl-empty-card .actions { justify-content: center; }

/* ───────────────────────────────────────────── the closer, short */

.bl-closer { padding: clamp(80px, 11vw, 140px) 0; }

/* ───────────────────────────────────────────── a post

   The title is a headline, not a slogan, and a long one is common, so it is
   set a size below the landing's h1. */
.bl-post-hero { padding-bottom: 10px; }

.bl-post-hero h1 {
  max-width: none;
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  line-height: 1.06;
}

.bl-crumbs a { color: var(--dim); text-decoration: none; transition: color 0.2s; }
.bl-crumbs a:hover { color: var(--text); }
.bl-crumbs .bl-tag { font-size: 11px; letter-spacing: 0.1em; }

.bl-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.bl-post-meta time { color: var(--dim); }

.bl-article { padding-top: clamp(36px, 5vw, 56px); align-items: start; }

.bl-prose {
  position: relative;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.04rem, 1.3vw, 1.14rem);
  line-height: 1.78;
  color: color-mix(in srgb, var(--text) 84%, var(--dim));
}

/* The brand pair as a short rule at the head of the text. */
.bl-prose::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 96px;
  height: 2px;
  background: linear-gradient(90deg, var(--you), var(--them));
}

.bl-prose > * + * { margin-top: 1.15em; }

.bl-prose > p:first-child {
  font-size: 1.16em;
  line-height: 1.65;
  color: var(--text);
}

.bl-prose strong { color: var(--text); font-weight: 650; }

.bl-prose a {
  color: var(--live);
  text-decoration: underline;
  text-decoration-color: rgba(69, 236, 208, 0.4);
  text-underline-offset: 3px;
  word-break: break-word;
}

.bl-prose a:hover { text-decoration-color: var(--live); }

.bl-prose ul,
.bl-prose ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: 0;
}

.bl-prose li { position: relative; padding-left: 2.1em; }

.bl-prose ul li::before {
  content: "";
  position: absolute;
  left: 0.55em;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--you);
  box-shadow: 0 0 8px rgba(56, 217, 190, 0.5);
}

.bl-prose ol { counter-reset: bl-step; }
.bl-prose ol li { counter-increment: bl-step; padding-left: 2.6em; }

.bl-prose ol li::before {
  content: counter(bl-step);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.75em;
  height: 1.75em;
  display: grid;
  place-items: center;
  border: 1px solid rgba(56, 217, 190, 0.5);
  border-radius: 50%;
  font: 600 0.72em/1 var(--mono);
  color: var(--you);
  background: rgba(56, 217, 190, 0.06);
}

/* Sharing: a line under the text. */
.bl-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: clamp(40px, 6vw, 60px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.bl-share-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.bl-share-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.bl-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font: 11.5px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.bl-chip:hover { color: var(--text); border-color: var(--text); }
.bl-chip[hidden] { display: none; }
.bl-chip.is-done { color: var(--you); border-color: var(--you); }
.bl-chip:focus-visible { outline: 2px solid var(--you); outline-offset: 3px; }

/* Newer and older, side by side. */
.bl-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.bl-pager-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--raise);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s;
}

.bl-pager-card.is-older { text-align: right; }

/* The newest or the oldest post has one neighbour: it takes the whole row. */
.bl-pager > .bl-pager-card:only-child { grid-column: 1 / -1; text-align: left; }
.bl-pager-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.bl-pager-card:focus-visible { outline: 2px solid var(--you); outline-offset: 3px; }
.bl-pager-card b { font-size: 1.02rem; line-height: 1.35; text-wrap: balance; }

.bl-pager-dir,
.bl-pager-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--you);
}

.bl-pager-date { color: var(--faint); }

.bl-back { margin-top: 36px; text-align: center; }

@media (max-width: 640px) {
  .bl-pager { grid-template-columns: minmax(0, 1fr); }
  .bl-pager-card.is-older { text-align: left; }
  .bl-share { flex-direction: column; align-items: flex-start; }
}

/* ───────────────────────────────────────────── motion off */

@media (prefers-reduced-motion: reduce) {
  .bl-ticker-row { animation: none; }
  .bl-card,
  .bl-feature,
  .bl-card::before { transition: none; }
}