/* ========================================
   BLOG/UPDATE PAGE TEMPLATE CSS
   Version: 1.1.0 (January 2026)
   
   OVERVIEW:
   This is a complete, production-ready CSS template for blog/update pages
   with dual sidebar Google AdSense integration. Use this template for any
   content page requiring professional layout with ad monetization.
   
   KEY FEATURES:
   - Light theme with automatic dark mode support (prefers-color-scheme)
   - Dual sidebar layout with responsive AdSense ads
   - Hero image section with credit attribution
   - Flexible content layouts (row-based or card grid)
   - Individual post page styling
   - Complete responsive breakpoint system
   - Optimized for readability and SEO
   - Pure CSS dark mode (no JavaScript required)
   
   HOW TO USE THIS TEMPLATE:
   1. Copy this entire CSS file to your new page directory
   2. Rename wrapper class if needed (.updates-page-wrapper → .your-page-wrapper)
   3. Update AdSense slot IDs in HTML (see AdSense section below)
   4. Adjust max-width values for content if needed
   5. Customize colors in CSS custom properties section (light & dark themes)
   6. Test at all breakpoints (mobile, tablet, desktop, large screens)
   7. Test in both light and dark mode (system preference)
   
   DARK MODE:
   Automatically adapts to user's system color scheme preference.
   Customize dark mode colors in the @media (prefers-color-scheme: dark) section.
   
   ======================================== */

/* ========================================
   CSS CUSTOM PROPERTIES (THEME COLORS)
   
   CUSTOMIZATION POINT:
   Modify these values to match your site's color scheme.
   Light theme colors defined here, dark theme in @media query below.
   ======================================== */

:root {
  /* Light Theme Colors */
  
  /* Background Colors */
  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --ad-bg: #fafafa;
  
  /* Text Colors */
  --text-primary: #000;
  --text-secondary: rgba(0, 0, 0, 0.85);
  --text-muted: rgba(0, 0, 0, 0.65);
  --text-light: rgba(0, 0, 0, 0.5);
  
  /* Border Colors */
  --border-default: #e5e7eb;
  --border-hover: #d1d5db;
  --border-ad: #e0e0e0;
  
  /* Accent Colors */
  --link-color: #2563eb;
  --link-hover: #1d4ed8;
  --active-bg: #2563eb;
  
  /* Tag/Badge Colors */
  --tag-bg: #f3f4f6;
  --tag-text: #374151;
  
  /* Ad Label */
  --ad-label-color: #9ca3af;
}

/* ========================================
   PAGE CONTAINER & LAYOUT
   ======================================== */

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

/* ========================================
   HERO SECTION (OPTIONAL)
   
   Use for featured images at top of pages
   Includes responsive height and credit attribution
   Remove if not needed for your page
   ======================================== */

/* 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 LAYOUT
   
   Three-column flex layout:
   - Left sidebar (ads)
   - Center content (main content)
   - Right sidebar (ads)
   
   CUSTOMIZATION NOTES:
   - Adjust .updates-container max-width for content width
   - Sidebar widths controlled by breakpoints (see responsive section)
   - Gap spacing adjustable per breakpoint
   ======================================== */

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

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

/* ========================================
   CONTENT AREA STYLES
   
   Styles for main content text, titles, and intro
   ======================================== */

/* 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 LAYOUT (ROW-BASED)
   
   Modern row-based layout for update listings
   Each row contains image + content side-by-side
   Responsive: stacks vertically on mobile
   
   Use this for: Blog post listings, news updates
   ======================================== */

/* 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;
  }
}

/* ========================================
   CARD GRID LAYOUT (LEGACY/ALTERNATIVE)
   
   Grid-based card layout (alternative to row layout)
   Auto-fills columns based on container width
   
   Use this for: Multiple update cards, feature showcases
   NOTE: Both layouts can coexist - use as needed
   ======================================== */

/* 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 BLOG POST PAGE
   
   Styles for single post/article pages
   Includes header, body text, images, and footer
   
   CUSTOMIZATION NOTES:
   - Adjust font sizes for readability preferences
   - Link colors customizable in .post a styles
   - Image styling includes border-radius for modern look
   ======================================== */

.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;
}

/* ========================================
   DARK MODE SUPPORT
   
   Automatically adapts to user's system color scheme preference
   (prefers-color-scheme: dark)
   
   CUSTOMIZATION:
   Adjust color values below to match your dark theme preferences.
   All component colors are overridden for optimal dark mode display.
   ======================================== */

