/* ============================================================
   100 ARTICLE GRID STYLES — CSS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --bg: #0a0a0f;
    --bg2: #12121a;
    --bg3: #1a1a28;
    --card: rgba(255, 255, 255, 0.04);
    --card-h: rgba(255, 255, 255, 0.08);
    --text: #f0f0f5;
    --text2: #a0a0b8;
    --text3: #6b6b80;
    --accent: #7c5cfc;
    --accent2: #00d4ff;
    --gradient: linear-gradient(135deg, #7c5cfc, #00d4ff);
    --border: rgba(255, 255, 255, 0.08);
    --border2: rgba(255, 255, 255, 0.12);
    --red: #ef4444;
    --green: #22c55e;
    --blue: #3b82f6;
    --orange: #f97316;
    --pink: #ec4899;
    --purple: #a78bfa;
    --cyan: #06b6d4;
    --amber: #f59e0b;
    --r: 12px;
    --tr: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

::-webkit-scrollbar {
    width: 6px
}

::-webkit-scrollbar-track {
    background: var(--bg)
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px
}

a {
    color: inherit;
    text-decoration: none
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: .75rem 0;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border)
}

.navbar .ct {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem
}

.nav-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.15rem
}

.nav-logo span {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.nav-back {
    padding: .5rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text2);
    font-size: .82rem;
    font-weight: 500;
    transition: var(--tr)
}

.nav-back:hover {
    background: var(--card-h);
    color: var(--text)
}

/* Page Hero */
.page-hero {
    min-height: 35vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 2rem 2rem;
    position: relative;
    overflow: hidden
}

.page-hero::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124, 92, 252, 0.15), transparent 70%);
    pointer-events: none
}

.page-hero h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    margin-bottom: .75rem;
    letter-spacing: -0.03em;
    position: relative
}

.page-hero .gt {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.page-hero p {
    font-size: 1rem;
    color: var(--text2);
    max-width: 500px;
    margin: 0 auto;
    position: relative
}

.ct {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem
}

/* Section Labels */
.slbl {
    padding: 2.5rem 0 1rem;
    display: flex;
    align-items: center;
    gap: 1rem
}

.slbl-num {
    width: 30px;
    height: 30px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.slbl-info h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700
}

.slbl-info p {
    font-size: .72rem;
    color: var(--text3)
}

/* Demo Wrapper */
.dw {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg2);
    margin-bottom: .5rem;
    padding: 1.5rem
}

/* ============================================================
   SHARED CARD ELEMENTS
   ============================================================ */
.ag-img {
    background-size: cover;
    background-position: center;
    border-radius: 8px
}

.ag-cat {
    font-size: .65rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .5px
}

.ag-title {
    font-weight: 700;
    line-height: 1.3;
    color: var(--text)
}

.ag-excerpt {
    font-size: .78rem;
    color: var(--text3);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.ag-meta {
    font-size: .68rem;
    color: var(--text3)
}

.ag-badge {
    display: inline-block;
    padding: .15rem .5rem;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 3px;
    text-transform: uppercase;
    color: #fff;
    width: fit-content
}

.ag-author {
    display: flex;
    align-items: center;
    gap: .5rem
}

.ag-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0
}

/* ============================================================
   100 GRID STYLES
   ============================================================ */

/* 1 */
.ag1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem
}

/* 2 */
.ag2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem
}

/* 3 */
.ag3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

/* 4 */
.ag4 {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

/* 5 */
.ag5 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem
}

.ag5>:first-child {
    grid-row: 1/3
}

/* 6 */
.ag6 {
    columns: 3;
    gap: 1rem
}

.ag6>* {
    break-inside: avoid;
    margin-bottom: 1rem
}

/* 7 */
.ag7 {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem
}

.ag7>* {
    min-width: 280px;
    flex-shrink: 0;
    scroll-snap-align: start
}

/* 8 */
.ag8 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

/* 9 */
.ag9 {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

/* 10 */
.ag10 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem
}

/* 11 */
.ag11 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

/* 12 */
.ag12 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem
}

