/*!
 * Food vendor card — THE one card (AFTER-SPEC-V3 §2, Comp-food-vendor-card).
 * Markup: includes/vendor-card.php → bfw_vendor_card(). Handle: bfw-vendor-card
 * (depends on the theme's bch-ui: .bsy-card shell, .bsy-pro, .bsy-tag, .bsy-grid,
 * .bsy-rail, .bsy-on-photo, .bsy-vh). Tokens: the theme's --bsy-*.
 */

/* Card: white, radius 16, 1px hairline, hover darkens the hairline (shell). */
/* position:relative keeps the visually-hidden labels (absolute) inside the card,
   so inside a scrolling rail they are clipped instead of widening the page. */
.bfw-vc { position: relative; min-width: 0; height: 100%; container-type: inline-size; }
.bfw-vc.bsy-card--link:focus-visible { outline: var(--bsy-focus-ring-width, 2px) solid var(--bsy-focus-ring-color, var(--bsy-brand)); outline-offset: var(--bsy-focus-ring-offset, 2px); }

/* Photo 16:10 (shell), nothing on its bottom edge. */
.bfw-vc__media { display: grid; place-items: center; }
.bfw-vc__media > img:not(.bfw-vc__cover-logo) { grid-area: 1 / 1; }
.bfw-vc .bfw-vc__cover-logo {
	width: 72px; height: 72px;
	border-radius: 14px;
	border: 1px solid var(--bsy-line);
	background: var(--bsy-white);
	object-fit: cover;
}

/* Closed: grey photo + one solid 60% bar (never a gradient). */
.bfw-vc.is-closed .bfw-vc__media > img { filter: grayscale(1); opacity: .55; }
.bfw-vc__closed {
	position: absolute;
	inset-inline: 10px;
	inset-block-end: 10px;
	display: flex; align-items: center; justify-content: center;
	min-height: 32px;
	padding: 0 var(--bsy-space-2);
	border-radius: var(--bsy-radius-sm);
	background: rgba(10, 10, 10, .6);
	color: var(--bsy-white);
	font-size: var(--bsy-text-sm);
	font-weight: var(--bsy-fw-semibold);
	line-height: 1.3;
}

/* Identity: 40px logo beside the name + cuisine (2-column grid, no wrapper). */
.bfw-vc__id {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 10px;
	padding: var(--bsy-space-3) 14px 0;
	min-width: 0;
}
.bfw-vc__id > .bfw-vc__logo { grid-row: 1 / span 2; }
/* No cuisine line: logo and name share one centred row (no hole under the name). */
.bfw-vc__id:not(:has(.bfw-vc__cuisine)) > .bfw-vc__logo { grid-row: auto; }
.bfw-vc__name, .bfw-vc__cuisine { grid-column: 2; }
.bfw-vc__name:has(+ .bfw-vc__cuisine) { align-self: end; }
.bfw-vc__cuisine { align-self: start; }
.bfw-vc .bfw-vc__logo {
	flex: none;
	box-sizing: border-box;
	width: 40px; height: 40px;
	border-radius: var(--bsy-radius-tile);
	border: 1px solid var(--bsy-line);
	background: var(--bsy-white);
	object-fit: cover;
}
.bfw-vc .bfw-vc__logo--initial {
	display: grid; place-items: center;
	background: var(--bsy-grey-50);
	color: var(--bsy-fg2);
	font-size: var(--bsy-text-base);
	font-weight: var(--bsy-fw-bold);
	line-height: 1;
}
.bfw-vc.is-closed .bfw-vc__logo { opacity: .6; }
.bfw-vc__name {
	margin: 0;
	font-family: var(--bsy-font);
	font-size: var(--bsy-text-base);
	font-weight: var(--bsy-fw-semibold);
	line-height: 1.4;
	color: var(--bsy-ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bfw-vc__cuisine {
	margin: 0;
	font-size: var(--bsy-text-meta-dense);
	line-height: 1.5;
	color: var(--bsy-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Facts row: 13px tabular, 12px gaps, 14px muted icons; wraps, never clips. */
.bfw-vc__meta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--bsy-space-1) var(--bsy-space-3);
	margin: 0;
	padding: 10px 14px 14px;
	font-size: var(--bsy-text-meta-dense);
	line-height: 1.4;
	color: var(--bsy-fg2);
	font-variant-numeric: tabular-nums;
}
.bfw-vc__f { display: inline-flex; align-items: center; gap: var(--bsy-space-1); white-space: nowrap; }
/* 14px icons drawn by CSS masks — one rule each instead of an SVG per card. */
.bfw-vc__f--rt::before, .bfw-vc__f--eta::before, .bfw-vc__f--fee::before {
	content: "";
	flex: none;
	width: 14px; height: 14px;
	background: var(--bsy-muted);
	-webkit-mask: var(--bfw-ic) center / contain no-repeat;
	mask: var(--bfw-ic) center / contain no-repeat;
}
.bfw-vc__f--rt { --bfw-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 15 9 22 9.5 17 14.5 18.5 22 12 18 5.5 22 7 14.5 2 9.5 9 9'/%3E%3C/svg%3E"); }
.bfw-vc__f--rt::before { background: var(--bsy-star); }
.bfw-vc__f--eta { --bfw-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E"); }
.bfw-vc__f--fee { --bfw-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3Cpath d='M5 9h4l2.5 5h6'/%3E%3Cpath d='M14 5h2.5l3 7'/%3E%3Cpath d='M9 17.5h6'/%3E%3C/svg%3E"); }
.bfw-vc__cnt { color: var(--bsy-muted); }
.bfw-vc__new { color: var(--bsy-muted); }
.bfw-vc__free { color: var(--bsy-ok); font-weight: var(--bsy-fw-medium); }
.bfw-vc__free::before { background: currentColor; }

/* The facts row stays ONE line: where the card is narrow (rails, 3-up
   tablet grids) the review count goes; the vendor page still shows it. */
@container (max-width: 300px) {
	.bfw-vc__cnt { display: none; }
}

/* Listing grid: 4 per row desktop, 3 tablet, 2 phone (theme .bsy-grid). */
.bfw-vgrid { --bsy-grid-cols: 4; }

/* Phone listings (/burger/, /vendors/, landings): the same card as a list row —
   96×72 photo, name + facts, about six per screen. */
@media (max-width: 640px) {
	.bfw-vgrid--rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.bfw-vgrid--rows > li + li .bfw-vc { border-block-start: 1px solid var(--bsy-line); }
	.bfw-vgrid--rows .bfw-vc {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: var(--bsy-space-3);
		align-content: center;
		padding: var(--bsy-space-3) 0;
		border: 0;
		border-radius: 0;
		overflow: visible;
		background: transparent;
	}
	.bfw-vgrid--rows .bfw-vc__media {
		grid-row: 1 / span 2;
		width: 96px; height: 72px;
		aspect-ratio: auto;
		border-radius: var(--bsy-radius-md);
	}
	.bfw-vgrid--rows .bfw-vc__media .bsy-on-photo { inset-block-start: 6px; inset-inline-start: 6px; }
	.bfw-vgrid--rows .bfw-vc__cover-logo { width: 48px; height: 48px; border-radius: var(--bsy-radius-tile); }
	.bfw-vgrid--rows .bfw-vc__closed { inset-inline: 4px; inset-block-end: 4px; min-height: 24px; font-size: var(--bsy-text-xs); }
	.bfw-vgrid--rows .bfw-vc__id { padding: 0; align-self: end; display: block; }
	.bfw-vgrid--rows .bfw-vc__logo { display: none; }
	.bfw-vgrid--rows .bfw-vc__meta { padding: var(--bsy-space-1) 0 0; gap: var(--bsy-space-1) 10px; align-self: start; }
	.bfw-vgrid--rows .bfw-vc__cnt { display: none; }
	/* A closed thumbnail carries only «مغلق الآن» (no badge on top of it). */
	.bfw-vgrid--rows .bfw-vc.is-closed .bsy-on-photo { display: none; }
}

/* The theme's `.bsy-grid > li { display:flex }` would beat the `hidden`
   attribute the listing script sets on filtered-out cards. */
.bfw-vgrid > li[hidden] { display: none; }