/**
 * Prompt Detail Page Styles
 *
 * Phase J.1 Styling Fixes: Match PromptHero Design
 * - Flat design with no shadows
 * - Action icons in author card row
 * - Clean button styling (Follow outlined, Copy solid dark)
 * - System font for prompt text (not monospace)
 *
 * @file static/css/pages/prompt-detail.css
 * @author PromptFinder Team
 * @version 2.2.0
 * @date December 2025
 */

/* ==========================================================================
   CSS Custom Properties (Local to this component)
   ========================================================================== */

.prompt-detail-page {
    --card-border-color: #e5e7eb;
    --card-bg: transparent;
    --card-radius: 8px;
    --text-muted: #6b7280;
    --text-dark: #212529;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
}

/* ==========================================================================
   Media Container Shell (outer wrapper)
   Provides background and padding for the media container
   ========================================================================== */

/* Shell & container inherit from .media-container-shell / .media-container in style.css */
.prompt-media-container-shell {
    margin-bottom: var(--spacing-lg);
}

/* Video: no max-height restriction */
.prompt-media-container video {
    max-height: none;
}

/* Placeholder Image */
.hero-placeholder {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 2rem auto;
    opacity: 0.5;
}

/* ==========================================================================
   Content Wrapper
   Main container for 7/5 side-by-side layout
   ========================================================================== */

.prompt-content-wrapper {
    padding-top: 0;
    padding-bottom: var(--spacing-xl);
}

/* ==========================================================================
   Left Column
   Actions, title, description, and comments
   ========================================================================== */

.prompt-left-column {
    padding-right: var(--spacing-lg);
}

@media (max-width: 991.98px) {
    .prompt-left-column {
        padding-right: 0;
        margin-bottom: var(--spacing-xl);
    }
}

/* ==========================================================================
   Action Buttons
   Like, Comment, Edit, Delete, Report buttons
   ========================================================================== */

.prompt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: var(--spacing-lg);
}

.prompt-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--card-border-color);
    background: var(--card-bg);
    color: var(--text-dark);
    text-decoration: none;
}

.prompt-action-btn:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: var(--text-dark);
    transform: translateY(-1px);
}

.prompt-action-btn i {
    font-size: 1rem;
}

/* Like Button States */
.prompt-action-btn.liked {
    background: #fff0f0;
    border-color: #ffcdd2;
    color: #e53935;
}

.prompt-action-btn.liked:hover {
    background: #ffebee;
}

.prompt-action-btn.liked i {
    color: #e53935;
}

/* Like and View Count Spans */
.like-count,
.view-count {
    font-weight: 500;
    margin-left: 0;
}

/* Views Display Button Style */
.views-display {
    cursor: default;
}

.views-display:hover {
    transform: none;
    background: var(--card-bg);
}

/* ==========================================================================
   Title & Description
   ========================================================================== */

.prompt-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.prompt-title .media-type-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-100);
    color: var(--text-muted, #6b7280);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: 0.75rem;
    vertical-align: middle;
}

.prompt-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xl);
}

/* ==========================================================================
   Right Rail
   Card-based sidebar with author, stats, details, prompt, tags
   ========================================================================== */

/* Right rail default positioning:
   - JavaScript handles conditional sticky via initConditionalSticky()
   - If content fits viewport: sticky applied via JS
   - If content too tall: normal document flow (no sticky)
   - NO max-height, NO overflow, NO scrollbars, NO content cropping */
.prompt-right-rail {
    position: relative; /* Default - JS may override to sticky if content fits */
}

@media (max-width: 991.98px) {
    .prompt-right-rail {
        position: static !important; /* Force static on mobile, override any JS */
    }
}

/* ==========================================================================
   Rail Cards
   Flat design - no shadows, transparent backgrounds
   ========================================================================== */

.rail-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--card-border-color);
    border-radius: 0;
    padding: var(--spacing-md) 0;
    margin-bottom: 0;
}

.rail-card:last-child {
    border-bottom: none;
}

.rail-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Author Card
   Creator info with avatar, follow button, and action icons
   ========================================================================== */

/* Combined Author + Details Row */
.author-details-combined {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-top: calc(var(--space-8) + var(--space-5));
}

/* Author details container - simple block layout */
.author-details-row {
    display: block;
}

