/* ==========================================================================
   article.index.css — Article list / category sidebar (flat, clean, cool)
   Loaded by frontend/views/default/mall/article.index.html
   Scoped under .ai-wrap. v1 — cool blue accent, soft surfaces, generous air.
   Sibling of search.goods.css / search.store.css — same token language.
   ========================================================================== */

:root {
	/* Neutral surfaces (cool-leaning) */
	--ai-bg:            #f4f6fa;
	--ai-surface:       #ffffff;
	--ai-line:          #e6e9ef;
	--ai-line-strong:   #d3d8e2;

	/* Text */
	--ai-text-1:        #1a2233;
	--ai-text-2:        #4a5366;
	--ai-text-3:        #8a93a6;

	/* Cool accent — used for active states, link hover, focus rings */
	--ai-accent:        #28A271;
	--ai-accent-deep:   #1d5fc4;
	--ai-accent-soft:   #ecf8ed;

	/* Type scale */
	--ai-fs-xs:         12px;
	--ai-fs-sm:         13px;
	--ai-fs-base:       16px;
	--ai-fs-md:         15px;
	--ai-fs-lg:         16px;
	--ai-fs-xl:         18px;

	/* Rhythm */
	--ai-r-1:           4px;
	--ai-r-2:           8px;
	--ai-r-3:           12px;
	--ai-r-4:           16px;
	--ai-r-5:           20px;
	--ai-r-6:           24px;
	--ai-r-7:           32px;

	/* Radius */
	--ai-radius-sm:     4px;
	--ai-radius:        8px;
	--ai-radius-lg:     12px;

	--ai-ease:          cubic-bezier(0.2, 0, 0, 1);
}

/* --------------------------------------------------------------------------
   Local reset
   -------------------------------------------------------------------------- */
.ai-wrap,
.ai-wrap *,
.ai-wrap *::before,
.ai-wrap *::after { box-sizing: border-box; }

.ai-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
	font-size: var(--ai-fs-base);
	line-height: 1.55;
	color: var(--ai-text-1);
	background: var(--ai-bg);
	padding: var(--ai-r-6) 0;
	border-radius: var(--ai-radius);
}

.ai-wrap a { color: inherit; text-decoration: none; transition: color .15s var(--ai-ease); }
.ai-wrap a:hover { color: var(--ai-accent); }
.ai-wrap img { display: block; max-width: 100%; }
.ai-wrap button,
.ai-wrap input { font: inherit; color: inherit; }
.ai-wrap button { cursor: pointer; }
.ai-wrap ul,
.ai-wrap ol { list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   Two-column layout — sidebar + main
   The global #page-article .col-sub / .col-main width is set in main.css
   (231 / 1159). The id selector wins over .ai-wrap, so we use #page-article
   for the responsive overrides below.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Sidebar — category card
   -------------------------------------------------------------------------- */
.ai-side {
	background: var(--ai-surface);
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius);
	overflow: hidden;
}

.ai-side-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ai-r-2);
	padding: var(--ai-r-3) var(--ai-r-4);
	background: var(--ai-accent-soft);
	border-bottom: 1px solid var(--ai-line);
}

.ai-side-title {
	display: flex;
	align-items: center;
	gap: var(--ai-r-2);
	font-size: var(--ai-fs-md);
	font-weight: 600;
	color: var(--ai-text-1);
	letter-spacing: 0.2px;
}

.ai-side-title::before {
	content: "";
	width: 3px;
	height: 14px;
	background: var(--ai-accent);
	border-radius: 2px;
}

.ai-side-hint {
	font-size: var(--ai-fs-xs);
	color: var(--ai-text-3);
}

/* Category list (top level) */
.ai-cats {
	padding: var(--ai-r-2) 0;
}

.ai-cat {
	border-bottom: 1px solid var(--ai-line);
}
.ai-cat:last-child { border-bottom: 0; }

.ai-cat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ai-r-2);
	padding: 10px var(--ai-r-4);
	font-size: var(--ai-fs-md);
	color: var(--ai-text-1);
	cursor: pointer;
	user-select: none;
	transition: background .12s var(--ai-ease), color .12s var(--ai-ease);
}

