/* =====================================================================
   gallery.css — "Our Community" image slider (multi-card carousel)
   Header + Swiper slider of image cards with captions + arrows/dots.
   Namespaced under .cg. Uses brand tokens. No filter, no lightbox.
   ===================================================================== */

.cg { --cg-accent: var(--maroon, #8D2130); --cg-ink: #262320; --cg-muted: #6E6A63; --cg-line: #E8E3D8; --cg-r: 14px; --cg-ease: cubic-bezier(.22,1,.36,1); }

.cg__head { text-align: center; max-width: 640px; margin: 0 auto 2.2rem; }
.cg__eyebrow { display: inline-flex; align-items: center; gap: .6em; font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--cg-accent); margin-bottom: 1rem; }
.cg__eyebrow::before, .cg__eyebrow::after { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .5; }
.cg__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem); color: var(--cg-ink); }
.cg__title em { font-style: italic; color: var(--cg-accent); }
.cg__sub { margin-top: .9rem; font-size: 1.02rem; line-height: 1.7; color: var(--cg-muted); }

/* ---- slider ---- */
.cg__slider { position: relative; }
.cg__slider .swiper { padding: 6px 2px; }
.cg__slider .swiper-slide { height: auto; }
.cg-slide { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--cg-r); background: #fff; box-shadow: 0 14px 34px rgba(40,25,20,.12); }
.cg-slide__img { overflow: hidden; aspect-ratio: 4/5; }
.cg-slide__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--cg-ease); }
.cg-slide:hover .cg-slide__img img { transform: scale(1.06); }
.cg-slide__bar { background: #5F141C; color: #fff; text-align: center; padding: 1rem 1rem 1.1rem; }
.cg-slide__t { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; }
.cg-slide__cat { display: block; margin-top: .3rem; font-size: .84rem; letter-spacing: .01em; color: rgba(255,255,255,.82); }

/* ---- navigation (arrows + dots) ---- */
.cg-nav { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 2rem; }
.cg-arrow { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--cg-line); background: #fff; color: var(--cg-accent); display: grid; place-items: center; cursor: pointer; transition: background .25s var(--cg-ease), color .25s, border-color .25s, transform .25s; }
.cg-arrow:hover { background: var(--cg-accent); color: #fff; border-color: var(--cg-accent); transform: translateY(-2px); }
.cg-arrow svg { width: 22px; height: 22px; }
.cg-arrow.swiper-button-disabled { opacity: .4; cursor: default; }
.cg-arrow.swiper-button-disabled:hover { background: #fff; color: var(--cg-accent); border-color: var(--cg-line); transform: none; }
.cg-pg { display: flex; align-items: center; gap: .5rem; }
.cg-pg .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 999px; background: var(--cg-ink); opacity: .25; transition: width .3s var(--cg-ease), opacity .3s; cursor: pointer; }
.cg-pg .swiper-pagination-bullet-active { width: 26px; opacity: 1; background: var(--cg-accent); }

@media (prefers-reduced-motion: reduce) { .cg-slide img { transition: none; } }
@media (max-width: 600px) {
  .cg-slide__t { font-size: 1.2rem; }
  .cg-arrow { width: 44px; height: 44px; }
}