/* First row: Avatar + Follow - flex container */
.author-first-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Views Row - Block sibling, naturally on new line */
.views-row {
    margin-top: 0.5rem;
    padding-top: 10px;
    font-size: 0.875rem;
    color: #6b7280;
}

.views-row .views-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Right column with Follow button */
.author-card-right {
    flex-shrink: 0;
}

/* Inline Details (Right Side) */
.details-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.detail-inline-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.detail-inline-item i {
    font-size: 0.75rem;
}

/* Legacy wrapper (for backwards compatibility) */
.author-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Top row: Avatar, name, follow button */
.author-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.author-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--main-blue, #1976d2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.author-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-avatar .avatar-letter {
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.author-name {
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.author-name:hover {
    color: var(--main-blue, #1976d2);
}

.post-time {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Follow Button - Uses shared .btn-outline-standard from style.css
   Only override specific properties here */
.follow-btn {
    /* Slightly smaller padding for compact look in author card */
    padding: 0.25rem 0.875rem;
}

.follow-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.follow-btn.following {
    background: var(--white);
    color: var(--gray-700);
    border-color: var(--gray-300);
}

.follow-btn.following:hover,
.follow-btn.hover-unfollow {
    background: var(--error-light);
    color: var(--error);
    border-color: var(--error);
}

/* Action Icons Row */
.author-card-actions {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex: 1;
    justify-content: flex-end;
}

/* Action Icon Buttons - Uses shared .btn-outline-standard from style.css
   Only contains overrides for icon-specific sizing */
.action-icon-btn {
    /* Smaller padding for icon buttons */
    padding: 0.3rem 0.75rem;
    gap: 0.18rem;
    min-height: 34px;
    min-width: 36px;
}

.action-icon-btn i {
    font-size: 1.125rem;
    line-height: 1;
}

/* Note: .like-btn-detail.liked styles are in icons.css */

.action-icon-btn.views-display {
    cursor: default;
}

.action-icon-btn.views-display:hover {
    background-color: var(--white);
    color: var(--gray-600);
}

.action-count {
    font-weight: 500;
    font-size: 0.9125rem;
    font-family: inherit;
    min-width: 1.25rem;
    text-align: center;
    display: inline-block;
}

/* Focus states for accessibility (WCAG 2.1) */
.follow-btn:focus,
.copy-btn:focus {
    outline: 2px solid var(--main-blue, #1976d2);
    outline-offset: 2px;
}

.action-icon-btn:focus {
    outline: 2px solid var(--gray-400);
    outline-offset: 2px;
}

/* ==========================================================================
   Stats Card
   Views, likes, comments metrics
   ========================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    text-align: center;
}

.stat-item {
    padding: var(--spacing-sm);
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    display: block;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Model Used Card
   Separate section for AI generator information
   ========================================================================== */

.model-used-card {
    padding: var(--spacing-md) 0;
}

.model-used-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.model-name,
.model-type {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-dark);
}

.model-name i,
.model-type i {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Model name as link - inherit colors, underline on hover */
a.model-name {
    color: inherit;
    text-decoration: none;
}

a.model-name:hover {
    text-decoration: underline;
}

/* Model Used Row: Flex layout with affiliate button */
.model-used-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.model-used-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Affiliate Button: "Try in [Generator]" - Uses shared .btn-outline-standard from style.css
   No overrides needed - uses base styling */
.btn-affiliate {
    /* All styling inherited from .btn-outline-standard */
}

/* Mobile: Stack affiliate button below model info */
@media (max-width: 575.98px) {
    .model-used-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-affiliate {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Details Card
   AI generator, date, media type info
   ========================================================================== */

.details-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.detail-item i {
    width: 20px;
    color: var(--text-muted);
    text-align: center;
}

.detail-item span {
    color: var(--text-dark);
}

/* ==========================================================================
   Source / Credit Card
   Shows prompt origin when credited
   ========================================================================== */

.source-credit-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.source-credit-text {
    font-size: 0.9375rem;
    color: var(--text-dark);
}

.source-credit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9375rem;
    color: var(--text-dark);
    text-decoration: none;
}

.source-credit-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Prompt Text Card
   The actual prompt content with copy button
   Completely flat design - no shadows, borders, or hover effects
   ========================================================================== */

.prompt-card,
.rail-card.prompt-card {
    background: transparent;
    box-shadow: none;
    border: none;
    border-bottom: none;
}


.prompt-text-content {
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text-dark);
    /* Phase J.2 Fix: Removed max-height to show full prompt text */
    padding: var(--spacing-md);
    background: #ffffff;
    border: solid 1px var(--gray-300);
    border-radius: 6px;
    margin-bottom: var(--spacing-md);
}

/* Copy Button - Uses shared .btn-outline-standard from style.css
   Only override specific properties here */
.copy-btn {
    /* Slightly smaller padding for compact look */
    padding: 0.375rem 0.75rem;
}

/* ==========================================================================
   Prompt Card Header
   Optional header with title and copy button
   ========================================================================== */

.prompt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.prompt-card-header .rail-card-title {
    margin-bottom: 0;
}

/* Login to Copy CTA */
.login-to-copy {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--card-border-color);
}

/* ==========================================================================
   Tags Card
   Tag badges with click to filter
   ========================================================================== */

.tags-list,
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--gray-200);
    color: var(--gray-700);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.tag-badge:hover {
    background: var(--gray-300);
    color: var(--gray-900);
}

/* ==========================================================================
   Comments Column
   Separate column that spans 7 cols on desktop, full width on mobile
   ========================================================================== */

.comments-column {
    /* On desktop (lg+), limit to 7 columns width to align with left column */
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

/* ==========================================================================
   Comments Section
   Comment list and form
   ========================================================================== */

.comments-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--card-border-color);
}

.comments-header,
.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--text-dark);
}

