.ping-card {
	background: #fff;
	border: 1px solid #e2e5e8;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}

.ping-header {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
}

.ping-avatar {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	margin-right: 12px;

	border-radius: 8px;
	background: #f3f3f3;

	font-size: 22px;
	overflow: hidden;
}

.ping-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.ping-author {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ping-username {
	color: #222;
	font-weight: 600;
	text-decoration: none;
}

.ping-username:hover {
	color: var(--mv-primary);
}

.ping-avatar-chanzine {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--brand-primary);
	color: #fff;
	text-decoration: none;
}

.ping-avatar-chanzine i {
	font-size: 18px;
}

.ping-username-chanzine {
	color: var(--brand-primary);
	font-weight: 700;
}

.chanzine-discussion {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.chanzine-discussion .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ping-date {
	display: inline-block;
	color: #777;
	font-size: .85rem;
	text-decoration: none;
}

.ping-date:hover {
	color: var(--brand-primary);
	text-decoration: underline;
}

.ping-content {
	color: #222;
	line-height: 1.6;
	word-break: break-word;
}

/* Editor inline Ping */

.ping-editor,
.pong-editor {
	margin-top: 2px;
}

.ping-editor form,
.pong-editor form {
	margin: 0;
}

.ping-editor textarea,
.pong-editor textarea {
	display: block;
	width: 100%;
	min-height: 110px;
	margin: 0;
	padding: 12px 14px;

	resize: vertical;

	border: 1px solid #dfe3e6;
	border-radius: 7px;
	outline: 0;
	background: #fff;

	color: #222;
	font: inherit;
	font-size: 15px;
	line-height: 1.6;

	box-sizing: border-box;
}

.ping-editor textarea:focus,
.pong-editor textarea:focus {
	border-color: var(--mv-primary);
	box-shadow: 0 0 0 3px rgba(66, 185, 146, .12);
}

.ping-editor-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;

	margin-top: 10px;
}

.ping-editor-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: auto;
	min-width: 90px;
	margin: 0;
	padding: 9px 16px;

	border-radius: 7px;
}

.ping-editor-actions .ping-edit-cancel {
	background: #f1f3f4;
	border-color: #dfe3e6;
	color: #555;
}

.ping-editor-actions .ping-edit-cancel:hover {
	background: #e7eaec;
	color: #222;
}

.ping-edit-timer {
	display: inline-flex;
	align-items: center;

	margin-left: 0px;

	font-size: 12px;
	color: #7a7a7a;
	white-space: nowrap;
}

.ping-edit-timer.warning {
	color: #d97706;
	font-weight: 600;
}

.ping-edit-timer.danger {
	color: #dc2626;
	font-weight: 700;
}

/* Composer */

.ping-composer {
	margin-bottom: 24px;
	padding: 16px;

	background: #fff;
	border: 1px solid #dfe3e6;
	border-radius: 8px;

	transition:
		border-color .2s ease,
		box-shadow .2s ease;
}

.ping-composer:focus-within {
	border-color: var(--mv-primary);
	box-shadow: 0 0 0 3px rgba(66, 185, 146, .12);
}

.ping-composer-header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.ping-composer .ping-avatar {
	flex-basis: 48px;
	margin-right: 0;
}

.ping-composer-body {
	flex: 1;
	min-width: 0;
}

.ping-composer-textarea {
	display: block;
	width: 100%;
	min-height: 110px;
	margin: 0;
	padding: 0;

	resize: none;
	overflow: hidden;
	border: 0;
	outline: 0;
	background: transparent;

	color: #222;
	font: inherit;
	font-size: 15px;
	line-height: 1.6;
}

.ping-composer-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.ping-character-counter {
	font-size: 12px;
	color: #888;
	user-select: none;
}

.ping-composer-textarea::placeholder {
	color: #929292;
}

.ping-composer-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #edf0f2;
}

.ping-composer-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	width: auto !important;
	min-width: 120px;
	height: 40px;

	margin: 0;
	padding: 0 18px;

	border: 0;
	border-radius: 7px;
	background: var(--mv-primary) !important;
	box-shadow: none;

	color: #fff !important;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;

	opacity: 1 !important;
	visibility: visible !important;
	cursor: pointer;
}

.ping-composer-submit:hover {
	background: var(--mv-primary-hover, #36a982) !important;
	filter: none;
}

.ping-media-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;

	margin-top: 12px;
}

