/* ====== Magazine row layout (Wix-like + AI themed) ====== */
body {
  background-image:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)),
    url('/assets/ai-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;

  color: #e5e7eb;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

.brand {
  font-size: 1.8rem;
  font-weight: 800;
  font-family: 'Orbitron', 'Audiowide', sans-serif;
  background: linear-gradient(90deg, #00ffff, #7f00ff);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow:
    0 0 10px rgba(0, 255, 255, 0.7),
    0 0 20px rgba(127, 0, 255, 0.6),
    0 0 30px rgba(0, 255, 255, 0.5);
  letter-spacing: 1px;
  transition: text-shadow 0.3s ease, transform 0.3s ease;
}
.brand:hover {
  text-shadow:
    0 0 15px rgba(0, 255, 255, 1),
    0 0 25px rgba(127, 0, 255, 0.9),
    0 0 40px rgba(0, 255, 255, 0.8);
  transform: scale(1.05);
}

/* === BLOG WRAPPER === */
.blog-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 0 28px;
}
.page-title {
  margin: 6px 0 18px;
  font-size: clamp(28px, 3vw, 36px);
  background: linear-gradient(to right, #00ffff, #7f00ff);
  -webkit-background-clip: text;
  color: transparent;
}

/* ===== Unified row: image + content in one card ===== */
.post-row {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: 0;  /* no gutter between halves */
  align-items: stretch;
  margin: 28px 0;

  border-radius: 16px;
  overflow: hidden; /* clip children to shared radius */
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,255,255,0.12);
}
.post-row.reverse { grid-template-columns: 1.2fr 1.1fr; }
.post-row.reverse .post-media { order: 2; }
.post-row.reverse .post-card { order: 1; }

/* image panel */
.post-media {
  position: relative;
  display: block;
  border-radius: 0;       /* parent controls radius */
  overflow: hidden;
  box-shadow: none;       /* no inner shadow */
  background: #111;
  aspect-ratio: 16 / 9;   /* uniform cover shape */
}
.post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fill nicely, no stretch */
  /* removed: aspect-ratio on the IMG */
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
  filter: saturate(1.05) contrast(1.1);
}
.post-media:hover img { transform: scale(1.06); }
.post-media .pill {
  position: absolute; left: 12px; bottom: 12px;
}

/* content panel (transparent, part of the same card) */
.post-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 18px 18px 14px;
  box-shadow: none;
  transition: none;
}
.post-title {
  display: block;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  text-decoration: none;
  color: #a78bfa;
  margin-bottom: 8px;
}
.post-title:hover { text-decoration: underline; }

.meta-line {
  display: flex; align-items: center; gap: 8px;
  opacity: .85; font-size: 13px; margin-bottom: 10px;
}
.dot-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, #5b7cff, #9fa8ff); display: inline-block;
}
.sep { opacity: .65; }
.post-excerpt { margin: 6px 0 8px; opacity: .95; color: #cdd6f4; }

/* tags + pills */
.tag-list { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  padding: 6px 10px; font-size: 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px);
}
.pill--cat { background: linear-gradient(135deg, #6a11cb, #2575fc); color: #fff; }
.pill--tag { background: rgba(255,255,255,0.06); color: #cfd3ff; border-color: rgba(128,128,255,0.25); }

/* actions */
.post-actions {
  margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.read-more { text-decoration: none; font-weight: 600; color: #00ffff; }
.read-more:hover { text-decoration: underline; }
.counts { display: flex; gap: 14px; align-items: center; }
.counts .muted { opacity: .75; font-size: 13px; }
.heart {
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: #ff6b81;
  border-radius: 999px; width: 36px; height: 30px; line-height: 28px; text-align: center; cursor: pointer;
}
.heart:hover { background: rgba(255,107,129,.12); }

/* line clamp helper */
.clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* pager */
.pager { margin: 26px 0 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn {
  padding: 8px 12px; border: 1px solid #334; border-radius: 8px;
  text-decoration: none; color: inherit; background: transparent;
}
.btn--active { background: #334; color: #fff; }

/* responsive */
@media (max-width: 900px) {
  .post-row,
  .post-row.reverse { grid-template-columns: 1fr; }
  .post-row.reverse .post-media,
  .post-row.reverse .post-card { order: initial; }

  /* smaller logo on mobile */
  header .brand img, .navbar .brand img {
    height: 44px; width: auto; display: block;
  }
  /* make hero images a bit taller on mobile */
  .post-media { aspect-ratio: 3 / 2; }
}

/* ===== MadrasAI Logo size fix (ALL screens) ===== */
.navbar .brand img, header .brand img {
  height: 48px; width: auto; display: block;
}

/* === Sticky transparent nav === */
.navbar {
  position: fixed; top:0; left:0; width:100%;
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(10, 10, 20, 0.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 8px 0;
}
.nav-container {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.navbar .btn-login {
  background: linear-gradient(90deg, #6e59ff, #22d3ee);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.navbar .btn-login:hover {
  background: linear-gradient(90deg, #22d3ee, #6e59ff);
  text-decoration: none;
}





/* Desktop links */
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  color: #e5e7eb; text-decoration: none; font-weight: 600; letter-spacing: .2px;
  padding: 6px 0; transition: color .2s ease, opacity .2s ease;
}
.nav-links a:hover { color: #00ffff; }
.nav-links a.is-active { color: #00ffff; text-shadow: 0 0 10px rgba(0,255,255,.35); }

/* Hamburger button */
.nav-toggle {
  display: none; font-size: 28px; background: none; border: none; color: #e5e7eb; cursor: pointer;
}

/* Ensure page content isn't hidden behind the fixed header */
body { padding-top: 72px; }

/* ===== Mobile behaviour ===== */
@media (max-width: 900px) {
  .navbar .brand img { height: 44px; }
  .nav-toggle { display: block; }

  .nav-links {
    position: absolute; top: 64px; right: 20px;
    display: flex; flex-direction: column; gap: 16px;
    background: rgba(10,10,20,0.95);
    padding: 16px 20px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);

    transform: translateY(-16px);
    opacity: 0; pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
    z-index: 1100;
  }
  .nav-links.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { color: #fff; font-size: 16px; font-weight: 600; padding: 8px 0; text-align: right; }

  body { padding-top: 64px; }
}