/* Content styles for editor output (legacy + Tiptap) */

/* Protect article title image from content styles */
.article-title-image {
    width: 4rem !important; /* 64px */
    height: 4rem !important; /* 64px */
    max-width: none !important;
    max-height: none !important;
}

@media (min-width: 640px) {
    .article-title-image {
        width: 5rem !important; /* 80px */
        height: 5rem !important; /* 80px */
    }
}

/* Protect related article images from content constraints */
.related-article-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Default rounded corners + soft shadow for content images (matches the
   TinyMCE-era look, where authors picked rounded-lg + shadow-lg on every
   image they inserted). Special-purpose shell images keep their own shape. */
.prose img:not(.article-title-image):not(.related-article-image),
.dynamic-container-content img,
.article-content img:not(.article-title-image):not(.related-article-image) {
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.18), 0 8px 10px -6px rgb(0 0 0 / 0.12);
}

/* Image captions emitted by App\Filament\Actions\MediaAction —
   <p class="image-caption"> sibling right after the image paragraph. */
.prose p.image-caption,
.dynamic-container-content p.image-caption,
.article-content p.image-caption {
    text-align: center;
    color: rgb(107, 114, 128);
    font-size: 0.875rem;
    line-height: 1.4;
    font-style: italic;
    margin-top: -0.25rem;
}

.dark .prose p.image-caption,
.dark .dynamic-container-content p.image-caption,
.dark .article-content p.image-caption {
    color: rgb(156, 163, 175);
}

