/* "From the Community" on the home page: the three newest Community News
   stories as small cards between the search and the directory. Short on
   purpose, so the businesses stay close to the search box. On phones the
   cards sit in one row you swipe sideways. */
.cc-news-band { padding-top: 2.5em; padding-bottom: 2em; position: relative; }
.cc-news-band[hidden] { display: none; }

.cc-news-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 1em; }
.cc-news-band-title { margin: 0; font-size: 1.25em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: rgb(13, 13, 18); }
.cc-news-band-all { color: rgb(102, 109, 128); font-size: 0.9375em; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 0.3s; }
.cc-news-band-all:hover { color: rgb(13, 13, 18); }

.cc-news-band-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }

.cc-news-mini { display: flex; align-items: center; gap: 1em; padding: 0.75em; min-width: 0; background: rgb(247, 247, 241); border: 1px solid rgb(223, 225, 231); border-radius: 1.25em; filter: drop-shadow(rgba(13, 13, 18, 0.06) 0px 1px 3px); color: rgb(13, 13, 18); text-decoration: none; transition: transform 0.3s ease, border-color 0.3s ease; }
.cc-news-mini:hover { transform: translateY(-2px); border-color: rgb(13, 13, 18); }
.cc-news-mini:focus-visible { outline: 2px solid rgb(13, 13, 18); outline-offset: 2px; }

.cc-news-mini-img { flex: 0 0 auto; width: 6em; height: 6em; border-radius: 0.875em; overflow: hidden; background: rgb(223, 225, 231); }
.cc-news-mini-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.cc-news-mini:hover .cc-news-mini-img img { transform: scale(1.05); }

.cc-news-mini-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em; min-width: 0; }
.cc-news-mini-tag { font-size: 0.75em; font-weight: 500; letter-spacing: -0.02em; color: rgb(102, 109, 128); background: #fff; border: 1px solid rgb(223, 225, 231); border-radius: 1em; padding: 0.15em 0.55em; white-space: nowrap; }
.cc-news-mini-title { font-size: 1em; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-news-mini-meta { font-size: 0.8125em; color: rgb(102, 109, 128); white-space: nowrap; }

/* tablets: the cards get a little narrower images */
@media screen and (max-width: 991px) {
  .cc-news-band-row { gap: 0.75em; }
  .cc-news-mini-img { width: 4.75em; height: 4.75em; }
  .cc-news-mini-title { font-size: 0.9375em; }
}

/* phones: one row, swiped sideways; the next card peeks in */
@media screen and (max-width: 767px) {
  .cc-news-band { padding-top: 2em; padding-bottom: 0; }
  .cc-news-band-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 1.25rem; margin-left: -1.25rem; margin-right: -1.25rem; padding: 0.25em 1.25rem 0.75em; scrollbar-width: none; }
  .cc-news-band-row::-webkit-scrollbar { display: none; }
  .cc-news-mini { flex: 0 0 82%; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-news-mini, .cc-news-mini-img img { transition: none; }
  .cc-news-mini:hover { transform: none; }
  .cc-news-mini:hover .cc-news-mini-img img { transform: none; }
}