/* ============================================================
   AGHNI GOLD — PREMIUM BLOG & INSIGHTS STYLESHEET
   Luxury Maroon (#4A080E) & Royal Gold (#D4AF37 / #D69728)
   ============================================================ */

.blog-page {
  background: #FAF5EE;
  font-family: 'Poppins', sans-serif;
  color: #38231B;
  min-height: 100vh;
  box-sizing: border-box;
}

/* ============================================================
   1. HERO BANNER SECTION (100VH LUXURY THEME MATCHING HOME/SERVICES)
   ============================================================ */

.blog-banner-hero {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background-color: #FFFFFF !important;
  padding: 0 !important;
  margin: 0 !important;
}

.blog-hero-bg-img {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('/img/blog_hero_gold_news.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform: scale(1.02) !important;
  transition: transform 7s ease-in-out !important;
  z-index: 0 !important;
}

.blog-banner-hero:hover .blog-hero-bg-img {
  transform: scale(1.05) !important;
}

.blog-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 252, 244, 0.65) 50%, rgba(255, 255, 255, 0.15) 85%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 250, 240, 0.35) 45%, rgba(255, 255, 255, 0) 80%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.blog-particles {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  overflow: hidden !important;
}

.blog-particle {
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #FFF2B2 0%, #D4AF37 70%, rgba(212, 175, 55, 0) 100%) !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.7) !important;
  animation: sog-float-up 5.5s ease-in infinite !important;
  opacity: 0 !important;
}

.blog-particle:nth-child(1) { left: 14%;  bottom: 12%; animation-delay: 0s;   animation-duration: 6s; width: 5px; height: 5px; }
.blog-particle:nth-child(2) { left: 30%;  bottom: 10%; animation-delay: 1.2s; animation-duration: 7s; width: 7px; height: 7px; }
.blog-particle:nth-child(3) { left: 52%;  bottom: 14%; animation-delay: 0.6s; animation-duration: 5.5s; }
.blog-particle:nth-child(4) { left: 72%;  bottom: 10%; animation-delay: 2s;   animation-duration: 6.5s; width: 6px; height: 6px; }
.blog-particle:nth-child(5) { left: 86%;  bottom: 12%; animation-delay: 1.5s; animation-duration: 7.5s; width: 8px; height: 8px; }

.blog-hero-content {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding-top: 110px !important;
  padding-bottom: 40px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  flex: 1 !important;
  gap: 20px !important;
}

.blog-hero-content .ref-tamil-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 24px !important;
  border-radius: 50px !important;
  background: rgba(20, 10, 5, 0.92) !important;
  border: 1.5px solid #D4AF37 !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  animation: sog-fade-down 0.8s ease-out !important;
}

.blog-hero-content .ref-tamil-badge .ref-badge-icon {
  color: #F8D868 !important;
  font-size: 14px !important;
}

.blog-hero-content .ref-tamil-badge .ref-badge-text {
  font-family: 'Noto Sans Tamil', 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #FFFDF8 !important;
  letter-spacing: 0.4px !important;
}

.blog-hero-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.blog-hero-title .title-dark {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(26px, 3.8vw, 48px) !important;
  font-weight: 900 !important;
  color: #4A080E !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.blog-hero-title .title-gold {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(20px, 2.9vw, 36px) !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #96610E 0%, #B88226 25%, #E2B755 50%, #B88226 75%, #845209 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: goldSheenLight 6s linear infinite !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.blog-brand-tagline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 2px 0 !important;
}

.blog-brand-tagline .ref-hero-brand-logo {
  height: 28px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(74, 8, 14, 0.25)) !important;
}

.blog-brand-tagline .ref-tagline-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #4A080E !important;
  letter-spacing: 0.4px !important;
}

.blog-hero-subtitle {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(13px, 1.2vw, 15.5px) !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  color: #38231B !important;
  max-width: 800px !important;
  margin: 4px 0 !important;
}

