/**
 * content-pages.css
 * Standalone CSS for all content pages (434 HTML files in /src/)
 * Loaded directly by content HTML pages (not via index.css or deferred.css).
 * Includes its own reset, tokens, header, and content styling.
 *
 * Design System v1.0
 * Created: December 2025
 */

/* ============================================================================
   DESIGN TOKENS (Import from existing tokens)
   ============================================================================ */

/* Import core design tokens */
@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/spacing.css';

/* ============================================================================
   MINIMAL RESET (content-page safe — preserves list bullets and link styles)
   ============================================================================ */

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

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* ============================================================================
   LAYOUT SYSTEM
   ============================================================================ */

/* Smooth scrolling for hash links */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Scoped body styles for content pages */
.content-page-body {
    font-family: var(--font-body, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
    background: linear-gradient(135deg, #1e4620 0%, #2d5a2e 50%, #1e4620 100%);
    min-height: 100vh;
    padding: 0;
    margin: 0;
    line-height: 1.6;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   CONTENT PAGE HEADER (navigation bar for content pages)
   ============================================================================ */

.content-page-header {
    width: 100%;
    background: linear-gradient(135deg, #006400 0%, #004d00 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: opacity 0.2s;
}

.header-brand:hover {
    opacity: 0.9;
}

.header-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.header-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: white !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.content-page-header .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.content-page-header .breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.content-page-header .breadcrumb a:hover {
    color: white;
}

.content-page-header .breadcrumb span {
    color: white;
}

/* Offset for hash anchors (to account for sticky header if any) */
.content-page h2[id],
.content-page h3[id],
.content-page h4[id] {
    scroll-margin-top: 2rem;
}

/* Main content container */
.content-page {
    max-width: 900px;
    margin: 2rem 1rem;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

@media (min-width: 940px) {
    .content-page {
        margin: 2rem auto;
    }
}

/* Layout variants */
.content-page-wide {
    max-width: 1200px;
}

.content-page-narrow {
    max-width: 700px;
}

/* ============================================================================
   TYPOGRAPHY SYSTEM
   ============================================================================ */

/* Page titles (H1) */
.content-page h1 {
    font-size: 2.25rem;
    /* 36px */
    font-weight: 700;
    color: #006400;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 4px solid #006400;
    line-height: 1.2;
    text-align: center;
}

/* Main sections (H2) */
.content-page h2 {
    font-size: 2rem;
    /* 32px */
    font-weight: 700;
    color: #2e7d32;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 0 0.75rem 1rem;
    border-left: 5px solid #2e7d32;
    border-bottom: 2px solid #e0e0e0;
    line-height: 1.3;
    background: linear-gradient(to right, rgba(46, 125, 50, 0.05) 0%, transparent 100%);
}

/* Subsections (H3) */
.content-page h3 {
    font-size: 1.5rem;
    /* 24px */
    font-weight: 600;
    color: #388e3c;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Sub-subsections (H4) */
.content-page h4 {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 600;
    color: #43a047;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Smallest headings (H5, H6) */
.content-page h5,
.content-page h6 {
    font-size: 1.125rem;
    /* 18px */
    font-weight: 600;
    color: #4caf50;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Body text */
.content-page p {
    font-size: 1.125rem;
    /* 18px */
    line-height: 1.8;
    margin-bottom: 1.25rem;
    color: #333;
}

/* Lead paragraph */
.content-page .lead {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 2rem;
}

/* ============================================================================
   BACK LINK
   ============================================================================ */

.content-page .back-link,
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1976d2;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 2rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.content-page .back-link:hover,
.back-link:hover {
    background: #f5f5f5;
    color: #1565c0;
    border-color: #1976d2;
}

/* ============================================================================
   LISTS
   ============================================================================ */

.content-page ul,
.content-page ol {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.content-page li {
    margin-bottom: 0.75rem;
    color: #333;
}

.content-page li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
.content-page ul ul,
.content-page ol ol,
.content-page ul ol,
.content-page ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Font Awesome list icons */
.content-page li i.fas,
.content-page li i.far {
    margin-right: 0.5rem;
    width: 1.25rem;
    display: inline-block;
}

/* ============================================================================
   LINKS
   ============================================================================ */

.content-page a {
    color: #1976d2;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.content-page a:hover {
    color: #1565c0;
    border-bottom: 1px solid #1565c0;
}

.content-page a:focus {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* ============================================================================
   HIGHLIGHT BOXES & CALLOUTS
   ============================================================================ */

/* Info box (blue) */
.content-page .info-box {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 5px solid #1976d2;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
}

/* Success box (green) */
.content-page .success-box {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-left: 5px solid #4caf50;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
}

/* Warning box (orange) */
.content-page .warning-box {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-left: 5px solid #ff9800;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
}

/* Tip box (teal) */
.content-page .tip-box {
    background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
    border-left: 5px solid #009688;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
}

/* Strategy box (purple) */
.content-page .strategy-box {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border-left: 5px solid #9c27b0;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
}

/* Generic highlight box */
.content-page .highlight-box {
    background: #f5f5f5;
    border-left: 5px solid #666;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
}

/* Box titles */
.content-page .info-box h3,
.content-page .success-box h3,
.content-page .warning-box h3,
.content-page .tip-box h3,
.content-page .strategy-box h3,
.content-page .highlight-box h3,
.content-page .embed-section h2 {
    margin-top: 0;
    font-size: 1.25rem;
}

/* Embed Feature Section */
.content-page .embed-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 5px solid #0284c7;
    /* Sky blue accent */
    padding: 2rem;
    margin: 2.5rem 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.content-page .embed-section h2 {
    color: #0c4a6e;
    border: none;
    padding: 0;
    margin-bottom: 1rem;
    background: none;
}

.content-page .embed-section p {
    color: #334155;
    margin-bottom: 1rem;
}

.content-page .embed-section ul {
    color: #334155;
    margin-bottom: 1.5rem;
}

.content-page .embed-section .primary-button {
    display: inline-block;
    background: #0284c7;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
}

.content-page .embed-section .primary-button:hover {
    background: #0369a1;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(2, 132, 199, 0.4);
}

/* ============================================================================
   TABLES
   ============================================================================ */

.content-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.content-page thead {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
}

.content-page th {
    padding: 1.25rem;
    text-align: left;
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    border-bottom: 3px solid #1b5e20;
}

.content-page td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e0e0e0;
    font-size: 1rem;
    color: #333;
}

.content-page tbody tr:hover {
    background: #f5f5f5;
}

.content-page tr:last-child td {
    border-bottom: none;
}

/* Responsive table wrapper */
.content-page .table-wrapper {
    overflow-x: auto;
    margin: 2rem 0;
}

/* ============================================================================
   BUTTONS & CTAs
   ============================================================================ */

.content-page .cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.content-page .cta-button:hover {
    background: linear-gradient(135deg, #388e3c 0%, #43a047 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4);
    border-bottom: none;
}

.content-page .cta-button:active {
    transform: translateY(0);
}

/* Secondary button */
.content-page .secondary-button {
    background: linear-gradient(135deg, #1976d2 0%, #1e88e5 100%);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.content-page .secondary-button:hover {
    background: linear-gradient(135deg, #1e88e5 0%, #2196f3 100%);
    box-shadow: 0 6px 16px rgba(25, 118, 210, 0.4);
}

/* ============================================================================
   IMAGES & MEDIA
   ============================================================================ */

.content-page img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: 1.5rem 0;
}

/* Centered images */
.content-page .img-center {
    display: block;
    margin: 2rem auto;
}

/* Image with caption */
.content-page figure {
    margin: 2rem 0;
}

.content-page figcaption {
    text-align: center;
    font-size: 0.95rem;
    color: #666;
    margin-top: 0.75rem;
    font-style: italic;
}

/* SVG diagrams */
.content-page svg {
    max-width: 100%;
    height: auto;
    margin: 2rem 0;
}

/* ============================================================================
   CODE & PREFORMATTED TEXT
   ============================================================================ */

.content-page code {
    background: #f5f5f5;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    color: #d32f2f;
}

.content-page pre {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
}

.content-page pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* ============================================================================
   NAVIGATION & BREADCRUMBS
   ============================================================================ */

.content-page .breadcrumb {
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
}

.content-page .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}

.content-page .breadcrumb li {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 0;
}

.content-page .breadcrumb li:not(:last-child)::after {
    content: "\203A";
    margin-left: 0.5rem;
    color: #999;
    font-weight: bold;
}

.content-page .breadcrumb a {
    color: var(--nav-gradient-start, #2e7d32);
    text-decoration: none;
    transition: color 0.2s ease;
}

.content-page .breadcrumb a:hover {
    color: var(--nav-gradient-end, #1b5e20);
    text-decoration: underline;
}

.content-page .breadcrumb li[aria-current="page"] {
    color: #333;
    font-weight: 500;
}

@media (max-width: 768px) {
    .content-page .breadcrumb ol {
        font-size: 0.85rem;
    }
}

.content-page .breadcrumbs {
    font-size: 0.95rem;
    margin-bottom: 2rem;
    color: #666;
}

.content-page .breadcrumbs a {
    color: #1976d2;
}

.content-page .breadcrumbs span {
    margin: 0 0.5rem;
}

/* Table of Contents */
.content-page .toc {
    background: #f5f5f5;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.content-page .toc h3 {
    margin-top: 0;
    font-size: 1.25rem;
    color: #2e7d32;
}

.content-page .toc ul {
    list-style: none;
    padding-left: 1rem;
}

.content-page .toc li {
    margin-bottom: 0.5rem;
}

.content-page .toc a {
    color: #1976d2;
    text-decoration: none;
}

.content-page .toc a:hover {
    text-decoration: underline;
}

/* ============================================================================
   FOOTER & METADATA
   ============================================================================ */

.content-page footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e0e0e0;
    color: #666;
    font-size: 0.95rem;
}

.content-page .last-updated {
    color: #999;
    font-size: 0.9rem;
    font-style: italic;
}

.content-page .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.content-page .tag {
    background: #e0e0e0;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #333;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

/* Tablets (768px) */
@media (max-width: 768px) {
    .content-page {
        padding: 2rem;
        margin: 1rem auto;
    }

    .content-page h1 {
        font-size: 1.875rem;
        /* 30px */
    }

    .content-page h2 {
        font-size: 1.5rem;
        /* 24px */
    }

    .content-page h3 {
        font-size: 1.25rem;
        /* 20px */
    }

    .content-page p,
    .content-page li {
        font-size: 1rem;
        /* 16px */
    }

    .content-page .cta-button {
        display: block;
        text-align: center;
    }

    .header-container {
        padding: 0.5rem 1rem;
    }
}

/* Mobile (480px) */
@media (max-width: 480px) {
    .content-page {
        padding: 1.5rem;
        margin: 0.5rem;
        border-radius: 12px;
    }

    .content-page h1 {
        font-size: 1.625rem;
        /* 26px */
    }

    .content-page h2 {
        font-size: 1.375rem;
        /* 22px */
    }

    .content-page h3 {
        font-size: 1.125rem;
        /* 18px */
    }

    .content-page p,
    .content-page li {
        font-size: 0.95rem;
        /* 15px */
    }

    .content-page table {
        font-size: 0.85rem;
    }

    .content-page th,
    .content-page td {
        padding: 0.75rem 0.5rem;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .content-page-body {
        background: white;
        padding: 0;
    }

    .content-page {
        box-shadow: none;
        max-width: 100%;
        padding: 0;
    }

    .content-page a {
        color: #000;
        text-decoration: underline;
    }

    .content-page .cta-button,
    .content-page-header,
    .back-link {
        display: none;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus states */
.content-page *:focus {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* Skip links */
.content-page .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.content-page .skip-link:focus {
    top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .content-page {
        border: 2px solid #000;
    }

    .content-page a {
        text-decoration: underline;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .content-page * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   GLOSSARY & DICTIONARY PAGES
   ============================================================================ */

/* Alphabetical navigation bar */
.content-page .alphabetical-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 12px;
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.content-page .alphabetical-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    background: white;
    color: #2e7d32;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    border: 2px solid #2e7d32;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.content-page .alphabetical-nav a:hover {
    background: #2e7d32;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.content-page .alphabetical-nav a:active {
    transform: translateY(0);
}

/* Section headers for glossary */
.content-page h2[id] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2e7d32;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-left: 6px solid #2e7d32;
    border-radius: 8px;
    text-align: left;
}

/* Term entry container */
.content-page .term-entry {
    background: #f9f9f9;
    border-left: 4px solid #4caf50;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.content-page .term-entry:hover {
    background: #f0f0f0;
    border-left-color: #2e7d32;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Term name (main heading) */
.content-page .term-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1b5e20;
    margin-bottom: 0.5rem;
}

/* Term category badge */
.content-page .term-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #4caf50;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Term definition */
.content-page .term-definition {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
    margin: 1rem 0;
}

/* Term example */
.content-page .term-example {
    font-style: italic;
    color: #555;
    background: white;
    padding: 0.75rem 1rem;
    border-left: 3px solid #81c784;
    margin: 0.75rem 0;
    border-radius: 4px;
}

.content-page .term-example::before {
    content: "💡 ";
    margin-right: 0.5rem;
}

/* Game-specific notes */
.content-page .game-specific {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    padding: 0.75rem 1rem;
    border-left: 3px solid #ff9800;
    margin: 0.75rem 0;
    border-radius: 4px;
    font-size: 0.95rem;
}

.content-page .game-specific strong {
    color: #e65100;
}

/* Related terms */
.content-page .related-terms {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #ddd;
    font-size: 0.95rem;
    color: #666;
}

.content-page .related-terms a {
    color: #1976d2;
    font-weight: 600;
}

.content-page .related-terms a:hover {
    color: #1565c0;
    text-decoration: underline;
}

/* Intro section styling */
.content-page .intro {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 5px solid #1976d2;
    margin: 2rem 0;
    font-size: 1.1rem;
}

.content-page .intro p {
    margin-bottom: 0;
}

/* ============================================================================
   CONTENT IMAGES
   ============================================================================ */

/* Base image styling for all content images */
.content-page img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 1.5rem 0;
}

/* Guide/tutorial images (diagrams, screenshots) */
.content-page .guide-image,
.content-page .tutorial-image {
    display: block;
    margin: 2rem auto;
    border: 1px solid #e0e0e0;
}

/* Featured/hero images (article headers) */
.content-page .hero-image,
.content-page .featured-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    /* Maintain natural aspect ratio */
    object-fit: contain;
    /* Render proportionally without cropping */
    margin: 2rem 0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* Force proper color rendering */
    color-interpolation-filters: sRGB;
    image-rendering: auto;
}

/* Infographics and data visualizations */
.content-page .infographic-image {
    display: block;
    margin: 2rem auto;
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Image captions */
.content-page .image-caption {
    display: block;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}

/* Image containers with captions */
/* Responsive images */
@media (max-width: 768px) {
    .content-page img {
        margin: 1rem 0;
    }

    .content-page .guide-image,
    .content-page .tutorial-image,
    .content-page .infographic-image {
        margin: 1.5rem auto;
    }
}