/**
 * GamesVTV Callout Components — magazine-style editorial blocks
 * @package GamesVTV
 *
 * Usage: add class to a Group block, e.g. gv-callout gv-callout--pros
 */

.gv-callout,
.entry-content .gv-callout,
.gv-article__content .gv-callout {
	position: relative;
	margin: 1.75rem 0;
	padding: 1.25rem 1.35rem 1.25rem 3.25rem;
	border-radius: var(--gv-radius);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	color: var(--gv-text-primary);
}

.gv-callout::before {
	content: '';
	position: absolute;
	left: 1.15rem;
	top: 1.35rem;
	width: 1.35rem;
	height: 1.35rem;
	background-color: var(--gv-accent);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.gv-callout > :first-child {
	margin-top: 0;
}

.gv-callout > :last-child {
	margin-bottom: 0;
}

.gv-callout__title,
.gv-callout > strong:first-child {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--gv-font-display);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gv-accent);
}

.gv-callout--pros {
	border-color: rgba(52, 211, 153, 0.25);
	background: rgba(52, 211, 153, 0.06);
}

.gv-callout--pros::before {
	background-color: #34d399;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.gv-callout--cons {
	border-color: rgba(248, 113, 113, 0.25);
	background: rgba(248, 113, 113, 0.06);
}

.gv-callout--cons::before {
	background-color: #f87171;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.gv-callout--pick {
	border-color: var(--gv-accent-muted);
	background: rgba(244, 197, 66, 0.08);
	box-shadow: 0 0 32px rgba(244, 197, 66, 0.08);
}

.gv-callout--pick::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z'/%3E%3C/svg%3E");
}

.gv-callout--verdict {
	border-color: rgba(244, 197, 66, 0.35);
	background: linear-gradient(135deg, rgba(244, 197, 66, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.gv-callout--verdict::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 19h16M4 15h16M8 11h8M12 3v8'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 19h16M4 15h16M8 11h8M12 3v8'/%3E%3C/svg%3E");
}

.gv-callout--warning {
	border-color: rgba(251, 191, 36, 0.35);
	background: rgba(251, 191, 36, 0.08);
}

.gv-callout--warning::before {
	background-color: #fbbf24;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.6L1.8 18.2A2 2 0 003.5 21h17a2 2 0 001.7-2.8L13.7 3.6a2 2 0 00-3.4 0z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.6L1.8 18.2A2 2 0 003.5 21h17a2 2 0 001.7-2.8L13.7 3.6a2 2 0 00-3.4 0z'/%3E%3C/svg%3E");
}

.gv-callout--tip {
	border-color: rgba(96, 165, 250, 0.3);
	background: rgba(96, 165, 250, 0.07);
}

.gv-callout--tip::before {
	background-color: #60a5fa;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 00-4 12.7V17h8v-2.3A7 7 0 0012 2z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 00-4 12.7V17h8v-2.3A7 7 0 0012 2z'/%3E%3C/svg%3E");
}

.gv-callout--best-for {
	border-color: rgba(167, 139, 250, 0.3);
	background: rgba(167, 139, 250, 0.07);
}

.gv-callout--best-for::before {
	background-color: #a78bfa;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E");
}