@media (prefers-color-scheme: dark) {
  /* Page Background */
  .updates-page {
    background: #0a0a0a;
    color: #ffffff;
  }

  /* Page Title */
  .updates h1 {
    color: #ffffff;
  }

  /* Intro Text */
  .updates-intro {
    color: rgba(255, 255, 255, 0.7);
  }

  /* Update Row (Row Layout) */
  .update-row {
    background: #1a1a1a;
    border-color: #2a2a2a;
  }

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

  .update-title {
    color: #ffffff;
  }

  .update-excerpt {
    color: rgba(255, 255, 255, 0.7);
  }

  .update-meta {
    color: rgba(255, 255, 255, 0.5);
  }

  .update-image {
    background: #2a2a2a;
  }

  /* Card (Grid Layout) */
  .card {
    background: #1a1a1a;
    border-color: #2a2a2a;
  }

  .card:hover {
    border-color: #3a3a3a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  .card h3 {
    color: #ffffff;
  }

  .card .meta {
    color: rgba(255, 255, 255, 0.5);
  }

  .card .excerpt {
    color: rgba(255, 255, 255, 0.7);
  }

  .card .card-media {
    background: #2a2a2a;
  }

  .card .tag {
    background: #2a2a2a;
    color: rgba(255, 255, 255, 0.7);
    border-color: #2a2a2a;
  }

  .card:hover .tag {
    background: #3a3a3a;
    color: rgba(255, 255, 255, 0.85);
  }

  /* Pagination */
  .page-btn {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: rgba(255, 255, 255, 0.85);
  }

  .page-btn:hover {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #ffffff;
  }

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

  /* Individual Post Page */
  .post-container {
    background: #0a0a0a;
    color: #ffffff;
  }

  .post-header .post-category .category-badge {
    background: #2a2a2a;
    color: rgba(255, 255, 255, 0.85);
  }

  .post-header .post-title {
    color: #ffffff;
  }

  .post-header .post-meta,
  .post-header .post-meta time,
  .post-header .post-meta .post-author {
    color: rgba(255, 255, 255, 0.5);
  }

  .post-intro {
    color: rgba(255, 255, 255, 0.8);
  }

  .post-body,
  .post p,
  .post li {
    color: rgba(255, 255, 255, 0.85);
  }

  .post h2 {
    color: #ffffff;
    border-bottom-color: #2a2a2a;
  }

  .post h3 {
    color: #ffffff;
  }

  .post a {
    color: #60a5fa;
    border-bottom-color: rgba(96, 165, 250, 0.3);
  }

  .post a:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
  }

  .post code {
    background: #2a2a2a;
    color: #60a5fa;
  }

  .post-tags {
    border-top-color: #2a2a2a;
  }

  .post-tags .tag-link {
    background: #2a2a2a;
    color: rgba(255, 255, 255, 0.7);
    border-color: #2a2a2a;
  }

  .post-tags .tag-link:hover {
    background: #3a3a3a;
    color: #ffffff;
    border-color: #3a3a3a;
  }

  .post-footer {
    border-top-color: #2a2a2a;
  }

  .post-footer p,
  .post-footer strong {
    color: rgba(255, 255, 255, 0.85);
  }

  .post-footer a {
    color: #60a5fa;
  }

  .post-footer a:hover {
    color: #93c5fd;
  }

  /* Ad Container (dark mode compatible) */
  .ad-container {
    background-color: #1a1a1a;
    border-color: #2a2a2a;
  }

  .ad-label {
    color: rgba(255, 255, 255, 0.5);
  }
}

/* ========================================
   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;
}

.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%;
  }
}

/* ========================================
   END OF TEMPLATE
   
   QUICK REFERENCE CHECKLIST:
   ---------------------------
   
   REQUIRED HTML STRUCTURE:
   <div class="updates-page">
     <div class="hero-section"> [OPTIONAL]
     <div class="updates-page-wrapper">
       <aside class="ad-sidebar ad-sidebar-left">
       <div class="updates-container">
         <div class="updates">
           <h1> [Page title]
           <div class="updates-list"> [Row layout] OR <div class="cards"> [Grid layout]
       <aside class="ad-sidebar ad-sidebar-right">
   
   CUSTOMIZATION POINTS:
   - Line 33-72: CSS custom properties (light theme colors)
   - Line 592-785: Dark mode theme (@media prefers-color-scheme: dark)
   - Line 119: .updates-container max-width (content width)
   - AdSense section (Line 788+): Ad slot IDs
   - Breakpoints (Line 1128+): Viewport-specific widths
   
   DARK MODE:
   - Automatically detects system preference (prefers-color-scheme)
   - Customize colors in @media (prefers-color-scheme: dark) section
   - Test in both light and dark mode
   - No JavaScript required - pure CSS solution
   
   RESPONSIVE BREAKPOINTS:
   - ≥1920px: Full 300×600 ads, 1200px content
   - 1600-1919px: 300×600 ads, constrained content
   - 1400-1599px: 160×600 ads, medium content
   - 1200-1399px: 160×600 ads, tight layout
   - <1200px: No ads, centered content
   - <768px: Mobile optimized
   
   ADSENSE INTEGRATION:
   - Add script ONCE in <head>
   - Include BOTH ad sizes per sidebar (300×600 + 160×600)
   - Update 4 slot IDs (left/right × 300/160)
   - Call push({}) once per <ins> element
   
   LAYOUT OPTIONS:
   - Row layout: .updates-list with .update-row
   - Grid layout: .cards with .card
   - Both can coexist on same page
   
   TESTING CHECKLIST:
   □ Test at 1920px+ (large desktop)
   □ Test at 1600px (medium desktop)
   □ Test at 1400px (small desktop)
   □ Test at 1200px (transition point)
   □ Test at 768-1199px (tablet)
   □ Test at <768px (mobile)
   □ Test in light mode (default)
   □ Test in dark mode (system preference)
   □ Verify ads show/hide correctly
   □ Check content readability at all sizes (both themes)
   □ Validate AdSense revenue tracking
   
   For questions or issues, refer to AdSense documentation
   section starting at line 788.
   
   Template version: 1.1.0 (January 2026)
   Last updated: January 18, 2026
   ======================================== */