/* ==========================================================================
   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;
	}
}

/* Menu open but the screen is not very wide: smaller logos, so the longer Italian menu + switch fit in one row */
@media (min-width: 1400px) and (max-width: 1599.98px)
{
	.bb-navbar .navbar-brand img
	{
		height: 70px;
	}
}

/* ---------- 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: 50px;
	}
}

/* ---------- 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: 40px;
	}
}

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

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

/* ---------- Large phones ---------- */
@media (max-width: 640px)
{
	/* Pause/Play: top-right corner of the photo */
	.bb-carousel-toggle
	{
		top: 8px;
		right: 8px;
		bottom: auto;
	}
}

/* ---------- 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;
	}
}

/* ---------- Awards: six small badges per row on larger screens ---------- */
@media (min-width: 768px)
{
	.bb-award
	{
		flex-basis: calc((100% - 5rem) / 6);
	}
}

/* ---------- Private terrace photos: nine small photos in one row on larger screens ---------- */
@media (min-width: 768px)
{
	.bb-terrace-grid
	{
		grid-template-columns: repeat(9, 1fr);
	}
}

/* ---------- 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;
	}
}

/* ---------- Restaurant Guru: two badges per row on phones (2 + 1) ---------- */
@media (max-width: 575.98px)
{
	.bb-guru-list
	{
		gap: 1rem;
	}

	.bb-guru-list li
	{
		flex-basis: calc((100% - 1rem) / 2);
	}
}