/**
 * Σελίδα «Μάρκες» (orthofocus-brands-archive-v1) σε μωβ φόντο σελίδας.
 * Markup: page-templates/brands.php · Λογική: inc/brands.php · JS: assets/js/brands.js
 *
 * Hero στο μωβ (ανοιχτά κείμενα), λευκό πλαίσιο αριθμού, λευκές κάρτες με τα χρώματα του mockup.
 * Mobile-first: κάρτες 1 → 2 (521px) → 3 (901px) → 4 (1181px)· hero και εργαλεία σε 2 στήλες από 1181px.
 */

.of-brands-page {
	--bp-padding-top: 24px;
	--bp-padding-bottom: 72px;
	--bp-columns: minmax(0, 1fr);
	--bp-radius: 18px;
	--bp-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary-dark) 6%, transparent);

	line-height: normal;
}

@media (min-width: 521px) {
	.of-brands-page {
		--bp-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.of-brands-page {
		--bp-padding-top: 34px;
		--bp-padding-bottom: 88px;
	}
}

@media (min-width: 901px) {
	.of-brands-page {
		--bp-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1181px) {
	.of-brands-page {
		--bp-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Το Astra μηδενίζει το padding του #primary: η απόσταση μπαίνει στο container */
.of-brands-page .of-brands-page__page {
	padding-top: var(--bp-padding-top);
	padding-bottom: var(--bp-padding-bottom);
}

.of-brands-page .of-breadcrumbs {
	margin-bottom: 24px;
}

/* JS: κρυμμένα στοιχεία (τα display: flex/grid παρακάτω θα υπερίσχυαν του [hidden]) */
.of-brands-page [hidden] {
	display: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.of-brands-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: end;
	margin-bottom: 26px;
	padding-bottom: 26px;
	border-bottom: var(--border-width) solid var(--color-canvas-line);
}

@media (min-width: 1181px) {
	.of-brands-hero {
		grid-template-columns: minmax(0, 1fr) 290px;
	}
}

.of-brands-hero__eyebrow {
	margin: 0 0 10px;
	color: var(--color-accent);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.of-brands-page .of-brands-hero__title {
	margin: 0 0 12px;
	color: var(--color-on-canvas);
	font-size: clamp(38px, 4vw, 58px);
	line-height: 1.02;
	letter-spacing: -0.045em;
}

.of-brands-hero__text {
	max-width: 780px;
	margin: 0;
	color: var(--color-on-canvas-muted);
	font-size: 15px;
	line-height: 1.75;
}

.of-brands-hero__stat {
	padding: 22px 24px;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--bp-radius);
	background-color: var(--color-surface);
	box-shadow: var(--bp-shadow);
}

.of-brands-hero__stat-label {
	display: block;
	margin-bottom: 10px;
	color: var(--color-text-muted);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.of-brands-hero__stat-number {
	display: block;
	color: var(--color-primary);
	font-size: 34px;
	line-height: 1;
	letter-spacing: -0.04em;
}

@media (min-width: 521px) {
	.of-brands-hero__stat-number {
		font-size: 42px;
	}
}

.of-brands-hero__stat-text {
	display: block;
	margin-top: 8px;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.6;
}

/* ==========================================================================
   Αναζήτηση + αλφάβητο
   ========================================================================== */

.of-brands-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	margin-bottom: 28px;
}

@media (min-width: 1181px) {
	.of-brands-toolbar {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.of-brands-toolbar__search {
	display: flex;
	align-items: center;
	overflow: hidden;
	margin: 0;
	border: var(--border-width) solid var(--color-border);
	border-radius: 12px;
	background-color: var(--color-surface);
}

.of-brands-toolbar__search:focus-within {
	outline: var(--focus-outline);
	outline-offset: var(--focus-offset);
}

.of-brands-page .of-brands-toolbar__search input[type="search"] {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: var(--color-text);
	font-size: var(--fs-body);
}

.of-brands-toolbar__search-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	color: var(--color-primary);
}

.of-brands-toolbar__letters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (min-width: 1181px) {
	.of-brands-toolbar__letters {
		justify-content: flex-end;
	}
}

.of-brands-page button.of-brands-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	margin: 0;
	padding: 0 10px;
	border: var(--border-width) solid var(--color-border);
	border-radius: 999px;
	background-color: var(--color-surface);
	color: var(--color-primary);
	font-size: 12px;
	font-weight: var(--fw-bold);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transition-default), color var(--transition-default), border-color var(--transition-default);
}

/* Ενεργό: πορτοκαλί, ώστε να ξεχωρίζει πάνω στο μωβ φόντο */
.of-brands-page button.of-brands-letter:hover,
.of-brands-page button.of-brands-letter:focus-visible,
.of-brands-page button.of-brands-letter.is-active {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.of-brands-page button.of-brands-letter.is-active {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-on-accent);
}

.of-brands-page button.of-brands-letter:focus-visible {
	outline: var(--focus-outline);
	outline-offset: var(--focus-offset);
}

/* ==========================================================================
   Κάρτες μαρκών
   ========================================================================== */

.of-brands-grid {
	display: grid;
	grid-template-columns: var(--bp-columns);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.of-brand-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 22px;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--bp-radius);
	background-color: var(--color-surface);
	color: var(--color-text);
	transition: transform var(--transition-default), box-shadow var(--transition-default), border-color var(--transition-default);
}

@media (min-width: 521px) {
	.of-brand-card {
		min-height: 220px;
	}
}

.of-brand-card:hover,
.of-brand-card:focus-within {
	border-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
	box-shadow: var(--bp-shadow);
	transform: translateY(-4px);
}

.of-brand-card__logo {
	display: grid;
	place-items: center;
	min-height: 110px;
	padding: 18px;
	border-radius: 14px;
	background: linear-gradient(145deg, var(--color-surface), var(--color-purple-soft));
	color: var(--color-primary);
	text-align: center;
	text-decoration: none;
}

@media (min-width: 521px) {
	.of-brand-card__logo {
		min-height: 120px;
	}
}

/* Ίδιο «κουτί» για όλα τα λογότυπα (διαφορετικές αναλογίες/μεγέθη αρχείων), χωρίς παραμόρφωση.
   Λογότυπα με λευκό φόντο «ενώνονται» με το απαλό φόντο (όπως στην αρχική). */
.of-brands-page .of-brand-card__logo img {
	display: block;
	width: min(100%, 200px);
	height: 84px;
	max-width: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.of-brand-card__logo-text {
	font-size: 30px;
	font-weight: var(--fw-bold);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.of-brands-page .of-brand-card__name {
	margin: 16px 0 6px;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.of-brand-card__name a,
.of-brand-card__name a:visited {
	color: var(--color-primary);
	text-decoration: none;
}

.of-brand-card__name a:hover,
.of-brand-card__name a:focus {
	color: var(--color-accent-text);
	text-decoration: underline;
}

.of-brand-card__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.65;
}

.of-brand-card__cta,
.of-brand-card__cta:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 42px;
	margin-top: 16px;
	padding: 0 14px;
	border-radius: 10px;
	background-color: var(--color-purple-soft);
	color: var(--color-primary);
	font-size: 12px;
	font-weight: var(--fw-bold);
	text-decoration: none;
	transition: background-color var(--transition-default), color var(--transition-default);
}

.of-brand-card:hover .of-brand-card__cta,
.of-brand-card__cta:focus {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.of-brand-card__cta:focus-visible {
	outline: var(--focus-outline);
	outline-offset: var(--focus-offset);
}

/* ==========================================================================
   Καμία μάρκα / κανένα αποτέλεσμα · σημείωση
   ========================================================================== */

.of-brands-empty {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 40px 24px;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--bp-radius);
	background-color: var(--color-surface);
	text-align: center;
}

.of-brands-page .of-brands-empty__title {
	margin: 0;
	color: var(--color-primary);
	font-size: var(--fs-h5);
}

.of-brands-empty__text {
	margin: 0 0 8px;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

.of-brands-note {
	margin: 30px 0 0;
	padding: 18px 20px;
	border-radius: 16px;
	background-color: var(--color-purple-soft);
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.7;
}

.of-brands-note strong {
	color: var(--color-primary);
}