/* ==========================================================================
   TamilGuru redesign layer – loads after main.css, overrides tokens & polish
   ========================================================================== */

:root {
  --tg-primary: #e11d48;
  --tg-primary-hover: #be123c;
  --tg-primary-light: #fff1f2;
  --tg-secondary: #f59e0b;
  --tg-accent: #7c3aed;
  --tg-grad: linear-gradient(135deg, #e11d48 0%, #f97316 100%);
  --tg-radius: 16px;
  --tg-radius-lg: 22px;
  --tg-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px -8px rgb(15 23 42 / .10);
  --tg-shadow-lg: 0 2px 4px rgb(15 23 42 / .04), 0 18px 40px -12px rgb(15 23 42 / .18);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Header: light glass bar, cheap blur only on sticky header */
.site-header {
  background: color-mix(in srgb, var(--tg-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--tg-border-light);
}

/* Cards: lift on hover using transform only (GPU, no layout) */
.tg-card, .tg-card-hero, .tg-post-card, article.tg-card-grid {
  border-radius: var(--tg-radius-lg);
  box-shadow: var(--tg-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  .tg-card:hover, .tg-card-hero:hover, .tg-post-card:hover, article.tg-card-grid:hover {
    transform: translateY(-4px);
    box-shadow: var(--tg-shadow-lg);
  }
}
.tg-card img, .tg-card-hero img { transition: transform .5s ease; }
@media (hover: hover) {
  .tg-card:hover img, .tg-card-hero:hover img { transform: scale(1.04); }
}

/* Hero: stronger gradient for readable white text */
.tg-hero-overlay {
  background: linear-gradient(to top, rgb(2 6 23 / .88) 0%, rgb(2 6 23 / .45) 45%, transparent 100%);
}
.tg-badge {
  background: var(--tg-grad);
  color: #fff;
  border-radius: var(--tg-radius-full);
  letter-spacing: .02em;
}

/* Buttons */
.tg-btn, button.tg-btn, .tg-hero-pill-cta {
  background-image: var(--tg-grad);
  border: 0;
  color: #fff;
  border-radius: var(--tg-radius-full);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.tg-btn:hover, .tg-hero-pill-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Section titles with accent bar */
.tg-section-title, .tg-section-header h2 {
  position: relative;
  padding-left: .9rem;
  font-weight: 800;
}
.tg-section-title::before, .tg-section-header h2::before {
  content: "";
  position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 5px; border-radius: 4px;
  background: var(--tg-grad);
}

/* Skip rendering of off-screen sections until needed (big win on long pages) */
.tg-rasi-section, .tg-tools-strip, .site-footer, .tg-related-posts, #comments {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* Mobile bottom bar & touch targets */
@media (max-width: 768px) {
  a, button { min-height: 40px; }
  .tg-card-hero { border-radius: var(--tg-radius); }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   HOME – hero bento
   ========================================================================== */
.tg-hero-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.25rem; }
.tg-card-hero { min-height: 480px; aspect-ratio: auto; }
.tg-hero-overlay { background: linear-gradient(to top, rgb(2 6 23 / .92) 0%, rgb(2 6 23 / .55) 42%, rgb(2 6 23 / 0) 75%); }
.tg-hero-content { padding: clamp(1.25rem, 3vw, 2.25rem); }
.tg-hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .85rem; }
.tg-hero-tags .tg-badge { margin: 0; }
.tg-hero-flag {
  font-size: .75rem; font-weight: 700; padding: .25rem .7rem; border-radius: 99px;
  background: rgb(255 255 255 / .16); color: #fff; border: 1px solid rgb(255 255 255 / .28);
}
.tg-hero-title { font-size: clamp(1.45rem, 2.6vw, 2.2rem); line-height: 1.35; text-wrap: balance; }
.tg-hero-title a { color: #fff; }
.tg-hero-excerpt {
  color: #e2e8f0; font-size: 1rem; line-height: 1.65; margin: 0 0 .9rem; max-width: 62ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tg-hero-title a::after { content: ""; position: absolute; inset: 0; z-index: 3; } /* whole card clickable */
.tg-dot::before { content: "•"; margin-right: .6rem; opacity: .6; }

/* Side stories: numbered list panel */
.tg-side-stories {
  counter-reset: tgn; gap: 0; padding: 1.1rem 1.25rem;
  background: var(--tg-surface-card); border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-lg); box-shadow: var(--tg-shadow);
}
.tg-side-heading { font-size: 1.05rem; font-weight: 800; margin: 0 0 .5rem; color: var(--tg-text); }
.tg-card-side {
  counter-increment: tgn; position: relative; flex: 1; align-items: center;
  background: transparent; border: 0; border-top: 1px solid var(--tg-border-light);
  border-radius: 0; box-shadow: none; padding: .9rem 0; transform: none !important;
}
.tg-card-side:first-of-type { border-top: 0; }
.tg-card-side-img { position: relative; width: 108px; height: 80px; border-radius: 12px; }
.tg-card-side-img::before {
  counter-increment: none; content: counter(tgn); position: absolute; top: 4px; left: 4px; z-index: 2;
  width: 24px; height: 24px; display: grid; place-items: center; font: 800 .75rem/1 var(--tg-font-sans);
  color: #fff; background: var(--tg-grad); border-radius: 8px;
}
.tg-card-side-title a:hover { color: var(--tg-primary); }
.tg-card-side:hover { box-shadow: none; }

@media (max-width: 900px) {
  .tg-hero-grid { grid-template-columns: 1fr; }
  .tg-card-hero { min-height: 380px; }
}
@media (max-width: 520px) {
  .tg-card-hero { min-height: 340px; }
  .tg-hero-excerpt { display: none; }
}

/* ==========================================================================
   HOME – post cards
   ========================================================================== */
.tg-posts-grid { gap: 1.25rem; }
.tg-post-card { border: 0; border-radius: var(--tg-radius-lg); background: var(--tg-surface-card); }
.tg-post-card-thumb { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: var(--tg-surface-subtle); }
.tg-post-card-thumb a { display: block; height: 100%; }
.tg-post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-thumb-fallback {
  width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.5rem;
  background: linear-gradient(135deg, #1e293b, #475569);
}
.tg-post-card-thumb .tg-badge { position: absolute; left: .75rem; top: .75rem; margin: 0; z-index: 2; }
.tg-badge-sm { font-size: .7rem; padding: .2rem .6rem; box-shadow: 0 4px 10px rgb(0 0 0 / .18); }
.tg-post-card-body { padding: 1.1rem 1.2rem 1.2rem; gap: .5rem; }
.tg-post-card-title { font-size: 1.1rem; line-height: 1.45; font-weight: 800; }
.tg-post-card-title a:hover { color: var(--tg-primary); }
.tg-post-card-footer { margin-top: auto; padding-top: .75rem; border-top: 1px dashed var(--tg-border); color: var(--tg-text-muted); font-size: .8rem; display: flex; gap: .6rem; }

/* First card spans full width as a feature */
@media (min-width: 700px) {
  .tg-posts-grid > .tg-post-card:first-child { grid-column: 1 / -1; flex-direction: row; }
  .tg-posts-grid > .tg-post-card:first-child .tg-post-card-thumb { flex: 0 0 48%; aspect-ratio: auto; min-height: 260px; }
  .tg-posts-grid > .tg-post-card:first-child .tg-post-card-title { font-size: 1.45rem; }
}
@media (max-width: 640px) { .tg-posts-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   SINGLE POST
   ========================================================================== */
body.single .tg-article-header {
  background: var(--tg-surface-card); border-radius: var(--tg-radius-lg);
  padding: clamp(1.1rem, 3vw, 2rem); box-shadow: var(--tg-shadow); margin-bottom: 1.25rem;
}
body.single .tg-article-title {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.35; font-weight: 800; text-wrap: balance; letter-spacing: -.005em;
}
body.single .tg-article-meta-wrap { gap: .5rem .75rem; }
body.single .tg-meta-item {
  background: var(--tg-surface-subtle); border-radius: 99px; padding: .3rem .8rem; font-size: .8rem;
}
body.single .tg-article-toolbar { border-radius: var(--tg-radius); background: var(--tg-surface-subtle); border: 0; }
body.single .tg-article-featured-image { border-radius: var(--tg-radius-lg); overflow: hidden; box-shadow: var(--tg-shadow-lg); margin-bottom: 1.5rem; }
body.single .tg-article-featured-image img { width: 100%; height: auto; display: block; }

body.single .tg-article-content {
  font-size: clamp(1.05rem, 1.2vw + .8rem, 1.2rem); line-height: 1.95;
  background: var(--tg-surface-card); padding: clamp(1.1rem, 3vw, 2.25rem); border-radius: var(--tg-radius-lg); box-shadow: var(--tg-shadow);
}
body.single .tg-article-content h2 { border: 0; padding: 0 0 .5rem; position: relative; font-size: clamp(1.3rem, 2vw + .7rem, 1.75rem); }
body.single .tg-article-content h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px; background: var(--tg-grad);
}
body.single .tg-article-content blockquote {
  border: 0; border-radius: var(--tg-radius); background: var(--tg-primary-light); color: var(--tg-text);
  padding: 1.25rem 1.5rem 1.25rem 3.25rem; position: relative; font-style: normal;
}
body.single .tg-article-content blockquote::before {
  content: "“"; position: absolute; left: 1rem; top: .35rem; font: 800 3rem/1 Georgia, serif; color: var(--tg-primary);
}
body.single .tg-article-content a { color: var(--tg-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.single .tg-article-content table { display: block; overflow-x: auto; border-collapse: collapse; }
body.single .tg-article-content th, body.single .tg-article-content td { padding: .6rem .85rem; border: 1px solid var(--tg-border); }
body.single .tg-article-content th { background: var(--tg-surface-subtle); }
body.single .tg-article-content img { border: 0; }

body.single .tg-also-read-box { border: 0; border-radius: var(--tg-radius-lg); background: var(--tg-primary-light); }
body.single .tg-btn-share-bottom { border-radius: 99px; }
body.single .tg-sidebar .widget { border-radius: var(--tg-radius-lg); border: 0; box-shadow: var(--tg-shadow); }


/* ==========================================================================
   SIDEBAR & FOOTER
   ========================================================================== */
.tg-widget {
  border: 0; border-radius: var(--tg-radius-lg); box-shadow: var(--tg-shadow);
  background: var(--tg-surface-card); overflow: hidden;
}
.tg-widget-title { font-weight: 800; letter-spacing: 0; }
.tg-panchangam-box { border-radius: var(--tg-radius); background: var(--tg-surface-subtle); }
.tg-panchangam-row { border-bottom: 1px dashed var(--tg-border); }
.tg-panchangam-row:last-child { border-bottom: 0; }
.tg-widget-post-item { border-radius: var(--tg-radius); transition: background-color .2s ease; }
.tg-widget-post-item:hover { background: var(--tg-primary-light); transform: none; }

/* Never render social links that still point at "#" placeholders */
a.tg-social-box[href="#"], .tg-footer a[href="#"] { display: none !important; }

.tg-footer {
  background: radial-gradient(1200px 400px at 10% -10%, rgb(225 29 72 / .22), transparent 60%), #0b1220;
  border-top: 3px solid transparent; border-image: var(--tg-grad) 1;
}
.tg-footer-links a { transition: color .2s ease, padding-left .2s ease; }
.tg-footer-links a:hover { color: #fda4af; padding-left: .25rem; }
.tg-footer-bottom { border-top: 1px solid rgb(255 255 255 / .08); }
.tg-back-to-top { background-image: var(--tg-grad); border: 0; box-shadow: var(--tg-shadow-lg); }
.tg-mobile-bar { background: color-mix(in srgb, var(--tg-surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tg-mobile-nav-item.active { color: var(--tg-primary); }