.community-gallery { position: relative; z-index: 1; padding-top: 32px; padding-bottom: 40px; scroll-margin-top: 90px; }
.gallery-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 22px; }
.gallery-heading h2 { font-size: clamp(24px,3vw,34px); letter-spacing: -.035em; margin: 6px 0 0; }
.gallery-kicker { color: var(--accent,#00c2cb); font-size: 12px; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; }
.gallery-heading > p { max-width: 340px; opacity: .7; font-size: 14px; line-height: 1.6; }
.gallery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.gallery-card { padding: 0; overflow: hidden; text-align: left; color: inherit; border: 1px solid var(--border,var(--glass-border,#ffffff24)); border-radius: 14px; background: var(--surface,var(--glass,#ffffff0a)); cursor: pointer; }
.gallery-card img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 30%; background: #111827; }
.gallery-card-copy { display: grid; gap: 5px; padding: 14px 16px 16px; overflow-wrap: anywhere; }
.gallery-card-copy strong { font-size: 15px; }
.gallery-card-copy > span { font-size: 12px; opacity: .65; }
.gallery-card:hover { border-color: var(--accent,#00c2cb); }
.gallery-card:focus-visible, .gallery-button:focus-visible, .gallery-close:focus-visible { outline: 3px solid var(--accent,#00c2cb); outline-offset: 4px; }
.gallery-status { margin: 16px 0; opacity: .7; font-size: 14px; line-height: 1.6; }
.gallery-button { padding: 10px 17px; color: inherit; background: var(--surface,var(--glass,#ffffff12)); border: 1px solid var(--border,var(--glass-border,#ffffff24)); border-radius: 8px; cursor: pointer; font: inherit; }
.gallery-button:disabled { opacity: .35; cursor: default; }
.gallery-dialog { margin: auto; width: min(1080px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #ffffff26; border-radius: 18px; background: var(--bg-dark,#101827); color: var(--text-light,#fff); overflow: auto; }
.gallery-dialog::backdrop { background: #030711dc; backdrop-filter: blur(5px); }
.gallery-dialog[open] { display: grid; grid-template-columns: minmax(0,1fr) 300px; }
.gallery-photo-stage { display: grid; place-items: center; min-height: 430px; background: #05080e; padding: 18px; }
.gallery-photo-stage img { display: block; width: 100%; height: auto; max-height: 75dvh; object-fit: contain; }
.gallery-photo-stage p { grid-area: 1/1; font-size: 14px; color: #b9c3d0; }
.gallery-photo-stage p:empty { display: none; }
.gallery-details { position: relative; display: flex; flex-direction: column; padding: 65px 28px 26px; overflow-wrap: anywhere; }
.gallery-close { position: absolute; right: 16px; top: 14px; width: 36px; height: 36px; border: 1px solid #ffffff26; border-radius: 50%; background: transparent; color: inherit; font-size: 24px; cursor: pointer; }
.gallery-details h3 { font-size: 27px; letter-spacing: -.03em; margin: 9px 0 24px; }
.gallery-details dl { display: grid; gap: 9px; }
.gallery-details dt { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; opacity: .55; margin-top: 12px; }
.gallery-details dd { margin: 0; font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.gallery-dialog-navigation { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 30px; }
.gallery-dialog-navigation span { opacity: .6; font-size: 12px; }
body.desk-popout .community-gallery { display: none; }
@media(max-width:640px) {
    .gallery-heading { display: block; }
    .gallery-heading > p { margin-top: 12px; }
    .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .gallery-dialog[open] { grid-template-columns: 1fr; }
    .gallery-photo-stage { min-height: 220px; padding: 12px; }
    .gallery-photo-stage img { max-height: 48dvh; }
    .gallery-details { padding: 24px; }
    .gallery-details h3 { margin-right: 38px; }
    .gallery-details .gallery-close { top: 18px; }
}

.gallery-card-copy > strong, .gallery-card-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.gallery-pagination > span { font-size: 13px; opacity: .7; }
.portal-enabled .community-gallery { padding-bottom: 0; }
@media(min-width:641px) and (max-width:999px) { .gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }

.gallery-social { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.gallery-social > a, .gallery-social > span { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #ffffff26; border-radius:10px; color:inherit; text-decoration:none; font-size:13px; overflow-wrap:anywhere; }
.gallery-social iconify-icon { flex-shrink:0; font-size:20px; }
.gallery-social > a:hover { background:#ffffff12; }
.gallery-social > a:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.gallery-social small { flex-basis:100%; opacity:.6; }
