/* ==========================================================================
   Bald Buzzard Beer List – Stylesheet
   ========================================================================== */

.bbb-wrapper {
	font-family: inherit;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0.5rem;
}

/* Layout width variants -------------------------------------------------- */

.bbb-wrapper.bbb-width-full     { max-width: 100%; }
.bbb-wrapper.bbb-width-wide     { max-width: 1400px; }
.bbb-wrapper.bbb-width-standard { max-width: 1200px; }
.bbb-wrapper.bbb-width-narrow   { max-width: 900px; }
.bbb-wrapper.bbb-width-compact  { max-width: 640px; }

.bbb-pub-name {
	text-align: center;
	margin-bottom: 0.25rem;
}

.bbb-now-pouring {
	text-align: center;
	font-size: 1rem;
	font-style: italic;
	color: #666666;
	margin: 0 0 1.5rem;
	letter-spacing: 0.04em;
}

/* Dispense type group headings ------------------------------------------- */

.bbb-type-heading {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 1.75rem 0 0.75rem;
	padding: 0.35em 0.75em;
	border-radius: 6px;
	display: inline-block;
	color: #ffffff;
}

.bbb-type-heading:first-of-type {
	margin-top: 0;
}

.bbb-type-heading-cask  { background: #b5651d; }
.bbb-type-heading-keg   { background: #1565c0; }
.bbb-type-heading-cider { background: #2e7d32; }
.bbb-type-heading-other { background: #555555; }

/* Grid -------------------------------------------------------------------- */

.bbb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 1.5rem;
}

/* Card size variants — override the default minmax when no fixed columns set */

.bbb-grid.bbb-grid-size-tiny   { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.bbb-grid.bbb-grid-size-small  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.bbb-grid.bbb-grid-size-medium { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.bbb-grid.bbb-grid-size-large  { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.bbb-grid.bbb-grid-size-xlarge { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Pump clip height per size */
.bbb-grid-size-tiny   .bbb-clip-wrap { min-height: 110px; }
.bbb-grid-size-tiny   .bbb-pumpclip  { max-height: 100px; }
.bbb-grid-size-small  .bbb-clip-wrap { min-height: 140px; }
.bbb-grid-size-small  .bbb-pumpclip  { max-height: 130px; }
/* medium uses the existing defaults */
.bbb-grid-size-large  .bbb-clip-wrap { min-height: 210px; }
.bbb-grid-size-large  .bbb-pumpclip  { max-height: 200px; }
.bbb-grid-size-xlarge .bbb-clip-wrap { min-height: 260px; }
.bbb-grid-size-xlarge .bbb-pumpclip  { max-height: 250px; }

/* Card -------------------------------------------------------------------- */

.bbb-card {
	position: relative;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bbb-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* "New" badge ------------------------------------------------------------- */

.bbb-new-badge {
	position: absolute;
    top: 2px;
    right: 2px;
    width: 55px;
    height: 55px;
	background: #e53e3e;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.bbb-new-badge span {
	font-size: 0.42rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1;
	transform: rotate(45deg);
	display: block;
}

/* Pump clip image --------------------------------------------------------- */

.bbb-clip-wrap {
	background: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	min-height: 170px;
}

.bbb-pumpclip {
	max-width: 100%;
	max-height: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Card body --------------------------------------------------------------- */

.bbb-card-body {
	padding: 0.85rem 1rem 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Badges ------------------------------------------------------------------ */

.bbb-badges {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin-bottom: 0.6rem;
}

.bbb-badge {
	display: inline-block;
	padding: 0.2em 0.65em;
	border-radius: 4px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

/* ABV badge */
.bbb-badge-abv {
	background: #2d2d2d;
	color: #ffffff;
}

/* ctype badges */
.bbb-badge-ctype.bbb-type-cask {
	background: #b5651d;
	color: #ffffff;
}

.bbb-badge-ctype.bbb-type-keg {
	background: #1565c0;
	color: #ffffff;
}

.bbb-badge-ctype.bbb-type-cider {
	background: #2e7d32;
	color: #ffffff;
}

/* Card left border accent matches ctype */
.bbb-card.bbb-type-cask  { border-top: 4px solid #b5651d; }
.bbb-card.bbb-type-keg   { border-top: 4px solid #1565c0; }
.bbb-card.bbb-type-cider { border-top: 4px solid #2e7d32; }

/* Beer name & meta -------------------------------------------------------- */

.bbb-beer-name {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	line-height: 1.3;
	color: #1a1a1a;
}

.bbb-brewery {
	font-size: 0.875rem;
	color: #555555;
	margin: 0 0 0.2rem;
}

.bbb-style-desc {
	font-size: 0.8rem;
	color: #777777;
	font-style: italic;
	margin: 0 0 0.4rem;
}

.bbb-tasting-notes {
	font-size: 0.8rem;
	color: #555555;
	margin: 0 0 0.4rem;
	line-height: 1.5;
}

.bbb-price {
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0.25rem 0 0.4rem;
}

/* Colour bar at bottom of card ------------------------------------------- */

.bbb-color-bar {
	height: 5px;
	margin-top: auto;
	padding-top: 0.6rem;
	/* gradient is set inline from JSON data */
	background: linear-gradient(to right, #cccccc, #999999);
}

/* Attribution ------------------------------------------------------------- */

.bbb-attribution {
	text-align: right;
	font-size: 0.7rem;
	color: #bbbbbb;
	margin: 1rem 0 0;
}

.bbb-attribution a {
	color: #bbbbbb;
	text-decoration: none;
}

.bbb-attribution a:hover {
	color: #888888;
	text-decoration: underline;
}

/* Notices ----------------------------------------------------------------- */

.bbb-notice {
	padding: 0.85rem 1.2rem;
	border-radius: 6px;
	font-size: 0.95rem;
}

.bbb-notice.bbb-error {
	background: #fde8e8;
	border: 1px solid #f5c6c6;
	color: #7b1d1d;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 600px) {
	.bbb-grid {
		grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
		gap: 1rem;
	}

	.bbb-clip-wrap {
		min-height: 130px;
	}

	.bbb-pumpclip {
		max-height: 120px;
	}
}