/* ============================================
   BLOG CALLOUT COMPONENTS
   Shared across all blog posts
   Link: <link rel="stylesheet" href="css/blog-callouts.css">
   ============================================ */

/* --- TLDR Callout (top of every post) --- */
.callout-tldr {
  background: var(--light, #f7f8fa);
  border-left: 3px solid var(--navy, #112035);
  padding: 1.5rem 1.75rem;
  margin: 0 0 2.5rem 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--dark, #252525);
}

.callout-tldr .callout-label {
  display: block;
  font-family: var(--font-body, 'Lato', sans-serif);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--navy, #112035);
  margin-bottom: .5rem;
}

.callout-tldr code {
  background: rgba(17, 32, 53, .08);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: .88em;
  color: var(--navy, #112035);
}

/* --- Pro Tip / Tip Callout --- */
.callout-tip {
  background: #f2f7f4;
  border-left: 3px solid #3d7a5f;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--dark, #252525);
}

.callout-tip .callout-label {
  display: block;
  font-family: var(--font-body, 'Lato', sans-serif);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #3d7a5f;
  margin-bottom: .4rem;
}

/* --- Warning / Important Callout --- */
.callout-warning {
  background: #fdf8f0;
  border-left: 3px solid #c4852e;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--dark, #252525);
}

.callout-warning .callout-label {
  display: block;
  font-family: var(--font-body, 'Lato', sans-serif);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #c4852e;
  margin-bottom: .4rem;
}

/* --- Shared callout code styling --- */
.callout-tip code,
.callout-warning code {
  background: rgba(0, 0, 0, .06);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: .88em;
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .callout-tldr,
  .callout-tip,
  .callout-warning {
    padding: 1.25rem 1.25rem;
  }
}