/*
Theme Name: Banatski Cvet
Theme URI: https://example.com/banatski-cvet
Author: Filip Mihajlović
Description: Custom WordPress tema za Karate klub Banatski cvet. Gradi se na design sistemu „KK Banatski cvet" — tokeni iz assets/ds/ su izvor istine za boje, tipografiju i razmake.
Version: 2.4.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: banatski-cvet
Tags: custom-menu, featured-images, translation-ready, sports
*/

/* ==========================================================================
   Sve boje, fontovi, razmaci i radijusi dolaze iz assets/ds/tokens/.
   Ovaj fajl samo slaže komponente i strane od tih tokena — ne uvodi
   nove vrednosti. Ako se dizajn promeni, menja se DS, ne ovaj fajl.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Osnove i layout
   -------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
}

body {
	min-height: 100vh;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.bc-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bc-measure {
	max-width: var(--container-text);
}

.bc-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bc-skip-link {
	position: absolute;
	top: -100px;
	left: var(--gutter);
	z-index: 100;
	padding: var(--space-3) var(--space-5);
	background: var(--ink-900);
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	border-bottom: 0;
}

.bc-skip-link:focus {
	top: var(--space-3);
}

/* Eyebrow — mali uppercase label. DS base.css već definiše .eyebrow;
   ove varijante samo menjaju boju. */
.bc-eyebrow {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
}

.bc-eyebrow--brand {
	color: var(--brand);
}

.bc-eyebrow--on-dark {
	color: var(--red-400);
}

/* --------------------------------------------------------------------------
   2. Komponente design sistema
   -------------------------------------------------------------------------- */

/* --- Button --- */

.bc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	border-radius: var(--radius-md);
	border: var(--border-width) solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--transition-control);
}

.bc-btn:hover {
	border-bottom-color: transparent;
}

.bc-btn:active {
	transform: translateY(1px);
}

.bc-btn--sm {
	height: 34px;
	padding: 0 14px;
	font-size: var(--text-2xs);
}

.bc-btn--md {
	height: 44px;
	padding: 0 20px;
	font-size: var(--text-xs);
}

.bc-btn--lg {
	height: 54px;
	padding: 0 28px;
	font-size: var(--text-sm);
}

.bc-btn--primary {
	background: var(--brand);
	color: var(--white);
}

.bc-btn--primary:hover {
	background: var(--brand-hover);
	color: var(--white);
}

.bc-btn--primary:active {
	background: var(--brand-press);
}

.bc-btn--secondary {
	background: var(--ink-800);
	color: var(--white);
}

.bc-btn--secondary:hover {
	background: var(--ink-900);
	color: var(--white);
}

.bc-btn--outline {
	background: transparent;
	color: var(--text-strong);
	border-color: var(--border-strong);
}

.bc-btn--outline:hover {
	background: var(--ink-050);
	border-color: var(--ink-900);
	color: var(--text-strong);
}

.bc-btn--ghost {
	background: transparent;
	color: var(--text-strong);
}

.bc-btn--ghost:hover {
	background: var(--ink-100);
	color: var(--text-strong);
}

.bc-btn--inverse {
	background: var(--white);
	color: var(--ink-900);
}

.bc-btn--inverse:hover {
	background: var(--ink-100);
	color: var(--ink-900);
}

.bc-btn[aria-disabled="true"],
.bc-btn:disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* --- Badge --- */

.bc-badge {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	background: var(--brand);
	color: var(--white);
	text-decoration: none;
	border-bottom: 0;
}

.bc-badge--ink {
	background: var(--ink-800);
	color: var(--white);
}

.bc-badge--neutral {
	background: var(--ink-100);
	color: var(--ink-700);
}

/* --- Tag (filter po kategoriji) --- */

.bc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.bc-tag {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-pill);
	border: var(--border-width) solid var(--border-subtle);
	background: transparent;
	color: var(--text-muted);
	font: var(--type-small);
	font-weight: var(--weight-medium);
	text-decoration: none;
	transition: var(--transition-control);
}

.bc-tag:hover {
	background: var(--ink-050);
	color: var(--text-muted);
	border-color: var(--border-subtle);
	border-bottom-color: var(--border-subtle);
}

.bc-tag--active,
.bc-tag[aria-current="page"] {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--white);
}

.bc-tag--active:hover {
	background: var(--ink-900);
	color: var(--white);
	border-color: var(--ink-900);
}

/* --- Card --- */

.bc-card {
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

/* --- Icon (maskirani Lucide SVG, nasleđuje currentColor) --- */

.bc-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* --- PostCard --- */

.bc-postcard {
	display: block;
	position: relative;
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--shadow-none);
	transition: box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}

.bc-postcard:hover,
.bc-postcard:focus-within {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-md);
	color: inherit;
}

.bc-postcard__media {
	position: relative;
	overflow: hidden;
	background: var(--ink-100);
	aspect-ratio: 16 / 10;
}

.bc-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform var(--duration-slow) var(--ease-standard);
}

.bc-postcard:hover .bc-postcard__media img {
	transform: scale(1.03);
}

.bc-postcard__media--empty {
	display: grid;
	place-items: center;
	font-family: var(--font-heading);
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
}

.bc-postcard__badge {
	position: absolute;
	left: var(--space-3);
	top: var(--space-3);
	z-index: 1;
}

.bc-postcard__body {
	padding: var(--space-5);
}

.bc-postcard__date {
	display: block;
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: var(--space-2);
}

.bc-postcard__title {
	font: var(--type-h3);
	margin: 0 0 var(--space-2);
	color: var(--text-strong);
	transition: var(--transition-control);
}

.bc-postcard:hover .bc-postcard__title {
	color: var(--text-brand);
}

.bc-postcard__excerpt {
	font: var(--type-small);
	color: var(--text-muted);
	margin: 0;
}

/* --- SectionHeading --- */

.bc-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: var(--border-width) solid var(--border-subtle);
	margin-bottom: var(--space-6);
}

.bc-section-head__title {
	font: var(--type-h2);
	margin: 0;
	color: var(--text-strong);
}

.bc-section-head__eyebrow {
	margin-bottom: var(--space-2);
}

.bc-section-head--inverse {
	border-bottom-color: var(--border-inverse);
}

.bc-section-head--inverse .bc-section-head__title {
	color: var(--white);
}

/* --- GalleryTile --- */

.bc-tile {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: none;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--ink-100);
	cursor: pointer;
}

.bc-tile--16-10 {
	aspect-ratio: 16 / 10;
}

.bc-tile--4-3 {
	aspect-ratio: 4 / 3;
}

.bc-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform var(--duration-slow) var(--ease-standard);
}

.bc-tile:hover img {
	transform: scale(1.04);
}

.bc-tile__caption {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--scrim-bottom);
	color: var(--white);
	font: var(--type-small);
	font-weight: var(--weight-semibold);
	text-align: left;
}

.bc-tile__count {
	opacity: 0.8;
	flex: none;
}

/* --- Dialog --- */

.bc-dialog {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: none;
	place-items: center;
	padding: var(--space-5);
	background: var(--overlay);
}

.bc-dialog[open],
.bc-dialog.is-open {
	display: grid;
}

.bc-dialog__panel {
	position: relative;
	width: 100%;
	max-width: 960px;
	max-height: calc(100vh - var(--space-8));
	overflow: auto;
	background: var(--surface-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.bc-dialog__panel--narrow {
	max-width: 520px;
}

.bc-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5);
	border-bottom: var(--border-width) solid var(--border-subtle);
}

.bc-dialog__title {
	font: var(--type-h3);
	margin: 0;
	color: var(--text-strong);
}

.bc-dialog__close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
	color: var(--text-muted);
	transition: var(--transition-control);
}

.bc-dialog__close:hover {
	background: var(--ink-100);
	color: var(--text-strong);
}

.bc-dialog__body {
	padding: var(--space-5);
}

.bc-dialog__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-5);
	border-top: var(--border-width) solid var(--border-subtle);
}

.bc-dialog__body img {
	width: 100%;
	border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.bc-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--surface-page);
	border-bottom: var(--border-width) solid var(--border-subtle);
}

.bc-header__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}

.bc-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	flex-shrink: 0;
	text-decoration: none;
	border-bottom: 0;
}

.bc-brand:hover {
	border-bottom: 0;
}

.bc-brand__logo,
.bc-brand__logo img {
	height: 52px;
	width: auto;
}

.bc-brand__text {
	display: grid;
	gap: 2px;
	line-height: 1;
}

.bc-brand__name {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-900);
}

.bc-brand__tagline {
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	font-size: 11px;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.bc-nav ul {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.bc-nav a {
	color: var(--ink-500);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: var(--border-width-strong) solid transparent;
	transition: var(--transition-control);
}

.bc-nav a:hover {
	color: var(--ink-900);
	border-bottom-color: transparent;
}

.bc-nav .current-menu-item > a,
.bc-nav .current_page_item > a,
.bc-nav .current-menu-ancestor > a,
.bc-nav .current-post-ancestor > a,
.bc-nav .bc-nav__item--current > a {
	color: var(--ink-900);
	border-bottom-color: var(--brand);
}

.bc-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	place-items: center;
	color: var(--ink-900);
}

.bc-nav-toggle__bars,
.bc-nav-toggle__bars::before,
.bc-nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform var(--duration-base) var(--ease-standard),
		opacity var(--duration-fast) var(--ease-standard);
}

.bc-nav-toggle__bars::before,
.bc-nav-toggle__bars::after {
	content: "";
	position: absolute;
}

.bc-nav-toggle__bars::before {
	transform: translateY(-7px);
}

.bc-nav-toggle__bars::after {
	transform: translateY(7px);
}

.bc-nav-toggle[aria-expanded="true"] .bc-nav-toggle__bars {
	background: transparent;
}

.bc-nav-toggle[aria-expanded="true"] .bc-nav-toggle__bars::before {
	transform: rotate(45deg);
}

.bc-nav-toggle[aria-expanded="true"] .bc-nav-toggle__bars::after {
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   4. Hero (tamna traka na vrhu strane)
   -------------------------------------------------------------------------- */

.bc-hero {
	position: relative;
	background: var(--surface-inverse);
	overflow: hidden;
}

.bc-hero__texture {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 0.12;
	pointer-events: none;
	user-select: none;
}

.bc-hero__inner {
	position: relative;
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--section-y) var(--gutter);
}

.bc-hero__inner--split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-8);
	align-items: center;
}

.bc-hero__eyebrow {
	color: var(--red-400);
	margin-bottom: var(--space-4);
}

.bc-hero__eyebrow a {
	color: inherit;
	border-bottom: 0;
}

.bc-hero__eyebrow a:hover {
	color: var(--white);
	border-bottom: 0;
}

.bc-hero__title {
	font: var(--type-hero);
	letter-spacing: var(--tracking-display);
	font-size: clamp(40px, 5.4vw, var(--text-5xl));
	text-transform: uppercase;
	color: var(--white);
	margin: 0;
	max-width: 820px;
}

.bc-hero__title a {
	color: inherit;
	border-bottom: 0;
	transition: var(--transition-control);
}

.bc-hero__title a:hover {
	color: var(--red-400);
	border-bottom: 0;
}

.bc-hero__excerpt {
	font: var(--type-body);
	color: rgba(255, 255, 255, 0.72);
	max-width: var(--container-text);
	margin: var(--space-5) 0 0;
}

.bc-hero__inner--split .bc-hero__excerpt {
	max-width: 520px;
	margin: var(--space-5) 0 var(--space-6);
}

.bc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.bc-hero__media {
	border: var(--border-width) solid var(--border-inverse);
	border-radius: var(--radius-lg);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
}

