/* 
 * WaysNews Machine - Global Layout Engine
 * Supports Grid, List, Masonry, and Hero styles.
 */

:root {
    --primary: #6366f1;
    --secondary: #0f172a;
    --text: #334155;
    --bg: #ffffff;
    --surface: #f8fafc;
    --radius: 1rem;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --grid-cols: repeat(auto-fill, minmax(340px, 1fr));
}

/* Global Reset */
* { margin:0; padding:0; box-sizing:border-box; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; font-size: 1.1rem; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }

/* Dynamic Layouts Engine */
.news-grid { display: grid; grid-template-columns: var(--grid-cols); gap: 3rem; margin: 4rem 0; }

/* 1. MASONRY STYLE (Modern) */
.theme_modern .news-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }

/* 2. HERO STYLE (Magazine) */
.theme_magazine .news-grid article:first-child { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.theme_magazine .news-grid article:first-child .article-image img { height: 100%; }

/* 3. LIST STYLE (Minimal) */
.theme_minimal .news-grid { display: block; max-width: 800px; margin: 4rem auto; }
.theme_minimal article { display: flex; align-items: center; gap: 2rem; border-bottom: 1px solid #eee; padding: 2rem 0; }
.theme_minimal .article-image { width: 120px; height: 120px; flex-shrink: 0; }

/* 4. CYBERPUNK STYLE */
.theme_cyberpunk { --primary: #ff00ff; --secondary: #00ffff; --bg: #050505; --text: #00ff00; --font-heading: 'Space Mono', monospace; }
.theme_cyberpunk article { border: 2px solid var(--secondary); background: transparent; clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 95% 100%, 0% 100%); }
.theme_cyberpunk article:hover { box-shadow: 0 0 20px var(--secondary); }

/* 11. THEME PAPER (Classic Newspaper) */
.theme_paper { --bg: #f4f1ea; --text: #2d2d2d; --font-heading: 'Playfair Display', serif; --primary: #000; }
.theme_paper article { border: 1px solid #dcdcdc; border-radius: 0; background: url('https://www.transparenttextures.com/patterns/p6.png'); box-shadow: 2px 2px 5px rgba(0,0,0,0.05); }

/* 12. THEME AGENCY (Ultra High-End) */
.theme_agency { --primary: #000; --bg: #fff; --text: #000; --radius: 0; }
.theme_agency article { border-top: 2px solid #000; padding: 3rem 0; background: transparent; }
.theme_agency h2 { font-size: 2.5rem; letter-spacing: -1px; }

/* 13. THEME CYBERPUNK (Neo Glow) */
.theme_cyberpunk { --primary: #ff00ff; --bg: #050505; --text: #00ff00; --secondary: #00ffff; }
.theme_cyberpunk article { border: 2px solid var(--primary); box-shadow: 0 0 10px var(--primary); color: #fff; background: #000; }
.theme_cyberpunk h2 { color: var(--secondary); text-shadow: 0 0 5px var(--secondary); }

/* 14. THEME MONO (Terminal/Coder Style) */
.theme_mono { --font-body: 'Space Mono', monospace; --primary: #10b981; --bg: #000; --text: #10b981; }
.theme_mono article { border: 1px solid var(--primary); border-radius: 0; }

/* 15. THEME LUXURY (Royalty) */
.theme_luxury { --primary: #b45309; --bg: #0f172a; --surface: #1e293b; --text: #fde68a; --font-heading: 'Playfair Display', serif; }
.theme_luxury article { border: 1px solid var(--primary); box-shadow: 10px 10px 0 var(--primary); }

/* Global Article Decorators */
article { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--radius); }
.article-image img { width: 100%; height: 260px; object-fit: cover; }
.article-content { padding: 2rem; }
.read-more { display: inline-block; margin-top: 1.5rem; font-weight: 800; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; color: var(--primary); }

/* Navigation & UI */
header { padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.logo { font-size: 1.8rem; font-weight: 900; }
.logo span { color: var(--primary); }
nav a { margin-left: 2rem; font-weight: 700; color: var(--secondary); }