/**
 * CSS Fixes for Lovable Theme
 * Addresses: container width, spacing, typography, aspect ratios
 */

/* ============================================
   1. CSS VARIABLES (exact from Lovable)
   ============================================ */
:root {
    --background: 0 0% 100%;
    --foreground: 220 20% 15%;
    --card: 0 0% 100%;
    --card-foreground: 220 20% 15%;
    --muted: 220 10% 92%;
    --muted-foreground: 220 10% 45%;
    --secondary: 45 85% 55%;
    --secondary-foreground: 233 45% 15%;
    --border: 0 0% 30%;
    --headline: 0 0% 7.5%;
    --gold: 45 85% 55%;
    --gold-hover: 45 85% 45%;
    --text-hover: 0 0% 33%;
    --divider: 0 0% 30%;
    --divider-vertical: 0 0% 78%;
    --divider-content: 0 0% 87%;
}

/* ============================================
   2. TYPOGRAPHY FIXES (font smoothing)
   ============================================ */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Inter', system-ui, sans-serif !important;
}

* {
    font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* ============================================
   3. CONTAINER & CENTERING FIXES
   ============================================ */
/* Ensure main container is truly centered */
main.max-w-\[1136px\] {
    max-width: 1136px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem;
}

/* ============================================
   4. HERO IMAGE ASPECT RATIO FIX
   ============================================ */
/* Featured article image: 4:3 on desktop */
/* Only the featured article (first article with animate-fade-in) uses 4:3 on desktop */
@media (min-width: 768px) {
    .animate-fade-in .order-last.md\:order-last img {
        aspect-ratio: 4/3 !important;
    }
}

/* Secondary article images (Ethereum, BlackRock, Silver): 16:9 */
/* These images should NOT have 4:3 - reset to 16:9 */
@media (min-width: 768px) {
    .flex.flex-col.md\:flex-row > .hidden.md\:block.md\:w-3\/5 img {
        aspect-ratio: 16/9 !important;
    }
}

/* ============================================
   5. VERTICAL SPACING FIXES
   ============================================ */
/* my-4 should be exactly 16px (1rem) - matching Lovable */
/* Removed override - let Tailwind's default my-4 apply */

/* Article dividers need more breathing room - but not the last one */
.flex.flex-col.md\:flex-row:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* ============================================
   6. SIDEBAR ALIGNMENT FIXES
   ============================================ */
/* Sidebar should align with main content top */
.lg\:w-80 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Ensure sidebar starts at same level */
.flex.flex-col.lg\:flex-row {
    align-items: flex-start;
}

/* Sidebar "Latest" section spacing */
.lg\:w-80 aside h2 {
    margin-bottom: 0.25rem; /* mb-1 */
}

/* Sidebar items spacing */
.lg\:w-80 article {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* ============================================
   7. COLUMN GAP FIX
   ============================================ */
/* Main flex container gap */
.flex.flex-col.lg\:flex-row {
    gap: 0; /* Columns touch, border creates divider */
}

/* Left column right padding */
.lg\:pr-4.lg\:border-r {
    padding-right: 1rem;
}

/* Right column left padding */
.lg\:pl-4 {
    padding-left: 1rem;
}

/* ============================================
   8. CONTENT DIVIDER FIX
   ============================================ */
.content-divider {
    background: none !important;
    height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    border: none !important;
    border-top: 1px solid hsl(0, 0%, 87%) !important;
}

/* Negative margin for content divider - pulls divider up into previous item's padding */
.-mt-3 {
    margin-top: -0.75rem !important;
}

/* ============================================
   9. LINE HEIGHT FIXES
   ============================================ */
.leading-snug {
    line-height: 1.375 !important;
}

.leading-tight {
    line-height: 1.25 !important;
}

/* Headlines need proper line-height */
h1.text-lg, h1.text-xl, h1.text-2xl,
h2.text-lg, h2.text-base,
h3.text-sm {
    line-height: 1.375;
}

/* ============================================
   10. GOLD BUTTON FIX
   ============================================ */
.gold-button {
    background-color: hsl(45, 85%, 55%);
    color: hsl(233, 45%, 15%);
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    transition: background-color 0.2s;
}

.gold-button:hover {
    background-color: hsl(45, 85%, 45%);
}

/* ============================================
   11. AD CONTAINER FIX
   ============================================ */
/* Background color fix - no margins (they're set by parent containers) */
.bg-muted\/50 {
    background-color: hsl(220, 10%, 92%, 0.5);
}

/* ============================================
   12. BORDER COLOR FIXES
   ============================================ */
.border-divider {
    border-color: hsl(0, 0%, 30%);
}

.border-divider-vertical,
.lg\:border-divider-vertical {
    border-color: hsl(0, 0%, 78%);
}

.border-divider-content {
    border-color: hsl(0, 0%, 87%);
}

/* ============================================
   13. ARTICLE CARD HOVER ZOOM
   ============================================ */
/* Image zoom effect on hover - 500ms transition, scale 1.05 */
.article-card img {
    transition: transform 500ms;
}

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

/* ============================================
   14. 12-COLUMN GRID SYSTEM (for Category page)
   ============================================ */
/* Base grid */
.grid {
    display: grid !important;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.gap-4 {
    gap: 1rem !important;
}

.mb-10 {
    margin-bottom: 2.5rem !important;
}

/* Desktop 12-column grid */
@media (min-width: 1024px) {
    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    .lg\:col-span-8 {
        grid-column: span 8 / span 8 !important;
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4 !important;
    }

    .lg\:border-l {
        border-left-width: 1px !important;
        border-left-style: solid !important;
    }

    .lg\:pl-4 {
        padding-left: 1rem !important;
    }
}

/* ============================================
   15. FULL-WIDTH BREAKOUT (for mid-page ad banner)
   ============================================ */
.full-width-breakout {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.-translate-x-1\/2 {
    transform: translateX(-50%) !important;
}

.left-1\/2 {
    left: 50% !important;
}

.w-screen {
    width: 100vw !important;
}

.tracking-widest {
    letter-spacing: 0.1em !important;
}

/* ============================================
   16. RESPONSIVE DISPLAY UTILITIES
   ============================================ */
/* md:hidden - hide on medium screens and up */
@media (min-width: 768px) {
    .md\:hidden {
        display: none !important;
    }

    .md\:grid {
        display: grid !important;
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ============================================
   17. STICKY BOTTOM AD (Sevio)
   ============================================ */
.footer-sponsored {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: transparent;
}

.footer-sponsored .close-ad {
    position: absolute;
    right: -20px;
    color: red;
    height: 20px;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: none;
}

.footer-sponsored .close-ad svg {
    fill: red;
}