.bc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bc-hero__media--empty {
	display: grid;
	place-items: center;
	font-family: var(--font-heading);
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
	padding: var(--space-5);
}

/* Hero na pojedinačnoj vesti — niže dno, jer slika ulazi u njega */
.bc-hero--article .bc-hero__inner {
	padding: var(--section-y-tight) var(--gutter) 80px;
}

.bc-hero--article .bc-hero__title {
	font-size: clamp(36px, 4.8vw, var(--text-4xl));
	line-height: 1.04;
	max-width: 900px;
}

.bc-hero--article .bc-hero__excerpt {
	font-size: 19px;
	line-height: 1.5;
}

.bc-hero__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	border-bottom: 0;
	margin-bottom: var(--space-6);
}

.bc-hero__back:hover {
	color: var(--white);
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Sekcije
   -------------------------------------------------------------------------- */

.bc-section {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--section-y) var(--gutter);
}

.bc-section--tight {
	padding-block: var(--section-y-tight);
}

.bc-band {
	background: var(--surface-subtle);
	border-bottom: var(--border-width) solid var(--border-subtle);
}

.bc-band--top {
	border-bottom: 0;
	border-top: var(--border-width) solid var(--border-subtle);
}

.bc-band__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--section-y-tight) var(--gutter);
}

.bc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

.bc-grid--4 {
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

.bc-empty {
	padding: var(--space-5);
	border: var(--border-width) dashed var(--border-subtle);
	border-radius: var(--radius-lg);
	font: var(--type-small);
	color: var(--text-muted);
}

.bc-prose > * + * {
	margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   6. Paginacija
   -------------------------------------------------------------------------- */

.bc-pagination {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: var(--border-width) solid var(--border-subtle);
}

.bc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
}

.bc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-3);
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-md);
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label);
	color: var(--text-muted);
	text-decoration: none;
	transition: var(--transition-control);
}

.bc-pagination a.page-numbers:hover {
	border-color: var(--ink-900);
	color: var(--text-strong);
	background: var(--ink-050);
}

.bc-pagination .page-numbers.current {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--white);
}

.bc-pagination .page-numbers.dots {
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   7. Pojedinačna vest
   -------------------------------------------------------------------------- */

.bc-article-media {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bc-article-media img,
.bc-article-media__empty {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-lg);
	margin-top: -40px;
	position: relative;
	z-index: 1;
}

.bc-article-media__empty {
	display: grid;
	place-items: center;
	background: var(--ink-100);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
}

.bc-article-layout {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--section-y-tight) var(--gutter) var(--section-y);
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: var(--space-8);
	align-items: start;
}

.bc-article {
	max-width: var(--container-text);
}

.bc-article > * + * {
	margin-top: var(--space-5);
}

.bc-article h2 {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: 22px;
	line-height: 1.2;
	color: var(--text-strong);
	margin: var(--space-6) 0 0;
}

.bc-article h3 {
	font: var(--type-h3);
	margin: var(--space-5) 0 0;
}

.bc-article p {
	margin: 0;
	text-wrap: pretty;
}

.bc-article ul,
.bc-article ol {
	padding-left: 22px;
	list-style: disc;
}

.bc-article ol {
	list-style: decimal;
}

.bc-article li + li {
	margin-top: var(--space-2);
}

.bc-article img,
.bc-article figure {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-inline: 0;
}

.bc-article blockquote {
	margin: var(--space-6) 0;
	padding-left: var(--space-5);
	border-left: var(--border-width-strong) solid var(--brand);
	font-size: 19px;
	color: var(--text-strong);
}

/* Tabela rezultata — stil iz Vest.dc.html */
.bc-article table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	font-size: var(--text-sm);
	line-height: 1.4;
}

.bc-article thead th {
	background: var(--surface-subtle);
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	text-align: left;
	padding: var(--space-3) var(--space-4);
	border-bottom: var(--border-width) solid var(--border-subtle);
}

.bc-article tbody td {
	padding: 14px var(--space-4);
	border-bottom: var(--border-width) solid var(--border-subtle);
}

