/* ============================================================
   Instroi — CPT listings & taxonomies (/gallery/, /news/,
   /faq/, /discounts/, taxonomy-*). Card visuals come from
   cards.css (shared with the homepage); this file adds only
   what is listing-specific. Mobile-first.
   ============================================================
   1. Listing section wrapper
   2. Term filter chips
   3. Generic listing grid + article/акція card (.card-post)
   4. FAQ groups
   5. Pagination (paginate_links 'list')
   6. Nothing found
   ============================================================ */

/* 1. Listing section wrapper
   ------------------------------------------------------------ */
.listing {
	padding-block: clamp(28px, 4vw, 56px) var(--pad-section);
}

/* 2. Term filter chips (plain links — no JS)
   ------------------------------------------------------------ */
.term-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: clamp(24px, 4vw, 48px);
}

.term-filter__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	background: var(--c-gray-50);
	color: var(--c-dark);
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--radius-btn);
	transition: background var(--transition), color var(--transition);
}
.term-filter__link:hover {
	background: var(--c-gray-100);
	color: var(--c-dark);
}
.term-filter__link.is-active {
	background: var(--c-primary);
	color: var(--c-white);
}
.term-filter__link.is-active:hover { background: var(--c-primary-light); }

.term-filter__count {
	font-weight: 400;
	opacity: 0.7;
}

/* 3. Generic listing grid + .card-post (news / акції)
   ------------------------------------------------------------ */
.listing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
}

@media (min-width: 640px) {
	.listing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.listing-grid { grid-template-columns: repeat(3, 1fr); }
}

.card-post {
	display: flex;
	flex-direction: column;
	background: var(--c-white);
	border: 1px solid var(--c-gray-100);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}
.card-post:hover {
	box-shadow: 0 16px 40px rgba(31, 51, 70, 0.12);
	transform: translateY(-2px);
}

.card-post__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--c-gray-50);
	overflow: hidden;
}
.card-post__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.4s ease;
}
.card-post:hover .card-post__img { transform: scale(1.04); }

.card-post__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 10px;
	padding: clamp(16px, 2.5vw, 24px);
}

.card-post__date {
	font-size: var(--fs-small);
	color: var(--c-dark-muted);
}

/* Blog-post card meta row: category label + date (card-post.php) */
.card-post__meta {
	display: flex;
	align-items: baseline;
	gap: 6px 14px;
	flex-wrap: wrap;
}

.card-post__cat {
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--c-primary);
	text-decoration: none;
	transition: color var(--transition);
}
.card-post__cat:hover { color: var(--c-primary-light); }

.card-post__title {
	margin: 0;
	font-size: var(--fs-h4);
	line-height: 1.25;
}
.card-post__title a {
	color: var(--c-black);
	text-decoration: none;
	transition: color var(--transition);
}
.card-post__title a:hover { color: var(--c-primary); }

.card-post__excerpt {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--c-text);
}

.card-post__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--c-primary);
	text-decoration: none;
}
.card-post__more:hover { color: var(--c-primary-light); }
.card-post__more svg { transition: transform var(--transition); }
.card-post__more:hover svg { transform: translateX(4px); }

/* SEO description below the grid (archive-blog.php + taxonomy-*). content.css
   owns the .entry-content typography; here we tame the vertical rhythm so the
   grid's bottom padding and the description's top padding don't stack into a
   double --pad-section gap. A hairline marks the block boundary. */
.listing:has(+ .archive-desc) { padding-block-end: clamp(28px, 4vw, 56px); }

.archive-desc { border-top: 1px solid var(--c-gray-100); }
.archive-desc .entry-content { padding-block-start: clamp(28px, 4vw, 56px); }

/* 4. FAQ groups (page-faq: accordion per faqlist term)
   ------------------------------------------------------------ */
.faq-group + .faq-group { margin-top: clamp(40px, 6vw, 72px); }

.faq-group__title {
	margin-bottom: clamp(20px, 3vw, 32px);
	color: var(--c-black);
}

/* 5. Pagination — paginate_links( type=list )
   ------------------------------------------------------------ */
.c-pagination { margin-top: clamp(32px, 5vw, 56px); }

.c-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.c-pagination li { margin: 0; }

.c-pagination a.page-numbers,
.c-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	background: var(--c-gray-50);
	color: var(--c-dark);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--radius-btn);
	transition: background var(--transition), color var(--transition);
}
.c-pagination a.page-numbers:hover {
	background: var(--c-gray-100);
	color: var(--c-dark);
}
.c-pagination .page-numbers.current {
	background: var(--c-primary);
	color: var(--c-white);
}
.c-pagination .page-numbers.dots {
	background: transparent;
	font-weight: 400;
	color: var(--c-dark-muted);
}

/* 6. Nothing found
   ------------------------------------------------------------ */
.content-none {
	padding-block: clamp(32px, 5vw, 64px);
	text-align: center;
}
.content-none__text {
	margin-bottom: 24px;
	font-size: var(--fs-p2);
	color: var(--c-dark-muted);
}