.blog-tamil-content {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 6px 18px !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 4px 14px rgba(74, 8, 14, 0.08) !important;
  margin: 4px 0 !important;
}

.blog-tamil-content .ref-tamil-line-1 {
  font-family: 'Noto Sans Tamil', 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #4A080E !important;
}

.blog-tamil-content .ref-best-price-badge-inline {
  display: inline-block !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #4A080E 0%, #200307 100%) !important;
  color: #F8D868 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  border: 1px solid #D4AF37 !important;
}

.blog-cta-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 8px 0 4px !important;
  flex-wrap: wrap !important;
}

.blog-trust-assurance {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #4A080E !important;
  letter-spacing: 0.3px !important;
  margin-top: 4px !important;
}

.blog-trust-assurance .trust-shield-icon {
  color: #B88226 !important;
  font-size: 13px !important;
}

/* ============================================================
   2. CATEGORY PILLS & SEARCH / FILTER SECTION
   ============================================================ */

.blog-filter-bar-section {
  padding: 24px 0 10px !important;
  background: #FAF5EE !important;
}

.blog-categories-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

.blog-cat-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 22px !important;
  border-radius: 50px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(212, 175, 55, 0.38) !important;
  color: #4A080E !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 10px rgba(74, 8, 14, 0.05) !important;
  text-decoration: none !important;
}

.blog-cat-pill:hover,
.blog-cat-pill.is-active {
  background: linear-gradient(135deg, #4A080E 0%, #300408 100%) !important;
  color: #F8D868 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 6px 18px rgba(74, 8, 14, 0.25) !important;
  transform: translateY(-2px) !important;
}

.blog-cat-pill i {
  color: #D4AF37 !important;
}

.blog-cat-pill.is-active i {
  color: #F8D868 !important;
}

/* ============================================================
   3. BLOG LISTING GRID & LUXURY CARDS
   ============================================================ */

.blog-listing {
  padding: 30px 0 80px !important;
  background: #FAF5EE !important;
}

.blog-section-header {
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto 40px !important;
}

.blog-section-header .ref-kicker-badge-gold {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 16px !important;
  border-radius: 30px !important;
  background: rgba(212, 175, 55, 0.16) !important;
  border: 1px solid #D4AF37 !important;
  color: #845209 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

.blog-section-title {
  margin: 0 0 10px !important;
  color: #4A080E !important;
  font-family: 'Playfair Display', 'Cinzel', serif !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
}

.blog-section-subtitle {
  margin: 0 !important;
  color: #5C3529 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* GRID LAYOUT (3 Columns Desktop) */
.blog-grid-page {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
  align-items: stretch !important;
}

/* BLOG CARD ITEM (LISTING PAGE SPECIFIC) */
.blog-grid-page .blog-card-page {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.blog-grid-page .blog-card-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #FFFFFF !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.38) !important;
  box-shadow: 0 10px 30px rgba(74, 8, 14, 0.06) !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.35s ease, box-shadow 0.4s ease !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  position: relative !important;
}

/* Golden top shimmer ribbon */
.blog-grid-page .blog-card-inner::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #96610E 0%, #D4AF37 50%, #96610E 100%) !important;
  opacity: 0.7 !important;
  transition: opacity 0.35s ease, height 0.35s ease !important;
  z-index: 5 !important;
}

.blog-grid-page .blog-card-inner:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 20px 45px rgba(184, 134, 11, 0.22), 0 0 20px rgba(212, 175, 55, 0.15) !important;
}

.blog-grid-page .blog-card-inner:hover::before {
  opacity: 1 !important;
  height: 5px !important;
}

/* FEATURED IMAGE WRAPPER */
.blog-grid-page .blog-card-img-wrap {
  margin: 16px 16px 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 16 / 10 !important;
  background: #F1F5F9 !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.blog-grid-page .blog-card-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.blog-grid-page .blog-card-inner:hover .blog-card-img-wrap img {
  transform: scale(1.08) !important;
}

/* Floating Category Tag on Image */
.blog-grid-page .blog-floating-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  background: rgba(20, 10, 5, 0.88) !important;
  border: 1px solid #D4AF37 !important;
  color: #F8D868 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  z-index: 2 !important;
}