.bc-article tbody tr:last-child td {
	border-bottom: 0;
}

.bc-article tbody td:first-child {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	color: var(--text-strong);
}

/* Bočna kolona sa deljenjem */
.bc-share {
	display: grid;
	gap: var(--space-4);
	position: sticky;
	top: 108px;
}

.bc-share__list {
	display: grid;
	gap: var(--space-2);
}

.bc-share__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) 14px;
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--text-strong);
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	width: 100%;
	transition: var(--transition-control);
}

.bc-share__link:hover {
	border-color: var(--border-strong);
	background: var(--ink-050);
	color: var(--text-strong);
}

/* Prethodna / sledeća vest */
.bc-adjacent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

.bc-adjacent__link {
	display: grid;
	gap: 6px;
	padding: var(--space-5);
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	text-decoration: none;
	transition: var(--transition-control);
}

.bc-adjacent__link:hover {
	border-color: var(--border-strong);
}

.bc-adjacent__link--next {
	text-align: right;
}

.bc-adjacent__label {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.bc-adjacent__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: 18px;
	line-height: 1.2;
	color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   8. O nama — monografija
   -------------------------------------------------------------------------- */

.bc-mono {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--space-8);
	align-items: start;
}

.bc-mono__cover {
	position: relative;
	display: grid;
	background: var(--surface-inverse);
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	text-decoration: none;
	border-bottom: 0;
}

.bc-mono__cover:hover {
	border-bottom: 0;
}

.bc-mono__texture {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 0.14;
	pointer-events: none;
}

.bc-mono__cover-inner {
	position: relative;
	padding: var(--space-6);
	display: grid;
	gap: var(--space-4);
	align-content: start;
	justify-items: center;
	text-align: center;
}

.bc-mono__cover-inner img {
	height: 88px;
	width: auto;
}

.bc-mono__club {
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.6;
}

.bc-mono__word {
	font-family: var(--font-display);
	font-weight: var(--weight-black);
	font-size: 34px;
	line-height: 1.05;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--white);
}

.bc-mono__years {
	font-family: var(--font-heading);
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--red-400);
}

