/* ========================================
   UPDATES PAGE
   Light Theme
   ======================================== */

/* Page Container */
.updates-page {
  background: #ffffff;
  color: #000;
  min-height: 100vh;
}

/* Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  height: clamp(320px, 35vw, 460px);
  overflow: hidden;
  margin-bottom: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  opacity: 1;
}

.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero-section .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 45%,
    rgba(0,0,0,0.0) 100%
  );
  pointer-events: none;
}

.hero-credit {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.75);
  z-index: 1;

  /* allow clicking the link */
  pointer-events: auto;

  /* helps on bright cloud areas */
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.hero-credit a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-credit a:hover {
  color: rgba(255,255,255,1);
}

.hero-credit .sep {
  margin: 0 8px;
}

/* Main Content Container with Dual Sidebars */
.updates-page-wrapper {
  width: 100%;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem 4rem;
  box-sizing: border-box;
}

.updates-container {
  flex: 0 0 auto;
  max-width: 1200px;
  width: 100%;
}

/* Updates Content Area */
.updates {
  width: 100%;
}

/* Page Title */
.updates h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: #000;
  text-align: left;
  letter-spacing: -0.02em;
}

/* Intro Text */
.updates-intro {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 3rem;
  max-width: 900px;
}

/* Updates List - Row Layout */
.updates-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Individual Update Row */
.update-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.update-row:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.update-link {
  display: flex;
  flex-direction: row;
  color: inherit;
  text-decoration: none;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
}

/* Update Image */
.update-image {
  flex-shrink: 0;
  width: 280px;
  height: 157px;
  overflow: hidden;
  border-radius: 6px;
  background: #f3f4f6;
}

.update-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.update-row:hover .update-image img {
  transform: scale(1.05);
}

/* Update Content */
.update-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* Update Title */
.update-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: #000;
  line-height: 1.3;
}

/* Update Excerpt */
.update-excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 0.75rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Update Meta (Date) */
.update-meta {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.5);
}

/* Responsive Layout */
@media (max-width: 768px) {
  .update-link {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
  }

  .update-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
}

/* Cards Grid - Legacy (keep for backwards compatibility) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Individual Card */
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-4px);
  border-color: #d1d5db;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Card Image */
.card .card-media {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f3f4f6;
}

.card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.card:hover .card-media img {
  transform: scale(1.05);
}

/* Card Body */
.card .card-body {
  padding: 1.5rem;
}

/* Card Tags */
.card .card-tags {
  margin-bottom: 0.75rem;
}

.card .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

/* Card Title */
.card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.5rem 0;
  color: #000;
  line-height: 1.4;
}

/* Card Meta (Date & Read Time) */
.card .meta {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.5);
  margin: 0.5rem 0;
}

/* Card Excerpt */
.card .excerpt {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 0.75rem;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 0.5rem;
  margin: 3rem 0 0;
  justify-content: center;
  align-items: center;
}

.page-btn {
  padding: 0.625rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #ffffff;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 40px;
  text-align: center;
}

.page-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #000;
}

.page-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* ========================================
   INDIVIDUAL POST PAGE
   ======================================== */

.updates.post {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  background: #ffffff;
  color: #000;
}

.post-header .post-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin: 0.5rem 0 1rem;
  color: #000;
  line-height: 1.2;
}

.post .meta {
  color: rgba(0, 0, 0, 0.5);
  margin: 0.5rem 0 2rem;
  font-size: 0.9375rem;
}

.post-body,
.post p,
.post li {
  line-height: 1.7;
  font-size: 1.0625rem;
  margin: 1rem 0 1.5rem;
  color: rgba(0, 0, 0, 0.85);
}

.post h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
  color: #000;
}

.post h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
  color: #000;
}

.post p {
  margin: 0 0 1rem 0;
  font-size: 1.0625rem;
}

.post ul,
.post ol {
  margin: 0 0 1rem 0;
  padding-left: 2rem;
  font-size: 1.0625rem;
}

.post li {
  margin: 0 0 0.5rem 0;
}

.post a {
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, 0.3);
  transition: all 0.2s ease;
}

.post a:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}

.post img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 2rem 0;
}

/* Featured Image */
.featured-image {
  max-width: 100%;
  overflow: hidden;
  margin: 1.5rem 0;
}

