/* ============================================================
   BCC Deals & Specials — front-end styles
   Colours live in the variables below. Swap these to match your
   active monthly palette without touching anything else.
   Defaults use the BCC base palette: ink black, soft white,
   Maple Red, Bronze.
   ============================================================ */

.bcc-specials {
	--bcc-ink:      #141414;   /* ink black  — CTA + text            */
	--bcc-paper:    #ffffff;   /* card background                    */
	--bcc-soft:     #faf8f4;   /* soft white — placeholder base      */
	--bcc-red:      #b0242a;   /* Maple Red  — accents               */
	--bcc-bronze:   #a9824c;   /* Bronze     — placeholder gradient  */
	--bcc-line:     #e7e3dc;   /* hairline borders                   */
	--bcc-muted:    #5f5a53;   /* secondary text                     */

	max-width: 1080px;
	margin: 0 auto;
}

.bcc-specials-intro { margin: 0 0 1rem; }
.bcc-specials-intro h2 { margin: 0 0 .25rem; }
.bcc-specials-intro p { margin: 0; color: var(--bcc-muted); }

.bcc-disclosure {
	background: var(--bcc-soft);
	border: 1px solid var(--bcc-line);
	padding: .75rem .9rem;
	border-radius: .6rem;
	font-size: .9rem;
	margin: 1rem 0 1.5rem;
}

.bcc-specials-filter {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin: 1rem 0 1.75rem;
}
.bcc-specials-filter a {
	padding: .4rem .8rem;
	border: 1px solid var(--bcc-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--bcc-ink);
	font-size: .9rem;
	transition: background .15s ease, color .15s ease;
}
.bcc-specials-filter a:hover {
	background: var(--bcc-ink);
	color: #fff;
}

.bcc-cat-heading {
	margin: 1.75rem 0 .75rem;
	scroll-margin-top: 90px; /* so the anchor jump clears sticky headers */
}

.bcc-specials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin: 0 0 2rem;
}

/* ---------- Card base ---------- */
.bcc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bcc-paper);
	border: 1px solid var(--bcc-line);
	border-radius: .85rem;
	overflow: hidden;
	text-decoration: none;
	color: var(--bcc-ink);
	box-shadow: 0 2px 12px rgba(0,0,0,.05);
	transition: transform .15s ease, box-shadow .15s ease;
}
.bcc-card.is-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
/* Cards with no link don't pretend to be clickable. */
.bcc-card.no-link { cursor: default; }

/* ---------- Media area ---------- */
.bcc-card-media {
	position: relative;
	aspect-ratio: 3 / 1;
	background: var(--bcc-soft);
}
.bcc-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Coloured placeholder shown when there's no image. */
.bcc-card-media--text {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--bcc-ink) 0%, var(--bcc-bronze) 100%);
}
.bcc-initial {
	font-size: 2.4rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: .02em;
	opacity: .95;
}

/* Offer badge on image cards. */
.bcc-badge {
	position: absolute;
	top: .6rem;
	left: .6rem;
	background: var(--bcc-red);
	color: #fff;
	padding: .3rem .6rem;
	border-radius: .4rem;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1;
}

/* ---------- Body ---------- */
.bcc-card-body {
	padding: .9rem 1rem 1rem;
	flex: 1 1 auto;
}
.bcc-card-title {
	margin: 0 0 .3rem;
	font-size: 1.05rem;
	line-height: 1.25;
}
.bcc-card-offer {
	margin: 0 0 .4rem;
	font-weight: 600;
	color: var(--bcc-red);
	font-size: .92rem;
}
.bcc-card-desc {
	margin: 0;
	color: var(--bcc-muted);
	font-size: .9rem;
	line-height: 1.45;
}

/* ---------- CTA ---------- */
.bcc-cta {
	align-self: flex-start;
	margin: 0 1rem 1rem;
	background: var(--bcc-ink);
	color: #fff;
	padding: .5rem .85rem;
	border-radius: .5rem;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1;
}
.bcc-card.is-link:hover .bcc-cta { background: var(--bcc-red); }

/* ---------- Empty state ---------- */
.bcc-specials-empty {
	text-align: center;
	padding: 2.5rem 1rem;
	border: 1px dashed var(--bcc-line);
	border-radius: .85rem;
	color: var(--bcc-muted);
}