/* ═══════════════════════════════════════════════════════════════════════════
   COMMUNITY — the landing page under /community/

   The buttons come from styles-x-buttons.css and the layout from
   styles-base.css, both of which every page links. .sidebar-widget is defined
   below rather than borrowed: its usual home is styles-x-account.css, which
   this page does not link, so relying on it left the Flickr panel with no card
   and its heading falling through to Bootstrap's body colour at 1.24:1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The intro ── */
.comm-intro {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}
@media (max-width: 575px) { .comm-intro { padding: 1.25rem; } }

.comm-intro__eyebrow {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--emerald);
    margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem;
}
.comm-intro__title {
    font-family: var(--font-display); font-size: 1.35rem; font-weight: 800;
    letter-spacing: -.02em; color: var(--ink); margin-bottom: 1rem;
}
.comm-intro p {
    font-size: .88rem; color: var(--ink-2); line-height: 1.85; margin-bottom: 1rem;
}
.comm-intro p:last-child { margin-bottom: 0; }
.comm-intro strong { color: var(--ink); font-weight: 600; }

/* The one line people actually want answered, so it reads as an aside rather
   than another paragraph. */
.comm-intro__free {
    display: flex; align-items: flex-start; gap: .6rem;
    background: var(--emerald-dim);
    border-left: 3px solid var(--emerald);
    border-radius: var(--radius);
    padding: .85rem 1rem;
}
.comm-intro__free i { color: var(--emerald); margin-top: auto; margin-bottom: auto; font-size: 1.2rem; flex-shrink: 0; }

/* ── The sidebar card ──
   The same definition styles-x-account.css carries, because this page does not
   link that sheet. Kept identical so the two cannot drift. */
.sidebar-widget { background: var(--bg-card); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
.sidebar-widget__title { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--emerald-lt); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.sidebar-widget__title::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* ── The Flickr aside ── */
.comm-flickr__lead {
    font-size: .82rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 1rem;
}
.comm-flickr__cta { width: 100%; justify-content: center; }

/* ── The club guide aside ──
   Follows the snorkelling poster, which carries no bottom margin of its own. */
.comm-clubguide { margin-top: 1.25rem; }
.comm-clubguide__lead {
    font-size: .82rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 1rem;
}
.comm-clubguide__cta { width: 100%; justify-content: center; }

/* ── The two destinations ── */
.comm-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 767px) { .comm-cards { grid-template-columns: 1fr; } }

.comm-card {
    display: flex; align-items: flex-start; gap: 1rem;
    background: var(--bg-card); border-radius: var(--radius-lg);
    padding: 1.5rem; text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.comm-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.3); }

.comm-card__icon {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius);
    background: var(--emerald-dim); color: var(--emerald);
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.comm-card__icon--members { background: rgba(90,180,200,.14); color: #5ab4c8; }

.comm-card__body { flex: 1; min-width: 0; }
.comm-card__title {
    display: block;
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    color: var(--ink); margin-bottom: .35rem; transition: color .2s;
}
.comm-card:hover .comm-card__title { color: var(--emerald-lt); }
.comm-card__text {
    display: block; font-size: .82rem; color: var(--ink-2); line-height: 1.7;
}
/* --ink-3 measures 4.17:1 on the card in light; --ink-2 gives 6.18 and 8.24. */
.comm-card__count {
    display: block; margin-top: .6rem;
    font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-2);
}
.comm-card__go { color: var(--ink-4); flex-shrink: 0; margin-top: .35rem; }

/* ── The sign-up nudge, for a visitor who is not signed in ── */
.comm-join {
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
    margin-top: 1.75rem; padding: 1.25rem 1.5rem;
    background: var(--bg-2); border-radius: var(--radius-lg);
}
.comm-join__text {
    flex: 1; min-width: 200px; margin: 0;
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
    color: var(--ink-2);
}

/* ═══ LIGHT THEME ═══════════════════════════════════════════════════════════
   The cards and the intro are grounds in both themes, so only the shadow needs
   softening — the dark one is far too heavy on ivory. */
/* --emerald measures 4.04:1 on the ivory card; --emerald-drk gives 7.30. */
html[data-theme="light"] .comm-intro__eyebrow { color: var(--emerald-drk); }

html[data-theme="light"] .comm-card:hover {
    box-shadow: 0 12px 36px rgba(55,45,28,.12);
}

/* ── The snorkelling guide poster ──
   The artwork carries its own title and map, so the card is the image plus one
   line of real text. It behaves like .comm-card — same lift, same ground — so
   the two read as the same kind of thing. */
.comm-promo {
    display: block; overflow: hidden;
    background: var(--bg-card); border-radius: var(--radius-lg);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.comm-promo:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.3); }

.comm-promo__art {
    display: block; width: 100%; height: auto;
    /* The file is 4:3; reserving it stops the column jumping as it loads. */
    aspect-ratio: 1448 / 1086;
    object-fit: cover;
}

.comm-promo__cta {
    display: flex; align-items: center; gap: .5rem;
    padding: .85rem 1.1rem;
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--emerald-lt);
}
.comm-promo:hover .comm-promo__cta { color: var(--emerald); }
.comm-promo__go { margin-left: auto; color: var(--ink-4); }

html[data-theme="light"] .comm-promo:hover {
    box-shadow: 0 12px 36px rgba(55,45,28,.12);
}
/* --emerald-lt measures 3.28:1 on the ivory card; --emerald-drk reads 7.30. */
html[data-theme="light"] .comm-promo__cta { color: var(--emerald-drk); }

/* .btn-ghost's --ink-2 label composites to 4.43:1 on this --bg-2 strip in light
   theme. --ink, as .ot-hero .btn-ghost already does; hover is untouched. */
html[data-theme="light"] .comm-join .btn-ghost:not(:hover) { color: var(--ink); }