.ping-media-preview-item {
	position: relative;

	width: 100px;
	height: 100px;

	border: 1px solid #ddd;
	border-radius: 8px;

	background: #fafafa;
	overflow: hidden;
}

.ping-media-preview-item img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.ping-media-preview-item-file {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	padding: 8px;

	text-align: center;
}

.ping-media-preview-icon {
	font-size: 28px;
	line-height: 1;

	margin-bottom: 6px;
}

.ping-media-preview-name {
	font-size: 11px;
	line-height: 1.3;

	word-break: break-word;
}

.ping-media-preview-remove {
	position: absolute;
	top: 6px;
	right: 6px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 24px;
	height: 24px;

	border: 0;
	border-radius: 50%;

	background: rgba(0, 0, 0, .65);
	color: #fff;

	font-size: 18px;
	line-height: 1;

	cursor: pointer;

	opacity: 0;
	transition: opacity .2s ease;
}

.ping-media-preview-item:hover .ping-media-preview-remove {
	opacity: 1;
}

.ping-media-preview-remove:hover {
	background: rgba(220, 38, 38, .95);
}

.ping-composer-media {
	position: relative;
	transition: .2s;
}

.ping-composer-media.dragover {
	border-color: #42b992;
	background: rgba(66, 185, 146, .08);
}

.ping-composer-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	margin-top: 12px;
	padding-top: 12px;

	border-top: 1px solid #edf0f2;
}

.ping-composer-attachments-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	width: auto;
	margin: 0;
	padding: 5px 9px;

	border: 1px solid #d8dde1;
	border-radius: 6px;

	background: #fff;
	color: #626970;

	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color .15s ease,
		border-color .15s ease,
		color .15s ease;
}

.ping-composer-attachments-toggle:hover,
.ping-composer-attachments-toggle[aria-expanded="true"] {
	background: #f3f5f6;
	border-color: #bfc6cb;
	color: #25292d;
}

.ping-composer-attachments-toggle i {
	font-size: 12px;
}

.ping-composer-media {
	position: relative;

	margin-top: 12px;
	padding: 14px;

	border: 1px solid #dfe3e6;
	border-radius: 8px;

	background: #fafbfb;

	transition:
		border-color .15s ease,
		background-color .15s ease;
}

.ping-composer-media.dragover {
	border-color: var(--mv-primary);
	background: rgba(66, 185, 146, .06);
}

.ping-composer-media-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: 12px;
}

.ping-composer-media-header strong {
	font-size: 14px;
}

.ping-composer-media-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 6px;

	background: transparent;
	color: #777;

	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.ping-composer-media-close:hover {
	background: #eceff1;
	color: #222;
}

.ping-composer-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-height: 150px;
	padding: 24px;

	border: 2px dashed #ccd2d6;
	border-radius: 8px;

	background: #fff;
	cursor: pointer;
	text-align: center;
}

.ping-composer-dropzone:hover {
	border-color: #aeb7bd;
	background: #fcfcfc;
}

.ping-composer-dropzone input {
	display: none;
}

.ping-composer-dropzone-icon {
	margin-bottom: 10px;

	color: #707980;
	font-size: 28px;
}

.ping-composer-dropzone-title {
	margin-bottom: 4px;

	font-size: 14px;
	font-weight: 600;
	color: #303438;
}

.ping-composer-dropzone-help {
	font-size: 12px;
	color: #7b8389;
}

.alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;

	margin: 0 0 16px;
	padding: 12px 14px;

	border: 1px solid transparent;
	border-radius: 8px;

	font-size: 14px;
	line-height: 1.5;
}

.alert::before {
	flex: 0 0 auto;

	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	line-height: 1.5;
}

.alert-danger {
	border-color: #efc5c5;
	background: #fff5f5;
	color: #8f2d2d;
}

.alert-danger::before {
	content: "\f071";
	color: #c74444;
}


/* Azioni Ping */

.ping-actions {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 12px;

	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #edf0f2;
}

.ping-action {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;

	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 6px 8px;

	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;

	color: #666;
	font: inherit;
	cursor: pointer;

	transition:
		background .15s ease,
		color .15s ease;
}

.ping-action:hover {
	background: #f3f5f5;
	color: var(--mv-primary);
}

.ping-votes {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;

	margin-left: auto;
	padding: 2px;

	border: 1px solid #e3e6e8;
	border-radius: 7px;
	background: #fafafa;
}

.ping-votes form {
	margin: 0;
	display: contents;
}