.bc-mono__place {
	font-size: var(--text-xs);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

.bc-mono__body {
	display: grid;
	gap: var(--space-5);
	max-width: var(--container-text);
}

.bc-mono__actions {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	flex-wrap: wrap;
}

.bc-mono__note {
	font-size: 14px;
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   9. Kontakt
   -------------------------------------------------------------------------- */

.bc-contact {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--space-8);
	align-items: start;
}

.bc-contact__rows {
	display: grid;
	border-top: var(--border-width) solid var(--border-subtle);
}

.bc-contact__row {
	display: grid;
	grid-template-columns: 24px 150px 1fr;
	gap: 20px;
	align-items: center;
	padding: 20px 0;
	border-bottom: var(--border-width) solid var(--border-subtle);
}

.bc-contact__row--top {
	align-items: start;
}

.bc-contact__icon {
	color: var(--brand);
	width: 20px;
	height: 20px;
}

.bc-contact__label {
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.bc-contact__value {
	font-size: var(--text-md);
	line-height: 1.5;
	color: var(--text-strong);
}

.bc-contact__value a {
	color: var(--text-strong);
	text-decoration: none;
	border-bottom: var(--border-width) solid var(--border-subtle);
	justify-self: start;
}

.bc-contact__value a:hover {
	color: var(--brand);
	border-color: var(--brand);
}

.bc-contact__stack {
	display: grid;
	gap: var(--space-2);
	justify-items: start;
}

.bc-social {
	display: grid;
	gap: var(--space-4);
}

.bc-social__link {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 20px;
	align-items: center;
	padding: var(--space-4);
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	text-decoration: none;
	transition: box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.bc-social__link:hover {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-md);
}

.bc-social__mark {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	background: var(--ink-800);
	border-radius: var(--radius-md);
	color: var(--white);
}

.bc-social__text {
	display: grid;
	gap: 2px;
}

.bc-social__name {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-md);
	color: var(--text-strong);
}

.bc-social__handle {
	font-size: 14px;
	color: var(--text-muted);
}

.bc-social__out {
	color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   10. Kalendar
   -------------------------------------------------------------------------- */

.bc-cal {
	display: grid;
	gap: var(--space-6);
}

.bc-cal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: var(--border-width) solid var(--border-subtle);
}

.bc-cal__nav {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.bc-cal__month {
	font: var(--type-h2);
	margin: 0;
	color: var(--text-strong);
	min-width: 260px;
}

.bc-cal__grid {
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.bc-cal__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: var(--surface-subtle);
	border-bottom: var(--border-width) solid var(--border-subtle);
}

.bc-cal__weekday {
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.bc-cal__cells {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.bc-cal__cell {
	min-height: 132px;
	padding: 10px;
	border-right: var(--border-width) solid var(--border-subtle);
	border-bottom: var(--border-width) solid var(--border-subtle);
	display: grid;
	gap: 6px;
	align-content: start;
	background: var(--surface-card);
}

.bc-cal__cell--muted {
	background: var(--surface-subtle);
}

.bc-cal__cell:nth-child(7n) {
	border-right: 0;
}

.bc-cal__daynum {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bc-cal__daynum span:first-child {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: 14px;
	color: var(--text-strong);
}

.bc-cal__cell--muted .bc-cal__daynum span:first-child {
	color: var(--ink-400);
}

.bc-cal__today {
	font-family: var(--font-heading);
	font-size: 10px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--brand);
}

.bc-cal__event {
	appearance: none;
	text-align: left;
	cursor: pointer;
	border: var(--border-width) solid var(--border-subtle);
	border-left: var(--border-width-strong) solid var(--brand);
	border-radius: var(--radius-sm);
	background: var(--surface-card);
	padding: 6px var(--space-2);
	display: grid;
	gap: 2px;
	width: 100%;
	transition: box-shadow var(--duration-base) var(--ease-standard);
}

.bc-cal__event:hover {
	box-shadow: var(--shadow-md);
}

.bc-cal__event-title {
	font-family: var(--font-heading);
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	line-height: 1.2;
	color: var(--text-strong);
}

.bc-cal__event-time {
	font-size: 11px;
	color: var(--text-muted);
}

.bc-cal__list {
	display: grid;
	gap: var(--space-4);
}

.bc-cal__row {
	appearance: none;
	cursor: pointer;
	text-align: left;
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: var(--space-5);
	align-items: center;
	padding: var(--space-4);
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	width: 100%;
	transition: box-shadow var(--duration-base) var(--ease-standard);
}

.bc-cal__row:hover {
	box-shadow: var(--shadow-md);
}

.bc-cal__row-date {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: 14px;
	color: var(--text-strong);
}

.bc-cal__row-main {
	display: grid;
	gap: var(--space-1);
}

.bc-cal__row-title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: 18px;
	color: var(--text-strong);
}

.bc-cal__row-meta {
	font-size: 14px;
	color: var(--text-muted);
}

.bc-cal__row-cat {
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--brand);
}

.bc-detail {
	display: grid;
	gap: var(--space-4);
}

.bc-detail__rows {
	display: grid;
	gap: var(--space-2);
	font: var(--type-small);
}

.bc-detail__row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.bc-detail__key {
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	min-width: 70px;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.bc-footer {
	background: var(--surface-inverse);
	color: rgba(255, 255, 255, 0.72);
	position: relative;
	overflow: hidden;
}

.bc-footer__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--space-6) var(--gutter) var(--space-5);
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.bc-footer__logo,
.bc-footer__logo img {
	height: 40px;
	width: auto;
}

.bc-footer__text {
	font-size: 14px;
	line-height: 1.5;
	max-width: 420px;
}

.bc-footer__meta {
	max-width: var(--container);
	margin-inline: auto;
	padding: 0 var(--gutter) var(--space-5);
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.bc-footer__sep {
	margin-inline: var(--space-2);
	opacity: 0.5;
}

.bc-footer__login {
	color: rgba(255, 255, 255, 0.45);
	text-decoration: none;
	border-bottom: var(--border-width) solid transparent;
	transition: var(--transition-control);
}

.bc-footer__login:hover,
.bc-footer__login:focus-visible {
	color: var(--white);
	border-bottom-color: rgba(255, 255, 255, 0.45);
}

.bc-footer__texture {
	display: block;
	width: 100%;
	max-height: 96px;
	object-fit: cover;
	object-position: bottom;
	opacity: 0.14;
	margin-bottom: -2px;
	pointer-events: none;
	user-select: none;
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	:root {
		--section-y: 72px;
	}

	.bc-hero__inner--split {
		gap: var(--space-7);
	}

	.bc-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bc-grid--4 {
		grid-template-columns: repeat(3, 1fr);
	}

	.bc-article-layout {
		grid-template-columns: 1fr;
	}

	.bc-share {
		position: static;
		max-width: 360px;
	}

	.bc-mono {
		grid-template-columns: 220px 1fr;
		gap: var(--space-6);
	}

	.bc-contact {
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}
}

@media (max-width: 860px) {
	.bc-nav-toggle {
		display: grid;
	}

	.bc-header__inner {
		height: 72px;
	}

	.bc-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--surface-page);
		border-bottom: var(--border-width) solid var(--border-subtle);
		box-shadow: var(--shadow-md);
		display: none;
	}

	.bc-nav.is-open {
		display: block;
	}

	.bc-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-2) var(--gutter) var(--space-5);
	}

	.bc-nav li + li {
		border-top: var(--border-width) solid var(--border-subtle);
	}

	.bc-nav a {
		display: block;
		padding: var(--space-4) 0;
		border-bottom: 0;
		border-left: var(--border-width-strong) solid transparent;
	}

	.bc-nav .current-menu-item > a,
	.bc-nav .current_page_item > a,
	.bc-nav .bc-nav__item--current > a {
		border-bottom: 0;
		border-left-color: var(--brand);
		padding-left: var(--space-3);
	}

	.bc-brand__logo,
	.bc-brand__logo img {
		height: 44px;
	}

	.bc-brand__name {
		font-size: var(--text-md);
	}

	.bc-hero__inner--split {
		grid-template-columns: 1fr;
	}

	.bc-hero__media {
		order: -1;
		aspect-ratio: 16 / 10;
	}

	.bc-section-head,
	.bc-cal__bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.bc-mono {
		grid-template-columns: 1fr;
	}

	.bc-mono__cover {
		max-width: 300px;
	}

	.bc-cal__month {
		min-width: 0;
		font-size: var(--text-xl);
	}

	.bc-cal__cell {
		min-height: 92px;
		padding: 6px;
	}

	.bc-cal__row {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}

	.bc-adjacent {
		grid-template-columns: 1fr;
	}

	.bc-adjacent__link--next {
		text-align: left;
	}
}

@media (max-width: 560px) {
	:root {
		--section-y: 56px;
		--section-y-tight: 40px;
		--gutter: 20px;
	}

	.bc-grid,
	.bc-grid--4 {
		grid-template-columns: 1fr;
	}

	.bc-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.bc-hero__actions .bc-btn {
		flex: 1 1 auto;
	}

	.bc-contact__row {
		grid-template-columns: 20px 1fr;
		gap: var(--space-3);
	}

	.bc-contact__label {
		grid-column: 2;
	}

	.bc-contact__value {
		grid-column: 2;
	}

	.bc-cal__weekday {
		padding: var(--space-2);
		font-size: 9px;
		letter-spacing: 0.08em;
	}

	.bc-cal__cell {
		min-height: 68px;
	}

	.bc-cal__event-time {
		display: none;
	}

	.bc-article table {
		display: block;
		overflow-x: auto;
	}
}