.comment-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.comment-author {
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
}

.comment-author:hover {
    color: var(--main-blue, #1976d2);
}

.comment-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.comment-body {
    color: var(--text-dark);
    line-height: 1.6;
}

.comment-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--spacing-sm);
}

.comment-actions .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Comment Form */
.comment-form-wrapper {
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.comment-form-wrapper h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

/* Login prompt for comments */
.comment-login-prompt,
.login-prompt {
    text-align: center;
    padding: var(--spacing-lg);
    background: #f8f9fa;
    border-radius: var(--card-radius);
    margin-top: var(--spacing-lg);
}

.comment-login-prompt p,
.login-prompt p {
    margin-bottom: var(--spacing-md);
    color: var(--text-muted);
}

/* Comments List */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* No Comments State */
.no-comments {
    padding: var(--spacing-lg);
    text-align: center;
}

/* Approval Notice */
.approval {
    font-size: 0.85rem;
    color: #856404;
    background: #fff3cd;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin-top: var(--spacing-sm);
}

/* Profile Link in Comments */
.profile-link {
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.profile-link:hover {
    color: var(--main-blue, #1976d2);
}

/* ==========================================================================
   Modals
   Delete confirmation and report modals
   ========================================================================== */

.modal-content {
    border-radius: var(--radius-lg);
}

.modal-header {
    border-bottom: 1px solid var(--card-border-color);
}

.modal-footer {
    border-top: 1px solid var(--card-border-color);
}

/* ==========================================================================
   Alert Messages
   Missing media, pending review notices
   ========================================================================== */

.media-alert {
    border-radius: var(--card-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   Responsive Design
   Mobile-first approach with stacking on smaller screens
   ========================================================================== */

/* Tablet and below */
@media (max-width: 991.98px) {
    .prompt-title {
        font-size: 1.5rem;
    }

    .prompt-actions {
        flex-wrap: wrap;
    }

    .prompt-action-btn {
        flex: 1 1 calc(50% - 0.375rem);
        justify-content: center;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Mobile touch target size (WCAG 2.1) */
    .follow-btn {
        padding: 0.5rem 1rem;
        min-height: 44px;
    }

    .action-icon-btn {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    /* Mobile/Tablet: Reorder for optimal reading flow
       Content → Metadata → Comments (LAST)
       This matches PromptHero's mobile pattern

       UX Rationale:
       1. Users follow "consume first, engage second" pattern
       2. Primary intent: view/copy prompt (not read comments)
       3. 70%+ of mobile users just want to copy - don't make them scroll past comments
       4. Industry standard: PromptHero, Lexica, CivitAI all put comments last */
    .prompt-content-wrapper > .row {
        display: flex;
        flex-direction: column;
    }

    /* Left column: Media, Title, Description */
    .prompt-content-wrapper > .row > .prompt-left-column {
        order: 1;
    }

    /* Right rail: Author, Prompt, Tags, More From */
    .prompt-content-wrapper > .row > .prompt-right-rail {
        order: 2;
    }

    /* Comments: ALWAYS LAST on mobile */
    .prompt-content-wrapper > .row > .comments-column {
        order: 3;
    }

    /* Comments column: full width and proper spacing on mobile */
    .comments-column {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: var(--spacing-md, 1rem);
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .prompt-media-container-shell {
        border-radius: 0;
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
    }

    .prompt-title {
        font-size: 1.25rem;
    }

    .prompt-title .media-type-indicator {
        display: block;
        margin-left: 0;
        margin-top: 0.5rem;
        width: fit-content;
    }

    .prompt-action-btn {
        flex: 1 1 100%;
        padding: 0.75rem 1rem;
    }

    .rail-card {
        padding: 0.875rem;
    }

    .author-avatar {
        width: 40px;
        height: 40px;
    }

    .stat-value {
        font-size: 1.1rem;
    }

    .prompt-text-content {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   More from Author Section (Phase J.2)
   Single row of 4 thumbnails from same author
   ========================================================================== */

.more-from-author-card {
    margin-top: var(--space-4, 16px);
}

.more-from-author-card .rail-card-title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.more-from-author-card .author-link {
    color: var(--link-color, #191919);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-fast, 0.15s ease);
}

.more-from-author-card .author-link:hover,
.more-from-author-card .author-link:focus {
    color: var(--link-hover-color, #000000);
    text-decoration: underline;
}

/* Thumbnail Container - Single Row */
.more-from-author-thumbnails {
    display: flex;
    gap: var(--space-2, 8px);
    margin-top: var(--space-3, 12px);
}

/* Individual Thumbnail Link */
.author-thumbnail-link {
    flex: 1 1 0;
    min-width: 0;
    text-decoration: none;
    display: block;
}

.author-thumbnail-link:focus {
    outline: 2px solid var(--link-color, #191919);
    outline-offset: 2px;
    border-radius: var(--radius-md, 8px);
}

/* Thumbnail Wrapper with Overlay */
.author-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 aspect ratio */
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--gray-100, #f5f5f5);
}

.author-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal, 0.2s ease);
}

/* Hover Overlay */
.author-thumbnail-overlay {
    position: absolute;
    /* Safari 14.0 fallback (inset not supported until Safari 14.1) */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color var(--transition-fast, 0.15s ease);
    pointer-events: none;
}

.author-thumbnail-link:hover .author-thumbnail-overlay,
.author-thumbnail-link:focus .author-thumbnail-overlay {
    background-color: rgba(0, 0, 0, 0.3);
}

.author-thumbnail-link:hover .author-thumbnail {
    transform: scale(1.05);
}

/* Phase J.2 Fix 4: "+N See all prompts" Overlay on 4th Thumbnail */
.author-thumbnail-count-overlay {
    position: absolute;
    /* Safari 14.0 fallback */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
    transition: background-color var(--transition-fast, 0.15s ease);
}

.author-thumbnail-more:hover .author-thumbnail-count-overlay,
.author-thumbnail-more:focus .author-thumbnail-count-overlay {
    background-color: rgba(0, 0, 0, 0.75);
}

.author-more-count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.author-more-text {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 2px;
    opacity: 0.9;
}

/* Phase J.2 Fix 3: Grey Placeholder for Empty Slots */
.author-thumbnail-placeholder {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    padding-bottom: calc(100% / 4 - var(--space-2, 8px) * 3 / 4);
    /* Match aspect ratio calculation */
    aspect-ratio: 1 / 1;
    background: var(--gray-200, #e5e5e5);
    border-radius: var(--radius-md, 8px);
}

/* Medium screens (992px - 1199px): 2x2 grid layout
   The right rail is narrower on medium screens, so 2x2 grid fits better.
   The "+N more" overlay remains visible on the 4th thumbnail. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .more-from-author-thumbnails {
        flex-wrap: wrap;
    }

    .more-from-author-thumbnails > .author-thumbnail-link,
    .more-from-author-thumbnails > .author-thumbnail-placeholder {
        flex: 1 1 calc(50% - var(--space-2, 8px) / 2);
        max-width: calc(50% - var(--space-2, 8px) / 2);
    }
}

/* Mobile Responsive - Stack to 2x2 grid */
@media (max-width: 576px) {
    .more-from-author-thumbnails {
        flex-wrap: wrap;
    }

    .author-thumbnail-link,
    .author-thumbnail-placeholder {
        flex: 1 1 calc(50% - var(--space-2, 8px) / 2);
        max-width: calc(50% - var(--space-2, 8px) / 2);
    }
}

/* ==========================================================================
   Video Thumbnail Play Icon - More From Author Section (Phase J.3)
   Displays play icon on video thumbnails with hover autoplay on desktop
   ========================================================================== */

/* Video Thumbnail Container - wraps the thumbnail for video-specific behavior */
.more-from-author-thumbnails .video-thumbnail-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

/* Thumbnail image (fallback, always visible initially) */
.more-from-author-thumbnails .video-thumbnail-container .author-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease, transform var(--transition-normal, 0.2s ease);
}

/* Hidden video element - only visible on hover (desktop) */
.more-from-author-thumbnails .video-thumbnail-container .thumbnail-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Play Icon Overlay - centered on video thumbnails */
.more-from-author-thumbnails .play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.more-from-author-thumbnails .play-icon {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Desktop Hover Behavior - Only for devices with true hover capability */
@media (hover: hover) and (pointer: fine) {
    /* On hover: fade out play icon */
    .author-thumbnail-link:hover .video-thumbnail-container .play-icon-overlay {
        opacity: 0;
    }

    /* On hover: fade out static thumbnail image */
    .author-thumbnail-link:hover .video-thumbnail-container .author-thumbnail {
        opacity: 0;
    }

    /* On hover: fade in video */
    .author-thumbnail-link:hover .video-thumbnail-container .thumbnail-video {
        opacity: 1;
    }

    /* On hover: scale effect (same as image thumbnails) */
    .author-thumbnail-link:hover .video-thumbnail-container .author-thumbnail,
    .author-thumbnail-link:hover .video-thumbnail-container .thumbnail-video {
        transform: scale(1.05);
    }

    /* On hover: DISABLE dark overlay for video thumbnails (video should play clearly) */
    .author-thumbnail-link:hover .video-thumbnail-container .author-thumbnail-overlay,
    .author-thumbnail-link:focus .video-thumbnail-container .author-thumbnail-overlay {
        background-color: rgba(0, 0, 0, 0) !important;
    }
}

/* ==========================================================================
   Legacy Classes (Deprecated - kept for backwards compatibility)
   Will be removed in future version
   ========================================================================== */

.action-buttons {
    margin-bottom: 1.5rem;
}

.sidebar-title {
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ==========================================================================
   N4d: Processing Page Loading States
   Shows spinner animations while AI generates title/description/tags
   ========================================================================== */

.processing-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--gray-800, #262626);
    border-radius: 50%;
    animation: processing-spin 1s linear infinite;
    margin-right: 0.5em;
    vertical-align: middle;
}

@keyframes processing-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.generating-text {
    color: var(--text-muted, #6c757d);
    font-style: italic;
}

/* Completion Modal */
.completion-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1050;
    justify-content: center;
    align-items: center;
}

.completion-modal.show {
    display: flex;
}

.completion-modal-content {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.completion-modal h3 {
    margin-bottom: 0.5rem;
    color: var(--success, #28a745);
}

.completion-modal p {
    color: var(--gray-700, #374151);
    margin-bottom: 1.5rem;
}

.completion-modal .btn-primary {
    background: var(--gray-800, #262626);
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    color: white;
    transition: background 0.2s ease;
}

.completion-modal .btn-primary:hover {
    background: var(--gray-900, #171717);
    color: white;
}

/* Tag badge styling for dynamically added tags */
.tags-container .tag-badge {
    display: inline-block;
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-700, #374151);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* ==========================================================================
   Breadcrumb Navigation (SEO + UX)
   Visual breadcrumbs matching BreadcrumbList JSON-LD schema
   Added: February 2026
   ========================================================================== */

.prompt-breadcrumb {
    padding-top: calc(var(--space-1) + var(--space-1));
    padding-bottom: calc(var(--space-1) + var(--space-2));
}

.prompt-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    flex-wrap: wrap;
}

.prompt-breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.prompt-breadcrumb .breadcrumb-item a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.prompt-breadcrumb .breadcrumb-item a:hover {
    color: var(--main-blue, #2563eb);
    text-decoration: underline;
}

.prompt-breadcrumb .breadcrumb-item.active {
    color: var(--text-dark);
    font-weight: 500;
}

/* Bootstrap breadcrumb separator override */
.prompt-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--text-muted);
    padding-right: 0.5rem;
    font-weight: 400;
}

/* Mobile: allow natural wrapping between items */
@media (max-width: 576px) {
    .prompt-breadcrumb .breadcrumb {
        font-size: 0.8125rem;
    }

    /* Keep "Home" and generator links on one line each (no mid-link breaks) */
    .prompt-breadcrumb .breadcrumb-item {
        white-space: nowrap;
    }

    /* Allow the active title to wrap naturally if too long */
    .prompt-breadcrumb .breadcrumb-item.active {
        white-space: normal;
        overflow-wrap: break-word;
    }
}

/* Keyboard focus indicator for accessibility (WCAG 2.1 AA) */
.prompt-breadcrumb .breadcrumb-item a:focus-visible {
    outline: 2px solid var(--main-blue, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Related Prompts Section
   ========================================================================== */

.related-prompts-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

.related-prompts-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--gray-800, #1f2937);
}

/* Constrain the related prompts container - matches homepage .masonry-container */
.related-prompts-container {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Load More button styling */
.related-prompts-section .load-more-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* CSS Column-Count Layout for Related Prompts Grid
   IMPORTANT: Override .masonry-grid's display:flex from masonry-grid.css
   CSS columns require display:block to function */
.related-prompts-grid {
    display: block !important;  /* Override flex from masonry-grid.css */
    column-count: 4;
    column-gap: 15px !important;
    gap: 15px !important;  /* Ensure gap property also set for broader support */
}

.related-prompts-grid .masonry-item {
    break-inside: avoid;
    margin-bottom: 15px !important;
    display: inline-block !important;
    width: 100% !important;
    opacity: 1 !important;
    animation: none !important;
    vertical-align: top !important;
}

/* Video cards in related prompts:
   Thumbnail starts as position:relative for initial card height.
   Once JS initializes the video, thumbnail switches back to absolute
   to overlay the playing video. */
.related-prompts-grid .video-thumbnail {
    position: relative !important;
    opacity: 1;
    z-index: 3;
}

/* When video is initialized by JS, switch thumbnail to absolute overlay */
.related-prompts-grid .gallery-video[data-initialized="true"] + .video-thumbnail {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
}

/* Responsive column counts */
@media (max-width: 1100px) {
    .related-prompts-grid {
        display: block !important;
        column-count: 3;
    }
}

@media (max-width: 800px) {
    .related-prompts-grid {
        display: block !important;
        column-count: 2;
    }
}

@media (max-width: 500px) {
    .related-prompts-grid {
        display: block !important;
        column-count: 1;
    }
}

@media (max-width: 768px) {
    .related-prompts-section {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .related-prompts-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
}

/* Phase R1-D: Offset anchor scroll for sticky navbar */
#comments {
    scroll-margin-top: 100px;
}

/* ── Source Combined Card (Session 139) ─────────────────── */
.source-combined-card {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.source-credit-col {
    min-width: 120px;
}

.source-image-col {
    flex-shrink: 0;
}

/* Source image thumbnail with zoom overlay */
.source-image-thumb-wrap {
    position: relative;
    display: inline-block;
    cursor: zoom-in;
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}

/* Show full image without cropping */
.source-image-thumb {
    display: block;
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm, 6px);
    transition: opacity 0.2s ease;
}

.source-image-thumb-wrap:hover .source-image-thumb {
    opacity: 0.85;
}

.source-image-zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.source-image-thumb-wrap:hover .source-image-zoom-icon,
.source-image-thumb-wrap:focus .source-image-zoom-icon {
    opacity: 1;
}

.source-image-thumb-wrap:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.3);
}

/* ── Hero Image Lightbox Hover (Session 139) ───────────────── */
.hero-image-wrap {
    position: relative;
    display: block;
    cursor: zoom-in;
}

.hero-image-zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.hero-image-wrap:hover .hero-image-zoom-icon,
.hero-image-wrap:focus .hero-image-zoom-icon {
    opacity: 1;
}

.hero-image-wrap:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.3);
}

/* ── Lightbox — now in static/css/components/lightbox.css (Session 141) ── */

@media (prefers-reduced-motion: reduce) {
    .hero-image-zoom-icon { transition: none; }
    .hero-image-wrap { cursor: pointer; }
    /* lightbox transitions now in components/lightbox.css */
}