/* =====================================================
   Zingbell Child Template – user.css
   Path: /templates/cassiopeia_child/css/user.css
   -----------------------------------------------------
   Styles for the custom article layout  "zingbell.php"
   ===================================================== */

/* 1. Article wrapper -----------------------------------------------------*/
.zing-hero-wrapper {
  /* Use Cassiopeia variables so dark‑mode / other colour sets still work */
  color: var(--template-text-dark);
  line-height: 1.65;
  font-family: var(--cassiopeia-font-family-sans-serif);
  margin-bottom: 3rem;
}

/* 2. Hero banner ---------------------------------------------------------*/
.article-hero {
  margin: 0 0 2rem 0;
  position: relative;
}

.article-hero img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Overlay title if you decide later to move <h1> inside the figure */
.article-hero__title-overlay {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  margin: 0;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 0.25rem;
  font-size: clamp(1.4rem, 2vw + 0.5rem, 2.2rem);
}

/* 3. Content body --------------------------------------------------------*/
.zing-content {
  font-size: 1.05rem;
}

/* Two‑column helper when using the Bootstrap‑like row/col markup */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.75rem;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 0.75rem;
}

@media (max-width: 768px) {
  .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* 4. Meta footer ---------------------------------------------------------*/
.zing-meta {
  border-top: 1px solid #e5e5e5;
  padding-top: 0.75rem;
  margin-top: 2rem;
  font-size: 0.875rem;
}

.zing-meta .icon-folder-open {
  margin-right: 0.25rem;
  color: var(--template-link-color);
}

/* 5. Call‑to‑action alert tweaks (inherits Cassiopeia bootstrap‑like alert) */
.alert-info {
  border-color: var(--template-link-color);
  background: color-mix(in srgb, var(--template-link-color) 7%, #fff);
}
.alert-info h4 {
  color: var(--template-link-color);
}

/* 6. Minor utility helpers ----------------------------------------------*/
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: 2rem !important; }
.small { font-size: 0.875rem !important; }

/* End of user.css */