/**
 * ZoxPress shortcodes: featured / flex / alt — same visuals as Homepage Widget Area.
 *
 * Loaded from PARENT theme (get_template_directory_uri) so it applies even when a child
 * theme’s style.css overrides the parent — edits only in the parent zoxpress/style.css
 * would otherwise not show on the front end.
 *
 * Also scopes #zox-home-elementor-wrap (Elementor home templates) — not only #zox-home-widget-wrap.
 *
 * [zox_featured] uses .zox-widget-feat-wrap. Narrow screens:
 * 1) .zox-widget-feat-wrap .zox-art-img img — absolute / -9999px centering (overridden below).
 * 2) Overlay o4/o6: default grid uses two rows (zox-img, zox-text). Putting .zox-art-text in flow
 *    below the image caused a white strip + dark text on sport3. Fix: on mobile, single grid area
 *    'zox-img' so image and text share one cell; text align-self:end + gradient = desktop-style overlay.
 */

/* Hover zoom — same specificity ideas as theme, but without relying only on #zox-home-widget-wrap */
.zox_flex_list1_widget .zox-art-img:hover img,
.zox_feat_list_widget .zox-art-img:hover img,
.zox_alt_img_widget .zox-art-img:hover img,
.zox_side_trend_widget .zox-art-img:hover img,
.elementor-widget-shortcode .zox_flex_list1_widget .zox-art-img:hover img,
.elementor-widget-shortcode .zox_feat_widget .zox-art-img:hover img,
.elementor-widget-shortcode .zox_feat_list_widget .zox-art-img:hover img,
.elementor-widget-shortcode .zox_alt_img_widget .zox-art-img:hover img,
.elementor-widget-shortcode .zox_side_trend_widget .zox-art-img:hover img,
#zox-home-widget-wrap .zox_flex_list1_widget .zox-art-img:hover img,
#zox-home-widget-wrap .zox_feat_widget .zox-art-img:hover img,
#zox-home-widget-wrap .zox_feat_list_widget .zox-art-img:hover img,
#zox-home-widget-wrap .zox_alt_img_widget .zox-art-img:hover img,
#zox-home-widget-wrap .zox_side_trend_widget .zox-art-img:hover img,
#zox-home-elementor-wrap .zox_flex_list1_widget .zox-art-img:hover img,
#zox-home-elementor-wrap .zox_feat_widget .zox-art-img:hover img,
#zox-home-elementor-wrap .zox_feat_list_widget .zox-art-img:hover img,
#zox-home-elementor-wrap .zox_alt_img_widget .zox-art-img:hover img,
#zox-home-elementor-wrap .zox_side_trend_widget .zox-art-img:hover img {
	transform: scale(1.06);
}

#zox-home-widget-wrap .zox-divs .zox_flex_list1_widget .zox-art-img:hover img,
#zox-home-widget-wrap .zox-divs .zox_feat_widget .zox-art-img:hover img,
#zox-home-widget-wrap .zox-divs .zox_feat_list_widget .zox-art-img:hover img,
#zox-home-widget-wrap .zox-divs .zox_alt_img_widget .zox-art-img:hover img,
#zox-home-widget-wrap .zox-divs .zox_side_trend_widget .zox-art-img:hover img,
#zox-home-elementor-wrap .zox-divs .zox_flex_list1_widget .zox-art-img:hover img,
#zox-home-elementor-wrap .zox-divs .zox_feat_widget .zox-art-img:hover img,
#zox-home-elementor-wrap .zox-divs .zox_feat_list_widget .zox-art-img:hover img,
#zox-home-elementor-wrap .zox-divs .zox_alt_img_widget .zox-art-img:hover img,
#zox-home-elementor-wrap .zox-divs .zox_side_trend_widget .zox-art-img:hover img {
	transform: scale(1.06);
}

