/* Bourday Blog Studio — content sections */

/* ---- Commitments band (heading left, figures right) ------------------ */
.bb-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.bb-metrics-grid h2 { max-width: 13ch; }
.bb-metrics-grid > div > p { margin-bottom: 0; }
.bb-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.bb-metric { border-top: 2px solid var(--bb-ink); padding-top: 20px; }
.bb-metric-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--bb-ink);
  line-height: 1;
}
.bb-metric-value sup { font-size: .38em; font-weight: 700; top: -.9em; position: relative; color: var(--bb-violet); }
.bb-metric p { margin: 12px 0 0; font-size: .92rem; line-height: 1.5; }

/* ---- Service cards --------------------------------------------------- */
.bb-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bb-service-card { padding: 34px 32px 32px; display: flex; flex-direction: column; }
.bb-service-card h3 { margin-bottom: 10px; }
.bb-service-card p { font-size: .95rem; margin-bottom: 22px; }
.bb-service-card .bb-link { margin-top: auto; align-self: flex-start; }
.bb-card-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--bb-violet-tint);
  margin-bottom: 24px;
}
.bb-card-icon svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--bb-violet);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Alternating showcase rows -------------------------------------- */
.bb-showcase { display: grid; gap: 24px; }
.bb-show-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-lg);
  background: var(--bb-white);
  overflow: hidden;
  box-shadow: var(--bb-shadow-sm);
}
.bb-show-copy { padding: 52px 48px; align-self: center; }
.bb-show-copy h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 16px; max-width: 18ch; }
.bb-show-copy p { font-size: 1rem; max-width: 46ch; }
.bb-show-copy .bb-link { margin-top: 6px; }
.bb-show-art {
  position: relative;
  padding: 44px 40px;
  background: var(--bb-mist);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bb-show-row.bb-flip .bb-show-copy { order: 2; }
.bb-show-row.bb-flip .bb-show-art { order: 1; }
.bb-show-row.bb-dark { background: var(--bb-night); border-color: transparent; }
.bb-show-row.bb-dark h3 { color: var(--bb-on-night); }
.bb-show-row.bb-dark p { color: var(--bb-on-night-soft); }
.bb-show-row.bb-dark .bb-show-art { background: rgba(255, 255, 255, .04); }
.bb-show-row.bb-dark .bb-link { color: var(--bb-peri); border-color: var(--bb-on-night-line); }

/* Small chips under a showcase row */
.bb-show-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.bb-show-tags span {
  padding: 7px 14px;
  border-radius: var(--bb-r-pill);
  border: 1px solid var(--bb-line);
  background: var(--bb-white);
  font-size: .82rem;
  color: var(--bb-body);
}
.bb-show-row.bb-dark .bb-show-tags span { border-color: var(--bb-on-night-line); background: rgba(255, 255, 255, .05); color: var(--bb-on-night-soft); }

/* Art mocks inside showcase rows */
.bb-mock {
  width: 100%;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-md);
  background: var(--bb-white);
  padding: 20px;
  box-shadow: var(--bb-shadow-md);
}
.bb-show-row.bb-dark .bb-mock { border-color: var(--bb-on-night-line); background: rgba(255, 255, 255, .05); box-shadow: none; }
.bb-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--bb-line-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bb-muted);
}
.bb-show-row.bb-dark .bb-mock-head { border-color: var(--bb-on-night-line); color: var(--bb-peri-soft); }
.bb-mock-rows { display: grid; gap: 10px; }
.bb-mock-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bb-mist);
  font-size: .82rem;
  font-weight: 500;
  color: var(--bb-ink);
}
.bb-show-row.bb-dark .bb-mock-row { background: rgba(255, 255, 255, .06); color: var(--bb-on-night); }
.bb-mock-row b { font-weight: 700; color: var(--bb-violet); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.bb-show-row.bb-dark .bb-mock-row b { color: var(--bb-peri); }
.bb-mock-bars { display: grid; gap: 8px; margin-top: 16px; }
.bb-mock-bars span { height: 8px; border-radius: 4px; background: #EEEDF4; display: block; }
.bb-show-row.bb-dark .bb-mock-bars span { background: rgba(255, 255, 255, .1); }

/* ---- Dark numbered capability grid ---------------------------------- */
.bb-grid-numbered {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--bb-on-night-line);
}
.bb-grid-numbered > article {
  padding: 40px 38px 44px;
  border-bottom: 1px solid var(--bb-on-night-line);
  border-right: 1px solid var(--bb-on-night-line);
}
.bb-grid-numbered > article:nth-child(3n) { border-right: 0; }
.bb-grid-numbered > article:nth-last-child(-n+3) { border-bottom: 0; }
.bb-num {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--bb-peri);
  margin-bottom: 22px;
}
.bb-grid-numbered h3 { font-size: 1.4rem; margin-bottom: 18px; font-weight: 700; }
.bb-detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bb-detail-list li { font-size: .92rem; line-height: 1.5; color: var(--bb-on-night-soft); }
.bb-detail-list b { color: var(--bb-on-night); font-weight: 700; }

/* ---- Process timeline ------------------------------------------------ */
.bb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.bb-steps li { position: relative; padding-top: 34px; }
.bb-steps li::before {
  content: '';
  position: absolute;
  top: 10px; left: 0; right: 0;
  height: 2px;
  background: var(--bb-line);
}
.bb-steps li::after {
  content: '';
  position: absolute;
  top: 5px; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bb-paper);
  border: 2.5px solid var(--bb-violet);
}
.bb-mist .bb-steps li::after { background: var(--bb-mist); }
.bb-step-num {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bb-violet);
  margin-bottom: 10px;
}
.bb-steps h3 { font-size: 1.15rem; margin-bottom: 8px; }
.bb-steps p { font-size: .92rem; margin: 0; }