/* CARD CONTENT */
.blog-grid-page .blog-card-body {
  padding: 20px 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* METADATA ROW */
.blog-grid-page .blog-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #7A584D !important;
}

.blog-grid-page .meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.blog-grid-page .meta-item i {
  color: #B88226 !important;
  font-size: 13px !important;
}

/* TITLE */
.blog-grid-page .blog-card-title {
  margin: 0 0 10px !important;
  color: #4A080E !important;
  font-family: 'Playfair Display', 'Cinzel', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  transition: color 0.25s ease !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.blog-grid-page .blog-card-inner:hover .blog-card-title {
  color: #B88226 !important;
}

/* EXCERPT */
.blog-grid-page .blog-card-excerpt {
  margin: 0 0 20px !important;
  color: #5C3529 !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
  flex-grow: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* READ MORE BUTTON */
.blog-grid-page .blog-card-action {
  margin-top: auto !important;
}

.blog-grid-page .btn-read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  background: #FFFDF9 !important;
  color: #4A080E !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

.blog-grid-page .btn-read-more i {
  font-size: 12px !important;
  color: #B88226 !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.blog-grid-page .blog-card-inner:hover .btn-read-more {
  background: linear-gradient(135deg, #4A080E 0%, #200307 100%) !important;
  color: #F8D868 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 4px 14px rgba(74, 8, 14, 0.25) !important;
}

.blog-grid-page .blog-card-inner:hover .btn-read-more i {
  transform: translateX(4px) !important;
  color: #F8D868 !important;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1080px) {
  .blog-grid-page {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

@media (max-width: 992px) {
  .blog-banner-hero {
    min-height: auto !important;
    height: auto !important;
    padding-top: 105px !important;
    padding-bottom: 40px !important;
  }

  .blog-hero-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 16px !important;
  }

  .blog-hero-title .title-dark,
  .blog-hero-title .title-gold {
    font-size: clamp(20px, 5vw, 34px) !important;
  }
}

@media (max-width: 680px) {
  .blog-banner-hero {
    padding-top: 95px !important;
    padding-bottom: 30px !important;
  }

  .blog-grid-page {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .blog-listing {
    padding: 24px 0 50px !important;
  }

  .blog-card-body {
    padding: 16px 18px 20px !important;
  }

  .blog-card-img-wrap {
    margin: 12px 12px 0 !important;
  }

  .blog-cta-buttons {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .blog-cta-buttons a {
    width: 100% !important;
    justify-content: center !important;
  }

  .blog-trust-assurance {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}

/* LUXURY SCROLL REVEAL SUITE */

.agy-reveal,
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.agy-reveal.is-revealed,
.reveal-on-scroll.is-visible,
.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Reveal Variations */
.agy-reveal-scale {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}
.agy-reveal-scale.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.agy-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}
.agy-reveal-left.is-revealed {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.agy-reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}
.agy-reveal-right.is-revealed {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Stagger Delays for Grid Children */
.agy-stagger-1 { transition-delay: 0.08s !important; }
.agy-stagger-2 { transition-delay: 0.16s !important; }
.agy-stagger-3 { transition-delay: 0.24s !important; }
.agy-stagger-4 { transition-delay: 0.32s !important; }
.agy-stagger-5 { transition-delay: 0.40s !important; }
.agy-stagger-6 { transition-delay: 0.48s !important; }

@media (prefers-reduced-motion: reduce) {
  .agy-reveal,
  .agy-reveal-scale,
  .agy-reveal-left,
  .agy-reveal-right,
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}