/* Whole banner hover (text overlay is outside the image link) */
.zox_feat_widget .zox-widget-feat-main:hover .zox-art-img img,
#zox-home-widget-wrap .zox_feat_widget .zox-widget-feat-main:hover .zox-art-img img,
#zox-home-widget-wrap .zox-divs .zox_feat_widget .zox-widget-feat-main:hover .zox-art-img img,
#zox-home-elementor-wrap .zox_feat_widget .zox-widget-feat-main:hover .zox-art-img img,
#zox-home-elementor-wrap .zox-divs .zox_feat_widget .zox-widget-feat-main:hover .zox-art-img img,
.elementor-widget-shortcode .zox_feat_widget .zox-widget-feat-main:hover .zox-art-img img {
	-webkit-transform: scale(1.06);
	transform: scale(1.06);
}

/* Match media-queries.css breakpoints: feat-wrap img (shortcode hero only) */
@media screen and (max-width: 599px) and (min-width: 480px) {
	.zox_feat_widget .zox-widget-feat-wrap .zox-art-img img {
		position: absolute !important;
		left: 0 !important;
		right: auto !important;
		top: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		object-fit: cover;
		object-position: center;
	}
}

@media screen and (max-width: 479px) {
	.zox_feat_widget .zox-widget-feat-wrap .zox-art-img img {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		object-fit: cover;
		object-position: center;
	}
}

/* Mobile: overlay text on image (same look as desktop) — one grid row so no white bar under the photo */
@media screen and (max-width: 767px) {
	.zox_feat_widget .zox-widget-feat-main.zox-o4 .zox-art-grid,
	.zox_feat_widget .zox-widget-feat-main.zox-o6 .zox-art-grid {
		grid-template-areas: 'zox-img';
	}

	/* Grid children are <a> (image) + .zox-art-text — place link in the same cell as text */
	.zox_feat_widget .zox-widget-feat-main.zox-o4 .zox-art-grid > a,
	.zox_feat_widget .zox-widget-feat-main.zox-o6 .zox-art-grid > a {
		grid-area: zox-img;
		z-index: 1;
	}

	.zox_feat_widget .zox-widget-feat-main.zox-o4 .zox-art-text,
	.zox_feat_widget .zox-widget-feat-main.zox-o6 .zox-art-text {
		grid-area: zox-img;
		align-self: end;
		position: relative;
		z-index: 2;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		width: 100% !important;
		float: none !important;
		clear: none;
		background-color: transparent !important;
		background-image: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.9) 100%) !important;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.9) 100%) !important;
	}

	.zox_feat_widget .zox-widget-feat-main.zox-o4 h2.zox-s-title1,
	.zox_feat_widget .zox-widget-feat-main.zox-o4 .zox-art-title a h2.zox-s-title1,
	.zox_feat_widget .zox-widget-feat-main.zox-o6 h2.zox-s-title1,
	.zox_feat_widget .zox-widget-feat-main.zox-o6 .zox-art-title a h2.zox-s-title1 {
		color: #fff !important;
	}

	.zox_feat_widget .zox-widget-feat-main.zox-o4 span.zox-s-cat {
		color: #ccc !important;
	}

	.zox_feat_widget .zox-widget-feat-main.zox-o6 span.zox-s-cat {
		color: #fff !important;
	}

	.zox_feat_widget .zox-widget-feat-main.zox-o4 .zox-byline-wrap span,
	.zox_feat_widget .zox-widget-feat-main.zox-o4 .zox-byline-wrap span a,
	.zox_feat_widget .zox-widget-feat-main.zox-o6 .zox-byline-wrap span,
	.zox_feat_widget .zox-widget-feat-main.zox-o6 .zox-byline-wrap span a {
		color: #ccc !important;
	}

	/* Elementor column can be narrower than 200px+text; avoid 1px-wide text column */
	.elementor-widget-shortcode .zox_flex_list1_widget .zox-divr .zox-art-text,
	.elementor-widget-shortcode .zox_flex_list1_widget .zox-div3 .zox-widget-flex1-cont .zox-art-text {
		min-width: 0;
	}
}