/* ========== CATEGORY HERO ========== */
.ok-cat-hero {
  padding: 22px 16px 10px;
}
.ok-cat-title {
  font-size: 28px;
  font-weight: 800;
  position: relative;
  display: inline-block;
}
.ok-cat-title:after {
  content: "";
  display: block;
  width: 60%;
  height: 3px;
  background: #e10000;
  margin-top: 6px;
  border-radius: 10px;
}

/* ========== FOCUS STORIES ========== */
.ok-focus-wrap{
  margin:0 12px 16px;
  padding:12px 12px 16px;
  box-sizing:border-box;
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.10);
}
.ok-section-head{
  padding:0 12px 8px;
}
.ok-section-head h2{
  font-size:18px;
  font-weight:700;
}
.ok-focus-scroll{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:6px 0 14px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.ok-focus-scroll::-webkit-scrollbar{display:none;}

.ok-focus-card{
  min-width:240px;
  height:160px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:#000;
  scroll-snap-align:start;
}
.ok-focus-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ok-focus-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));
  display:flex;
  align-items:flex-end;
  padding:12px;
}
.ok-focus-overlay h3{
  font-size:14px;
  line-height:1.3;
  color:#fff;
}

/* ========== MAIN FEED ========== */
.ok-feed-wrap {
  background: #f6f7f9;
  padding: 16px 12px 30px;
}

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

.ok-feed-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  gap: 14px;
  padding: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

.ok-feed-thumb {
  position: relative;
  flex: 0 0 42%;
}

.ok-feed-thumb img {
  width: 90%;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
}

.ok-feed-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e10000;
  color: #fff;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 30px;
  font-weight: 600;
}

.ok-feed-content {
  flex: 1;
}

.ok-feed-title {
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 6px;
  font-weight: 700;
}

.ok-feed-title a {
  color: #111;
  text-decoration: none;
}

.ok-feed-meta {
  font-size: 12px;
  color: #777;
  margin-bottom: 6px;
}

.ok-feed-excerpt {
  font-size: 13px;
  color: #444;
  line-height: 1.55;
  margin-bottom: 8px;
}

.ok-feed-readmore {
  font-size: 13px;
  color: #e10000;
  font-weight: 600;
  text-decoration: none;
}

/* ========== PAGINATION ========== */
.ok-pagination {
  margin-top: 28px;
  text-align: center;
}

/* ===============================
   FORCE PERFECT RESPONSIVE IMAGES
   =============================== */

/* MAIN POSTS */
.ati-thumb{
  width:100%;
  height:220px;
  overflow:hidden;
}

.ati-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
}

/* TRENDING */
.ati-trending-img{
  width:100%;
  height:150px;
  overflow:hidden;
}

.ati-trending-img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
}

/* TOP POSTS */
.ati-top-img{
  width:100%;
  height:180px;
  overflow:hidden;
}

.ati-top-img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
}

/* ===== MOBILE ===== */
@media(max-width:600px){
  .ati-thumb{height:200px;}
  .ati-trending-img{height:140px;}
  .ati-top-img{height:170px;}
}

/* ===== TABLET ===== */
@media(min-width:601px) and (max-width:991px){
  .ati-thumb{height:220px;}
  .ati-trending-img{height:150px;}
  .ati-top-img{height:180px;}
}

/* ===== DESKTOP ===== */
@media(min-width:992px){
  .ati-thumb{height:240px;}
  .ati-trending-img{height:170px;}
  .ati-top-img{height:200px;}
}

.highlight-links a {
  background: linear-gradient(90deg, #ffe9e9, #fff);
  color: #c40000;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
}

.share-box {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 14px 0;
  flex-wrap: wrap;
}

.share-box a {
  background: #111;
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  text-decoration: none;
}

.share-box a:hover {
  background: #e10600;
}

.single-related-slider {
  padding: 10px;
}

.slider-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.slide-card {
  min-width: 220px;
  scroll-snap-align: start;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

.slide-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.slide-card h3 {
  font-size: 14px;
  padding: 8px;
}

.single-post-wrap {
  padding: 14px;
}

.single-title {
  font-size: 26px;
  font-weight: 800;
}

.single-meta {
  font-size: 13px;
  color: #777;
  margin-bottom: 10px;
}

.single-thumb img {
  width: 100%;
  border-radius: 18px;
  margin: 10px 0;
}

.single-content {
  font-size: 17px;
  line-height: 1.7;
}

#custom-toc {
    background: #fff5f5;
    border: 2px solid #ff2a2a;
    border-radius: 10px;
    padding: 15px;
    margin: 20px 0;
}

#custom-toc .toc-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #d60000;
}

#custom-toc ul {
    list-style: none;
    padding-left: 0;
}

#custom-toc ul li {
    margin: 6px 0;
}

#custom-toc ul li.h3 {
    margin-left: 18px;
    font-size: 14px;
}

#custom-toc ul li a {
    text-decoration: none;
    color: #111;
}

#custom-toc ul li a:hover {
    color: #d60000;
}