/* Loaded after main.css, home.css, about.css and services.css, on communities.php only. */

.comm-intro__inner { max-width: 720px; }
.comm-intro__inner p { font-size: 1.0625rem; }

/* Desktop-only: gives the heading enough room to fit on a single line
   (single-column block, no competing content beside it). */
@media (min-width: 992px) {
  .comm-intro__inner { max-width: 800px; }
}

/* Mobile only: center this section's intro text (label, heading, paragraph). */
@media (max-width: 767.98px) {
  .comm-intro__inner { text-align: center; }
}

.comms__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }

.comm-card {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--r-lg);
  border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.comm-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }

.comm-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.comm-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s ease;
}
.comm-card:hover .comm-card__media img { transform: scale(1.03); }

.comm-card__body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px; flex: 1;
}
.comm-card h3 { font-size: 1.25rem; }
.comm-card h3 a:hover { color: var(--gold-dark); }
.comm-card__desc { font-size: 0.9375rem; color: var(--text-muted); }

/* Developer name links to its matching card on developers.php — kept the
   same size/weight as the surrounding text, colored to read as a link. */
.comm-card__dev-link { color: var(--navy); font-weight: 600; }
.comm-card__dev-link:hover { color: var(--gold-dark); text-decoration: underline; }

.comm-card__types { display: flex; flex-wrap: wrap; gap: 8px; }
.comm-card__types li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; color: var(--navy);
  background: var(--bg-section-alt); border-radius: 999px;
  padding: 5px 14px;
}
/* Sized down to sit comfortably inside the compact pill. */
.comm-card__types .icon { width: 14px; height: 14px; flex-shrink: 0; }

.comm-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 14px;
  font-size: 0.9375rem; font-weight: 700; color: var(--navy);
}
.comm-card__link .icon { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.comm-card__link:hover { color: var(--gold-dark); }
.comm-card__link:hover .icon { transform: translateX(3px); }
[dir="rtl"] .comm-card__link:hover .icon { transform: scaleX(-1) translateX(-3px); }

@media (min-width: 640px) { .comms__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .comms__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }