/**
 * Philo CPT — Food & Menu shortcode styles
 * Used by [philo_menu] (see inc/philo-cpt/shortcodes.php).
 */

.philo-menu-shortcode { font-family: var(--philo-font-body); }
.menu-category { margin-bottom: 48px; }
.menu-category:last-child { margin-bottom: 0; }

.menu-list { display: flex; flex-direction: column; gap: 22px; }

.menu-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding-bottom: 20px;
	border-bottom: 1px dashed var(--philo-color-line);
}
.menu-row:last-child { border-bottom: none; padding-bottom: 0; }

.menu-row__thumb {
	width: 64px;
	height: 64px;
	border-radius: var(--philo-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--philo-color-mist);
}
.menu-row__thumb img,
.menu-row__thumb .philo-img-placeholder { width: 100%; height: 100%; object-fit: cover; }

.menu-row__body { flex: 1; min-width: 0; }
.menu-row__top { display: flex; align-items: baseline; gap: 10px; }
.menu-row__title {
	font-family: var(--philo-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--philo-color-ink);
	margin: 0;
	white-space: nowrap;
}
.menu-row__dots {
	flex: 1;
	border-bottom: 2px dotted var(--philo-color-line);
	margin-bottom: 5px;
}
.menu-row__price {
	font-family: var(--philo-font-display);
	font-weight: 600;
	color: var(--philo-color-primary);
	white-space: nowrap;
}
.menu-row__desc {
	color: var(--philo-color-ink-soft);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 6px 0 0;
}
.menu-row__tags { list-style: none; display: flex; gap: 6px; margin: 10px 0 0; padding: 0; }
.menu-tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--philo-color-mist);
	color: var(--philo-color-primary);
}
.menu-tag--spicy { background: #F7DADA; color: #8A1C1C; }
.menu-tag--vegan,
.menu-tag--vegetarian { background: #DCF3E4; color: #1A6B3C; }
.menu-tag--local { background: var(--philo-color-gold-soft); color: #6b4d0f; }

.menu-page__note {
	text-align: center;
	color: var(--philo-color-ink-soft);
	font-size: 13.5px;
	margin-top: 40px;
}

@media (max-width: 520px) {
	.menu-row__top { flex-wrap: wrap; }
	.menu-row__dots { display: none; }
	.menu-row__title { white-space: normal; }
}