/* 13 */
.ag13 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem
}

/* 14 */
.ag14 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
}

/* 15 */
.ag15 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

/* 16 */
.ag16 {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

/* 17 */
.ag17 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem
}

/* 18 */
.ag18 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem
}

/* 19 */
.ag19 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem
}

/* 20 */
.ag20 {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 1.25rem
}

/* 21 */
.ag21 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

/* 22 */
.ag22 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem
}

/* 23 */
.ag23 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem
}

/* 24 */
.ag24 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

/* 25 */
.ag25 {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

/* 26 */
.ag26 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

/* 27 */
.ag27 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem
}

/* 28 */
.ag28 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem
}

/* 29 */
.ag29 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

/* 30 */
.ag30 {
    columns: 2;
    gap: 1.25rem
}

.ag30>* {
    break-inside: avoid;
    margin-bottom: 1.25rem
}

/* 31 */
.ag31 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

/* 32 */
.ag32 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem
}

/* 33 */
.ag33 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem
}

/* 34 */
.ag34 {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

/* 35 */
.ag35 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

/* 36 */
.ag36 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem
}

/* 37 */
.ag37 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
}

/* 38 */
.ag38 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

/* 39 */
.ag39 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem
}

/* 40 */
.ag40 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem
}

/* 41 */
.ag41 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem
}

/* 42 */
.ag42 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem
}

/* 43 */
.ag43 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem
}

/* 44 */
.ag44 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

/* 45 */
.ag45 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

/* 46 */
.ag46 {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem
}

.ag46>* {
    min-width: 240px;
    flex-shrink: 0
}

/* 47 */
.ag47 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem
}

/* 48 */
.ag48 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem
}

/* 49 */
.ag49 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

/* 50 */
.ag50 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

/* 51 — 1 besar + 2 kecil kanan (2 rows) */
.ag51 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem
}

.ag51>:first-child {
    grid-row: 1/3
}

/* 52 — 3 kolom asimetris (1fr 2fr 1fr) */
.ag52 {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1rem
}

/* 53 — Horizontal scroll wide cards */
.ag53 {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem
}

.ag53>* {
    min-width: 340px;
    flex-shrink: 0;
    scroll-snap-align: start
}

/* 54 — 6 kolom ultra-compact */
.ag54 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .5rem
}

/* 55 — 2 kolom, left wider (5:3) */
.ag55 {
    display: grid;
    grid-template-columns: 5fr 3fr;
    gap: 1.25rem
}

/* 56 — Masonry 4 kolom */
.ag56 {
    columns: 4;
    gap: .75rem
}

.ag56>* {
    break-inside: avoid;
    margin-bottom: .75rem
}

/* 57 — 3 kolom, first item span 2 cols */
.ag57 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.ag57>:first-child {
    grid-column: 1/3
}

/* 58 — 2fr 1fr 2fr (center compact) */
.ag58 {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 1rem
}

/* 59 — Stacked list + side hero */
.ag59 {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 1rem
}

/* 60 — Zigzag (alternating image direction) */
.ag60 {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.ag60>:nth-child(even) {
    direction: rtl
}

.ag60>:nth-child(even) * {
    direction: ltr
}

/* 61 — Grid 1fr 1fr + last item full-width */
.ag61 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.ag61>:last-child {
    grid-column: 1/-1
}

/* 62 — 3 kolom, last spans 2 cols */
.ag62 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem
}

.ag62>:nth-child(4) {
    grid-column: 2/4
}

/* 63 — Masonry 3 kolom versi baru */
.ag63 {
    columns: 3;
    gap: 1.25rem
}

.ag63>* {
    break-inside: avoid;
    margin-bottom: 1.25rem
}

/* 64 — 4 kolom, first row double height */
.ag64 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: .75rem
}

.ag64>:first-child {
    grid-row: span 2
}

/* 65 — Single column full-width cards */
.ag65 {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

/* 66 — 3fr 2fr (left dominant) */
.ag66 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem
}

/* 67 — 2 col tall cards (tall image) */
.ag67 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(320px, auto);
    gap: 1rem
}