.ai-cat-row a {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ai-text-1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ai-cat-row a:hover { color: var(--ai-accent); }

.ai-cat-row:hover { background: var(--ai-bg); }
.ai-cat-row:hover a { color: var(--ai-accent); }

.ai-cat-row.is-active {
	background: var(--ai-accent-soft);
	color: var(--ai-accent);
}
.ai-cat-row.is-active a { color: var(--ai-accent); font-weight: 500; }
.ai-cat-row.is-active .ai-cat-caret { color: var(--ai-accent); }

.ai-cat-caret {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	color: var(--ai-text-3);
	transition: transform .2s var(--ai-ease);
}
.ai-cat-row.is-open .ai-cat-caret { transform: rotate(180deg); }

/* Sub-category (children) */
.ai-sub {
	display: none;
	padding: 4px 0 var(--ai-r-2);
	background: var(--ai-bg);
}
.ai-cat.is-open .ai-sub { display: block; }

.ai-sub li { display: block; }

.ai-sub a {
	display: block;
	padding: 8px var(--ai-r-4) 8px var(--ai-r-6);
	font-size: var(--ai-fs-sm);
	color: var(--ai-text-2);
	border-left: 2px solid transparent;
	transition: color .12s var(--ai-ease), background .12s var(--ai-ease), border-color .12s var(--ai-ease);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ai-sub a::before {
	content: "·";
	margin-right: 6px;
	color: var(--ai-text-3);
}
.ai-sub a:hover {
	color: var(--ai-accent);
	background: var(--ai-surface);
}
.ai-sub a.is-active {
	color: var(--ai-accent);
	background: var(--ai-surface);
	border-left-color: var(--ai-accent);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Main column — header + list
   -------------------------------------------------------------------------- */
.ai-main {
	background: var(--ai-surface);
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius);
	overflow: hidden;
}

.ai-main-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ai-r-3);
	padding: var(--ai-r-3) var(--ai-r-5);
	background: var(--ai-accent-soft);
	border-bottom: 1px solid var(--ai-line);
}

.ai-main-title {
	display: flex;
	align-items: center;
	gap: var(--ai-r-2);
	font-size: var(--ai-fs-lg);
	font-weight: 600;
	color: var(--ai-text-1);
	letter-spacing: 0.2px;
}

.ai-main-title::before {
	content: "";
	width: 3px;
	height: 16px;
	background: var(--ai-accent);
	border-radius: 2px;
}

.ai-main-meta {
	font-size: var(--ai-fs-xs);
	color: var(--ai-text-3);
	font-variant-numeric: tabular-nums;
}

/* Article list */
.ai-list { padding: var(--ai-r-2) 0; }

.ai-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ai-r-3);
	padding: 14px var(--ai-r-5);
	border-bottom: 1px solid var(--ai-line);
	transition: background .12s var(--ai-ease);
}
.ai-item:last-child { border-bottom: 0; }
.ai-item:hover { background: var(--ai-bg); }

.ai-item-link {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--ai-r-3);
	color: var(--ai-text-1);
	font-size: var(--ai-fs-md);
	line-height: 1.5;
}

.ai-item-bullet {
	flex: 0 0 auto;
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--ai-line-strong);
	border-radius: 50%;
	transition: background .15s var(--ai-ease), transform .15s var(--ai-ease);
}
.ai-item:hover .ai-item-bullet {
	background: var(--ai-accent);
	transform: scale(1.2);
}

.ai-item-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color .15s var(--ai-ease);
}
.ai-item:hover .ai-item-title { color: var(--ai-accent); }

.ai-item-tag {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	font-size: var(--ai-fs-xs);
	color: var(--ai-accent);
	background: var(--ai-accent-soft);
	border-radius: var(--ai-radius-sm);
}

