/* ============== NEWS & INSIGHTS PAGE ============== */

/* ============================================================
   FOR DEVELOPERS — How to integrate a live news feed:

   Option A: RSS/Atom Feed
   - Use a service like rss2json.com or rssatom-api.com
   - Fetch the feed JSON via fetch() in news.js
   - Render articles into #newsGrid using the same .news-card markup below

   Option B: Custom API endpoint
   - If your news provider has a JSON API, hit it from news.js
   - Map their fields to the .article-meta / .news-card structure

   Option C: Iframe Embed
   - Drop the provider's embed code into the .news-grid-section
   - Style with !important to match brand if needed

   Option D: WordPress / Headless CMS
   - Connect to a headless CMS (Contentful, Strapi, Sanity) or
     WordPress REST API, fetch posts, render into #newsGrid

   The HTML structure of a single news card:
     <article class="news-card" data-cat="rate|product|uw|industry|market|irg">
       <div class="news-card-img"><i class="ti ti-icon"></i></div>
       <div class="news-card-content">
         <div class="article-meta">
           <span class="article-cat purple|cyan|gold">Category</span>
           <span class="article-date">Date</span>
         </div>
         <h3>Headline</h3>
         <p>Excerpt</p>
         <a href="..." class="article-link-sm">Read more →</a>
       </div>
     </article>
   ============================================================ */

.news-hero {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 7rem 2rem 2rem;
}
.news-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 1rem 0;
}
.news-h1 em {
  font-style: italic;
  color: var(--gold);
}
.news-sub {
  font-size: 15.5px;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.85;
  max-width: 640px;
  margin: 0 auto;
}

/* FEATURED */
.news-featured {
  position: relative;
  z-index: 2;
  padding: 2rem 2rem;
}
.featured-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.featured-main {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s var(--ease);
}
.featured-main:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-3px);
}
.featured-img {
  position: relative;
  height: 240px;
  background: linear-gradient(135deg, rgba(201, 165, 90, 0.2), rgba(107, 39, 55,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.featured-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, var(--gold-glow), transparent 60%);
  opacity: 0.3;
}
.featured-img-placeholder {
  font-size: 80px;
  color: var(--gold);
  opacity: 0.4;
  position: relative;
}
.featured-tag {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: rgba(201,165,90,0.95);
  color: #08080c;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(10px);
}
.featured-content {
  padding: 2rem;
}
.featured-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0.75rem 0;
}
.featured-excerpt {
  font-size: 14.5px;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.featured-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.featured-secondary {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.25s var(--ease);
  flex: 1;
}
.featured-secondary:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-2px);
}
.featured-secondary h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0.5rem 0;
  letter-spacing: -0.005em;
}
.featured-secondary p {
  font-size: 13px;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

/* META TAGS */
.article-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.article-cat {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(245, 237, 220, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text2);
}
.article-cat.purple {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(201, 165, 90, 0.18);
  color: var(--purple-light);
}
.article-cat.cyan {
  background: rgba(107, 39, 55,0.1);
  border-color: rgba(184, 146, 61, 0.3);
  color: var(--cyan);
}
.article-cat.gold {
  background: rgba(201,165,90,0.1);
  border-color: rgba(201,165,90,0.25);
  color: var(--gold-light);
}
.article-date {
  font-size: 11.5px;
  color: var(--text3);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.article-date i { font-size: 13px; }

.article-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--purple-light);
  text-decoration: none;
  font-weight: 500;
  transition: gap 0.2s var(--ease);
}
.article-link:hover { gap: 9px; color: var(--purple); }
.article-link i { font-size: 15px; }

.article-link-sm {
  font-size: 12.5px;
  color: var(--purple-light);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s var(--ease);
}
.article-link-sm:hover { color: var(--purple); }

/* CATEGORY TABS */
.news-cats {
  position: relative;
  z-index: 2;
  padding: 2.5rem 2rem 1.5rem;
}
.news-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.news-tab {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text2);
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  letter-spacing: 0.02em;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.news-tab:hover {
  background: var(--glass-strong);
  color: var(--text);
  border-color: var(--glass-border-strong);
}
.news-tab.active {
  background: linear-gradient(135deg, var(--purple), var(--purple-dim));
  color: #14263D;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(201, 165, 90, 0.25);
}

/* NEWS GRID */
.news-grid-section {
  position: relative;
  z-index: 2;
  padding: 2rem 2rem 4rem;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}
.news-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.25s var(--ease);
  display: flex;
  flex-direction: column;
}
.news-card.hidden {
  display: none;
}
.news-card:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-3px);
}
.news-card-img {
  height: 140px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.25), rgba(107, 39, 55,0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: var(--gold);
  opacity: 0.85;
  position: relative;
}
.news-card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(201,165,90,0.08), transparent 70%);
}
.news-card-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.news-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0.625rem 0;
  letter-spacing: -0.005em;
  color: var(--text);
}
.news-card p {
  font-size: 13px;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: 1rem;
  flex: 1;
}

.news-load-more {
  text-align: center;
  margin-top: 2.5rem;
}
.news-load-more .btn-ghost i {
  font-size: 15px;
}

/* NEWSLETTER SIGNUP */
.news-signup {
  position: relative;
  z-index: 2;
  padding: 4rem 2rem 6rem;
}
.signup-block {
  background: linear-gradient(135deg, rgba(201,165,90,0.1), rgba(245, 237, 220, 0.08));
  border: 1px solid rgba(201,165,90,0.25);
  border-radius: var(--radius-xl);
  padding: 3rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}