.ag67 .cC .ag-img,
.ag67 .cN .ag-img {
    height: 320px
}

.ag67 .cA .ag-img {
    height: 260px
}

/* 68 — 2 top + 3 bottom */
.ag68 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem
}

.ag68>:nth-child(1),
.ag68>:nth-child(2) {
    grid-column: span 3
}

.ag68>:nth-child(n+3) {
    grid-column: span 2
}

/* 69 — Sidebar featured (right heavy) */
.ag69 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem
}

/* 70 — Horizontal scroll overlay compact */
.ag70 {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem
}

.ag70>* {
    min-width: 200px;
    flex-shrink: 0
}

/* 71 — 3 col + first-child full-width */
.ag71 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.ag71>:first-child {
    grid-column: 1/-1
}

/* 72 — Grid 2 col alternating heights */
.ag72 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(100px, auto);
    gap: 1rem
}

.ag72>:nth-child(odd) {
    grid-row: span 2
}

/* 73 — Dashboard 4-col mixed */
.ag73 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

.ag73>:first-child {
    grid-column: span 2;
    grid-row: span 2
}

/* 74 — 3 col center dominant */
.ag74 {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 1rem
}

/* 75 — Wrap flex with varied widths */
.ag75 {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.ag75>* {
    flex: 1 1 calc(33.333% - 1rem);
    min-width: 250px
}

.ag75>:first-child {
    flex: 1 1 100%
}

/* 76 — Single col tall magazine cards */
.ag76 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.ag76 .cA .ag-img {
    height: 300px
}

.ag76 .cC .ag-img,
.ag76 .cI .ag-img {
    height: 350px
}

/* 77 — 3 col tall overlay (tall image) */
.ag77 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(350px, auto);
    gap: .75rem
}

.ag77 .cC .ag-img {
    height: 350px
}

.ag77 .cN .ag-img {
    height: 350px
}

/* 78 — 3 col + sidebar (3 cols + 1) */
.ag78 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
    gap: 1rem
}

/* 79 — 2 top + 4 bottom (wide top) */
.ag79 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

.ag79>:nth-child(1),
.ag79>:nth-child(2) {
    grid-column: span 2
}

/* 80 — Single column editorial */
.ag80 {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

/* 81 — 2 col tall glass cards */
.ag81 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(380px, auto);
    gap: 1.25rem
}

.ag81 .cI .ag-img {
    height: 280px
}

.ag81 .cL .ag-img {
    height: 280px
}

/* 82 — Single col tall editorial */
.ag82 {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.ag82 .cJ {
    min-height: 200px;
    padding: 2rem
}

.ag82 .cJ .ag-title {
    font-size: 1.3rem
}

/* 83 — 2 col tall tag cards */
.ag83 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(280px, auto);
    gap: 1rem
}

.ag83 .cK .ag-img {
    height: 200px
}

/* 84 — 3 col + first-child span full */
.ag84 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.ag84>:first-child {
    grid-column: 1/-1
}

/* 85 — Single col tall side-strip cards */
.ag85 {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.ag85 .cF .ag-img {
    width: 180px;
    min-height: 150px
}

.ag85 .cF .body {
    padding: 1.5rem
}

/* 86 — Horizontal scroll pill */
.ag86 {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .5rem
}

.ag86>* {
    flex-shrink: 0
}

/* 87 — 3 col + bottom full-width */
.ag87 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.ag87>:last-child {
    grid-column: 1/-1
}

/* 88 — Single col tall banner with large image */
.ag88 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.ag88 .cP .ag-img {
    width: 100%;
    height: 220px;
    border-radius: 12px
}

.ag88 .cP {
    flex-direction: column;
    align-items: stretch
}

.ag88 .cP .body {
    padding: 1rem 0
}

/* 89 — 3 col tall portrait cards */
.ag89 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(400px, auto);
    gap: .75rem
}

.ag89 .cA .ag-img {
    height: 300px
}

.ag89 .cG .ag-img {
    height: 320px
}

/* 90 — 4 col tall overlay portrait */
.ag90 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(350px, auto);
    gap: .5rem
}

