/* billboard.css — load this once, sitewide (e.g. appended to each
   page's existing <style> block, or linked separately in <head>).
   Kept in its own file so it's easy to hand-tune without hunting
   through build_article.py's big inline <style> block. */

#billboard-slot:empty { display: none; }

button.article-share-btn {
  display: inline-block;
  background: transparent;
  color: #7a2e2e;
  border: 1px solid #7a2e2e;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 4px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.88rem;
  margin: 4px 0 24px;
}

.billboard {
  margin: 0 0 28px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
}

.billboard-link {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}

.billboard-image {
  width: 120px;
  min-width: 120px;
  height: auto;
  object-fit: cover;
}

/* "poster" layout: for a flyer-style graphic where the text baked
   into the image (a phone number, a name) IS the content -- shown
   full-width, uncropped, above the headline, instead of squeezed
   into the narrow side thumbnail. Triggered by image_style: full
   in billboards.yaml. */
.billboard-poster .billboard-link {
  flex-direction: column;
}
.billboard-poster .billboard-image {
  width: 100%;
  min-width: 0;
  height: auto;
  object-fit: contain;
  background: #fff;
  display: block;
}

.billboard-body {
  padding: 14px 18px;
  flex: 1;
  min-width: 0;
}

.billboard-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: bold;
  margin-bottom: 4px;
}

.billboard-headline {
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.3;
}

.billboard-detail {
  font-size: 0.88rem;
  margin-top: 4px;
  opacity: 0.9;
}

.billboard-contact {
  font-size: 0.82rem;
  margin-top: 6px;
  font-style: italic;
}

.billboard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px 10px;
}

.billboard-share {
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
  border: none;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 0.76rem;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
}
.billboard-promo .billboard-share {
  background: rgba(0, 0, 0, 0.08);
}

.billboard-close {
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 20px;
  cursor: pointer;
  font-size: 1rem;
}

.billboard-preview-tag {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

/* Alert: urgent, high-contrast, matches a "PLEASE SHARE" register */
.billboard-alert {
  background: #7a2e2e;
  color: #faf7f2;
  border: 2px solid #5a1f1f;
}
.billboard-alert .billboard-label { color: #f0c9c9; }

/* Resolved alert (e.g. FOUND SAFE): same family as an alert, but green,
   so it reads as "good news / update" and can't be mistaken for a live
   alert. Must come after .billboard-alert so it wins. */
.billboard-alert.billboard-resolved {
  background: #1c5a34;
  color: #f2f8f4;
  border: 2px solid #12402a;
}
.billboard-alert.billboard-resolved .billboard-label { color: #bfe3cc; }

.billboard-dates {
  font-size: 0.78rem;
  margin-top: 6px;
  opacity: 0.85;
}

/* Promo: calm, editorial, visually distinct from an alert on purpose */
.billboard-promo {
  background: #f1ece1;
  color: #1c1c1c;
  border: 1px solid #c9a86a;
}

@media (max-width: 520px) {
  .billboard-link { flex-direction: column; }
  .billboard-image { width: 100%; height: 140px; }
}