.signup-block::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  opacity: 0.4;
  pointer-events: none;
}
.signup-icon {
  width: 80px;
  height: 80px;
  min-width: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #08080c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 0 30px var(--gold-glow);
  position: relative;
  z-index: 1;
}
.signup-content {
  flex: 1;
  position: relative;
  z-index: 1;
}
.signup-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 0.75rem;
}
.signup-h2 em {
  font-style: italic;
  color: var(--gold);
}
.signup-content > p {
  font-size: 14px;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.newsletter-form {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
  margin-bottom: 0.75rem;
}
.newsletter-form input {
  flex: 1;
  background: rgba(245, 237, 220, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  padding: 0.7rem 1rem;
  transition: all 0.2s var(--ease);
}
.newsletter-form input:focus {
  outline: none;
  border-color: var(--purple);
  background: rgba(245, 237, 220, 0.05);
  box-shadow: 0 0 0 3px rgba(201, 165, 90, 0.18);
}
.newsletter-form input::placeholder {
  color: var(--text3);
}
.signup-fine {
  font-size: 11.5px;
  color: var(--text3);
  font-weight: 300;
  font-style: italic;
}

@media (max-width: 900px) {
  .featured-grid {
    grid-template-columns: 1fr;
  }
  .featured-img { height: 200px; }
  .featured-content { padding: 1.5rem; }
  .signup-block {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .newsletter-form {
    flex-direction: column;
    margin: 0 auto 0.75rem;
  }
  .newsletter-form button {
    width: 100%;
    justify-content: center;
  }
}

/* ============== COMING SOON STATE ============== */
.news-coming-soon {
  position: relative;
  z-index: 2;
  padding: 2rem 2rem 6rem;
}
.coming-soon-block {
  position: relative;
  text-align: center;
  background: linear-gradient(135deg, rgba(245, 237, 220, 0.1), rgba(107, 39, 55,0.04));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 4rem 3rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.coming-soon-block::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  opacity: 0.25;
  pointer-events: none;
}
.cs-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #08080c;
  font-size: 34px;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 40px var(--gold-glow);
  z-index: 2;
}
.cs-pulse {
  position: absolute;
  top: calc(4rem + 18px);
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0.6;
  animation: csPulse 2s ease-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes csPulse {
  0% { transform: translateX(-50%) scale(1); opacity: 0.6; }
  100% { transform: translateX(-50%) scale(2.2); opacity: 0; }
}
.cs-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 1rem;
  position: relative;
}
.cs-h2 em {
  font-style: italic;
  color: var(--gold);
}
.cs-text {
  font-size: 15px;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.8;
  max-width: 540px;
  margin: 0 auto 2.5rem;
  position: relative;
}
.cs-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.cs-meta-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: rgba(245, 237, 220, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  text-align: left;
}
.cs-meta-item i {
  font-size: 22px;
  color: var(--gold);
  flex-shrink: 0;
}
.cs-meta-item strong {
  display: block;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}
.cs-meta-item span {
  font-size: 11px;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.4;
}
@media (max-width: 700px) {
  .coming-soon-block {
    padding: 3rem 1.5rem;
  }
  .cs-meta {
    grid-template-columns: 1fr;
  }
}

/* ============== AIN ESSENTIALS NEWS FEED ============== */

.news-ain {
  padding: 1.5rem 0 5rem;
  position: relative;
}

.news-ain-intro {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.news-ain-intro .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

/* Container that holds the AIN-injected content */
.ain-feed-wrap {
  position: relative;
  min-height: 200px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Loading state — shown while AIN script loads */
.ain-feed-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1rem;
  text-align: center;
}
.ain-feed-loading p {
  color: var(--text2);
  font-size: 14px;
  font-style: italic;
  margin: 0;
}
.ain-loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(201, 165, 90, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: ain-spin 0.8s linear infinite;
}
@keyframes ain-spin {
  to { transform: rotate(360deg); }
}
/* Hide loading state once AIN injects content (the script adds children, displacing loader visually) */
.ain-feed-wrap > *:not(.ain-feed-loading):not(noscript):not(script) ~ .ain-feed-loading {
  display: none;
}

/* No-JS fallback */
.ain-noscript {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text2);
}
.ain-noscript a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Attribution line below the feed */
.ain-attribution {
  text-align: center;
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
  margin-top: 1.5rem;
  letter-spacing: 0.02em;
}
.ain-attribution a {
  color: var(--gold-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 165, 90, 0.3);
  transition: border-color 0.2s var(--ease);
}
.ain-attribution a:hover {
  border-bottom-color: var(--gold);
}

/* ============== STYLING THE AIN-INJECTED CONTENT ==============
   AIN's script injects its own HTML. We can't fully control its
   styling, but we can apply some basic inheritance to make it
   blend better with the IRG theme. */
.ain-feed-wrap a {
  color: var(--gold-light);
}
.ain-feed-wrap a:hover {
  color: var(--gold);
}
/* If AIN renders article headlines as headings, give them the IRG treatment */
.ain-feed-wrap h1,
.ain-feed-wrap h2,
.ain-feed-wrap h3 {
  font-family: 'Playfair Display', serif !important;
  color: var(--text) !important;
}
.ain-feed-wrap p {
  color: var(--text2);
  line-height: 1.65;
}
/* Tables AIN might render */
.ain-feed-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.ain-feed-wrap td,
.ain-feed-wrap th {
  padding: 0.75rem;
  border-bottom: 1px solid var(--glass-border);
}

@media (max-width: 700px) {
  .ain-feed-wrap {
    padding: 1.5rem 1.25rem;
  }
  .news-ain {
    padding: 3rem 0 4rem;
  }
}

/* Fallback shown if AIN doesn't render anything after timeout */
.ain-fallback {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text2);
}
.ain-fallback p {
  font-size: 14px;
  margin: 0;
  line-height: 1.7;
}
.ain-fallback a {
  color: var(--gold-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 165, 90, 0.4);
  font-weight: 500;
}
.ain-fallback a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}