/* Constraint for content images only */
/* Target images that are direct children of prose content */
.prose > p img:not(.article-title-image):not(.related-article-image),
.prose > div img:not(.article-title-image):not(.related-article-image),
.prose > figure img:not(.article-title-image):not(.related-article-image),
.prose > img:not(.article-title-image):not(.related-article-image) {
    max-width: 500px !important;
    max-height: 500px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Also target nested images in content */
.prose p img:not(.article-title-image):not(.related-article-image),
.prose div:not(header) img:not(.article-title-image):not(.related-article-image),
.prose figure img:not(.article-title-image):not(.related-article-image),
.prose td img:not(.article-title-image):not(.related-article-image),
.prose li img:not(.article-title-image):not(.related-article-image) {
    max-width: 500px !important;
    max-height: 500px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Keep inline display for paragraph images */
.prose p img:not(.related-article-image) {
    display: inline-block;
    vertical-align: middle;
}

/* Simple content image constraints */
.article-content img:not(.article-title-image):not(.related-article-image) {
    max-width: 500px !important;
    max-height: 500px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
}

/* Figure styling in article content */
.article-content figure {
    margin: 0;
    text-align: center;
}

.article-content figure figcaption {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
    padding: 0 0.5rem;
}

.dark .article-content figure figcaption {
    color: #9ca3af;
}

/* Override prose font-size for elements with inline styles */
.prose [style*="font-size"] {
    /* JavaScript will handle adding !important */
}

/* Ensure child elements inherit parent font-size */
.prose [style*="font-size"] * {
    font-size: inherit;
}

/* Override prose styles for aligned images */
.prose img.mce-object-left,
.prose figure.align-left {
    float: left !important;
    margin: 0 1.5rem 1.5rem 0 !important;
    display: block;
}

.prose img.mce-object-right,
.prose figure.align-right {
    float: right !important;
    margin: 0 0 1.5rem 1.5rem !important;
    display: block;
}

.prose img.mce-object-center,
.prose figure.align-center {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Ensure inline images stay inline */
.prose img:not([class*="mce-object"]):not([class*="align"]) {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25rem;
}

/* Clear floats after content */
.prose::after {
    content: "";
    display: table;
    clear: both;
}

/* Override prose default image styles - removed, handled above */

/* These specific rules are now handled by the global constraint above */

/* Images in paragraphs */
.prose p img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25rem;
}

/* Multiple images in same paragraph - keep them inline */
.prose p.image-row {
    font-size: 0; /* Remove spacing between inline-block elements */
}

.prose p.image-row > * {
    font-size: 1rem; /* Reset font size for non-image elements */
}

.prose p.image-row img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25rem;
}

/* Ensure proper spacing and size constraints for figures */
.prose figure {
    margin: 1.5rem 0;
}

.prose figure img {
    max-width: min(100%, 800px);
    max-height: 600px;
    object-fit: contain;
    margin: 0 auto;
}

.prose figure + figure {
    margin-top: 1rem;
}

/* Style figure captions - merged with above */

/* Dark mode caption color */
.dark .prose figure figcaption {
    color: #9ca3af;
}

/* Lightbox-enabled images */
.prose img.lightbox-enabled {
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.prose img.lightbox-enabled:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Dark mode hover effect */
.dark .prose img.lightbox-enabled:hover {
    opacity: 0.85;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    /* Adjust grid for mobile - single column */
    .prose > p:has(figure),
    .prose > div:has(figure) {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Allow figures to be responsive on mobile */
    .prose figure {
        max-width: 100%;
    }

    .prose figure img {
        max-width: 100% !important;
        max-height: 80vh !important;
        width: auto !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    /* Make all images responsive on tablets and mobile */
    .prose p img:not(.article-title-image):not(.related-article-image),
    .prose div:not(header) img:not(.article-title-image):not(.related-article-image),
    .prose figure img:not(.article-title-image):not(.related-article-image),
    .prose td img:not(.article-title-image):not(.related-article-image),
    .prose li img:not(.article-title-image):not(.related-article-image),
    .article-content img:not(.article-title-image):not(.related-article-image) {
        max-width: 100% !important;
        max-height: 80vh !important;
        width: auto !important;
        height: auto !important;
    }

    .prose p img {
        max-width: 100%;
        display: block;
        margin: 1rem auto;
    }

    .prose img.mce-object-left,
    .prose img.mce-object-right,
    .prose figure.align-left,
    .prose figure.align-right {
        float: none !important;
        margin: 1.5rem auto !important;
        display: block !important;
    }
}

/* =========================================================
   Tiptap structural elements — frontend rendering
   The package's own stylesheet only matches inside the admin
   editor (.tiptap-editor .ProseMirror ...), so we mirror the
   relevant rules here for the public site.
   ========================================================= */

.filament-tiptap-grid,
.filament-tiptap-grid-builder {
    display: grid;
    gap: 1rem;
    box-sizing: border-box;
}

/* Builder grids stack at a configurable breakpoint */
@media (max-width: 640px) {
    .filament-tiptap-grid-builder[data-stack-at="sm"] {
        grid-template-columns: 1fr !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"] .filament-tiptap-grid-builder__column {
        grid-column: span 1 !important;
    }
}

@media (max-width: 768px) {
    .filament-tiptap-grid-builder[data-stack-at="md"] {
        grid-template-columns: 1fr !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"] .filament-tiptap-grid-builder__column {
        grid-column: span 1 !important;
    }
}

@media (max-width: 1024px) {
    .filament-tiptap-grid-builder[data-stack-at="lg"] {
        grid-template-columns: 1fr !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"] .filament-tiptap-grid-builder__column {
        grid-column: span 1 !important;
    }
}

/* Built-in Grid extension types (asymmetric / responsive / fixed) */
.filament-tiptap-grid[type^="asymetric"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}
@media (min-width: 768px) {
    .filament-tiptap-grid[type="asymetric-right-thirds"]   { grid-template-columns: 1fr 2fr; }
    .filament-tiptap-grid[type="asymetric-left-thirds"]    { grid-template-columns: 2fr 1fr; }
    .filament-tiptap-grid[type="asymetric-right-fourths"]  { grid-template-columns: 1fr 3fr; }
    .filament-tiptap-grid[type="asymetric-left-fourths"]   { grid-template-columns: 3fr 1fr; }
}

.filament-tiptap-grid[type="responsive"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}
@media (min-width: 768px) {
    .filament-tiptap-grid[type="responsive"][cols="2"] { grid-template-columns: repeat(2, 1fr); }
    .filament-tiptap-grid[type="responsive"][cols="3"] { grid-template-columns: repeat(3, 1fr); }
    .filament-tiptap-grid[type="responsive"][cols="4"] { grid-template-columns: repeat(2, 1fr); }
    .filament-tiptap-grid[type="responsive"][cols="5"] { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1024px) {
    .filament-tiptap-grid[type="responsive"][cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

.filament-tiptap-grid[type="fixed"][cols="2"] { grid-template-columns: repeat(2, 1fr); }
.filament-tiptap-grid[type="fixed"][cols="3"] { grid-template-columns: repeat(3, 1fr); }
.filament-tiptap-grid[type="fixed"][cols="4"] { grid-template-columns: repeat(4, 1fr); }
.filament-tiptap-grid[type="fixed"][cols="5"] { grid-template-columns: repeat(5, 1fr); }

/* Details / collapsible blocks */
.prose div[data-type="details"] {
    border: 1px dashed rgb(var(--c-border));
    border-radius: 0.25rem;
    margin: 1rem 0;
}
.prose div[data-type="details"] > summary {
    padding: 0.375rem 0.5rem;
    font-weight: 700;
    border-bottom: 1px solid rgb(var(--c-border));
    cursor: pointer;
}
.prose div[data-type="details"] > div[data-type="details-content"] {
    padding: 0.5rem;
}

/* Dynamic Container Content - Basic typography without prose */
.dynamic-container-content {
    line-height: 1.5;
}

.dynamic-container-content p {
    margin-bottom: 0.75rem;
}

.dynamic-container-content h1,
.dynamic-container-content h2,
.dynamic-container-content h3,
.dynamic-container-content h4,
.dynamic-container-content h5,
.dynamic-container-content h6 {
    font-weight: bold;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.dynamic-container-content ul,
.dynamic-container-content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}

.dynamic-container-content ul {
    list-style-type: disc;
}

.dynamic-container-content ol {
    list-style-type: decimal;
}

.dynamic-container-content a {
    color: #2563eb;
    text-decoration: underline;
}

.dynamic-container-content a:hover {
    color: #1d4ed8;
}

/* Images in dynamic containers - preserve inline dimensions */
.dynamic-container-content img {
    display: inline-block;
    vertical-align: middle;
}

/* SVGs in dynamic containers */
.dynamic-container-content svg,
.dynamic-container-content img[src$=".svg"] {
    display: inline-block;
    vertical-align: middle;
}