/* =====================================================================
   Community page (calendar + events, Instagram, the blog) — loaded after styles.css.
   Same language as home/about: Bebas Neue display, Barlow Condensed body,
   black bands, one green accent, rounded gray tiles, 120rem margins,
   1rem == 1 artboard px (1366 desktop, 430 phones).
   Content comes from js/community-data.js and is rendered by js/community.js.
   ===================================================================== */

.page--community p, .page--community li { font-family: var(--font-body); font-weight: 500; }
.page--community h2, .page--community h3 { text-transform: uppercase; }
.page--community .kicker { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); }
.btn--outline { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2rem var(--green); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--green); }

/* ---------- media placeholders (same pattern as the About page) ---------- */
.ph { position: relative; display: grid; place-items: center; background: var(--gray); color: #8a8a8a; text-align: center; overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 10rem; border: 2rem dashed #c3c3c3; border-radius: inherit; pointer-events: none; }
.ph__in { position: relative; display: block; padding: 10rem; }
.ph__type { display: block; font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.ph__note { display: block; margin-top: 6rem; font-family: var(--font-body); font-weight: 500; }
.ph--dark { background: #14181b; color: #6f777d; }
.ph--dark::before { border-color: #353c42; }

/* ---------- hero: headline + calendar ---------- */
.hero--community { height: auto; background: #0b0f12; }
/* tent loop: fills the hero, poster fallback for reduced motion / slow networks */
.hero--community .hero__media { background: #0b0f12 url("../assets/img/community/community-hero-poster.jpg?v=553d7a63") center / cover no-repeat; }
.hero--community .hero__video { top: 0; height: 100%; object-position: 50% 45%; }
.hero--community .hero__shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.2) 85%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.55) 100%);
}
.hero--community .in { position: relative; z-index: 2; height: auto; }
.hero__kicker--community { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.hero__title--community { position: static; text-shadow: none; }
.hero__title--community .accent { color: var(--green); }
.hero__sub--community { color: #e6e6e6; }

.cal { background: var(--white); color: var(--black); box-shadow: 0 20rem 60rem rgba(0,0,0,.35); }
.cal__head { display: flex; align-items: center; justify-content: space-between; }
.cal__title { font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.cal__nav { display: flex; }
.cal__btn { display: grid; place-items: center; border: 0; border-radius: 50%; background: #f1f1f1; color: var(--black); cursor: pointer; transition: background .2s ease, color .2s ease; }
.cal__btn:hover, .cal__btn:focus-visible { background: var(--green); color: var(--white); outline: none; }
.cal__btn svg { display: block; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; }
.cal__wd { font-family: var(--font-display); letter-spacing: .1em; color: #8a8a8a; text-align: center; }
.cal__day { position: relative; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; padding: 0; font-family: var(--font-display); color: var(--black); }
.cal__day > span { position: relative; }
.cal__day--blank { visibility: hidden; }
.cal__day--today::after { content: ""; position: absolute; inset: 0; border: 2rem solid #bdbdbd; border-radius: 50%; }
.cal__day--event { background: var(--green); color: var(--black); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.cal__day--event:hover, .cal__day--event:focus-visible { background: var(--black); color: var(--white); transform: scale(1.06); outline: none; }
.cal__day--event.cal__day--today::after { inset: -4rem; border-color: var(--green); }
.cal__note { color: #666; }
.cal__legend { display: flex; align-items: center; color: #666; }
.cal__legend i { display: inline-block; border-radius: 50%; background: var(--green); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- events ---------- */
.events__h2 { letter-spacing: .04em; line-height: 1.01; }
.events__cols { display: grid; }
.events__h3 { position: relative; border-bottom: 2rem solid var(--black); letter-spacing: .06em; }
.events__intro { color: #666; }
.events__list { list-style: none; }
.event { display: flex; align-items: flex-start; border-radius: 14rem; transition: background .3s ease, box-shadow .3s ease; }
.event.is-hit { background: #f2fbf6; box-shadow: 0 0 0 2rem var(--green); }
.event:focus { outline: none; }
.event__date { flex: none; display: grid; place-items: center; border-radius: 12rem; background: var(--gray); font-family: var(--font-display); line-height: 1; text-transform: uppercase; }
.event__date span:first-child { color: var(--green-dark); }
.event__date--range span:first-child { font-size: .72em; letter-spacing: -.01em; }   /* "12-14" fits the square */
.event__date--range span:last-child { white-space: nowrap; }
.event__p { margin: 0; }
.event__title { display: block; font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; line-height: 1.05; }
.event__title a { transition: color .2s ease; }
.event__title a:hover { color: var(--green-dark); }
.event__meta { display: block; color: #666; }
.event__blurb { display: block; }
.event--none .event__blurb { color: #8a8a8a; }

/* ---------- instagram ---------- */
.insta { background: var(--gray); }
.insta__h2 { letter-spacing: .04em; line-height: 1.01; }
.insta__handle { font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--green-dark); }
.insta__handle a { color: inherit; }
.insta__handle a:hover { color: var(--black); }
.insta__grid { list-style: none; display: grid; }
.insta__tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ddd; }
.insta__tile a { display: block; width: 100%; height: 100%; }
.insta__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.insta__tile a:hover img, .insta__tile a:focus-visible img { transform: scale(1.04); opacity: .9; }
.insta__tile a:focus-visible { outline: none; box-shadow: inset 0 0 0 3rem var(--green); }
.insta__play { position: absolute; top: 8%; right: 8%; display: grid; place-items: center; width: 26%; max-width: 34px; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .55); color: var(--white); pointer-events: none; }
.insta__play svg { width: 55%; height: 55%; }
.insta__tile::before { border-color: #d6d6d6; }

/* ---------- blog ---------- */
.blog__h2 { letter-spacing: .04em; line-height: 1.01; }
.blog__bar { display: flex; flex-wrap: wrap; align-items: center; border-top: 2rem solid var(--black); }
.blog__cats { display: flex; flex-wrap: wrap; }
.pill { border: max(1px, 1rem) solid #cfcfcf; border-radius: 999rem; background: var(--white); color: var(--black); font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.pill:hover, .pill:focus-visible { border-color: var(--black); outline: none; }
.pill[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); }
.blog__sort { display: inline-flex; border: max(1px, 1rem) solid #cfcfcf; border-radius: 999rem; overflow: hidden; }
.blog__sort button { border: 0; background: var(--white); color: #444; font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease; }
.blog__sort button[aria-pressed="true"] { background: var(--green); color: var(--black); }
.blog__sort button:focus-visible { outline: none; box-shadow: inset 0 0 0 2rem var(--black); }
.blog__count { color: #666; }
.blog__grid { list-style: none; display: grid; }
.post__link { display: block; color: inherit; }
.post__img { display: block; width: 100%; height: auto; object-fit: cover; background: #e9e9e9; }
.post__cat { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.post__title { font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; line-height: 1.05; transition: color .2s ease; }
.post__link:hover .post__title, .post__link:focus-visible .post__title { color: var(--green-dark); }
.post__link:focus-visible { outline: none; }
.post__date { color: #777; }
.post__more { display: inline-block; font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--green-dark); border-bottom: 2rem solid currentColor; }
.blog__empty { color: #666; }
.blog__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: max(1px, 1rem) solid #ddd; }
.blog__pager[hidden], .blog__pages[hidden] { display: none; }
.blog__pages { display: flex; align-items: center; }
.blog__page-btn { border: max(1px, 1rem) solid #cfcfcf; border-radius: 999rem; background: var(--white); color: var(--black); font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.blog__page-btn:hover:not(:disabled) { background: var(--green); border-color: var(--green); }
.blog__page-btn:focus-visible { outline: none; box-shadow: 0 0 0 2rem var(--black); }
.blog__page-btn:disabled { color: #aaa; cursor: default; }
.blog__page-no { color: #666; font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.blog__all { margin-left: auto; font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--green-dark); border-bottom: 2rem solid currentColor; }
.blog__all:hover { color: var(--black); }

/* ---------- closing cta ---------- */
.ccta { background: var(--black); color: var(--white); }
.ccta__h2 { letter-spacing: .04em; line-height: 1.01; }
.ccta__p { color: #e6e6e6; }
.ccta__btns { display: flex; }

/* =====================================================================
   DESKTOP (1366 artboard)
   ===================================================================== */
@media (min-width: 761px) {
  .ph__type { font-size: 18rem; }
  .ph__note { font-size: 15rem; }

  /* hero */
  .hero--community .in { display: grid; grid-template-columns: 1fr 440rem; column-gap: 70rem; align-items: center; min-height: 760rem; padding: 140rem 120rem 90rem; }
  .hero__kicker--community { font-size: 20rem; }
  .hero__title--community { margin-top: 18rem; font-size: 80rem; }
  .hero__sub--community { margin-top: 26rem; max-width: 600rem; font-size: 22rem; line-height: 30rem; }
  .cal { padding: 26rem 26rem 22rem; border-radius: 24rem; }
  .cal__title { font-size: 30rem; }
  .cal__nav { gap: 8rem; }
  .cal__btn { width: 38rem; height: 38rem; }
  .cal__btn svg { width: 16rem; height: 16rem; }
  .cal__grid { margin-top: 18rem; row-gap: 6rem; }
  .cal__wd { font-size: 14rem; padding-bottom: 6rem; }
  .cal__day { width: 46rem; height: 46rem; font-size: 20rem; }
  .cal__note { margin-top: 14rem; font-size: 15rem; line-height: 20rem; }
  .cal__legend { gap: 8rem; margin-top: 4rem; font-size: 14rem; }
  .cal__legend i { width: 12rem; height: 12rem; }

  /* events */
  .events .in { padding: 100rem 120rem 100rem; }
  .events__head { display: grid; grid-template-columns: 520rem 1fr; column-gap: 80rem; align-items: end; }
  .events__head .kicker { font-size: 18rem; }
  .events__h2 { margin-top: 10rem; font-size: 54rem; }
  .events__p { max-width: 560rem; font-size: 20rem; line-height: 28rem; }
  .events__cols { grid-template-columns: repeat(3, 1fr); column-gap: 40rem; margin-top: 56rem; }
  .events__h3 { padding-bottom: 12rem; font-size: 26rem; }
  .events__intro { margin-top: 12rem; font-size: 16rem; line-height: 22rem; }
  .events__list { margin-top: 18rem; }
  .event { gap: 16rem; padding: 12rem; margin: 0 -12rem; }
  .event + .event { margin-top: 8rem; }
  .event__date { width: 58rem; height: 58rem; font-size: 22rem; }
  .event__date span:last-child { font-size: 13rem; letter-spacing: .1em; }
  .event__title { font-size: 22rem; }
  .event__meta { margin-top: 5rem; font-size: 15rem; line-height: 20rem; }
  .event__blurb { margin-top: 4rem; font-size: 16.5rem; line-height: 22rem; }

  /* instagram */
  .insta .in { padding: 90rem 120rem 100rem; }
  .insta__head { display: grid; grid-template-columns: 1fr auto; column-gap: 40rem; align-items: end; }
  .insta__h2 { font-size: 54rem; }
  .insta__handle { margin-top: 8rem; font-size: 22rem; }
  .insta__btn { height: 54rem; padding: 0 30rem; }
  .insta__grid { grid-template-columns: repeat(6, 1fr); gap: 16rem; margin-top: 40rem; }
  .insta__tile { border-radius: 14rem; }
  .insta__tile .ph__type { font-size: 14rem; }
  .insta__tile .ph__note { font-size: 13rem; }

  /* blog */
  .blog .in { padding: 100rem 120rem 110rem; }
  .blog__head { display: grid; grid-template-columns: 520rem 1fr; column-gap: 80rem; align-items: end; }
  .blog__head .kicker { font-size: 18rem; }
  .blog__h2 { margin-top: 10rem; font-size: 54rem; }
  .blog__p { max-width: 560rem; font-size: 20rem; line-height: 28rem; }
  .blog__bar { gap: 16rem 24rem; margin-top: 44rem; padding-top: 20rem; }
  .blog__cats { gap: 8rem; }
  .pill { height: 38rem; padding: 2rem 18rem 0; font-size: 17rem; }
  .blog__sort { margin-left: auto; }
  .blog__sort button { height: 38rem; padding: 2rem 18rem 0; font-size: 17rem; }
  .blog__count { width: 100%; font-size: 16rem; }
  .blog__grid { grid-template-columns: repeat(3, 1fr); gap: 48rem 30rem; margin-top: 30rem; }
  .post__ph, .post__img { aspect-ratio: 16 / 10; border-radius: 18rem; }
  .post__cat { margin-top: 18rem; font-size: 16rem; }
  .post__title { margin-top: 6rem; font-size: 27rem; }
  .post__date { margin-top: 6rem; font-size: 15rem; }
  .post__excerpt { margin-top: 10rem; font-size: 17.5rem; line-height: 24rem; }
  .post__more { margin-top: 14rem; font-size: 18rem; }
  .blog__empty { margin-top: 30rem; font-size: 20rem; }
  .blog__pager { margin-top: 56rem; padding-top: 28rem; gap: 20rem; }
  .blog__pages { gap: 20rem; }
  .blog__page-btn { height: 42rem; padding: 2rem 22rem 0; font-size: 17rem; }
  .blog__page-no { font-size: 16rem; }
  .blog__all { font-size: 18rem; }

  /* cta */
  .ccta .in { display: grid; grid-template-columns: 1fr auto; column-gap: 60rem; align-items: center; padding: 90rem 120rem; }
  .ccta__h2 { font-size: 60rem; }
  .ccta__p { margin-top: 16rem; max-width: 640rem; font-size: 21rem; line-height: 28rem; }
  .ccta__btns { gap: 16rem; }
  .ccta__btns .btn { height: 54rem; padding: 0 30rem; }
}

/* =====================================================================
   PHONES (430 artboard)
   ===================================================================== */
@media (max-width: 760px) {
  .ph__type { font-size: 15rem; }
  .ph__note { font-size: 13rem; }

  /* hero */
  .hero--community .in { padding: 110rem 24rem 30rem; }
  .hero__kicker--community { font-size: 15rem; }
  .hero__title--community { margin-top: 12rem; font-size: 48rem; }
  .hero__sub--community { margin-top: 18rem; font-size: 17rem; line-height: 23rem; }
  .cal { margin-top: 32rem; padding: 20rem 16rem 18rem; border-radius: 20rem; }
  .cal__title { font-size: 26rem; }
  .cal__nav { gap: 8rem; }
  .cal__btn { width: 36rem; height: 36rem; }
  .cal__btn svg { width: 16rem; height: 16rem; }
  .cal__grid { margin-top: 14rem; row-gap: 4rem; }
  .cal__wd { font-size: 13rem; padding-bottom: 4rem; }
  .cal__day { width: 42rem; height: 42rem; font-size: 19rem; }
  .cal__note { margin-top: 12rem; font-size: 14rem; line-height: 19rem; }
  .cal__legend { gap: 8rem; margin-top: 4rem; font-size: 13rem; }
  .cal__legend i { width: 11rem; height: 11rem; }

  /* events */
  .events .in { padding: 56rem 24rem 56rem; }
  .events__head .kicker { font-size: 15rem; }
  .events__h2 { margin-top: 8rem; font-size: 40rem; }
  .events__p { margin-top: 14rem; font-size: 16.5rem; line-height: 22rem; }
  .events__cols { row-gap: 36rem; margin-top: 34rem; }
  .events__h3 { padding-bottom: 10rem; font-size: 22rem; }
  .events__intro { margin-top: 10rem; font-size: 15rem; line-height: 20rem; }
  .events__list { margin-top: 14rem; }
  .event { gap: 14rem; padding: 10rem; margin: 0 -10rem; }
  .event + .event { margin-top: 6rem; }
  .event__date { width: 54rem; height: 54rem; font-size: 21rem; }
  .event__date span:last-child { font-size: 12rem; letter-spacing: .1em; }
  .event__title { font-size: 20rem; }
  .event__meta { margin-top: 4rem; font-size: 14rem; line-height: 19rem; }
  .event__blurb { margin-top: 4rem; font-size: 15.5rem; line-height: 21rem; }

  /* instagram */
  .insta .in { padding: 54rem 24rem 60rem; }
  .insta__h2 { font-size: 40rem; }
  .insta__handle { margin-top: 6rem; font-size: 19rem; }
  .insta__btn { margin-top: 18rem; height: 48rem; padding: 0 24rem; font-size: 20rem; }
  .insta__grid { grid-template-columns: repeat(3, 1fr); gap: 10rem; margin-top: 26rem; }
  .insta__tile { border-radius: 12rem; }
  .insta__tile .ph__type { font-size: 12rem; }
  .insta__tile .ph__note { display: none; }

  /* blog */
  .blog .in { padding: 56rem 24rem 64rem; }
  .blog__head .kicker { font-size: 15rem; }
  .blog__h2 { margin-top: 8rem; font-size: 40rem; }
  .blog__p { margin-top: 14rem; font-size: 16.5rem; line-height: 22rem; }
  .blog__bar { gap: 12rem; margin-top: 28rem; padding-top: 16rem; }
  .blog__cats { gap: 8rem; }
  .pill { height: 34rem; padding: 2rem 14rem 0; font-size: 15rem; }
  .blog__sort button { height: 34rem; padding: 2rem 14rem 0; font-size: 15rem; }
  .blog__count { width: 100%; font-size: 15rem; }
  .blog__grid { grid-template-columns: 1fr; row-gap: 34rem; margin-top: 22rem; }
  .post__ph, .post__img { aspect-ratio: 16 / 10; border-radius: 16rem; }
  .post__cat { margin-top: 14rem; font-size: 14rem; }
  .post__title { margin-top: 4rem; font-size: 24rem; }
  .post__date { margin-top: 4rem; font-size: 14rem; }
  .post__excerpt { margin-top: 8rem; font-size: 16rem; line-height: 22rem; }
  .post__more { margin-top: 12rem; font-size: 17rem; }
  .blog__empty { margin-top: 22rem; font-size: 17rem; }
  .blog__pager { margin-top: 40rem; padding-top: 22rem; gap: 18rem; }
  .blog__pages { width: 100%; justify-content: space-between; gap: 10rem; }
  .blog__page-btn { height: 40rem; padding: 2rem 16rem 0; font-size: 15rem; }
  .blog__page-no { font-size: 14rem; }
  .blog__all { margin: 0 auto; font-size: 17rem; }

  /* cta */
  .ccta .in { padding: 60rem 24rem 64rem; }
  .ccta__h2 { font-size: 44rem; }
  .ccta__p { margin-top: 14rem; font-size: 17rem; line-height: 23rem; }
  .ccta__btns { flex-direction: column; gap: 12rem; margin-top: 26rem; }
  .ccta__btns .btn { height: 48rem; font-size: 20rem; }
}