/**
 * STYLE: mariafebronia.com Core CSS
 * VERSION: 1.0
 * DESCRIPTION: Handling CMS content typography and Zen-style aesthetics.
 */

/* 1. RESET & BASE */
:root {
    --primary-blue: #2563eb;
    --ink-black: #1a1a1a;
    --soft-gray: #4b5563;
    --bg-cream: #f9f8f6;
}

/* 2. CMS CONTENT TYPOGRAPHY (The .prose handler) */
.prose {
    color: var(--soft-gray);
    line-height: 1.8;
    font-size: 1.125rem; /* 18px */
}

/* Jarak antar paragraf */
.prose p {
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

/* Heading Styling */
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: var(--ink-black);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.04em;
}

.prose h2 { font-size: 2.25rem; font-style: italic; }
.prose h3 { font-size: 1.75rem; }

/* Image handling inside content */
.prose img {
    border-radius: 2.5rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
    width: 100%;
    height: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

/* Quote Styling yang Elegant */
.prose blockquote {
    border-left: 4px solid var(--primary-blue);
    padding: 2rem 2rem 2rem 3rem;
    margin: 3rem 0;
    background-color: #f8fafc;
    border-radius: 0 2rem 2rem 0;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--ink-black);
    line-height: 1.6;
}

/* List Styling */
.prose ul, .prose ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.75rem;
}

.prose ul li {
    list-style-type: disc;
}

.prose ul li::marker {
    color: var(--primary-blue);
}

/* 3. UTILITIES & ANIMATIONS */

/* Masonry Item Hover */
.masonry-item {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.masonry-item:hover {
    transform: translateY(-10px);
}

/* Smooth Image Reveal */
.img-reveal {
    animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

@keyframes reveal {
    0% { transform: scale(1.1); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-cream); }
::-webkit-scrollbar-thumb { 
    background: #e2e8f0; 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }