/*
 * File: styles.css
 * God-Level CSS for AI Trends, inspired by MIT Technology Review
 * Includes typography, spacing, dark mode, and print-friendly styles.
 */

/* Alapvető színek és fontok */
:root {
    --color-mit-dark: #0e1217;
    --color-mit-blue: #017b92; /* Fő akcentus szín, MIT kék */
    --color-mit-yellow: #f1b302; /* Másodlagos akcentus szín */
    --color-text-light: #e5e5e5;
    --color-text-dim: #9ca3af;
    --color-border: rgba(255, 255, 255, 0.1);
    --spacing-lg: 2.5rem; /* 40px */
}

/* Tailwind felülírások/kiegészítések a PHP-ban definiált színekhez képest */
.bg-mit-dark { background-color: var(--color-mit-dark); }
.text-mit-blue { color: var(--color-mit-blue); }
.text-mit-yellow { color: var--color-mit-yellow); }
.border-mit { border-color: var(--color-border); }

/* Global reset és tipográfia */
body {
    background-color: var(--color-mit-dark);
    color: var(--color-text-light);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: 0; /* Fejléc kezelése */
}

h1, h2, h3, h4 {
    font-family: "Georgia", serif; /* Súlyosabb, komolyabb címek */
    line-height: 1.2;
    margin-top: var(--spacing-lg);
    margin-bottom: calc(var(--spacing-lg) / 2);
}

a {
    transition: color 0.2s, opacity 0.2s;
}

/* Konziszten spacing (Tailwind utility-kon túl) */
.section-padding {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}
.article-content {
    padding-top: calc(var(--spacing-lg) * 1.5);
    padding-bottom: calc(var(--spacing-lg) * 1.5);
}

/* Kiemelt kártya (Hero a főoldalon) - Aszimmetrikus hatás */
.hero-card {
    position: relative;
    overflow: hidden;
    background-color: #1a1e25;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}
.hero-card-img {
    filter: brightness(0.7) contrast(1.1); /* Sötétítés a jobb olvashatóságért */
}
.hero-card-content {
    z-index: 10;
    position: relative;
    padding: 2.5rem;
}
.hero-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 18, 23, 0.95) 0%, rgba(14, 18, 23, 0.0) 100%);
    z-index: 5;
}

/* Cikk kártyák (általános) */
.article-card {
    border: 1px solid var(--color-border);
    background-color: #1a1e25;
    border-radius: 0.5rem;
    transition: box-shadow 0.3s, transform 0.3s;
    overflow: hidden;
}
.article-card:hover {
    box-shadow: 0 0 0 2px var(--color-mit-blue), 0 10px 20px rgba(1, 123, 146, 0.3);
    transform: translateY(-2px);
}
.article-card-img-container {
    overflow: hidden;
}
.article-card-img {
    transition: transform 0.5s ease;
}
.article-card:hover .article-card-img {
    transform: scale(1.05);
}

/* Cikk tartalom formázása (prose-invert kiterjesztése) */
.prose-mit h1, .prose-mit h2, .prose-mit h3, .prose-mit h4 {
    color: var(--color-text-light);
    font-family: "Georgia", serif;
}
.prose-mit p {
    color: var(--color-text-dim);
    margin-bottom: 1.5rem;
}
.prose-mit a {
    color: var(--color-mit-blue);
    font-weight: 600;
}
.prose-mit blockquote {
    border-left-color: var(--color-mit-blue);
    color: var(--color-text-light);
    padding-left: 1.5rem;
}
.prose-mit strong {
    color: var(--color-text-light);
}

/* Lábléc */
footer {
    border-top: 1px solid var(--color-border);
    background-color: #12161b;
}

/* Keresőmező */
#global-search, #search-input {
    caret-color: var(--color-mit-blue);
}

/* ================================================= */
/* NYOMTATÓBARÁT (PRINT) VERZIÓ             */
/* ================================================= */
@media print {
    /* Elrejtendő elemek (navigáció, lábléc, reklámok, gombok) */
    header, footer, aside, nav, #pagination, #clear-btn, #search-input, #global-search, .ad-slot, .source-button {
        display: none !important;
    }

    /* Alapértelmezett beállítások nyomtatáshoz */
    body {
        background-color: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.4;
    }

    /* Fő tartalom láthatóvá tétele és szélesség korlátozásának feloldása */
    .mx-auto, .max-w-7xl, .px-4, .sm\:px-6, .py-10, .md\:py-12, .pb-12 {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    /* A cikk tartalma */
    .lg\:col-span-2 {
        width: 100% !important;
        float: none !important;
    }
    h1 {
        font-size: 24pt !important;
        color: black !important;
        margin-top: 0;
        margin-bottom: 0.5cm;
        page-break-after: avoid;
    }
    p, blockquote, ul, ol {
        color: black !important;
        font-size: 11pt;
        margin-bottom: 1em;
    }
    /* Képek minimalizálása és optimalizálása */
    figure {
        max-width: 50% !important;
        float: right;
        margin-left: 1cm;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
        height: auto !important;
        filter: none !important;
    }

    /* Linkek megjelenítése szögletes zárójelben, szürkével */
    a:not(.source-button):after {
        content: " [" attr(href) "]";
        color: #666;
        font-size: 9pt;
        word-break: break-all;
    }
}