/* Społeczność — style dedykowane. Korzystaj z bazowych zmiennych i narzędzi, bez duplikowania styli z base.css. */

.community-hero { position: relative; overflow: hidden; }
.community-hero__media img { width: 100%; height: clamp(280px, 50vw, 520px); object-fit: cover; display: block; }
.community-hero__content { position: relative; margin-top: -4rem; background: color-mix(in oklab, #ffffff 75%, transparent); padding: 1rem 1.25rem; border-radius: 0.75rem; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
@supports not (color-mix(in oklab, white, black)) { .community-hero__content { background: rgba(255,255,255,.88); } }
.community-hero .hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }

.section-subnav { position: sticky; top: 0; z-index: 10; background: var(--surface, #fff); border-block: 1px solid rgba(0,0,0,.06); padding-block: .5rem; margin-block: .5rem 1rem; }
.section-subnav__list { display: flex; gap: .5rem .75rem; flex-wrap: wrap; align-items: center; }
.section-subnav__list a { display: inline-block; padding: .35rem .6rem; border-radius: 999px; background: rgba(0,0,0,.04); text-decoration: none; }
.section-subnav__list a:focus-visible { outline: 2px solid var(--primary, #00a7a7); outline-offset: 2px; }

/* Accordion */
.community-accordion .accordion-item { border: 1px solid rgba(0,0,0,.08); border-radius: .5rem; margin-block: .5rem; background: var(--surface, #fff); }
.accordion-trigger { width: 100%; text-align: left; padding: .85rem 1rem; font-weight: 600; background: transparent; border: 0; cursor: pointer; border-radius: .5rem; }
.accordion-trigger:hover { background: rgba(0,0,0,.035); }
.accordion-trigger[aria-expanded="true"] { background: rgba(0,0,0,.05); }
.accordion-panel { padding: .5rem 1rem 1rem; }

/* Cards and grids */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card { background: var(--surface, #fff); border: 1px solid rgba(0,0,0,.08); border-radius: .75rem; padding: 1rem; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.card h3 { margin-top: 0; }

.community-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.gallery__item { background: var(--surface, #fff); border-radius: .5rem; overflow: hidden; border: 1px solid rgba(0,0,0,.06); }
.gallery__item img { width: 100%; height: 220px; object-fit: cover; display: block; }
.gallery__item figcaption { padding: .5rem .75rem; font-size: .95rem; }

/* Leaders */
.leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.leader { background: var(--surface, #fff); border: 1px solid rgba(0,0,0,.08); border-radius: .75rem; padding: 1rem; }

/* Communication */
.communication { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.communication__block { background: var(--surface, #fff); border: 1px solid rgba(0,0,0,.08); border-radius: .75rem; padding: 1rem; }

/* Guides */
.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.guide { background: var(--surface, #fff); border: 1px solid rgba(0,0,0,.08); border-radius: .75rem; padding: 1rem; }

/* Form */
.contact-form .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.contact-form .form-field { display: flex; flex-direction: column; gap: .4rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea { padding: .65rem .75rem; border-radius: .5rem; border: 1px solid rgba(0,0,0,.15); background: #fff; }
.form-field--checkbox { flex-direction: row; align-items: center; gap: .5rem; }
.form-actions { display: flex; align-items: center; gap: .75rem; }
.form-status { min-height: 1.5em; font-size: .95rem; }

/* Utilities */
.section-alt { background: linear-gradient(180deg, rgba(0,160,140,.04), transparent 50%); }
.cta-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.back-to-top { text-align: center; padding-bottom: 2rem; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}