/* ==========================================================================
   Bar Baglio - RESPONSIVE STYLES (screen @media rules only)
   Breakpoints follow the original site design (max-width).
   Uses ONLY var(--bb-...) from theme.css - no colour codes in this file.
   ========================================================================== */

/* ---------- Collapsed menu (navbar-expand-xxl in Site.Master: menu button below 1400px, so the open menu always fits in one row) ---------- */
@media (max-width: 1399.98px)
{
	/* "Book a table" under the menu links, not indented */
	.bb-nav-btn
	{
		margin-top: 8px;
		margin-bottom: 8px;
		margin-left: 0;
	}
}

/* ---------- Large screens (menu open in one row): language switch after the menu ---------- */
@media (min-width: 1400px)
{
	.bb-lang
	{
		order: 3;
		margin-left: 16px;
		margin-right: 0;
	}
}

/* ---------- Tablets ---------- */
@media (max-width: 991.98px)
{
	/* About us: text centred under the image (original design) */
	.bb-about-text
	{
		text-align: center;
	}
}

/* ---------- Phones and small tablets ---------- */
@media (max-width: 767.98px)
{
	.bb-title h1,
	.bb-title h2
	{
		font-size: 28px;
	}
}

/* ---------- Phones: smaller logos so logos + menu button fit ---------- */
@media (max-width: 575.98px)
{
	.bb-navbar .navbar-brand img
	{
		height: 40px;
	}
}

/* ---------- Small phones: smaller logos so logos + language switch + menu button fit in one row ---------- */
@media (max-width: 399.98px)
{
	.bb-navbar .navbar-brand
	{
		gap: 6px;
	}

	.bb-navbar .navbar-brand img
	{
		height: 34px;
	}
}

@media (max-width: 359.98px)
{
	.bb-navbar .navbar-brand img
	{
		height: 28px;
	}

	.bb-lang
	{
		margin-right: 4px;
	}
}

/* ---------- Gallery: three photos per row on larger screens (as in the 2025 prototype) ---------- */
@media (min-width: 768px)
{
	.bb-gallery-grid
	{
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}

/* ---------- Menu: dish cards in two columns on larger screens ---------- */
@media (min-width: 768px)
{
	.bb-dishes
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Menu card: text left, QR right on larger screens ---------- */
@media (min-width: 768px)
{
	.bb-menu-card
	{
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

/* ---------- Guest reviews: two cards per row on tablets, four on larger screens ---------- */
@media (min-width: 768px)
{
	.bb-reviews-grid
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px)
{
	.bb-reviews-grid
	{
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- LGBTQ+ friendly: badge left, text right on larger screens ---------- */
@media (min-width: 768px)
{
	.bb-lgbtq-row
	{
		flex-direction: row;
		justify-content: center;
		gap: 2.5rem;
		text-align: left;
	}

	.bb-lgbtq-title
	{
		text-align: left;
	}
}