.ping-vote {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 30px;
	width: 30px;
	min-width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 5px;
	background: transparent;
	box-shadow: none;

	color: #777;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;

	transition:
		background .15s ease,
		color .15s ease;
}

.ping-vote:hover {
	background: #ecefef;
}

.ping-vote-up:hover {
	color: #2e7d32;
}

.ping-vote-down:hover {
	color: #c62828;
}

/* Stato voto selezionato */

.ping-vote.active {
	color: var(--mv-primary);
	background: rgba(66, 185, 146, .10);
}

.ping-vote.active:hover {
	color: var(--mv-primary);
	background: rgba(66, 185, 146, .18);
}

.ping-score {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 32px;
	height: 30px;
	padding: 0 6px;

	color: #555;
	font-size: 14px;
	font-weight: 600;
}

.ping-content .mention,
.pong-content .mention {
	color: var(--mv-primary);
	font-weight: 600;
	text-decoration: none;
}

.ping-content .mention:hover,
.pong-content .mention:hover {
	text-decoration: underline;
}


/* Link Preview */

.ping-link-preview {
	display: grid;
	grid-template-columns: 176px minmax(0, 1fr);

	margin-top: 14px;

	background: #fbfcfc;
	border: 1px solid #e1e5e8;
	border-radius: 8px;
	overflow: hidden;

	color: inherit;
	text-decoration: none;

	transition:
		border-color .15s ease,
		box-shadow .15s ease,
		transform .15s ease,
		background .15s ease;
}

.ping-link-preview:hover {
	background: #fff;
	border-color: #d1d8dc;
	box-shadow: 0 5px 16px rgba(0, 0, 0, .06);
	transform: translateY(-1px);
	text-decoration: none;
}

.ping-link-image-wrapper {
	position: relative;

	display: block;
	width: 176px;
	min-height: 128px;

	overflow: hidden;
	background: #eef1f2;
	border-right: 1px solid #e4e8ea;
}

.ping-link-image {
	display: block;

	width: 100%;
	height: 100%;
	min-height: 128px;

	object-fit: cover;

	transition: transform .2s ease;
}

.ping-link-preview:hover .ping-link-image {
	transform: scale(1.025);
}

.ping-link-play {
	position: absolute;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(0, 0, 0, .18);

	color: #fff;
	font-size: 34px;
	text-shadow: 0 2px 5px rgba(0, 0, 0, .45);

	transition: background .2s ease;
}

.ping-link-preview:hover .ping-link-play {
	background: rgba(0, 0, 0, .30);
}

.ping-link-body {
	display: flex;
	flex-direction: column;
	justify-content: center;

	min-width: 0;
	padding: 14px 16px;
}

.ping-link-site {
	display: flex;
	align-items: center;
	gap: 7px;

	margin-bottom: 6px;

	color: var(--mv-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .045em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ping-link-favicon {
	display: block;

	flex: 0 0 14px;
	width: 14px;
	height: 14px;

	border-radius: 3px;
	object-fit: contain;
}

.ping-link-title {
	margin: 0 0 5px;

	color: #202326;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.35;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ping-link-description {
	display: -webkit-box;

	margin: 0;

	color: #646a70;
	font-size: 13px;
	line-height: 1.45;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}


/* Pong */

.pong-card {
	margin: 0 0 16px 60px;
	padding: 14px 16px;

	background: #fafbfc;
	border: 1px solid #e6eaed;
	border-radius: 8px;
}

.pong-card:last-child {
	margin-bottom: 0;
}

.pong-header {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.pong-avatar {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	margin-right: 10px;

	border-radius: 8px;
	background: #f0f2f3;

	font-size: 18px;
	overflow: hidden;
}

.pong-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.pong-author {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pong-username {
	color: #222;
	font-weight: 600;
	text-decoration: none;
}

.pong-username:hover {
	color: var(--mv-primary);
}

.pong-date {
	margin-top: 2px;
	color: #888;
	font-size: 12px;
}

.pong-content {
	color: #222;
	line-height: 1.6;
	word-break: break-word;
}

.ping-media {
	display: grid;
	gap: 8px;
	margin-top: 12px;

	width: 100%;
	aspect-ratio: 16 / 10;
}

/* 1 immagine */

.ping-layout-1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	aspect-ratio: 16 / 9;
}

/* 2 immagini */

.ping-layout-2 {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
}

/* 3 immagini */

.ping-layout-3 {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.ping-layout-3 .ping-media-item:first-child {
	grid-column: 1 / -1;
}

/* 4 immagini */

.ping-layout-4 {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

/* 5 immagini */

.ping-layout-5 {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.ping-layout-5 .ping-media-item:first-child {
	grid-column: 1 / -1;
}

/* 6 immagini */

.ping-layout-6 {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

/* 7 immagini */

.ping-layout-7 {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.ping-layout-7 .ping-media-item:first-child {
	grid-column: span 2;
	grid-row: span 3;
}

/* 8 immagini */

.ping-layout-8 {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

/* 9 immagini */

.ping-layout-9 {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

/* 10 immagini */

.ping-layout-10 {
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.ping-layout-10 .ping-media-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.ping-media-item {
	position: relative;
	min-width: 0;
	min-height: 0;

	overflow: hidden;
	border-radius: 8px;
	background: #f3f4f5;
}

.ping-media-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Galleria immagini Ping */

.ping-media {
	display: grid;
	width: 100%;
	margin-top: 12px;
	gap: 6px;

	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 8px;
}

/* 1 immagine
 *
 * ┌───────────┐
 * │     1     │
 * └───────────┘
 */

.ping-layout-1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	aspect-ratio: 16 / 9;
}

/* 2 immagini
 *
 * ┌─────┬─────┐
 * │  1  │  2  │
 * └─────┴─────┘
 */

.ping-layout-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: 1fr;
}

/* 3 immagini
 *
 * ┌─────┬─────┐
 * │     │  2  │
 * │  1  ├─────┤
 * │     │  3  │
 * └─────┴─────┘
 */

.ping-layout-3 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}

.ping-layout-3 .ping-media-item:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / 3;
}

.ping-layout-3 .ping-media-item:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.ping-layout-3 .ping-media-item:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

/* 4 immagini
 *
 * ┌─────┬─────┐
 * │  1  │  2  │
 * ├─────┼─────┤
 * │  3  │  4  │
 * └─────┴─────┘
 */

.ping-layout-4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 5 immagini
 *
 * ┌───────────┬─────┬─────┐
 * │           │  2  │  3  │
 * │     1     ├─────┼─────┤
 * │           │  4  │  5  │
 * └───────────┴─────┴─────┘
 */

.ping-layout-5 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}

.ping-layout-5 .ping-media-item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.ping-layout-5 .ping-media-item:nth-child(2) {
	grid-column: 3;
	grid-row: 1;
}

.ping-layout-5 .ping-media-item:nth-child(3) {
	grid-column: 4;
	grid-row: 1;
}

.ping-layout-5 .ping-media-item:nth-child(4) {
	grid-column: 3;
	grid-row: 2;
}

.ping-layout-5 .ping-media-item:nth-child(5) {
	grid-column: 4;
	grid-row: 2;
}

/* 6 immagini
 *
 * ┌─────┬─────┬─────┐
 * │  1  │  2  │  3  │
 * ├─────┼─────┼─────┤
 * │  4  │  5  │  6  │
 * └─────┴─────┴─────┘
 */

.ping-layout-6 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 7 immagini
 *
 * ┌─────┬─────┬─────┬─────┐
 * │     │  2  │  3  │  4  │
 * │  1  ├─────┼─────┼─────┤
 * │     │  5  │  6  │  7  │
 * └─────┴─────┴─────┴─────┘
 */

.ping-layout-7 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}

.ping-layout-7 .ping-media-item:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / 3;
}

.ping-layout-7 .ping-media-item:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.ping-layout-7 .ping-media-item:nth-child(3) {
	grid-column: 3;
	grid-row: 1;
}

.ping-layout-7 .ping-media-item:nth-child(4) {
	grid-column: 4;
	grid-row: 1;
}

.ping-layout-7 .ping-media-item:nth-child(5) {
	grid-column: 2;
	grid-row: 2;
}

.ping-layout-7 .ping-media-item:nth-child(6) {
	grid-column: 3;
	grid-row: 2;
}

.ping-layout-7 .ping-media-item:nth-child(7) {
	grid-column: 4;
	grid-row: 2;
}

/* 8 immagini
 *
 * ┌─────┬─────┬─────┬─────┐
 * │  1  │  2  │  3  │  4  │
 * ├─────┼─────┼─────┼─────┤
 * │  5  │  6  │  7  │  8  │
 * └─────┴─────┴─────┴─────┘
 */

.ping-layout-8 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 9 immagini
 *
 * ┌─────┬─────┬─────┐
 * │  1  │  2  │  3  │
 * ├─────┼─────┼─────┤
 * │  4  │  5  │  6  │
 * ├─────┼─────┼─────┤
 * │  7  │  8  │  9  │
 * └─────┴─────┴─────┘
 */

.ping-layout-9 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
}

/* 10 immagini
 *
 * ┌─────────┬─────┬─────┬─────┐
 * │         │  2  │  3  │  4  │
 * │    1    ├─────┼─────┼─────┤
 * │         │  5  │  6  │  7  │
 * │         ├─────┼─────┼─────┤
 * │         │  8  │  9  │ 10  │
 * └─────────┴─────┴─────┴─────┘
 */

.ping-layout-10 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
}

.ping-layout-10 .ping-media-item:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / 4;
}

.ping-layout-10 .ping-media-item:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.ping-layout-10 .ping-media-item:nth-child(3) {
	grid-column: 3;
	grid-row: 1;
}

.ping-layout-10 .ping-media-item:nth-child(4) {
	grid-column: 4;
	grid-row: 1;
}

.ping-layout-10 .ping-media-item:nth-child(5) {
	grid-column: 2;
	grid-row: 2;
}

.ping-layout-10 .ping-media-item:nth-child(6) {
	grid-column: 3;
	grid-row: 2;
}

.ping-layout-10 .ping-media-item:nth-child(7) {
	grid-column: 4;
	grid-row: 2;
}

.ping-layout-10 .ping-media-item:nth-child(8) {
	grid-column: 2;
	grid-row: 3;
}

.ping-layout-10 .ping-media-item:nth-child(9) {
	grid-column: 3;
	grid-row: 3;
}

.ping-layout-10 .ping-media-item:nth-child(10) {
	grid-column: 4;
	grid-row: 3;
}

/* Elementi della galleria */

.ping-media-item {
	position: relative;
	display: block;

	min-width: 0;
	min-height: 0;

	overflow: hidden;
	background: #f1f3f4;
	border-radius: 6px;
}

.ping-media-item img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition: transform .2s ease;
}

.ping-media-item:hover img {
	transform: scale(1.02);
}

/* PDF */

.ping-document-item {
	background: linear-gradient(180deg,#ffffff,#f8f9fb);
	border: 1px solid #dfe5e8;
}

.ping-document-item:hover {
	border-color: var(--mv-primary);
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.ping-document-link {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;

	width:100%;
	height:100%;

	padding:18px;

	color:inherit;
	text-decoration:none;
}

.ping-document-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 84px;
	height: 84px;

	margin: 0 auto 16px;

	font-size: 64px;
	color: #dc2626;
}

.ping-document-body{
	width:100%;
	text-align:center;
}

.ping-document-title{
	font-size:14px;
	font-weight:600;
	line-height:1.35;

	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;

	overflow:hidden;
}

.ping-document-meta{
	margin-top:8px;

	font-size:12px;
	color:#8b9096;

	text-transform:uppercase;
	letter-spacing:.05em;
}

.ping-lightbox {
	position: fixed;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 32px;

	background: rgba(0, 0, 0, .88);

	opacity: 0;
	visibility: hidden;

	transition:
		opacity .18s ease,
		visibility .18s ease;

	z-index: 9999;
}

.ping-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.ping-lightbox-content {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: auto;
	height: auto;
	max-width: 95vw;
	max-height: 95vh;
}

.ping-lightbox-image {
	display: block;

	max-width: 95vw;
	max-height: 95vh;

	border-radius: 8px;

	box-shadow: 0 10px 40px rgba(0,0,0,.45);
}

.ping-lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	border: 0;
	border-radius: 8px;

	background: rgba(0, 0, 0, .35);
	backdrop-filter: blur(6px);

	color: #fff;
	font-size: 28px;
	line-height: 1;

	cursor: pointer;

	transition:
		background .15s ease,
		transform .15s ease,
		opacity .15s ease;

	z-index: 20;
}

.ping-lightbox-arrow:hover {
	background: rgba(0, 0, 0, .55);
}

.ping-lightbox-arrow:active {
	transform: translateY(-50%) scale(.96);
}

.ping-lightbox-arrow-prev {
	left: 24px;
}

.ping-lightbox-arrow-next {
	right: 24px;
}

.ping-lightbox-arrow:focus-visible {
	outline: 2px solid #42b992;
	outline-offset: 3px;
}

