/* =============================================
   COMMUNITIES HUB — intro/collage, why-join, tech
   communities grid, events-and-meetups teaser
   ============================================= */

/* ---------- Intro / photo collage ---------- */
.communities-intro { padding-block: var(--space-16); overflow: hidden; }
.communities-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-12);
    align-items: center;
}
.communities-intro__body {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.communities-intro__media {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.communities-intro__blob {
    position: absolute;
    top: -15%;
    left: -15%;
    width: 60%;
    height: 90%;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    background: var(--color-accent-bg);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
}
.communities-intro__collage-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-4);
    align-items: start;
}
.communities-intro__collage-bottom {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    align-items: start;
    max-width: 70%;
    margin-left: auto;
}
.communities-intro__photo {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}
.communities-intro__photo--placeholder { background: var(--color-surface-mid); }
.communities-intro__photo--1 { aspect-ratio: 1/1; }
.communities-intro__photo--2 { aspect-ratio: 4/3; }
.communities-intro__photo--3,
.communities-intro__photo--4 { aspect-ratio: 1/1; }

@media (max-width: 900px) {
    .communities-intro__inner { grid-template-columns: 1fr; }
    .communities-intro__media { order: -1; }
}

/* ---------- Why join the Outbox community? ---------- */
.communities-why { background: var(--color-accent-bg); padding-block: var(--space-16); }
.communities-why__inner {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: var(--space-10);
    align-items: start;
}
.communities-why__heading { margin-bottom: var(--space-4); }
.communities-why__intro { color: var(--color-text-secondary); margin-bottom: var(--space-6); }
.communities-why__btn { display: inline-flex; }

.communities-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.communities-why-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}
.communities-why-card__icon {
    width: 36px;
    height: 36px;
    color: var(--color-accent-dark);
    margin-bottom: var(--space-3);
}
.communities-why-card__title { font-size: var(--text-sm); font-weight: 700; color: var(--color-accent-dark); }

@media (max-width: 900px) {
    .communities-why__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .communities-why__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    .communities-why__grid { grid-template-columns: 1fr; }
}

/* ---------- Explore our tech communities ---------- */
.communities-grid { padding-block: var(--space-16); scroll-margin-top: var(--space-10); }
.communities-grid__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}
.communities-grid__intro { max-width: 640px; }
.communities-grid__heading { margin-bottom: var(--space-3); }
.communities-grid__body { color: var(--color-text-secondary); }
.communities-grid__empty { text-align: center; color: var(--color-text-muted); }

.communities-grid__nav { display: flex; gap: var(--space-3); flex-shrink: 0; }

.communities-grid__scroller { position: relative; }

.communities-grid__grid {
    display: flex;
    gap: var(--space-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
}
.communities-grid__grid::-webkit-scrollbar { display: none; }

.community-card {
    display: block;
    flex: 0 1 calc((100% - 2 * var(--space-6)) / 3);
    min-width: 280px;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

.communities-grid__arrow {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-light);
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.communities-grid__arrow:hover:not(:disabled) {
    background: var(--color-primary-light);
    color: var(--color-white);
    border-color: var(--color-primary-light);
}
.communities-grid__arrow:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 900px) {
    .communities-grid__header { flex-direction: column; align-items: flex-start; }
    .community-card { flex-basis: calc((100% - var(--space-6)) / 2); }
}
@media (max-width: 640px) {
    .community-card { flex-basis: 85%; min-width: 240px; }
}
.community-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.community-card__media { position: relative; height: 220px; overflow: hidden; }
.community-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.community-card__image--placeholder { background: var(--color-surface-mid); }
.community-card__badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
    box-shadow: var(--shadow-sm);
}
.community-card__body { padding: var(--space-5); }
.community-card__title { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.community-card__excerpt { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.community-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.community-card__tag {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-mid);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

/* ---------- Events and meetups ---------- */
.communities-events { background: var(--color-surface); padding-block: var(--space-16); }
.communities-events__header { max-width: 760px; margin-bottom: var(--space-10); }
.communities-events__heading { margin-bottom: var(--space-4); }
.communities-events__body { color: var(--color-text-secondary); }

.communities-events__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}
.communities-events-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
}
.communities-events-card__icon {
    width: 40px;
    height: 40px;
    margin-inline: auto;
    margin-bottom: var(--space-4);
    color: var(--color-primary);
}
.communities-events-card__title { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.communities-events-card__body { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.communities-events-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--text-sm);
}
.communities-events-card__link:hover { color: var(--color-primary-mid); }

@media (max-width: 640px) {
    .communities-events__grid { grid-template-columns: 1fr; }
}