/* ════════════════════════════════════════════════════════════════════════
   PSB Brands — [psb_brands]
   Brand cards: logo area + name + description, styled like the catalog
   product cards (.psb-catalog__card) without the footer/CTA. Originally
   modelled on the hand-built "Naši partneri" page (megasystems.ba).

   Theme token bridge — PSB semantic colors resolve through a chain,
   first defined wins:
     1. --psb-theme-*            generic hook — ANY theme can define these
     2. --jt-*                   Jetting theme tokens (jetting.ba)
     3. --e-global-color-*       Elementor global colors (megasystems.ba …)
     4. built-in default         every other site stays unchanged
   Selector is :root, body — Elementor defines --e-global-color-* on the
   body-scoped .elementor-kit-* selector, so the chain must also resolve
   at body scope to pick up Elementor global colors.
   ════════════════════════════════════════════════════════════════════════ */
:root, body {
	--psb-primary:        var(--psb-theme-primary,        var(--jt-gold, var(--e-global-color-primary,   #2E6DA4)));
	--psb-secondary:      var(--psb-theme-secondary,      var(--jt-muted, var(--e-global-color-secondary, #6b7280)));
	--psb-text:           var(--psb-theme-text,           var(--jt-text, var(--e-global-color-text, #1f2937)));
	--psb-bg:             var(--psb-theme-bg,             var(--jt-bg, #ffffff));
	--psb-surface:        var(--psb-theme-surface,        var(--jt-card, #ffffff));
	--psb-surface-alt:    var(--psb-theme-surface-alt,    var(--jt-bg, #f5f6f7));
	--psb-border:         var(--psb-theme-border,         var(--jt-border, #e5e7eb));
}

/* ── Grid ───────────────────────────────────────────────────────────────── */

.psb-brands {
	--psb-brands-logo-height: 180px;
	--psb-brands-gap: 24px;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--psb-brands-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	color: var(--psb-text);
}

/* Desktop column count, set by the shortcode's "columns" attribute
   (default 2). Tablet caps at 2 columns, mobile shows one brand per row —
   see the responsive block at the end of this file. */
.psb-brands--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.psb-brands--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.psb-brands--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.psb-brands--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.psb-brands--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.psb-brands--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ── Card (mirrors .psb-catalog__card) ──────────────────────────────────── */

.psb-brands__card {
	border: 1px solid var(--psb-border);
	border-top: 0;
	border-radius: 0;
	background: var(--psb-surface);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s;
}

.psb-brands__card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* ── Logo area (the catalog card's image slot) ──────────────────────────── */

/* Fixed height (not an aspect ratio): logos keep a predictable, uniform box
   whatever the card width is, and wide cards never grow a huge empty area.
   Override per site with --psb-brands-logo-height. */
.psb-brands__card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--psb-brands-logo-height);
	padding: 18px;
	background: var(--psb-surface-alt);
	box-sizing: border-box;
	overflow: hidden;
}

/* No logo (yet): the area stays in place — transparent, so the row keeps its
   rhythm without showing an empty grey box. */
.psb-brands__card-image--empty {
	background: transparent;
}

.psb-brands__img,
.psb-brands__card-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: 0;
}

/* ── Body: name + description ───────────────────────────────────────────── */

.psb-brands__card-body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 6px;
}

.psb-brands__card-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
	color: var(--psb-text);
	overflow-wrap: break-word;
}

.psb-brands__card-title a,
.psb-brands__card-title a:visited {
	color: var(--psb-text);
	text-decoration: none;
}

.psb-brands__card-title a:hover {
	color: var(--psb-primary);
	text-decoration: underline;
}

.psb-brands__card-desc {
	font-size: 13px;
	color: var(--psb-secondary);
	margin: 0;
	line-height: 1.45;
	flex: 1;
	overflow-wrap: break-word;
}

/* Term descriptions may carry paragraphs / lists (desc_words="0"). */
.psb-brands__card-desc > :first-child {
	margin-top: 0;
}

.psb-brands__card-desc > :last-child {
	margin-bottom: 0;
}

.psb-brands__card-desc p {
	margin: 0 0 8px;
}

.psb-brands__card-desc ul,
.psb-brands__card-desc ol {
	margin: 0 0 8px;
	padding-left: 18px;
}

/* ── Elementor / theme style isolation ───────────────────────────────────
   Themes (and Elementor widgets) style bare anchors globally; keep the card
   links clean in normal/visited state, exactly as catalog.css does. */

.psb-brands a,
.psb-brands a:hover,
.psb-brands a:visited {
	border: none;
	box-shadow: none;
}

.psb-brands .psb-brands__card-title a,
.psb-brands .psb-brands__card-title a:visited {
	color: var(--psb-text);
	text-decoration: none;
}

.psb-brands .psb-brands__card-title a:hover {
	color: var(--psb-primary);
	text-decoration: underline;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Tablet (≤1024px): never more than 2 brands per row, whatever "columns" says. */
@media (max-width: 1024px) {
	.psb-brands--cols-3,
	.psb-brands--cols-4,
	.psb-brands--cols-5,
	.psb-brands--cols-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile (≤767px): one brand per row. */
@media (max-width: 767px) {
	.psb-brands {
		--psb-brands-logo-height: 140px;
		--psb-brands-gap: 16px;
	}

	.psb-brands,
	.psb-brands--cols-1,
	.psb-brands--cols-2,
	.psb-brands--cols-3,
	.psb-brands--cols-4,
	.psb-brands--cols-5,
	.psb-brands--cols-6 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.psb-brands__card-image {
		padding: 14px;
	}

	.psb-brands__card-body {
		padding: 12px;
	}
}