.ag90 .cC .ag-img,
.ag90 .cN .ag-img {
    height: 350px
}

/* 91 — Masonry 2 kolom */
.ag91 {
    columns: 2;
    gap: 1.5rem
}

.ag91>* {
    break-inside: avoid;
    margin-bottom: 1.5rem
}

/* 92 — 4 col + top featured full */
.ag92 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

.ag92>:first-child {
    grid-column: 1/-1
}

/* 93 — Single col tall numbered list */
.ag93 {
    display: flex;
    flex-direction: column;
    gap: 0
}

.ag93 .cH {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--border)
}

.ag93 .cH .ag-img {
    width: 100px;
    height: 70px
}

/* 94 — 2 col banner + sidebar */
.ag94 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1rem
}

/* 95 — Horizontal scroll large */
.ag95 {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem
}

.ag95>* {
    min-width: 320px;
    flex-shrink: 0;
    scroll-snap-align: start
}

/* 96 — 2 col tall tag portrait */
.ag96 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(320px, auto);
    gap: 1.25rem
}

.ag96 .cK .ag-img {
    height: 220px
}

/* 97 — 3 col tall author cards */
.ag97 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(280px, auto);
    gap: 1rem
}

.ag97 .cM {
    min-height: 250px
}

/* 98 — Single col tall glass editorial */
.ag98 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.ag98 .cI .ag-img {
    height: 280px
}

.ag98 .cI .body {
    padding: 1.5rem
}

/* 99 — 2 col tall gradient border */
.ag99 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(340px, auto);
    gap: 1rem
}

.ag99 .cL .ag-img {
    height: 240px
}

/* 100 — Grand finale: featured + grid complex */
.ag100 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem
}

.ag100>:first-child {
    grid-row: 1/3
}

/* ============================================================
   CARD TYPE STYLES (re-usable across grids)
   ============================================================ */

/* Type A: Standard vertical card */
.cA {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    transition: var(--tr);
    cursor: pointer
}

.cA:hover {
    border-color: rgba(124, 92, 252, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4)
}

.cA .ag-img {
    height: 170px;
    border-radius: 0
}

.cA .body {
    padding: 1rem
}

.cA .body .ag-cat {
    margin-bottom: .4rem
}

.cA .body .ag-title {
    font-size: .9rem;
    margin-bottom: .4rem
}

.cA .body .ag-excerpt {
    margin-bottom: .5rem
}

/* Type B: Horizontal card */
.cB {
    display: flex;
    gap: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    transition: var(--tr);
    cursor: pointer;
    align-items: center;
    padding: .75rem
}

.cB:hover {
    border-color: rgba(124, 92, 252, 0.3);
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
}

.cB .ag-img {
    width: 120px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px
}

.cB .body {
    flex: 1
}

.cB .body .ag-title {
    font-size: .85rem;
    margin-bottom: .25rem
}

/* Type C: Overlay text on image */
.cC {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    cursor: pointer;
    transition: var(--tr)
}

.cC:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5)
}

.cC .ag-img {
    height: 220px;
    border-radius: 0
}

.cC .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85))
}

.cC .overlay .ag-cat {
    color: var(--accent2)
}

.cC .overlay .ag-title {
    color: #fff;
    font-size: .95rem;
    margin-top: .3rem
}

.cC .overlay .ag-meta {
    color: rgba(255, 255, 255, 0.5);
    margin-top: .3rem
}

/* Type D: Minimal text-only */
.cD {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: var(--tr)
}

.cD:hover {
    background: var(--card);
    padding-left: 1.5rem
}

.cD .ag-title {
    font-size: .88rem;
    margin-bottom: .25rem
}

/* Type E: Big featured card */
.cE {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    cursor: pointer;
    transition: var(--tr)
}

.cE:hover {
    transform: scale(1.01);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5)
}

.cE .ag-img {
    height: 100%;
    min-height: 280px;
    border-radius: 0
}

.cE .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9))
}

