/* ==========================================================
   CATEGORY PAGE
   PART 1 : HERO • LAYOUT • FEED GRID • CARD STRUCTURE
========================================================== */

/* ==========================
   CATEGORY PAGE
========================== */

.ok-category-page{
	background:var(--ok-bg-alt,#f5f6f8);
	min-height:100vh;
	padding-bottom:36px;
}

/* ==========================
   CATEGORY HERO
========================== */

.ok-cat-hero{
	padding:28px 18px 18px;
	background:linear-gradient(180deg,#fff 0%,#fafafa 100%);
	border-bottom:1px solid rgba(0,0,0,.06);
}

.ok-cat-heading{
	display:flex;
	align-items:center;
	gap:16px;
	max-width:1400px;
	margin:0 auto;
}

.ok-cat-icon{
	flex:0 0 62px;
	width:62px;
	height:62px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:18px;
	background:linear-gradient(135deg,var(--ok-primary,#e10600),#ff4d4d);
	color:#fff;
	box-shadow:0 12px 28px rgba(225,6,0,.18);
}

.ok-cat-icon svg{
	width:30px;
	height:30px;
	display:block;
}

.ok-cat-heading-text{
	flex:1;
	min-width:0;
}

.ok-cat-title{
	margin:0;
	font-size:clamp(2rem,4vw,2.8rem);
	font-weight:800;
	line-height:1.15;
	letter-spacing:-.02em;
	color:var(--ok-text,#111);
}

.ok-cat-desc{
	margin:10px 0 0;
	font-size:.98rem;
	line-height:1.7;
	color:var(--ok-text-light,#666);
	max-width:760px;
}

.ok-cat-title::after{
	content:"";
	display:block;
	width:88px;
	height:4px;
	margin-top:14px;
	border-radius:999px;
	background:linear-gradient(90deg,var(--ok-primary,#e10600),#ff5959);
}

/* ==========================
   MAIN FEED
========================== */

.ok-feed-wrap{
	padding:24px 18px 34px;
	background:transparent;
}

.ok-feed-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
	gap:26px;
	max-width:1400px;
	margin:0 auto;
	align-items:start;
}

/* ==========================
   FEED CARD
========================== */

.ok-feed-card{
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid rgba(0,0,0,.05);
	border-radius:24px;
	overflow:hidden;
	box-shadow:0 10px 28px rgba(0,0,0,.06);
	transition:
		transform .35s ease,
		box-shadow .35s ease,
		border-color .35s ease;
}

.ok-feed-card:hover{
	transform:translateY(-6px);
	border-color:rgba(225,6,0,.14);
	box-shadow:0 22px 50px rgba(0,0,0,.10);
}

/* ==========================
   THUMBNAIL
========================== */

.ok-feed-thumb{
	position:relative;
	overflow:hidden;
	background:#ececec;
}

.ok-feed-thumb a{
	display:block;
	overflow:hidden;
}

.ok-feed-thumb img{
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	display:block;
	transition:transform .55s ease;
}

.ok-feed-card:hover .ok-feed-thumb img{
	transform:scale(1.06);
}

/* ==========================
   CATEGORY BADGE
========================== */

.ok-feed-badge{
	position:absolute;
	top:16px;
	left:16px;
	z-index:2;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:8px 16px;
	border-radius:999px;
	background:var(--ok-primary,#e10600);
	color:#fff;
	font-size:.74rem;
	font-weight:700;
	letter-spacing:.02em;
	text-transform:uppercase;
	box-shadow:0 8px 18px rgba(225,6,0,.25);
}

/* ==========================
   CARD CONTENT WRAPPER
========================== */

.ok-feed-content{
	display:flex;
	flex-direction:column;
	flex:1;
	padding:22px;
	min-width:0;
}

/* ==========================================================
   CATEGORY PAGE
   PART 2 : CONTENT • TYPOGRAPHY • META • READ MORE • PAGINATION
========================================================== */

/* ==========================
   CARD TITLE
========================== */

.ok-feed-title{
	margin:0;
	font-size:1.35rem;
	font-weight:800;
	line-height:1.4;
	letter-spacing:-.02em;
}

.ok-feed-title a{
	color:var(--ok-text,#111);
	text-decoration:none;
	transition:color .3s ease;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.ok-feed-card:hover .ok-feed-title a{
	color:var(--ok-primary,#e10600);
}

/* ==========================
   EXCERPT
========================== */

.ok-feed-excerpt{
	margin:16px 0 18px;
	font-size:.97rem;
	line-height:1.8;
	color:var(--ok-text-light,#666);
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

/* ==========================
   META
========================== */

.ok-feed-meta{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	margin-top:auto;
	padding-top:18px;
	border-top:1px solid rgba(0,0,0,.06);
	font-size:.87rem;
	color:#777;
}

.ok-feed-author{
	font-weight:700;
	color:var(--ok-text,#222);
}

.ok-feed-dot{
	font-size:1rem;
	color:#c5c5c5;
	line-height:1;
}

.ok-feed-meta time{
	color:#777;
	white-space:nowrap;
}

/* ==========================
   READ MORE
========================== */

.ok-feed-readmore{
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin-top:18px;
	width:max-content;
	text-decoration:none;
	font-size:.92rem;
	font-weight:700;
	color:var(--ok-primary,#e10600);
	transition:gap .3s ease,color .3s ease;
}

.ok-feed-readmore span{
	line-height:1;
}

.ok-feed-readmore svg{
	width:18px;
	height:18px;
	flex-shrink:0;
	stroke:currentColor;
	transition:transform .3s ease;
}

.ok-feed-card:hover .ok-feed-readmore{
	gap:14px;
}

.ok-feed-card:hover .ok-feed-readmore svg{
	transform:translateX(5px);
}

/* ==========================
   EMPTY STATE
========================== */

.ok-feed-empty{
	max-width:620px;
	margin:20px auto;
	padding:50px 30px;
	text-align:center;
	background:#fff;
	border:1px solid rgba(0,0,0,.06);
	border-radius:24px;
	box-shadow:0 12px 32px rgba(0,0,0,.06);
}

.ok-feed-empty svg{
	width:56px;
	height:56px;
	margin:0 auto 18px;
	color:var(--ok-primary,#e10600);
}

.ok-feed-empty h3{
	margin:0 0 12px;
	font-size:1.5rem;
	font-weight:800;
	color:var(--ok-text,#111);
}

.ok-feed-empty p{
	margin:0;
	font-size:1rem;
	line-height:1.8;
	color:var(--ok-text-light,#666);
}

/* ==========================
   PAGINATION
========================== */

.ok-pagination{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	max-width:1400px;
	margin:42px auto 0;
}

.ok-pagination .page-numbers{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:46px;
	height:46px;
	padding:0 16px;
	border-radius:14px;
	background:#fff;
	border:1px solid rgba(0,0,0,.08);
	color:var(--ok-text,#222);
	text-decoration:none;
	font-size:.95rem;
	font-weight:700;
	box-shadow:0 6px 18px rgba(0,0,0,.05);
	transition:
		background .3s ease,
		color .3s ease,
		border-color .3s ease,
		transform .3s ease;
}

.ok-pagination .page-numbers:hover{
	background:var(--ok-primary,#e10600);
	border-color:var(--ok-primary,#e10600);
	color:#fff;
	transform:translateY(-2px);
}

.ok-pagination .current{
	background:var(--ok-primary,#e10600);
	border-color:var(--ok-primary,#e10600);
	color:#fff;
	box-shadow:0 12px 24px rgba(225,6,0,.25);
}

.ok-pagination .prev,
.ok-pagination .next{
	padding:0 20px;
	font-weight:800;
}

/* ==========================================================
   CATEGORY PAGE
   PART 3 : FOCUS STORIES • SLIDER • NAVIGATION
========================================================== */

/* ==========================
   FOCUS SECTION
========================== */

.ok-focus-wrap{
	position:relative;
	max-width:1400px;
	margin:0 auto 40px;
	padding:26px;
	background:#fff;
	border:1px solid rgba(0,0,0,.05);
	border-radius:26px;
	box-shadow:0 12px 35px rgba(0,0,0,.06);
	overflow:hidden;
}

/* ==========================
   SECTION HEADER
========================== */

.ok-focus-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	margin-bottom:24px;
}

.ok-focus-title-wrap{
	display:flex;
	align-items:center;
	gap:14px;
	min-width:0;
}

.ok-focus-icon{
	width:52px;
	height:52px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	border-radius:16px;
	background:linear-gradient(135deg,var(--ok-primary,#e10600),#ff5b5b);
	color:#fff;
	box-shadow:0 10px 24px rgba(225,6,0,.22);
}

.ok-focus-icon svg{
	width:24px;
	height:24px;
	display:block;
}

.ok-focus-title{
	margin:0;
	font-size:1.65rem;
	font-weight:800;
	line-height:1.2;
	letter-spacing:-.02em;
	color:var(--ok-text,#111);
}

/* ==========================
   NAVIGATION
========================== */

.ok-focus-nav{
	display:flex;
	align-items:center;
	gap:12px;
}

.ok-focus-prev,
.ok-focus-next{
	width:46px;
	height:46px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:none;
	border-radius:14px;
	background:#f3f4f6;
	color:#222;
	cursor:pointer;
	transition:
		background .3s ease,
		color .3s ease,
		transform .3s ease,
		box-shadow .3s ease;
}

.ok-focus-prev svg,
.ok-focus-next svg{
	width:20px;
	height:20px;
	stroke:currentColor;
	stroke-width:2.2;
}

.ok-focus-prev:hover,
.ok-focus-next:hover{
	background:var(--ok-primary,#e10600);
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 10px 24px rgba(225,6,0,.22);
}

.ok-focus-prev:active,
.ok-focus-next:active{
	transform:scale(.95);
}

/* ==========================
   HORIZONTAL SLIDER
========================== */

.ok-focus-scroll{
	display:flex;
	gap:22px;
	overflow-x:auto;
	scroll-behavior:smooth;
	scroll-snap-type:x proximity;
	-webkit-overflow-scrolling:touch;
	padding:4px 2px 10px;
	scrollbar-width:none;
}

.ok-focus-scroll::-webkit-scrollbar{
	display:none;
}

/* ==========================
   FOCUS CARD
========================== */

.ok-focus-card{
	position:relative;
	flex:0 0 340px;
	height:220px;
	border-radius:22px;
	overflow:hidden;
	background:#ddd;
	scroll-snap-align:start;
	box-shadow:0 10px 26px rgba(0,0,0,.08);
}

.ok-focus-card a{
	display:block;
	width:100%;
	height:100%;
	color:inherit;
	text-decoration:none;
}

.ok-focus-card img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:
		transform .6s ease,
		filter .4s ease;
}

.ok-focus-card:hover img{
	transform:scale(1.08);
	filter:brightness(.92);
}

/* ==========================
   OVERLAY
========================== */

.ok-focus-overlay{
	position:absolute;
	inset:0;
	display:flex;
	align-items:flex-end;
	padding:22px;
	background:linear-gradient(
		180deg,
		rgba(0,0,0,0) 20%,
		rgba(0,0,0,.15) 45%,
		rgba(0,0,0,.88) 100%
	);
}

.ok-focus-overlay h3{
	margin:0;
	font-size:1.12rem;
	font-weight:800;
	line-height:1.45;
	color:#fff;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	transition:color .3s ease;
}

.ok-focus-card:hover .ok-focus-overlay h3{
	color:#ffd9d9;
}

/* ==========================
   MOBILE
========================== */

@media (max-width:767px){

	.ok-focus-wrap{
		padding:20px;
		border-radius:22px;
	}

	.ok-focus-head{
		margin-bottom:18px;
	}

	.ok-focus-title{
		font-size:1.35rem;
	}

	.ok-focus-card{
		flex:0 0 280px;
		height:185px;
	}

	.ok-focus-nav{
		display:none;
	}

}

/* ==========================================================
   CATEGORY PAGE
   PART 4 : RESPONSIVE • IMAGE SAFETY • ACCESSIBILITY • FINAL POLISH
========================================================== */

/* ==========================
   GLOBAL IMAGE SAFETY
========================== */

.ok-category-page img{
	max-width:100%;
	height:auto;
	display:block;
}

/* ==========================
   LINK RESET
========================== */

.ok-category-page a{
	text-decoration:none;
}

.ok-category-page a:focus-visible,
.ok-focus-prev:focus-visible,
.ok-focus-next:focus-visible{
	outline:3px solid rgba(225,6,0,.28);
	outline-offset:4px;
	border-radius:14px;
}

/* ==========================
   SELECTION
========================== */

.ok-category-page ::selection{
	background:rgba(225,6,0,.18);
	color:#111;
}

/* ==========================
   TABLET
========================== */

@media (max-width:991px){

	.ok-cat-hero{
		padding:24px 18px 18px;
	}

	.ok-feed-wrap{
		padding:22px 18px 30px;
	}

	.ok-feed-grid{
		grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
		gap:22px;
	}

	.ok-feed-content{
		padding:20px;
	}

	.ok-feed-title{
		font-size:1.25rem;
	}

	.ok-focus-wrap{
		margin:0 18px 34px;
	}

	.ok-focus-card{
		flex:0 0 300px;
		height:200px;
	}

}

/* ==========================
   MOBILE
========================== */

@media (max-width:767px){

	.ok-cat-heading{
		align-items:flex-start;
	}

	.ok-cat-icon{
		width:54px;
		height:54px;
		border-radius:16px;
	}

	.ok-cat-icon svg{
		width:26px;
		height:26px;
	}

	.ok-cat-title{
		font-size:1.8rem;
	}

	.ok-cat-desc{
		font-size:.92rem;
	}

	.ok-feed-wrap{
		padding:18px 14px 28px;
	}

	.ok-feed-grid{
		grid-template-columns:1fr;
		gap:20px;
	}

	.ok-feed-content{
		padding:18px;
	}

	.ok-feed-title{
		font-size:1.15rem;
	}

	.ok-feed-excerpt{
		font-size:.92rem;
		line-height:1.7;
	}

	.ok-feed-meta{
		font-size:.82rem;
		gap:8px;
	}

	.ok-feed-readmore{
		font-size:.9rem;
	}

	.ok-pagination{
		gap:8px;
		margin-top:34px;
	}

	.ok-pagination .page-numbers{
		min-width:42px;
		height:42px;
		font-size:.88rem;
		padding:0 14px;
	}

}

/* ==========================
   SMALL MOBILE
========================== */

@media (max-width:480px){

	.ok-cat-hero{
		padding:20px 14px 16px;
	}

	.ok-cat-heading{
		gap:12px;
	}

	.ok-cat-icon{
		width:48px;
		height:48px;
	}

	.ok-cat-icon svg{
		width:22px;
		height:22px;
	}

	.ok-cat-title{
		font-size:1.55rem;
	}

	.ok-cat-desc{
		margin-top:8px;
		font-size:.88rem;
		line-height:1.65;
	}

	.ok-feed-wrap{
		padding:16px 12px 24px;
	}

	.ok-feed-card{
		border-radius:20px;
	}

	.ok-feed-thumb img{
		aspect-ratio:16/10;
	}

	.ok-feed-content{
		padding:16px;
	}

	.ok-feed-title{
		font-size:1.05rem;
		line-height:1.45;
	}

	.ok-feed-excerpt{
		margin:14px 0 16px;
		-webkit-line-clamp:4;
	}

	.ok-feed-badge{
		top:12px;
		left:12px;
		padding:7px 13px;
		font-size:.68rem;
	}

	.ok-feed-readmore svg{
		width:16px;
		height:16px;
	}

	.ok-focus-wrap{
		margin:0 12px 28px;
		padding:18px;
		border-radius:20px;
	}

	.ok-focus-title{
		font-size:1.2rem;
	}

	.ok-focus-card{
		flex:0 0 250px;
		height:170px;
		border-radius:18px;
	}

	.ok-focus-overlay{
		padding:16px;
	}

	.ok-focus-overlay h3{
		font-size:.96rem;
	}

}

/* ==========================
   LARGE DESKTOP
========================== */

@media (min-width:1400px){

	.ok-feed-grid{
		grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
	}

	.ok-focus-card{
		flex-basis:360px;
		height:230px;
	}

}

/* ==========================
   REDUCED MOTION
========================== */

@media (prefers-reduced-motion:reduce){

	.ok-feed-card,
	.ok-feed-thumb img,
	.ok-feed-readmore,
	.ok-feed-readmore svg,
	.ok-focus-card img,
	.ok-focus-prev,
	.ok-focus-next{
		transition:none !important;
		scroll-behavior:auto;
	}

}