/* ===========================
   Community Groups Page (Mobile XL)
   =========================== */

.community-groups-intro {
  text-align: center;
  background: rgba(255,255,255,0.95);
  padding: 3rem 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  max-width: 95%;
  margin: 0 auto 3rem;
}

/* Intro Header */
.cg-intro-header .cg-title {
  font-family: var(--font-serif-primary);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--primary-green);
  margin-bottom: 1rem;
}

.cg-intro-header .cg-subtitle {
  font-family: var(--font-serif-secondary);
  font-size: 2rem;
  color: #444;
  margin-bottom: 2rem;
}

/* Link block */
.cg-link {
  margin: 2rem auto;
}

.cg-link .btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  background-color: var(--primary-green);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cg-link .btn:hover {
  background-color: var(--primary-green-dark);
  transform: translateY(-3px);
}

.cg-link .link-description {
  font-size: 1.6rem;
  color: #555;
  margin-top: 1rem;
}

/* Groups List Section */
.community-groups-list {
  text-align: center;
  padding: 3rem 2rem;
  max-width: 95%;
  margin: 0 auto 3rem;
}

.cg-groups-header .groups-title {
  font-family: var(--font-serif-primary);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--primary-green);
  margin-bottom: 2.5rem;
}

/* Groups grid */
.groups-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* ===========================
   Community Groups Cards (Mobile XL)
   =========================== */

.group-card {
  background: linear-gradient(145deg, #ffffff, #f9f9f9);
  border-radius: 14px;
  padding: 2.5rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
  text-align: center;              /* center content */
  position: relative;
  overflow: hidden;
}

/* Subtle gradient overlay for visual depth */
.group-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58,107,53,0.05), rgba(102,53,107,0.05));
  border-radius: 14px;
  pointer-events: none;
}

/* Active/tap feedback */
.group-card:active {
  transform: scale(0.97);
  box-shadow: inset 4px 4px 10px rgba(0,0,0,0.25);
}

/* Group name */
.group-card .group-name {
  font-family: var(--font-serif-primary);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary-green);
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Group details */
.group-card p {
  font-family: var(--font-sans-secondary);
  font-size: 2rem;
  line-height: 2.3;
  color: #444;
  margin-bottom: 0.75rem;
}

/* Highlight labels (Day, Time, etc.) */
.group-card p strong {
  color: var(--primary-complement);
  font-weight: 700;
}


.groups-contact {
  font-size: 1.6rem;
  color: #555;
  margin-top: 2.5rem;
}

/* WWW Section (When/What/Where) */
.community-groups-when-what-where {
  text-align: center;
  background: rgba(255,255,255,0.95);
  padding: 3rem 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  max-width: 95%;
  margin: 0 auto 3rem;
}

.www-header .www-title {
  font-family: var(--font-serif-primary);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--primary-green);
  margin-bottom: 2rem;
}

/* WWW items */
.www-items {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.www-item {
  background: #f9fdf9;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  text-align: left;
}

.www-item .www-label {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-complement);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.www-item .www-description {
  font-size: 1.6rem;
  line-height: 2.3;
  color: #444;
}

/* WWW image */
.www-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}