/* ---- Principles ------------------------------------------------------ */
.bb-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bb-principle { padding: 32px 30px; }
.bb-principle h3 { font-size: 1.18rem; margin-bottom: 10px; }
.bb-principle p { font-size: .94rem; margin: 0; }
.bb-principle-mark {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--bb-violet-tint);
  color: var(--bb-violet);
  font-weight: 900;
  font-size: .9rem;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

/* ---- Editorial concepts (sample work) -------------------------------- */
.bb-concepts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.bb-concept { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bb-concept-art {
  padding: 30px 30px 26px;
  background: var(--bb-mist);
  border-bottom: 1px solid var(--bb-line);
}
.bb-concept-kicker {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bb-violet);
  margin: 0 0 14px;
}
.bb-concept-lines { display: grid; gap: 9px; }
.bb-concept-lines span { height: 9px; border-radius: 4px; background: #E5E3EF; }
.bb-concept-lines span:first-child { height: 15px; width: 72%; background: #D8D5E8; }
.bb-concept-body { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.bb-concept-body h3 { margin-bottom: 12px; }
.bb-concept-body p { font-size: .95rem; margin-bottom: 22px; }
.bb-concept-body .bb-link { margin-top: auto; align-self: flex-start; }

/* ---- Tool chips ------------------------------------------------------ */
.bb-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bb-tools li {
  padding: 12px 24px;
  border-radius: var(--bb-r-pill);
  border: 1px solid var(--bb-line);
  background: var(--bb-white);
  font-size: .93rem;
  font-weight: 500;
  color: var(--bb-ink);
  box-shadow: var(--bb-shadow-sm);
}

/* ---- FAQ accordion --------------------------------------------------- */
.bb-faq-list { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; }
.bb-faq-list details {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-md);
  background: var(--bb-white);
  transition: border-color .25s var(--bb-ease), box-shadow .25s var(--bb-ease);
}
.bb-faq-list details[open] { border-color: #D3CFE7; box-shadow: var(--bb-shadow-md); }
.bb-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--bb-ink);
  letter-spacing: -0.01em;
}
.bb-faq-list summary::-webkit-details-marker { display: none; }
.bb-faq-list summary::after {
  content: '';
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bb-violet-tint) center / 11px 11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%235B51CA' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform .25s var(--bb-ease);
}
.bb-faq-list details[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h9' stroke='%235B51CA' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}
.bb-faq-list details > p { margin: 0; padding: 0 26px 24px; font-size: .97rem; max-width: 72ch; }

/* ---- Light CTA card -------------------------------------------------- */
.bb-cta-card {
  text-align: center;
  padding: 76px 48px;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-lg);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(91, 81, 202, .09), transparent 62%),
    var(--bb-white);
  box-shadow: var(--bb-shadow-md);
}
.bb-cta-card h2 { max-width: 20ch; margin: 0 auto 16px; }
.bb-cta-card > p { max-width: 54ch; margin: 0 auto 32px; font-size: 1.05rem; }
.bb-cta-card .bb-note { margin-top: 26px; }

@media (max-width: 1024px) {
  .bb-card-grid { grid-template-columns: repeat(2, 1fr); }
  .bb-principles { grid-template-columns: repeat(2, 1fr); }
  .bb-grid-numbered { grid-template-columns: repeat(2, 1fr); }
  .bb-grid-numbered > article:nth-child(3n) { border-right: 1px solid var(--bb-on-night-line); }
  .bb-grid-numbered > article:nth-child(2n) { border-right: 0; }
  .bb-grid-numbered > article:nth-last-child(-n+3) { border-bottom: 1px solid var(--bb-on-night-line); }
  .bb-grid-numbered > article:nth-last-child(-n+2) { border-bottom: 0; }
  .bb-steps { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
  .bb-metrics-grid { grid-template-columns: 1fr; gap: 44px; }
  .bb-metrics-grid h2 { max-width: 20ch; }
}
@media (max-width: 900px) {
  .bb-show-row { grid-template-columns: 1fr; }
  .bb-show-row.bb-flip .bb-show-copy { order: 0; }
  .bb-show-row.bb-flip .bb-show-art { order: 0; }
  .bb-show-copy { padding: 40px 32px; }
  .bb-show-copy h3, .bb-show-copy p { max-width: 100%; }
  .bb-concepts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bb-card-grid { grid-template-columns: 1fr; }
  .bb-principles { grid-template-columns: 1fr; }
  .bb-grid-numbered { grid-template-columns: 1fr; }
  .bb-grid-numbered > article { border-right: 0 !important; padding: 32px 0 34px; }
  .bb-grid-numbered > article:last-child { border-bottom: 0 !important; }
  .bb-steps { grid-template-columns: 1fr; gap: 28px; }
  .bb-metrics { grid-template-columns: 1fr; gap: 22px; }
  .bb-cta-card { padding: 52px 24px; }
  .bb-show-copy { padding: 34px 24px; }
  .bb-show-art { padding: 30px 24px; }
  .bb-faq-list summary { padding: 20px; font-size: .97rem; }
  .bb-faq-list details > p { padding: 0 20px 22px; }
}