/**
 * WPS IPE Sites - front-end styles.
 *
 * The block is injected inside the theme's listing column (WP-Script themes)
 * or natively inside <main> (GeneratePress), so it never needs to force its own
 * float or width. It only has to lay the links out as a tidy, responsive card
 * grid that reads well on both dark tube themes and light themes such as
 * GeneratePress.
 *
 * Everything is driven by a handful of custom properties so a theme (or the
 * plugin's color options) can recolour it without touching selectors.
 */

.ipe-sites {
	/* Accent colour: overridden by the theme, falls back to the classic red. */
	--ipe-accent: #e62117;
	--ipe-surface: rgba( 127, 127, 127, .07 );
	--ipe-surface-hover: rgba( 127, 127, 127, .12 );
	--ipe-border: rgba( 127, 127, 127, .22 );
	--ipe-radius: 12px;

	clear: both;
	float: none;
	width: auto;
	max-width: 860px;
	margin: 34px auto 18px;
	padding: 0;
	box-sizing: border-box;
	font-size: 15px;
	line-height: 1.5;
}

.wps-ipe-sites-wrap {
	clear: both;
	width: auto;
	float: none;
}

/*--------------------------------------------------------------
# Title
--------------------------------------------------------------*/
.ipe-sites .ipe-sites-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	padding: 0;
	color: inherit;
}

.ipe-sites .ipe-sites-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: currentColor;
	opacity: .16;
}

.ipe-sites .ipe-sites-title h2 {
	margin: 0;
	padding: 0 0 0 14px;
	position: relative;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: inherit;
}

/* Accent bar on the heading. */
.ipe-sites .ipe-sites-title h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 1.15em;
	border-radius: 4px;
	background: var(--ipe-accent);
}

/*--------------------------------------------------------------
# Grid: 2 x 2 (3-up on wide screens)
--------------------------------------------------------------*/
.ipe-sites .ipe-sites-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
}

/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/
.ipe-sites .ipe-site {
	box-sizing: border-box;
	float: none;
	width: auto;
	display: flex;
	margin: 0;
	padding: 0;
	background: var(--ipe-surface);
	border: 1px solid var(--ipe-border);
	border-radius: var(--ipe-radius);
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ipe-sites .ipe-site:hover,
.ipe-sites .ipe-site:focus-within {
	background: var(--ipe-surface-hover);
	border-color: var(--ipe-accent);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba( 0, 0, 0, .14 );
}

/* The whole card is one big link: a comfortable click target. */
.ipe-sites .ipe-site-link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 16px 18px;
	color: inherit;
	text-decoration: none;
	border: 0;
}

.ipe-sites .ipe-site-link:focus {
	outline: none;
}

/* Number badge */
.ipe-sites .ipe-site-index {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	font-size: 12px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .5px;
	color: var(--ipe-accent);
	background: color-mix( in srgb, var(--ipe-accent) 14%, transparent );
	border-radius: 8px;
}

.ipe-sites .ipe-site-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ipe-sites .ipe-site-title {
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ipe-accent);
	text-decoration: none;
	word-break: break-word;
}

.ipe-sites .ipe-site-link:hover .ipe-site-title,
.ipe-sites .ipe-site-link:focus-visible .ipe-site-title {
	text-decoration: underline;
}

.ipe-sites .ipe-site-desc {
	font-size: 13px;
	line-height: 1.55;
	opacity: .82;
}

/* Arrow icon in the corner */
.ipe-sites .ipe-site-arrow {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--ipe-accent);
	background: color-mix( in srgb, var(--ipe-accent) 12%, transparent );
	opacity: .75;
	transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}

.ipe-sites .ipe-site-arrow svg {
	display: block;
}

.ipe-sites .ipe-site:hover .ipe-site-arrow,
.ipe-sites .ipe-site:focus-within .ipe-site-arrow {
	opacity: 1;
	transform: translate(2px, -2px);
	background: color-mix( in srgb, var(--ipe-accent) 22%, transparent );
}

/*--------------------------------------------------------------
# Colour fallbacks for browsers without color-mix()
--------------------------------------------------------------*/
@supports not ( background: color-mix( in srgb, red 10%, transparent ) ) {
	.ipe-sites .ipe-site-index,
	.ipe-sites .ipe-site-arrow {
		background: rgba( 127, 127, 127, .16 );
	}
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
/* Drop the fixed max-width when the column gets narrow. */
@media (max-width: 991px) {
	.ipe-sites {
		max-width: none;
	}
}

/* Single column on small screens. */
@media (max-width: 575px) {
	.ipe-sites {
		margin-top: 26px;
	}

	.ipe-sites .ipe-sites-list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.ipe-sites .ipe-sites-title h2 {
		font-size: 18px;
	}

	.ipe-sites .ipe-site-link {
		padding: 14px 15px;
	}
}

/*--------------------------------------------------------------
# Inherit the theme accent when it exposes a matching custom property.
# GeneratePress / many block themes publish a global "--accent" colour; when
# present we reuse it, otherwise the classic red above is kept. A real
# "Link color" set in the plugin settings still wins because it is emitted
# as a more specific inline rule.
--------------------------------------------------------------*/
.ipe-sites {
	--ipe-accent: var( --accent, #e62117 );
}

/*--------------------------------------------------------------
# Anti-skin override: some GeneratePress premium skins hide every
# homepage <article> without a featured image (display:none !important),
# which also catches these cards. Re-force the cards visible with a
# selector that out-specifies the skin rule
# ( body:not()x3 article:not(.has-post-thumbnail) => 0,4,2 ).
#
#   #wps-ipe-sites article.ipe-site                      -> 1,1,1 (hook placement)
#   div.ipe-sites div.ipe-sites-list
#       article.ipe-site.ipe-site-column                 -> 0,4,3 (shortcode placement)
--------------------------------------------------------------*/
#wps-ipe-sites article.ipe-site,
div.ipe-sites div.ipe-sites-list article.ipe-site.ipe-site-column {
	display: flex !important;
}