.community-section {
  background-color: var(--color-brand-magenta);
  padding: clamp(4rem, 8svh, 8rem) var(--header-padding-x);
  position: relative;
  overflow: hidden;
}

.community-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6svw, 6rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

.community-content { color: var(--color-bg-white); }

.community-badge-row {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
}
.community-badge-row:hover { opacity: 0.8; }
.community-badge-row:hover .icon-arrow-stretch { transform: translateX(8px); }

.community-badge {
  background-color: var(--color-accent-green-bright);
  color: var(--color-bg-white);
  padding: 0.4em 1.2em;
  font-size: clamp(0.8rem, 1svw, 0.9rem);
  font-weight: 600;
  border-radius: 2px;
}

.icon-arrow-stretch { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

.community-title {
  font-size: var(--font-size-h1);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.community-desc {
  font-size: var(--font-size-body);
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 500px;
}

.community-actions {
  display: flex; flex-direction: column; gap: 1rem; max-width: 320px;
}

.btn-community {
  display: inline-block; text-align: center; padding: 1.2em 2em; border-radius: 3em;
  font-weight: 800; font-size: clamp(1rem, 1.1svw, 1.1rem); text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.btn-community--white { background-color: var(--color-bg-white); color: var(--color-brand-magenta); }
.btn-community--purple { background-color: var(--color-accent-purple-bright); color: var(--color-bg-white); }
.btn-community:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }

.calendar-card {
  background-color: var(--color-bg-white);
  border-radius: 8px;
  padding: clamp(2rem, 4svw, 4rem);
  color: var(--color-text-dark);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.calendar-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; }
.calendar-header svg { width: 36px; height: 36px; stroke: #8a8a8a; }
.calendar-header h3 { font-size: clamp(1.8rem, 2.5svw, 2.5rem); color: #8a8a8a; font-weight: 500; }

.timeline {
  position: relative;
  padding-left: 20px;
}
.timeline::before {
  content: ""; position: absolute;
  left: 27px;
  top: 10px; bottom: 0; width: 2px;
  background-color: var(--color-brand-orange);
}

.timeline-item {
  display: flex; gap: 1.5rem; position: relative; margin-bottom: 3rem;
  padding-left: 2.5rem;
}
.timeline-item::before {
  content: ""; position: absolute;
  left: 0; top: 0.7rem;
  width: 16px; height: 16px; border-radius: 50%;
  background-color: var(--color-brand-orange);
}

.timeline-date {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1; min-width: 50px;
}
.timeline-date .day { font-size: 2.5rem; font-weight: 900; color: #111; }
.timeline-date .month { font-size: 1rem; font-weight: 800; color: #8a8a8a; text-transform: uppercase; }

.timeline-content { display: flex; flex-direction: column; justify-content: center; }
.timeline-title { font-size: 1.1rem; font-weight: 800; color: #4a4a4a; margin-bottom: 0.3rem; }
.timeline-meta { font-size: 0.9rem; color: #8a8a8a; margin-bottom: 0.8rem; }

.timeline-link {
  font-size: 0.85rem; font-weight: 800; color: var(--color-brand-orange);
  text-decoration: underline; text-underline-offset: 3px; text-transform: uppercase;
  align-self: flex-start; transition: opacity 0.3s ease;
}
.timeline-link:hover { opacity: 0.7; }

.calendar-footer { text-align: right; margin-top: 1rem; }
.calendar-footer-link {
  font-size: 0.85rem; font-weight: 800; color: var(--color-accent-purple-bright);
  text-decoration: underline; text-underline-offset: 3px; text-transform: uppercase;
  transition: opacity 0.3s ease;
}
.calendar-footer-link:hover { opacity: 0.7; }

.community-decoration { position: absolute; pointer-events: none; }
.community-decoration--leaves-green { bottom: 0; left: -5%; width: clamp(100px, 12.5svw, 175px); transform: rotate(10deg); }
.community-decoration--leaf-outline { top: 20%; left: 35%; width: clamp(150px, 20svw, 250px); opacity: 0.6; }
.community-decoration--seeds { top: 10%; left: 45%; width: clamp(80px, 10svw, 150px); opacity: 0.8; }

@media (max-width: 900px) {
  .community-container { grid-template-columns: 1fr; }
  .community-actions { max-width: 100%; }
  .calendar-card { padding: 2rem; }
  .community-decoration--leaves-green { width: 100px; bottom: 0; top: auto; }
  .community-decoration--leaf-outline { left: auto; right: 0; top: 5%; width: 100px; }
  .community-decoration--seeds { left: auto; right: 5%; top: auto; bottom: 10%; width: 60px; }
}

@media (max-width: 768px) {
  .timeline-item { padding-left: 1.5rem; }
  .timeline-item::before { width: 14px; height: 14px; left: 1px; }
  .timeline::before { left: 22px; }
  .timeline-date { min-width: 40px; }
}