.ping-lightbox-thumbnails {
	display: flex;
	gap: 8px;

	position: absolute;
	left: 50%;
	bottom: 24px;

	transform: translateX(-50%);

	max-width: calc(100vw - 140px);

	padding: 8px;

	overflow-x: auto;
	overflow-y: hidden;

	scrollbar-width: thin;
}

.ping-lightbox-thumbnail {
	width: 64px;
	height: 64px;

	flex: 0 0 auto;

	object-fit: cover;

	border-radius: 6px;

	cursor: pointer;

	opacity: .55;

	border: 2px solid transparent;

	transition:
		opacity .15s ease,
		border-color .15s ease,
		transform .15s ease;
}

.ping-lightbox-thumbnail:hover {
	opacity: .9;
	transform: translateY(-2px);
}

.ping-lightbox-thumbnail.is-active {
	opacity: 1;
	border-color: #42b992;
}

.ping-lightbox-image {
	transition:
		opacity .15s ease,
		transform .15s ease;
}

.ping-lightbox-image.is-loading {
	opacity: 0;
	transform: scale(.98);
}

/* ==========================================================
   Video
   ========================================================== */

.ping-video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	background: #000;
}

/* ==========================================================
   Audio
   ========================================================== */

.ping-audio-item {
	padding: 16px;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	background: var(--card-background);
}

.ping-audio-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.ping-audio-icon {
	width: 48px;
	height: 48px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 10px;
	background: rgba(66, 185, 146, .12);

	color: var(--brand-primary);
	font-size: 20px;

	flex-shrink: 0;
}

.ping-audio-body {
	min-width: 0;
}

.ping-audio-title {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ping-audio-meta {
	margin-top: 2px;
	font-size: .875rem;
	color: var(--text-muted);
}

.ping-audio {
	display: block;
	width: 100%;
}

/* Mobile */

@media (max-width: 640px) {
	.ping-card,
	.ping-composer {
		padding: 14px;
	}

	.ping-avatar {
		flex-basis: 42px;
		width: 42px;
		height: 42px;
	}

	.ping-composer .ping-avatar {
		flex-basis: 42px;
	}

	.ping-composer-header {
		gap: 12px;
	}

	.ping-composer-submit {
		min-width: 100px;
	}

	.ping-actions {
		gap: 8px;
	}
	
	.pong-card {
		margin-left: 0;
		padding: 14px;
	}
	
	.pong-avatar {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
	}
	
	.ping-link-preview {
		display: block;
	}
	
	.ping-link-image-wrapper {
		width: 100%;
		min-height: 0;
		height: 180px;
	
		border-right: 0;
		border-bottom: 1px solid #e4e8ea;
	}
	
	.ping-link-image {
		min-height: 0;
		height: 180px;
	}
	
	.ping-link-body {
		padding: 13px 14px 14px;
	}
	
	.ping-link-title {
		white-space: normal;
	
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}

/* ==========================================================
   Ping Layout
   ========================================================== */

.ping-page-layout {
	   display: grid;
	   grid-template-columns: minmax(0, 880px) 300px;
	   gap: 28px;
   
	   align-items: start;
	   justify-content: center;
   
	   max-width: 1280px;
	   margin: 0 auto;
}

.ping-feed {
	min-width: 0;
}

.ping-sidebar {
	position: sticky;
	top: 84px;
	align-self: start;
}

.ping-sidebar .card {
	margin-bottom: 16px;
}

@media (max-width: 1200px) {

	.ping-page-layout {
		grid-template-columns: 1fr;
	}

	.ping-sidebar-right {
		display: none;
	}

	.ping-sidebar-left {
		display: none;
	}

}

@media (max-width: 900px) {

	.ping-page-layout {
		grid-template-columns: 1fr;
	}

	.ping-sidebar {
		display: none;
	}

}

/* ===========================
   Chanzine Ping Avatar
=========================== */

.ping-avatar.ping-avatar-chanzine {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(66, 185, 146, 0.25);
	border-radius: 10px;
	background: rgba(66, 185, 146, 0.12);
	color: var(--brand-primary);
	text-decoration: none;
}

.ping-avatar.ping-avatar-chanzine i {
	display: block;
	color: inherit;
	font-size: 20px;
	line-height: 1;
}

.ping-avatar.ping-avatar-chanzine:hover {
	background: rgba(66, 185, 146, 0.18);
	color: var(--brand-primary);
}

.ping-username-chanzine {
	color: var(--brand-primary);
	font-weight: 700;
}