.cE .overlay .ag-title {
    color: #fff;
    font-size: 1.3rem;
    margin-top: .3rem
}

.cE .overlay .ag-excerpt {
    color: rgba(255, 255, 255, 0.6);
    margin-top: .4rem;
    display: block
}

.cE .overlay .ag-meta {
    color: rgba(255, 255, 255, 0.4);
    margin-top: .4rem
}

/* Type F: Card with side image strip */
.cF {
    display: flex;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    transition: var(--tr);
    cursor: pointer
}

.cF:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
}

.cF .ag-img {
    width: 100px;
    border-radius: 0;
    flex-shrink: 0
}

.cF .body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cF .body .ag-title {
    font-size: .85rem;
    margin-bottom: .3rem
}

/* Type G: Compact square card */
.cG {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    transition: var(--tr);
    cursor: pointer
}

.cG:hover {
    border-color: rgba(124, 92, 252, 0.3);
    transform: translateY(-3px)
}

.cG .ag-img {
    height: 130px;
    border-radius: 0
}

.cG .body {
    padding: .75rem
}

.cG .body .ag-title {
    font-size: .78rem;
    margin-bottom: .2rem
}

/* Type H: Numbered article */
.cH {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: var(--tr)
}

.cH:hover {
    background: var(--card)
}

.cH .rank {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent);
    width: 35px;
    text-align: center;
    flex-shrink: 0
}

.cH .ag-img {
    width: 70px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 6px
}

.cH .body {
    flex: 1
}

.cH .body .ag-title {
    font-size: .82rem;
    margin-bottom: .15rem
}

/* Type I: Glass card */
.cI {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--tr);
    cursor: pointer
}

.cI:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(124, 92, 252, 0.15)
}

.cI .ag-img {
    height: 160px;
    border-radius: 0
}

.cI .body {
    padding: 1.25rem
}

.cI .body .ag-title {
    font-size: .9rem;
    margin-bottom: .4rem
}

/* Type J: Editorial serif */
.cJ {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    transition: var(--tr);
    cursor: pointer;
    padding: 1.5rem
}

.cJ:hover {
    border-color: rgba(236, 72, 153, 0.3);
    transform: translateY(-3px)
}

.cJ .ag-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin-bottom: .5rem
}

.cJ .ag-excerpt {
    font-size: .82rem;
    display: block;
    -webkit-line-clamp: 3
}

.cJ .divider {
    width: 40px;
    height: 2px;
    background: var(--pink);
    margin: .75rem 0
}

/* Type K: Tag-heavy card */
.cK {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    transition: var(--tr);
    cursor: pointer
}

.cK:hover {
    border-color: rgba(124, 92, 252, 0.3);
    transform: translateY(-3px)
}

.cK .ag-img {
    height: 150px;
    border-radius: 0
}

.cK .body {
    padding: 1rem
}

.cK .body .ag-title {
    font-size: .88rem;
    margin-bottom: .5rem
}

.cK .tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem
}

.cK .tags span {
    padding: .15rem .5rem;
    font-size: .6rem;
    background: var(--card-h);
    border-radius: 100px;
    color: var(--text2)
}

/* Type L: Gradient border card */
.cL {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--tr);
    padding: 1px;
    background: linear-gradient(135deg, var(--accent), var(--accent2))
}

.cL:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(124, 92, 252, 0.2)
}

.cL .inner {
    background: var(--bg2);
    border-radius: 13px;
    overflow: hidden
}

.cL .ag-img {
    height: 160px
}

.cL .body {
    padding: 1rem
}

.cL .body .ag-title {
    font-size: .88rem;
    margin-bottom: .3rem
}

/* Type M: Author-focused card */
.cM {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.25rem;
    transition: var(--tr);
    cursor: pointer
}

.cM:hover {
    border-color: rgba(124, 92, 252, 0.3);
    transform: translateY(-3px)
}

.cM .ag-author {
    margin-bottom: .75rem
}

.cM .ag-title {
    font-size: .9rem;
    margin-bottom: .4rem
}

.cM .ag-excerpt {
    margin-bottom: .5rem
}

