/* =====================================================
   AI AND TECH INFO – TAG PAGE CSS
===================================================== */

/* PAGE BACKGROUND */
body.tag{
  background:linear-gradient(180deg,#071426,#0b1f3a);
}

/* HERO */
.ati-hero{
  background:radial-gradient(circle at top,#0b1f3a,#071426 75%);
  padding:90px 18px 70px;
  text-align:center;
}

.ati-hero-inner{
  max-width:1100px;
  margin:auto;
}

.ati-hero h1{
  color:#19e0ff;
  font-size:36px;
  margin-bottom:10px;
}

.ati-hero p{
  color:#e6f1ff;
  max-width:760px;
  margin:0 auto 20px;
}

/* TAG CHIP */
.ati-chip{
  display:inline-block;
  color:#19e0ff;
  border:1px solid rgba(0,224,255,.3);
  padding:6px 16px;
  border-radius:30px;
  font-size:12px;
  margin-bottom:14px;
}

/* TAG META BAR (BOXES) */
.ati-meta-bar{
  display:flex;
  justify-content:center;
  gap:26px;
  margin-top:30px;
  flex-wrap:wrap;
}

.ati-meta-bar div{
  background:linear-gradient(145deg,#0b1324,#0e1d36);
  padding:16px 26px;
  border-radius:18px;
  min-width:130px;
  text-align:center;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}

.ati-meta-bar strong{
  display:block;
  color:#19e6ff;
  font-size:24px;
}

.ati-meta-bar span{
  color:#9fb4cc;
  font-size:13px;
}

/* MAIN SECTION */
.ati-section{
  background:linear-gradient(180deg,#071426,#0b1f3a);
  padding:70px 16px;
}

.ati-posts-wrap{
  padding-top:40px;
}

/* POPULAR TAGS */
.ati-tag-tools h2{
  color:#e6f1ff;
  text-align:center;
  margin-bottom:24px;
  font-size:26px;
}

.ati-tools{
  text-align:center;
  max-width:1000px;
  margin:auto;
}

.ati-tools a{
  display:inline-block;
  background:linear-gradient(135deg,#0b1324,#0e2444);
  color:#e6f1ff;
  padding:9px 18px;
  border-radius:30px;
  margin:8px 6px;
  font-size:13px;
  text-decoration:none;
  transition:.3s;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.ati-tools a:hover{
  color:#19e0ff;
  transform:translateY(-3px);
}

/* TAG GRID */
.ati-tag-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:28px;
}

/* TAG POST CARD */
.ati-post-card{
  background:#0b1324;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  transition:.35s;
}

.ati-post-card:hover{
  transform:translateY(-6px);
}

/* IMAGE */
.ati-thumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}

/* CARD BODY */
.ati-card-body{
  padding:20px;
}

.ati-card-body h3{
  margin-bottom:10px;
  line-height:1.35;
  font-size:20px;
}

.ati-card-body h3 a{
  color:#e6f1ff;
  text-decoration:none;
}

.ati-card-body h3 a:hover{
  color:#19e0ff;
}

.ati-card-body p{
  color:#b9d4e8;
  font-size:14px;
  line-height:1.6;
}

.ati-mini-meta{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#8fb6d6;
  margin-bottom:12px;
}

/* ===============================
   TAG PAGE – RESPONSIVE SYSTEM
=============================== */

@media (min-width: 768px){
  .ati-tag-grid{
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
}

@media (min-width: 992px){
  .ati-tag-grid{
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================
   AUTHOR PAGE – FINAL CLEAN CSS
========================================= */

/* =========================================
   PAGE WRAPPER
========================================= */
.ati-author-page{
  background:linear-gradient(180deg,#071426,#0b1f3a);
  padding-bottom:60px;
}

/* =========================================
   HERO SECTION
========================================= */
.ati-author-hero{
  padding:90px 20px 60px;
  text-align:center;
}

.ati-author-inner{
  max-width:1100px;
  margin:auto;
}

/* =========================================
   AVATAR
========================================= */
.ati-author-avatar img{
  width:120px;
  height:120px;
  border-radius:50%;
  border:3px solid #19e0ff;
  margin-bottom:18px;
}

/* =========================================
   NAME + BIO
========================================= */
.ati-author-name{
  font-size:36px;
  font-weight:700;
  color:#e6f1ff;
  margin-bottom:6px;
}

.ati-author-bio{
  font-size:15px;
  color:#b9d4e8;
  margin-bottom:26px;
}

/* =========================================
   SOCIAL ICONS
========================================= */
.ati-author-social{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:34px;
}

.ati-author-social a{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(145deg,#0b1324,#0e1d36);;
  color:#e6f1ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  text-decoration:none;
}

/* =========================================
   META BOXES
========================================= */
.ati-author-meta{
  display:flex;
  justify-content:center;
  gap:26px;
  margin-top:30px;
  flex-wrap:wrap;
}

.ati-author-meta > div{
  background:linear-gradient(145deg,#0b1324,#0e1d36);
  border-radius:18px;
  padding:16px 26px;
  min-width:130px;
  text-align:center;
  box-shadow:0 6px 30px rgba(0,0,0,0.35);
}

.ati-author-meta strong{
  display:block;
  font-size:24px;
  font-weight:700;
  color:#19e0ff;
  margin-bottom:8px;
}

.ati-author-meta span{
  font-size:13px;
  color:#e6f1ff;
}

/* =========================================
   POSTS SECTION
========================================= */
.ati-author-posts{
  padding:0 20px;
}

/* GRID */
.ati-author-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:28px;
}

/* =========================================
   POST CARD
========================================= */
.ati-author-card{
  background:#0b1324;
  border-radius:20px;
  overflow:hidden;
  transition:.3s;
}

.ati-author-card:hover{
  transform:translateY(-4px);
}

/* THUMB */
.ati-author-thumb img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

/* CONTENT */
.ati-author-content{
  padding:20px;
  text-align:left;
}

/* TITLE */
.ati-author-content h3{
  font-size:18px;
  margin-bottom:10px;
}

.ati-author-content h3 a{
  color:#e6f1ff;
  text-decoration:none;
}

.ati-author-content h3 a:hover{
  color:#19e0ff;
}

/* META */
.ati-author-post-meta{
  font-size:13px;
  color:#8fb6d6;
  display:flex;
  gap:8px;
  margin-bottom:12px;
}

/* EXCERPT */
.ati-author-content p{
  font-size:14px;
  color:#b9d4e8;
  line-height:1.6;
}

/* =========================================
   RESPONSIVE
========================================= */
@media(max-width:768px){

  .ati-author-meta{
    grid-template-columns:1fr;
  }

  .ati-author-name{
    font-size:28px;
  }

  .ati-author-thumb img{
    height:180px;
  }

}

/* =====================================================
   AI AND TECH INFO – SEARCH PAGE CSS
===================================================== */

/* PAGE BACKGROUND */
body.search{
  background:linear-gradient(180deg,#071426,#0b1f3a);
}

/* HERO */
.ati-hero{
  background:radial-gradient(circle at top,#0b1f3a,#071426 75%);
  padding:90px 18px 70px;
  text-align:center;
}

.ati-hero-inner{
  max-width:1100px;
  margin:auto;
}

.ati-hero h1{
  color:#e6f1ff;
  font-size:36px;
  margin-bottom:10px;
}

.ati-hero p{
  color:#b9d4e8;
  max-width:760px;
  margin:0 auto 20px;
}

/* SEARCH BOX */
.ati-search-box{
  margin:28px auto 18px;
  max-width:520px;
  display:flex;
  background:#0b1324;
  border-radius:40px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,224,255,.25);
}

.ati-search-box input{
  flex:1;
  padding:14px 18px;
  background:none;
  border:0;
  color:#e6f1ff;
}

.ati-search-box button{
  background:#19e0ff;
  border:0;
  padding:0 24px;
  font-weight:700;
  cursor:pointer;
}

/* SEARCH LAYOUT */
.ati-search-layout{
  max-width:1050px;
  margin:auto;
  display:grid;
  gap:22px;
}

/* SEARCH CARD */
.ati-search-card{
  background:#0b1324;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  transition:.35s;
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:16px;
}

.ati-search-card:hover{
  transform:translateY(-6px);
}

.ati-search-card img{
  width:170px;
  min-width:170px;
  height:110px;
  border-radius:14px;
  object-fit:cover;
}

.ati-search-content{
  flex:1;
}

.ati-search-content h3{
  margin-bottom:10px;
  line-height:1.35;
  font-size:20px;
}

.ati-search-content h3 a{
  color:#e6f1ff;
  text-decoration:none;
}

.ati-search-content h3 a:hover{
  color:#19e0ff;
}

.ati-search-content p{
  color:#b9d4e8;
  font-size:14px;
  line-height:1.6;
}

/* =========================================
   POPULAR SEARCHES / SUGGESTED TAGS
========================================= */

.ati-search-suggestions h2,
.ati-tag-tools h2{
  color:#e6f1ff;
  text-align:center;
  margin-bottom:24px;
  font-size:26px;
}

.ati-suggest-tags,
.ati-tools{
  text-align:center;
  max-width:1000px;
  margin:auto;
}

.ati-suggest-tags a,
.ati-tools a{
  display:inline-block;
  background:linear-gradient(135deg,#0b1324,#0e2444);
  color:#e6f1ff;
  padding:9px 18px;
  border-radius:30px;
  margin:8px 6px;
  font-size:13px;
  text-decoration:none;
  transition:.3s;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.ati-suggest-tags a:hover,
.ati-tools a:hover{
  color:#19e0ff;
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,224,255,.15);
}

/* EMPTY STATE */
.ati-empty{
  color:#e6f1ff;
  text-align:center;
  padding:90px 0;
  font-size:18px;
}

/* RESPONSIVE */
@media (max-width:680px){
  .ati-search-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .ati-search-card img{
    width:100%;
    min-width:100%;
    height:auto;
    aspect-ratio:16/9;
  }
}

@media (min-width:900px){
  .ati-search-layout{
    max-width:1150px;
  }

  .ati-search-card img{
    width:200px;
    min-width:200px;
    height:125px;
  }
}