/*
 * Service page «مطبوعات»: the print catalogue (pages/service/catalog.php,
 * revision 14). Sections of product cards — the picture (4:3), the name, a
 * line and «اطلب تسعيرة» on WhatsApp — with the section chips above
 * (assets/js/pages/service/catalog.js; the same chips as the clients page).
 */

.gb-catalog {
	padding-block: var(--gb-space-2xl);
	background-color: var(--gb-bg);
	color: var(--gb-text);
}

.gb-catalog__head {
	margin-block-end: var(--gb-space-l);
}

/* How a quote works, under the opening paragraph. */
.gb-catalog__how {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	max-inline-size: 46rem;
	margin: var(--gb-space-s) 0 0;
	color: var(--gb-text-muted);
	font-size: var(--gb-step--1);
	line-height: 1.7;
}

.gb-catalog__how-icon {
	--gb-icon-size: 1.25rem;
	--gb-icon-stroke: 2;

	flex: none;
	margin-block-start: 0.15rem;
	color: #1da851;
}

/* ---------- The section chips ---------- */

.gb-catalog__filter {
	position: sticky;
	z-index: 2;
	/* The site header scrolls away (it is not fixed): the chips stay just under the top edge. */
	inset-block-start: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gb-space-2xs);
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-inline: auto;
	margin-block-end: var(--gb-space-l);
	padding: 0.4rem;
	border: 1px solid var(--gb-border);
	border-radius: 1.6rem;
	background-color: rgb(255 255 255 / 0.88);
	box-shadow: 0 14px 30px -22px rgb(12 35 66 / 0.55);
	backdrop-filter: blur(10px);
}

.gb-catalog__filter[hidden] {
	display: none;
}

.gb-catalog__chip {
	min-block-size: 2.75rem;
	padding-inline: var(--gb-space-s);
	border: 1.5px solid transparent;
	border-radius: var(--gb-radius-pill);
	background-color: transparent;
	color: var(--gb-text);
	font-family: var(--gb-font-sans);
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	cursor: pointer;
	transition: border-color var(--gb-duration-fast) linear, background-color var(--gb-duration-fast) linear, color var(--gb-duration-fast) linear;
}

.gb-catalog__chip:hover {
	border-color: var(--gb-color-logo-navy);
}

.gb-catalog__chip[aria-pressed="true"] {
	border-color: var(--gb-color-logo-navy);
	background-color: var(--gb-color-logo-navy);
	color: var(--gb-scene-text);
}

.gb-catalog__chip:focus-visible {
	outline: 3px solid var(--gb-focus-halo);
	outline-offset: 2px;
}

/* ---------- A section ---------- */

.gb-catalog__section + .gb-catalog__section {
	margin-block-start: var(--gb-space-xl);
}

.gb-catalog__section[hidden] {
	display: none;
}

.gb-catalog__section-title {
	display: flex;
	align-items: center;
	gap: var(--gb-space-xs);
	margin: 0 0 var(--gb-space-m);
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-2);
	font-weight: var(--gb-weight-bold);
	line-height: 1.3;
	color: var(--gb-color-logo-navy);
}

.gb-catalog__section-title::after {
	content: "";
	flex: 1 1 auto;
	min-inline-size: 2rem;
	block-size: 1px;
	background: linear-gradient(to left, var(--gb-border), transparent);
}

[dir="ltr"] .gb-catalog__section-title::after {
	background: linear-gradient(to right, var(--gb-border), transparent);
}

.gb-catalog__section-mark {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.4rem;
	aspect-ratio: 1;
	border: 1px solid var(--gb-color-turquoise-a35);
	border-radius: 50%;
	background-color: var(--gb-color-turquoise-a10);
	color: var(--gb-color-logo-navy);
	font-family: var(--gb-font-sans);
	font-size: var(--gb-step-0);
	font-variant-numeric: tabular-nums;
}

/* ---------- The products ---------- */

.gb-catalog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
	gap: var(--gb-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-print__card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	overflow: hidden;
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-surface);
	box-shadow: 0 18px 36px -30px rgb(12 35 66 / 0.6);
	transition: translate var(--gb-duration-base) var(--gb-ease-out), box-shadow var(--gb-duration-base) linear, border-color var(--gb-duration-base) linear;
}

.gb-print__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--gb-color-neutral-50);
}

.gb-print__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	transition: scale var(--gb-duration-slow) var(--gb-ease-out);
}

.gb-print__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--gb-space-2xs);
	padding: var(--gb-space-s) var(--gb-space-s) var(--gb-space-m);
}

.gb-print__title {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-1);
	font-weight: var(--gb-weight-bold);
	line-height: 1.35;
	color: var(--gb-color-logo-navy);
}

.gb-print__text {
	margin: 0 0 var(--gb-space-xs);
	color: var(--gb-text-muted);
	font-size: var(--gb-step--1);
	line-height: 1.7;
}

/* «اطلب تسعيرة»: WhatsApp's green (darkened for contrast, as in the contact dock). */
.gb-print__quote {
	--gb-focus: var(--gb-focus-halo);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	align-self: flex-start;
	min-block-size: 2.75rem;
	margin-block-start: auto;
	padding-inline: 1.1rem 1.25rem;
	border-radius: var(--gb-radius-pill);
	background-color: #1da851;
	color: #fff;
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	text-decoration: none;
	box-shadow: 0 10px 20px -14px rgb(29 168 81 / 0.9);
	transition: background-color var(--gb-duration-fast) linear, translate var(--gb-duration-base) var(--gb-ease-out);
}

.gb-print__quote:hover {
	background-color: #178c43;
}

.gb-print__quote:focus-visible {
	outline: 3px solid var(--gb-focus-halo);
	outline-offset: 2px;
}

.gb-print__quote-icon {
	--gb-icon-size: 1.15rem;
	--gb-icon-stroke: 2;
}

@media (hover: hover) {
	.gb-print__card:hover {
		border-color: var(--gb-color-turquoise-a35);
		box-shadow: 0 24px 44px -28px rgb(12 35 66 / 0.6);
		translate: 0 -3px;
	}

	.gb-print__card:hover .gb-print__img {
		scale: 1.04;
	}
}

.gb-catalog__note {
	margin: var(--gb-space-xl) auto 0;
	color: var(--gb-text-muted);
	font-size: var(--gb-step--1);
	text-align: center;
}

/* A section shown by a chip arrives softly. */
@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]):not([data-gb-motion="off"]) .gb-catalog__section.is-shown {
		animation: gb-catalog-in 0.45s var(--gb-ease-out) both;
	}
}

@keyframes gb-catalog-in {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gb-print__card,
	.gb-print__img,
	.gb-print__quote {
		transition: none;
	}

	.gb-print__card:hover {
		translate: none;
	}

	.gb-print__card:hover .gb-print__img {
		scale: none;
	}
}

/* Phones: the chips scroll sideways in one row instead of wrapping into a tall block. */
@media (max-width: 47.99rem) {
	.gb-catalog__filter {
		flex-wrap: nowrap;
		justify-content: flex-start;
		inline-size: auto;
		overflow-x: auto;
		scrollbar-width: none;
		overscroll-behavior-inline: contain;
	}

	.gb-catalog__filter::-webkit-scrollbar {
		display: none;
	}

	.gb-catalog__chip {
		flex: none;
	}
}

@media (forced-colors: active) {
	.gb-catalog__chip[aria-pressed="true"] {
		border: 2px solid Highlight;
	}

	.gb-print__quote {
		border: 2px solid ButtonText;
	}
}

@media print {
	.gb-catalog__filter,
	.gb-print__quote {
		display: none;
	}
}