/*
 * Blog — Popular tags + newsletter split panel.
 * Scoped under body.log-blog-page.
 */

.log-blog-page .bl2-split-wrap {
  max-width: 1160px;
  margin: 44px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 820px) {
  .log-blog-page .bl2-split-wrap { grid-template-columns: 1fr; }
}

.log-blog-page .bl2-tag-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}

.log-blog-page .bl2-tag-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink-900);
}

.log-blog-page .bl2-tag-card h3 em {
  font-style: italic;
  color: var(--plum-700);
}

.log-blog-page .bl2-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.log-blog-page .bl2-tag-chip {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-700);
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--r-pill);
}

.log-blog-page .bl2-news-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--plum-950), var(--plum-900));
  border-radius: var(--r-lg);
  padding: 24px;
  color: #fff;
}

.log-blog-page .bl2-news-card::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  background: var(--sage-500);
  border-radius: 50%;
  filter: blur(60px);
  opacity: .28;
  top: -60px;
  right: -40px;
  pointer-events: none;
}

.log-blog-page .bl2-news-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  position: relative;
  z-index: 1;
}

.log-blog-page .bl2-news-card h3 em {
  font-style: italic;
  color: var(--sage-400);
}

.log-blog-page .bl2-news-card p {
  font-size: 11.5px;
  color: var(--gray-light);
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

.log-blog-page .bl2-news-card .wpcf7 {
  position: relative;
  z-index: 1;
  margin-top: 14px;
}

.log-blog-page .bl2-news-card .wpcf7-form br {
  /* CF7 auto-wraps unformatted shortcode content in <p> and turns a stray
     line break between tags into a literal <br> — same issue and same fix
     as .log-fn-cf7 br in log-footer.css. Both tags are kept on one line in
     the form template too, this is belt-and-braces. */
  display: none;
}

.log-blog-page .bl2-news-card .wpcf7-form p {
  display: flex;
  gap: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  border: 2px solid var(--plum-500);
  padding: 5px;
  transition: border-color .25s var(--ease);
  flex-wrap: nowrap;
  margin: 0;
}

.log-blog-page .bl2-news-card .wpcf7-form p:focus-within {
  border-color: var(--sage-400);
}

.log-blog-page .bl2-news-card .wpcf7-form .wpcf7-form-control-wrap {
  flex: 1;
  display: flex;
  align-items: center;
}

.log-blog-page .bl2-news-card .wpcf7-form input[type='email'] {
  flex: 1;
  background: none;
  border: none;
  color: #fff;
  font-size: 12.5px;
  padding: 9px 14px;
  outline: none;
  width: 100%;
}

.log-blog-page .bl2-news-card .wpcf7-form input[type='email']::placeholder {
  color: #8fae9f;
}

/* Chrome/Edge autofill forces its own white background + black text on
   selection (ignores color/background entirely) — same fix as the footer
   newsletter form (log-footer.css): an inset box-shadow paints over the
   forced background, -webkit-text-fill-color is what autofill respects. */
.log-blog-page .bl2-news-card .wpcf7-form input[type='email']:-webkit-autofill,
.log-blog-page .bl2-news-card .wpcf7-form input[type='email']:-webkit-autofill:focus,
.log-blog-page .bl2-news-card .wpcf7-form input[type='email']:-webkit-autofill:hover {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .08) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.log-blog-page .bl2-news-card .wpcf7-form input[type='submit'] {
  /* CF7's own plugin CSS sets width:100% on every .wpcf7-form-control
     (email + submit alike). flex-basis:auto reads that width as the
     basis, so without this override the submit button claims the full
     row and starves the email field down to its min-content. */
  width: auto;
  background: var(--sage-500);
  color: var(--plum-950);
  font-weight: 700;
  font-size: 11.5px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: background .25s var(--ease);
  flex-shrink: 0;
}

.log-blog-page .bl2-news-card .wpcf7-form input[type='submit']:hover {
  background: var(--sage-400);
}

.log-blog-page .bl2-news-card .wpcf7-response-output {
  /* issues-fixes.css sets an unscoped ".wpcf7-response-output{order:-1}"
   * for the Contact Us page's own form (Issue #21) — it matches every CF7
   * form sitewide, including this one, and puts the notice above the input
   * row instead of below it. Same fix as .log-fn-cf7 in log-footer.css. */
  order: 0;
  position: relative;
  z-index: 1;
  margin: 10px 0 0 !important;
  font-size: 11px;
  color: var(--sage-400);
  font-weight: 700;
  border: none !important;
  padding: 0 !important;
}

/* Base rule above is sage-400 (success green) unconditionally — error
   messages need to read as errors, not a second success color. */
.log-blog-page .bl2-news-card .bl2-news-cf7.invalid .wpcf7-response-output,
.log-blog-page .bl2-news-card .wpcf7-response-output.wpcf7-validation-errors {
  color: #ffb0b0;
}

/* Per-field inline tip duplicates the same message already shown in
   .wpcf7-response-output above — same fix as .log-fn-cf7 in log-footer.css. */
.log-blog-page .bl2-news-card .wpcf7-not-valid-tip {
  display: none !important;
}