.featured-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ========================================
   AD SIDEBAR STYLING - DUAL AD UNIT SYSTEM
   
   Standard AdSense sizes used:
   - 300×600 (Half-page/Large skyscraper) - ≥1400px viewport
   - 160×600 (Wide skyscraper) - 1200-1399px viewport
   - Hidden below 1200px viewport
   
   COMPLETE ADSENSE IMPLEMENTATION GUIDE
   ======================================
   
   STEP 1: Add AdSense Script to <head> (ONCE ONLY)
   -------------------------------------------------
   <script async 
     src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7099143341693852"
     crossorigin="anonymous"></script>
   
   DO NOT repeat this script in each ad unit
   Load ONCE in <head>, works for all ads on page
   
   
   STEP 2: HTML Structure with Dual Ad Units
   ------------------------------------------
   <div class="updates-page-wrapper">
     <!-- LEFT SIDEBAR -->
     <aside class="ad-sidebar ad-sidebar-left">
       <div class="ad-container">
         <div class="ad-label">Sponsored</div>
         
         <!-- LEFT: 300x600 (shown ≥1400px) -->
         <div class="ad-unit ad-300">
           <ins class="adsbygoogle"
                style="display:inline-block;width:300px;height:600px"
                data-ad-client="ca-pub-7099143341693852"
                data-ad-slot="6662906762"></ins>
         </div>
         
         <!-- LEFT: 160x600 (shown 1200-1399px) -->
         <div class="ad-unit ad-160">
           <ins class="adsbygoogle"
                style="display:inline-block;width:160px;height:600px"
                data-ad-client="ca-pub-7099143341693852"
                data-ad-slot="1981248110"></ins>
         </div>
         
         <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
           (adsbygoogle = window.adsbygoogle || []).push({});
         </script>
       </div>
     </aside>
     
     <!-- CENTER CONTENT -->
     <div class="updates-container">
       <div class="updates">
         [Main content here]
       </div>
     </div>
     
     <!-- RIGHT SIDEBAR -->
     <aside class="ad-sidebar ad-sidebar-right">
       <div class="ad-container">
         <div class="ad-label">Sponsored</div>
         
         <!-- RIGHT: 300x600 (shown ≥1400px) -->
         <div class="ad-unit ad-300">
           <ins class="adsbygoogle"
                style="display:inline-block;width:300px;height:600px"
                data-ad-client="ca-pub-7099143341693852"
                data-ad-slot="2256757897"></ins>
         </div>
         
         <!-- RIGHT: 160x600 (shown 1200-1399px) -->
         <div class="ad-unit ad-160">
           <ins class="adsbygoogle"
                style="display:inline-block;width:160px;height:600px"
                data-ad-client="ca-pub-7099143341693852"
                data-ad-slot="5050442190"></ins>
         </div>
         
         <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
           (adsbygoogle = window.adsbygoogle || []).push({});
         </script>
       </div>
     </aside>
   </div>
   
   ADSENSE SLOT IDs (ExoAtlas):
   - Left 300×600: 6662906762
   - Left 160×600: 1981248110
   - Right 300×600: 2256757897
   - Right 160×600: 5050442190
   
   
   STEP 3: CSS Layout Behavior
   ----------------------------
   - .updates-page-wrapper: Full-width flex container with centered layout
   - .ad-sidebar: Flex items with EXPLICIT flex-basis per breakpoint
     * 300×600 ads: flex: 1 1 300px + min-width: 300px
     * 160×600 ads: flex: 1 1 160px + min-width: 160px
     * padding-top: 100px — Ads start 100px from top initially
   - .updates-container: Fixed max-width center content (doesn't grow beyond limit)
   - .ad-container: Sticky positioned with dynamic centering
     * top: calc(50vh - 300px) — Vertically centers ads when sticky
     * Ads scroll with page initially, then stick centered in viewport
     * Let <ins> define size (NO fixed width/height)
   - .ad-unit: Wrapper with display:flex for centering the <ins>
   - .ad-label: "Sponsored" text above ads
   
   CRITICAL: DO NOT use flex: 1 1 0 without min-width enforcement!
   The sidebar MUST have a flex-basis matching the ad width at each breakpoint,
   or the content can compress sidebars below the ad size causing clipping.
   
   
   STEP 4: Responsive Strategy
   ----------------------------
   ≥1920px viewport:
     - Content: 1200px max-width
     - Sidebars: flex: 1 1 300px, min-width: 300px
     - Ads: 300×600 (.ad-300 visible, .ad-160 hidden)
     - Spacing: 2rem padding, 2rem gap
     - Sidebars expand beyond 300px to fill space, ads centered
   
   1600-1919px viewport:
     - Content: 900-1100px (clamp with 50vw) - aggressively constrained
     - Sidebars: flex: 1 1 300px, min-width: 300px
     - Ads: 300×600 (.ad-300 visible, .ad-160 hidden)
     - Spacing: 1.5rem padding, 1.5rem gap
     - Prevents clipping by shrinking content early
   
   1400-1599px viewport:
     - Content: 900-1100px (clamp with 70vw)
     - Sidebars: flex: 1 1 160px, min-width: 160px
     - Ads: SWITCH to 160×600 (.ad-300 hidden, .ad-160 visible)
     - Spacing: 1rem padding, 1rem gap
     - Early switch to narrow ads prevents overflow
   
   1200-1399px viewport:
     - Content: 800-1000px (clamp with 70vw)
     - Sidebars: flex: 1 1 160px, min-width: 160px
     - Ads: 160×600 (.ad-300 hidden, .ad-160 visible)
     - Spacing: 1rem padding, 1rem gap
     - Tight layout with narrow ads
   
   <1200px viewport:
     - Ads: HIDDEN (.ad-sidebar display: none)
     - Content: 600-900px (clamp with 90vw), centered
     - Spacing: 1.5rem padding
     - Content takes priority on smaller screens
   
   768-1199px (tablet):
     - Ads: Hidden
     - Content: 600-800px (clamp with 85vw)
     - Optimized for tablet reading
   
   <768px (mobile):
     - Ads: Hidden
     - Content: 100% width
     - Spacing: 1rem padding
     - Full mobile-responsive
   
   
   STEP 5: Key Implementation Principles
   --------------------------------------
   1. Load AdSense script ONCE in <head>, not per ad unit
   2. Include BOTH ad sizes (300×600 + 160×600) in each sidebar
   3. Toggle visibility with CSS (.ad-300 vs .ad-160) at breakpoints
   4. Call push({}) ONCE per <ins> element (2 per sidebar = 4 total)
   5. Use CSS viewport width (not screen resolution) for breakpoints
   6. Only use standard AdSense sizes (300×600, 160×600)
   7. CRITICAL: Set explicit flex-basis per breakpoint (not flex: 1 1 0)
      - 300×600 ads: flex: 1 1 300px with min-width: 300px
      - 160×600 ads: flex: 1 1 160px with min-width: 160px
   8. Enforce min-width to prevent sidebar compression below ad size
   9. DO NOT set width/height on .ad-container - let <ins> define size
   10. Shrink content width BEFORE ads clip off screen
   11. Switch to narrow ads (160×600) at 1400px to prevent overflow
   12. Hide ads completely below 1200px for professional appearance
   13. Use clamp() for fluid content sizing within constraints
   14. Sticky positioning requires: top offset + NO overflow:hidden ancestors
   
   
   STEP 6: To Apply to Other Pages
   --------------------------------
   1. Add AdSense script to <head> if not already present
   2. Copy exact HTML structure from STEP 2 above
   3. Replace wrapper class name if needed (.updates-page-wrapper → .your-page-wrapper)
   4. Replace content container class (.updates-container → .your-content-container)
   5. Copy ALL CSS rules below (through "RESPONSIVE BREAKPOINTS" section)
   6. Update class names in CSS to match your wrapper/container names
   7. Adjust content max-widths per breakpoint if needed for your page layout
   8. KEEP sidebar flex-basis, min-width, and ad toggle logic EXACTLY as shown
   9. KEEP all breakpoint values (1920, 1600, 1400, 1200, 768) unchanged
   10. Test at all viewport sizes to ensure no clipping or overflow
   
   
   COMMON PITFALLS TO AVOID
   ------------------------
   Loading adsbygoogle.js multiple times (once per ad)
   Using flex: 1 1 0 without explicit min-width on sidebars
   Setting fixed width/height on .ad-container (breaks responsiveness)
   Only including one ad size per sidebar (can't toggle)
   Using non-standard ad sizes (won't fill well)
   Tying breakpoints to screen resolution instead of viewport width
   Having overflow:hidden on ancestor elements (breaks sticky positioning)
   Forgetting to call push({}) for each <ins> element
   ======================================== */
.ad-sidebar {
  /* Default base styling - overridden by breakpoints */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Start ads near the top initially */
  padding-top: 100px; /* Position ads 100px from top on initial load */
  align-self: stretch; /* Match height of content column to enable sticky throughout scroll */
}

.ad-container {
  position: sticky;
  top: 50%; /* Stick to vertical center of viewport when scrolling */
  transform: translateY(-50%); /* Center the ad container itself */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;   /* subtle, neutral */
  padding: 8px;
  margin: 0;
  background-color: #fafafa;
}

/* Ad label styling */
.ad-label {
  font-size: 0.7rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  font-weight: 500;
  text-align: center;
}

/* Center the <ins> within each ad unit */
.ad-unit {
  display: flex;
  justify-content: center;
}

/* Default: show 300x600, hide 160x600 */
.ad-160 {
  display: none;
}

/* Optional: subtle visual separation */
.ad-container::before {
  content: "";
  display: none; /* Disabled - using .ad-label div instead */
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   Based on CSS viewport width for AdSense optimization
   ======================================== */

/* Large viewports (≥1920px) - Full layout with 300×600 ads */
@media (min-width: 1920px) {
  .updates-page-wrapper {
    padding: 2rem 2rem 4rem;
    gap: 2rem;
  }
  
  .updates-container {
    max-width: 1200px;
  }
  
  .ad-sidebar {
    flex: 1 1 300px;
    min-width: 300px;
  }
}

/* Medium-Large viewports (1600-1919px) - 300×600 ads with constrained content */
@media (min-width: 1600px) and (max-width: 1919px) {
  .updates-page-wrapper {
    padding: 2rem 1.5rem 4rem;
    gap: 1.5rem;
  }
  
  .updates-container {
    max-width: clamp(900px, 50vw, 1100px);
  }
  
  .ad-sidebar {
    flex: 1 1 300px;
    min-width: 300px;
  }
}

/* Medium viewports (1400-1599px) - Switch to 160×600 wide skyscraper */
@media (min-width: 1400px) and (max-width: 1599px) {
  .updates-page-wrapper {
    padding: 2rem 1rem 4rem;
    gap: 1rem;
  }
  
  .updates-container {
    max-width: clamp(900px, 70vw, 1100px);
  }
  
  .ad-sidebar {
    flex: 1 1 160px;
    min-width: 160px;
  }
  
  /* Toggle ad sizes: hide 300x600, show 160x600 */
  .ad-300 {
    display: none;
  }
  
  .ad-160 {
    display: block;
  }
}

/* Small-Medium viewports (1200-1399px) - 160×600 with tighter spacing */
@media (min-width: 1200px) and (max-width: 1399px) {
  .updates-page-wrapper {
    padding: 2rem 1rem 4rem;
    gap: 1rem;
  }
  
  .updates-container {
    max-width: clamp(800px, 70vw, 1000px);
  }
  
  .ad-sidebar {
    flex: 1 1 160px;
    min-width: 160px;
  }
  
  /* Toggle ad sizes: hide 300x600, show 160x600 */
  .ad-300 {
    display: none;
  }
  
  .ad-160 {
    display: block;
  }
}

/* Below 1200px - Hide sidebar ads, expand content */
@media (max-width: 1199px) {
  .updates-page-wrapper {
    justify-content: center;
    padding: 2rem 1.5rem 4rem;
  }
  
  .ad-sidebar {
    display: none;
  }
  
  .updates-container {
    max-width: clamp(600px, 90vw, 900px);
  }
}

/* Tablet (768-1199px) - No ads, optimized content width */
@media (min-width: 768px) and (max-width: 1199px) {
  .updates-page-wrapper {
    padding: 2rem 1.5rem 4rem;
  }
  
  .updates-container {
    max-width: clamp(600px, 85vw, 800px);
  }
}

/* Mobile (below 768px) - No ads, full-width responsive */
@media (max-width: 767px) {
  .updates-page-wrapper {
    padding: 1.5rem 1rem 3rem;
  }
  
  .updates-container {
    max-width: 100%;
  }
}