/**
 * WPFlexStudio — Members Grid widget.
 *
 * Grid: 4 items per row on desktop, 2 on tablet, 1 on mobile. Breakpoints
 * match Elementor's own default responsive breakpoints (Tablet: max-width
 * 1024px, Mobile: max-width 767px) so the widget's layout switches at the
 * same viewport widths Elementor's own editor preview and other controls
 * use, rather than an arbitrary custom pair of breakpoints. Column count
 * stays static CSS (fixed spec, not requested as a user control). Grid
 * gap and item gap are NOT static — they are exclusively Elementor
 * responsive controls (Style tab → Layout), see the comment below.
 *
 * The Style tab also adds a shared ".wpflexstudio-members-grid__link"
 * class (in addition to each field's own class) on the Phone, Second
 * Phone and Email anchors, purely as a clean typography/color selector
 * hook for Elementor — it has no rules of its own in this static
 * stylesheet.
 */

/*
 * box-sizing — scoped to this widget only (not a page-wide reset), same
 * approach as the Accordion widget: the image wrapper combines
 * `overflow: hidden` with a width that must exactly match its grid track,
 * and under content-box padding/border on `__item` (now user-configurable
 * via the Style tab's Item section) would add on top of width: 100%,
 * overflowing the grid track otherwise.
 *
 * Grid gap (columns + rows, between items) and item gap (between the
 * image/title/country/phone/second-phone/email inside one item) are NOT
 * set here. They are written exclusively by the "Grid Gap" and "Item Gap"
 * controls in the Style tab's Layout section (defaults 24px / 12px) via
 * Elementor's per-instance `{{WRAPPER}}` selectors. A static declaration
 * here would never win — Elementor's ID-scoped selector always beats a
 * bare class selector on specificity, regardless of CSS load order — so
 * it would sit in this file as dead, misleading code (the same collision
 * class already diagnosed for `item_border` on the Accordion widget).
 */
.wpflexstudio-members-grid,
.wpflexstudio-members-grid *,
.wpflexstudio-members-grid *::before,
.wpflexstudio-members-grid *::after {
	box-sizing: border-box;
}

.wpflexstudio-members-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	/* column-gap / row-gap: see the Grid Gap control comment above. */
}

@media (max-width: 1024px) {
	.wpflexstudio-members-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.wpflexstudio-members-grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

.wpflexstudio-members-grid__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* gap: see the Item Gap control comment above. */
}

/*
 * Image hover scale: transform + transition live on the <img> itself
 * (only the `transform` property transitions, per spec); the wrapper
 * clips the overflow so the scaled image never bleeds past the card edge
 * into neighboring grid cells or following text.
 */
.wpflexstudio-members-grid__image-wrap {
	overflow: hidden;
	min-width: 0;
}

.wpflexstudio-members-grid__image {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
}

.wpflexstudio-members-grid__item:hover .wpflexstudio-members-grid__image {
	transform: scale(1.03);
}

.wpflexstudio-members-grid__title,
.wpflexstudio-members-grid__country,
.wpflexstudio-members-grid__phone,
.wpflexstudio-members-grid__second-phone,
.wpflexstudio-members-grid__email {
	min-width: 0;
	overflow-wrap: break-word;
}

.wpflexstudio-members-grid__phone,
.wpflexstudio-members-grid__second-phone,
.wpflexstudio-members-grid__email {
	display: block;
	color: inherit;
	text-decoration: none;
}

.wpflexstudio-members-grid__phone:hover,
.wpflexstudio-members-grid__second-phone:hover,
.wpflexstudio-members-grid__email:hover {
	text-decoration: underline;
}

.wpflexstudio-members-grid__editor-notice {
	padding: 16px;
	border: 1px dashed #d0d0d0;
	color: #6d6d6d;
	font-style: italic;
}