/* Type N: Overlay with blurred bg */
.cN {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    cursor: pointer;
    transition: var(--tr)
}

.cN:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5)
}

.cN .ag-img {
    height: 200px;
    border-radius: 0
}

.cN .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px)
}

.cN .overlay .ag-title {
    color: #fff;
    font-size: .88rem
}

.cN .overlay .ag-meta {
    color: rgba(255, 255, 255, 0.5);
    margin-top: .2rem
}

/* Type O: Timeline dot card */
.cO {
    display: flex;
    gap: 1rem;
    padding: .75rem 0;
    position: relative;
    cursor: pointer;
    transition: var(--tr)
}

.cO:hover {
    padding-left: .5rem
}

.cO::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: .5rem
}

.cO .body .ag-title {
    font-size: .85rem;
    margin-bottom: .2rem
}

/* Type P: Full-width banner style */
.cP {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    transition: var(--tr);
    cursor: pointer
}

.cP:hover {
    border-color: rgba(124, 92, 252, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
}

.cP .ag-img {
    width: 200px;
    height: 130px;
    flex-shrink: 0;
    border-radius: 8px
}

.cP .body {
    flex: 1
}

.cP .body .ag-title {
    font-size: 1.05rem;
    margin-bottom: .4rem
}

.cP .body .ag-excerpt {
    display: block;
    -webkit-line-clamp: 2
}

/* Type Q: Pill/chip card - compact */
.cQ {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 100px;
    transition: var(--tr);
    cursor: pointer;
    font-size: .78rem
}

.cQ:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

.cQ .ag-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0
}

/* Responsive */
@media(max-width:768px) {

    .ag1,
    .ag3,
    .ag8,
    .ag11,
    .ag12,
    .ag13,
    .ag15,
    .ag17,
    .ag18,
    .ag19,
    .ag21,
    .ag23,
    .ag24,
    .ag26,
    .ag28,
    .ag29,
    .ag31,
    .ag33,
    .ag35,
    .ag36,
    .ag38,
    .ag39,
    .ag41,
    .ag42,
    .ag44,
    .ag45,
    .ag47,
    .ag49,
    .ag50,
    .ag52,
    .ag54,
    .ag57,
    .ag58,
    .ag62,
    .ag64,
    .ag67,
    .ag68,
    .ag71,
    .ag73,
    .ag74,
    .ag77,
    .ag78,
    .ag79,
    .ag81,
    .ag83,
    .ag84,
    .ag87,
    .ag89,
    .ag90,
    .ag92,
    .ag93,
    .ag96,
    .ag97,
    .ag99 {
        grid-template-columns: 1fr
    }

    .ag2,
    .ag5,
    .ag10,
    .ag14,
    .ag20,
    .ag22,
    .ag27,
    .ag32,
    .ag37,
    .ag40,
    .ag43,
    .ag48,
    .ag51,
    .ag55,
    .ag59,
    .ag61,
    .ag66,
    .ag69,
    .ag72,
    .ag76,
    .ag82,
    .ag85,
    .ag88,
    .ag94,
    .ag98,
    .ag100 {
        grid-template-columns: 1fr
    }

    .ag6,
    .ag30,
    .ag56,
    .ag63,
    .ag91 {
        columns: 1
    }

    .ag5>:first-child,
    .ag51>:first-child,
    .ag100>:first-child {
        grid-row: auto
    }

    .ag57>:first-child,
    .ag71>:first-child,
    .ag84>:first-child,
    .ag92>:first-child {
        grid-column: auto
    }

    .ag61>:last-child,
    .ag87>:last-child {
        grid-column: auto
    }

    .ag62>:nth-child(4) {
        grid-column: auto
    }

    .ag64>:first-child,
    .ag72>:nth-child(odd),
    .ag73>:first-child {
        grid-row: auto;
        grid-column: auto
    }

    .ag68>:nth-child(1),
    .ag68>:nth-child(2),
    .ag68>:nth-child(n+3),
    .ag79>:nth-child(1),
    .ag79>:nth-child(2) {
        grid-column: auto
    }
}