@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700&display=swap');
/* HoPPiCo Art Portfolio — public gallery (dark default, light override). */
.hoppico-art-gallery { max-width: 1180px; margin: 2rem auto; padding: 0 1.25rem; }
.hoppico-art-gallery.is-rtl { font-family: "Vazirmatn", Tahoma, sans-serif; }
.hoppico-art-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.hoppico-art-filters button { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: inherit; border-radius: 999px; padding: .4rem .9rem; cursor: pointer; font: inherit; }
.hoppico-art-filters button.is-active { background: #5e9ed6; border-color: #5e9ed6; color: #fff; }
.hoppico-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.hoppico-art-card { margin: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.03); }
.hoppico-art-card img { width: 100%; height: 300px; object-fit: contain; background: #111; display: block; }
.hoppico-art-card figcaption { padding: .7rem .9rem; display: grid; gap: .2rem; }
.hoppico-art-modal[hidden] { display: none; }
.hoppico-art-modal { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: grid; place-items: center; z-index: 9999; padding: 1rem; }
.hoppico-art-modal__dialog { max-width: min(900px, 94vw); max-height: 90vh; overflow: auto; background: #16161f; border-radius: 16px; padding: 1rem; }
.hoppico-art-modal__image { width: 100%; max-height: 66vh; object-fit: contain; background: #000; border-radius: 10px; }
.hoppico-art-modal__close { float: right; font-size: 1.5rem; background: none; border: 0; color: inherit; cursor: pointer; }
.theme-light .hoppico-art-card { background: #fff; border-color: rgba(0,0,0,.08); }
.theme-light .hoppico-art-card img { background: #f2f2f4; }
.theme-light .hoppico-art-modal__dialog { background: #fff; color: #1d1d1f; }
.hoppico-art-portfolio-button { font-family: "Vazirmatn", Tahoma, sans-serif; display: inline-flex; align-items: center; border-radius: 999px; padding: .5rem 1rem; border: 1px solid currentColor; text-decoration: none; }

/* Button merged into the author-profile meta pills (right of عضویت pill in RTL). */
.author-profile__meta-pills .hoppico-art-portfolio-button {
	font-size: .82rem;
	font-weight: 700;
	line-height: 1;
	padding: .55rem 1rem;
	color: #0f2f4f;
	background: linear-gradient(135deg, rgba(96, 165, 250, .95), rgba(94, 234, 212, .9));
	border: 1px solid rgba(255, 255, 255, .35);
	box-shadow: 0 4px 14px rgba(96, 165, 250, .28);
	transition: transform .15s ease, box-shadow .15s ease;
}

.author-profile__meta-pills .hoppico-art-portfolio-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(96, 165, 250, .38);
}

.theme-light .author-profile__meta-pills .hoppico-art-portfolio-button {
	color: #0b3a66;
	border-color: rgba(11, 58, 102, .2);
	box-shadow: 0 4px 14px rgba(11, 58, 102, .14);
}

/* Portfolio gallery page wrapper. */
.hoppico-art-page { min-height: 60vh; }

.hoppico-art-page__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2.5rem auto 0;
	max-width: 1180px;
	padding: 0 1.25rem;
}

.hoppico-art-page__head h1 {
	margin: 0;
	font-family: "Vazirmatn", Tahoma, sans-serif;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.hoppico-art-page__back {
	font-family: "Vazirmatn", Tahoma, sans-serif;
	font-size: .9rem;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	padding: .45rem 1rem;
	color: inherit;
	opacity: .85;
}

.hoppico-art-page__back:hover { opacity: 1; }

.theme-light .hoppico-art-page__back { border-color: rgba(0, 0, 0, .15); }