/* Styles for StudioFlicks custom templates and pages */

/* Person Info Section */
.person-info {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Left column (image) 1/3, right column (meta) 2/3 */
    gap: 30px;
    align-items: start; /* Ensure alignment starts at top */
    min-height: 0; /* Prevent grid overflow */
    width: 100%; /* Ensure full width */
}

.image-column {
    max-width: 300px; /* Match movie page poster container */
    width: 100%; /* Ensure it takes full 1fr */
}

.poster-frame {
    padding: 10px; /* Match movie page frame padding */
    border: 0.5px solid var(--border-color); /* Match movie page frame border */
    border-radius: 8px;
    width: 100%; /* Ensure frame fills column */
}

.image-column .poster {
    width: 100%;
    height: auto;
    max-width: 300px; /* Explicitly enforce 300px max-width */
    aspect-ratio: 2/3; /* Match movie page poster aspect ratio */
    object-fit: cover; /* Ensure proper scaling */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Match movie page */
    display: block;
}

.meta-column {
    flex: 1;
    width: 100%; /* Ensure it takes full 2fr */
    display: flex;
    flex-direction: column; /* Stack title, meta-card, bio-box vertically within column */
    gap: 15px; /* Space between elements */
    overflow: hidden; /* Prevent overflow issues */
}

.meta-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.meta-item {
    display: flex;
    flex-direction: row; /* Ensure label and value are side by side */
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.meta-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.meta-item .meta-label {
    font-weight: 600;
    color: var(--title-color);
    min-width: 150px; /* Increased width for better side-by-side display */
    margin-right: 10px;
    display: flex;
    align-items: center;
    white-space: nowrap; /* Prevent label wrapping */
}

.meta-item .meta-label .emoji {
    margin-right: 5px;
    font-size: 1.2em; /* Ensure emoji visibility */
}

.meta-item .meta-value {
    color: var(--text-color);
    word-break: break-word;
    flex: 1;
    overflow-wrap: break-word; /* Allow long values to wrap */
}

/* Colorful button styles with emojis */
.meta-item:nth-child(1) { /* Also Known As */
    background: linear-gradient(45deg, #ff6b6b, #ff8787); /* Red gradient */
}
.meta-item:nth-child(2) { /* Birthday */
    background: linear-gradient(45deg, #4ecdc4, #6be4d9); /* Teal gradient */
}
.meta-item:nth-child(3) { /* Place of Birth */
    background: linear-gradient(45deg, #45b7d1, #67c5e0); /* Blue gradient */
}

/* Readable font sizes (default base, adjusted for headings) */
body {
    font-size: 16px; /* Default readable size */
    line-height: 1.6; /* Standard line height for readability */
}

h1 { font-size: 2.38rem; } /* Original heading size */
h2 { font-size: 1.7rem; }
h2.synopsis-title { font-size: 1.445rem; }
h3 { font-size: 1.275rem; }
h4 { font-size: 1.02rem; }

.meta-label, .meta-value, .filmography-card a, .filmography-card .role, .show-more-btn, .movie-archive-item h2, .movie-archive-item p {
    font-size: 1rem; /* Default size for readability */
}

.container h1 { font-size: 2.38rem; }
.container h2 { font-size: 1.7rem; }
.container h2.synopsis-title { font-size: 1.445rem; }
.container h3 { font-size: 1.275rem; }
.container h4 { font-size: 1.02rem; }

.bio-box {
    background: var(--card-bg);
    padding: 12px; /* Reduced from 20px */
    border-radius: 7px; /* Reduced from 12px */
    border: 1px solid var(--border-color);
    margin-top: 12px; /* Reduced from 20px */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Movie Archive Grid Styles */
.movie-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three-column grid */
    gap: 20px;
    margin-top: 20px;
}

.movie-archive-item {
    background: var(--card-bg);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.movie-archive-item:hover {
    transform: translateY(-3px);
}

.movie-poster {
    max-width: 100%;
    height: auto;
    aspect-ratio: 2/3; /* Match movie page poster aspect ratio */
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
}

/* Filmography Grid Styles */
.filmography-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for filmography */
    gap: 12px; /* Reduced from 20px */
}

.filmography-card {
    background: var(--card-bg);
    border-radius: 5px; /* Reduced from 8px */
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.filmography-card:hover {
    transform: translateY(-3px); /* Reduced from -5px */
}

.filmography-image {
    width: 100%;
    height: auto;
    max-width: 100%; /* Match movie page poster */
    aspect-ratio: 2/3; /* Match movie page poster */
    object-fit: cover;
    border: 0.3px solid var(--border-color); /* Reduced from 0.5px */
    border-radius: 5px; /* Reduced from 8px */
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.5); /* Adjusted from 4px 15px */
}

.filmography-card a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1rem; /* Readable default */
    font-weight: 500;
    display: block;
    padding: 6px; /* Reduced from 10px */
}

.filmography-card a:hover {
    color: var(--accent-color);
}

.filmography-card .role {
    color: var(--muted-text);
    font-size: 1rem; /* Readable default */
    padding: 0 6px 6px; /* Reduced from 0 10px 10px */
}

.show-more-btn {
    display: none;
    background: var(--accent-color);
    color: var(--title-color);
    border: none;
    padding: 6px 12px; /* Reduced from 10px 20px */
    border-radius: 5px; /* Reduced from 8px */
    cursor: pointer;
    margin-top: 12px; /* Reduced from 20px */
    font-weight: 600;
    transition: background 0.3s ease;
}

.show-more-btn:hover {
    background: var(--highlight-text);
}

/* Mobile/iPad adjustments for filmography */
@media (max-width: 1024px) {
    .filmography-grid {
        grid-template-columns: repeat(2, 1fr); /* Retain two columns */
    }
    .movie-archive-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on tablet */
    }
    .filmography-card.hidden {
        display: none;
    }
    .show-more-btn {
        display: block;
    }
}

/* Mobile adjustments for info section and archive */
@media (max-width: 768px) {
    .person-info {
        grid-template-columns: 1fr 2fr; /* Maintain two columns */
        gap: 12px; /* Reduced from 20px */
    }
    .image-column {
        max-width: 100%;
    }
    .meta-card {
        padding: 6px; /* Reduced from 10px */
    }
    .meta-item {
        padding: 5px; /* Reduced from 8px */
    }
    .meta-item:hover {
        transform: none; /* Disable hover effect on mobile */
        box-shadow: none;
    }
    .movie-archive-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}

@media (max-width: 480px) {
    .person-info {
        grid-template-columns: 1fr; /* Stack on very small screens */
        gap: 9px; /* Reduced from 15px */
    }
    .meta-card {
        padding: 5px; /* Reduced from 8px */
    }
    .meta-item {
        padding: 4px; /* Reduced from 6px */
    }
    .movie-archive-grid {
        grid-template-columns: 1fr; /* Single column on very small screens */
    }
}