.ai-item-date {
	flex: 0 0 auto;
	font-size: var(--ai-fs-xs);
	color: var(--ai-text-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Empty state */
.ai-empty {
	padding: var(--ai-r-7) var(--ai-r-5);
	text-align: center;
	color: var(--ai-text-3);
	font-size: var(--ai-fs-md);
}

.ai-empty-icon {
	display: inline-block;
	width: 48px;
	height: 48px;
	margin-bottom: var(--ai-r-3);
	opacity: .4;
}

/* --------------------------------------------------------------------------
   Pagination row
   Yii's LinkPager renders <ul class="pagination pagination-default"> — we
   override its legacy Bootstrap-style rules (red primary, float layout) so
   the pager matches the cool blue surface of the rest of the page.
   -------------------------------------------------------------------------- */
.ai-pager {
	display: flex;
	justify-content: center;
	padding: var(--ai-r-4) var(--ai-r-5) var(--ai-r-5);
	border-top: 1px solid var(--ai-line);
}

/* Reset the Bootstrap-style <ul> to a clean flex row with gap */
.ai-pager .pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ai-r-2);
	float: none;
	padding: 0;
	margin: 0;
	list-style: none;
	border-radius: 0;
}

/* Each page cell */
.ai-pager .pagination > li {
	display: inline-flex;
}

.ai-pager .pagination > li > a,
.ai-pager .pagination > li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 12px;
	float: none;
	margin: 0;
	font-size: var(--ai-fs-sm);
	font-weight: 500;
	line-height: 1;
	color: var(--ai-text-2);
	background: var(--ai-surface);
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius-sm);
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	transition: color .15s var(--ai-ease),
	            background .15s var(--ai-ease),
	            border-color .15s var(--ai-ease);
}

/* Hover / focus — light blue tint, blue border, blue text */
.ai-pager .pagination > li > a:hover,
.ai-pager .pagination > li > span:hover {
	color: var(--ai-accent);
	background: var(--ai-accent-soft);
	border-color: var(--ai-accent);
	text-decoration: none;
}

.ai-pager .pagination > li > a:focus-visible,
.ai-pager .pagination > li > span:focus-visible {
	outline: 2px solid var(--ai-accent);
	outline-offset: 2px;
}

/* Active — solid blue, white text */
.ai-pager .pagination > .active > a,
.ai-pager .pagination > .active > span,
.ai-pager .pagination > .active > a:hover,
.ai-pager .pagination > .active > span:hover,
.ai-pager .pagination > .active > a:focus,
.ai-pager .pagination > .active > span:focus {
	color: #fff;
	background: var(--ai-accent);
	border-color: var(--ai-accent);
	cursor: default;
	font-weight: 600;
}

/* Disabled — flat gray, non-interactive */
.ai-pager .pagination > .disabled > span,
.ai-pager .pagination > .disabled > a,
.ai-pager .pagination > .disabled > span:hover,
.ai-pager .pagination > .disabled > a:hover,
.ai-pager .pagination > .disabled > span:focus,
.ai-pager .pagination > .disabled > a:focus {
	color: var(--ai-text-3);
	background: var(--ai-bg);
	border-color: var(--ai-line);
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Responsive
   Use #page-article to match the specificity of main.css declarations
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	#page-article.ai-wrap .col-sub  { width: 200px; }
	#page-article.ai-wrap .col-main { width: calc(100% - 212px); }
}

@media (max-width: 900px) {
	#page-article.ai-wrap .col-sub,
	#page-article.ai-wrap .col-main { float: none; width: 100%; }
	#page-article.ai-wrap .col-main { margin-top: var(--ai-r-4); }
}

@media (max-width: 640px) {
	.ai-item { padding: 12px var(--ai-r-3); }
	.ai-main-hd { padding: var(--ai-r-3); }
	.ai-pager { padding: var(--ai-r-3); }
	.ai-pager .pagination { gap: 6px; }
	.ai-pager .pagination > li > a,
	.ai-pager .pagination > li > span { min-width: 30px; height: 30px; padding: 0 8px; font-size: var(--ai-fs-xs); }
}

/* --------------------------------------------------------------------------
   A11y / motion
   -------------------------------------------------------------------------- */
.ai-cat-row:focus-visible,
.ai-item-link:focus-visible {
	outline: 2px solid var(--ai-accent);
	outline-offset: -2px;
	border-radius: var(--ai-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	.ai-wrap *,
	.ai-wrap *::before,
	.ai-wrap *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}