/* --- SLIDESHOW TEXT DETAILS & CAST (Extracted from _slideshow-media.css) --- */

.slideshow-description-container,
.slideshow-description-container * {
    color: #fff !important;
}

/* Text Shadows in Transparent Mode */
:root[data-ss-transparency="true"] .slideshow-description-container h2,
:root[data-ss-transparency="true"] .slideshow-description-container .slideshow-overview,
:root[data-ss-transparency="true"] .slideshow-description-container .media-runtime,
:root[data-ss-transparency="true"] .slideshow-description-container .ss-genre {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}

.slideshow-description-container h2 {
    font-family: 'Cinzel Decorative', 'Abril Fatface', cursive;
    color: var(--primary-color) !important;
    font-size: 3rem;
    margin-top: 0;
    margin-bottom: 7px; /* reduced ~30% from 10px */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.slideshow-description-container h2 .title-part-secondary {
    color: var(--lighter-primary-color) !important;
}

.slideshow-description-container p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 15px 0 20px 0;
}

/* Desktop: add extra right padding between plotline text and main poster */
@media (min-width: 769px) {
  .slideshow-text-details {
    padding-right: 15px;
  }
}

.slideshow-overview {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slideshow-genres-list {
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin: 15px 0; padding-left: 30px;
}
.ss-genre { 
  background-color: rgba(0, 0, 0, 0.2); color: var(--lighter-primary-color) !important;
  padding: 0 5px; border-radius: 0; font-size: 0.8rem; font-weight: 500; border: 1px solid var(--lighter-primary-color);
  white-space: nowrap; text-transform: uppercase;
}

.ss-release-inline { margin-left: 10px; color: var(--lighter-primary-color) !important; font-weight: 500; white-space: nowrap; }
.ss-vote { margin-left: 5px; color: #ffd700 !important; font-weight: 700; white-space: nowrap; }
.media-runtime { display: flex; align-items: center; gap: 5px; font-size: 1.1rem; }

/* Cast & Crew */
.slideshow-person-icon { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; filter: invert(0); }
[data-theme^="light"] .slideshow-person-icon { filter: invert(1) grayscale(1) brightness(0.5); }
.field-icon-wrapper { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-right: 10px; flex-shrink: 0; }

.slideshow-description-container p:has(.field-icon-wrapper) {
    display: none !important;
}

.slideshow-cast-area {
    position: absolute; 
    left: 0; 
    width: 66.66%; 
    display: flex;
    justify-content: center;
    z-index: 2; 
    margin-top: 0; 
    opacity: 0; 
    transition: opacity 0.5s ease;
}

/* Ensure cast title is hidden globally as requested */
.ss-cast-title { display: none !important; }

/* Crew row (Directors & Producers) below cast rows */
.crew-row {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.crew-card .crew-role-label {
    color: var(--primary-color) !important;
    font-size: 9pt !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Resize crew cards to 3/5 of normal size (150px * 0.6 = 90px) */
.crew-card {
    width: 90px !important;
}

.crew-card .cast-image-wrapper {
    width: 90px !important;
    height: 135px !important;
}

.crew-card .cast-main-img,
.crew-card .cast-watermark {
    width: 90px !important;
    height: 135px !important;
}

.crew-card .cast-name {
    font-size: 0.65rem !important;
    padding: 4px 5px !important;
}

.crew-card .cast-char {
    height: 1.8em !important;
    font-size: 9pt !important;
}

/* Hide crew row in fullscreen mode */
.slideshow-overlay.fs-mode .crew-row {
    display: none !important;
}

/* Fullscreen Mode: Hide text details and crew to focus on image and cast */
.slideshow-overlay.fs-mode .slideshow-text-details,
.slideshow-overlay.fs-mode .slideshow-crew-area {
    display: none !important;
}

/* Fullscreen Mode: Position cast area fixed on the LEFT, pushed down 100px
   to leave room for the title bar at the top.
   Card sizes scale with viewport so all rows fit without clipping.
   Height budget: 85vh - 100px title offset.
   Per row overhead: ~72px (char text 51px + margins 21px).
   Two rows + 20px gap → overhead = 164px.
   Image height = min(270px, (available - 164px) / 2). */
.slideshow-overlay.fs-mode .slideshow-cast-area {
    --fs-avail: calc(90vh - 100px);
    --fs-cast-img-h: min(270px, calc((var(--fs-avail) - 164px) / 2));
    --fs-cast-img-w: min(180px, calc(var(--fs-cast-img-h) * 0.667));
    position: fixed !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    width: 66.66vw !important;
    right: auto !important;
    margin: 0 !important;
    max-width: 1400px !important;
    max-height: var(--fs-avail) !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

:root[data-show-slideshow-icons="true"] .slideshow-overlay.fs-mode .slideshow-cast-area {
    transform: translateY(-50%) translateY(40px) !important;
}

.slideshow-cast-list { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    justify-content: center; 
    align-items: center; 
    overflow: visible; 
    margin-top: 0; 
    position: relative; 
    z-index: 2; 
}
.cast-row { 
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    flex-wrap: nowrap; 
    overflow: visible; 
    width: 100%;
}

/* In FS mode, ensure rows are centered and spaced */
.slideshow-overlay.fs-mode .cast-row {
    justify-content: center;
    gap: 30px;
}

.cast-card { 
    position: relative; width: 150px; display: flex; flex-direction: column; align-items: center; margin: 0 5px; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; 
}
.cast-card.visible { opacity: 1; transform: translateY(0); }
.cast-card.disappear { opacity: 0; transform: translateY(10px); }

/* Initial state: Main Image and Name hidden, Frame visible */
.cast-main-img { opacity: 0; transition: opacity 0.5s ease !important; z-index: 2; position: relative; }
.cast-card .cast-name { opacity: 0; transition: opacity 0.8s ease !important; }

/* Watermark image at 5% opacity */
.cast-watermark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.05;
    z-index: 1;
    pointer-events: none;
    filter: grayscale(1);
}

/* Animation states */
.cast-card.img-visible .cast-main-img { opacity: 1; }
.cast-card.name-visible .cast-name { opacity: 1; }

/* Fullscreen Mode Cast Overrides - responsive card sizes that scale with viewport */
.slideshow-overlay.fs-mode .cast-card {
    width: var(--fs-cast-img-w, 180px) !important;
}
.slideshow-overlay.fs-mode .cast-image-wrapper {
    width: var(--fs-cast-img-w, 180px) !important;
    height: var(--fs-cast-img-h, 270px) !important;
}
.slideshow-overlay.fs-mode .cast-card img {
    width: var(--fs-cast-img-w, 180px) !important;
    height: var(--fs-cast-img-h, 270px) !important;
}

/* Fullscreen Mode Font Size Increases (+2pt approx) */
.slideshow-overlay.fs-mode .cast-name {
    font-size: calc(0.875rem + 2pt) !important;
}
.slideshow-overlay.fs-mode .cast-char {
    font-size: calc(14pt + 2pt) !important;
}

/* 4K TVs: Double cast card sizes */
@media (min-width: 3840px), (min-resolution: 384dpi) {
    .slideshow-overlay.fs-mode .slideshow-cast-area {
        --fs-cast-img-w: min(360px, calc((var(--fs-avail) - 164px) / 2));
        --fs-cast-img-h: min(540px, calc((var(--fs-avail) - 164px) / 2 * 1.5));
    }
    .slideshow-overlay.fs-mode .cast-name {
        font-size: calc(0.875rem + 4pt) !important;
    }
    .slideshow-overlay.fs-mode .cast-char {
        font-size: calc(14pt + 4pt) !important;
    }
}

/* Fullscreen Mode Animations (Right-to-Left entrance variants) */
@keyframes fsSlideLeft { from { transform: translateX(50vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fsZoomLeft { from { transform: translateX(50vw) scale(0.5); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes fsRotateLeft { from { transform: translateX(50vw) rotate(15deg); opacity: 0; } to { transform: translateX(0) rotate(0); opacity: 1; } }
@keyframes fsFlipLeft { from { transform: translateX(50vw) rotateY(90deg); opacity: 0; } to { transform: translateX(0) rotateY(0); opacity: 1; } }

/* Fullscreen Mode Animations (Exit variants - moving to left) */
@keyframes fsSlideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-50vw); opacity: 0; } }
@keyframes fsZoomOutLeft { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateX(-50vw) scale(0.5); opacity: 0; } }
@keyframes fsRotateOutLeft { from { transform: translateX(0) rotate(0); opacity: 1; } to { transform: translateX(-50vw) rotate(-15deg); opacity: 0; } }
@keyframes fsFlipOutLeft { from { transform: translateX(0) rotateY(0); opacity: 1; } to { transform: translateX(-50vw) rotateY(-90deg); opacity: 0; } }

.slideshow-overlay.fs-mode .cast-card.fs-anim-1 { animation: fsSlideLeft 0.8s ease-out forwards; }
.slideshow-overlay.fs-mode .cast-card.fs-anim-2 { animation: fsZoomLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.slideshow-overlay.fs-mode .cast-card.fs-anim-3 { animation: fsRotateLeft 0.8s ease-out forwards; }
.slideshow-overlay.fs-mode .cast-card.fs-anim-4 { animation: fsFlipLeft 0.9s ease-out forwards; }

/* Exit animations triggered by 'disappear' class in FS mode */
.slideshow-overlay.fs-mode .cast-card.disappear.fs-anim-1 { animation: fsSlideOutLeft 0.6s ease-in forwards; }
.slideshow-overlay.fs-mode .cast-card.disappear.fs-anim-2 { animation: fsZoomOutLeft 0.6s ease-in forwards; }
.slideshow-overlay.fs-mode .cast-card.disappear.fs-anim-3 { animation: fsRotateOutLeft 0.6s ease-in forwards; }
.slideshow-overlay.fs-mode .cast-card.disappear.fs-anim-4 { animation: fsFlipOutLeft 0.6s ease-in forwards; }

.cast-image-wrapper { 
    position: relative; 
    width: 150px; 
    height: 225px; 
    border-radius: 8px; 
    overflow: hidden; 
    border: 1px solid #000; 
    background: rgba(0,0,0,0.3); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    margin-top: 7px;
    margin-bottom: 7px;
}
.cast-card img { width: 150px; height: 225px; object-fit: cover; border-radius: 8px; transition: transform 0.3s ease; }
.cast-card img:hover { animation: floatSlow 3s ease-in-out infinite; transform: none; }

.cast-name {
    position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.7); color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    line-height: 1.2; text-align: center; white-space: normal; padding: 6px 8px; font-size: 0.875rem;
    border: 1px solid #000;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 5;
    transform: translateY(0); /* Default: visible/fixed */
}

/* Hide real names by translating them off-canvas when setting is off */
:root[data-show-cast-real-names="false"] .cast-name {
    transform: translateY(100.5%);
    opacity: 1 !important; /* Keep opaque so it's ready to slide up */
}

/* Slide up on hover when setting is off */
:root[data-show-cast-real-names="false"] .cast-card:hover .cast-name {
    transform: translateY(0);
}

.cast-name:hover {
    background-color: var(--primary-color);
    border-color: #000;
    color: #000000 !important;
    text-shadow: none;
}

.cast-char {
    color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.9); margin-bottom: 7px; font-size: 14pt;
    display: flex; align-items: flex-end; justify-content: center; text-align: center; line-height: 1.1; height: 2.4em;
}
.cast-char-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* Responsive Text Size */
@media (max-width: 768px) {
  .slideshow-description-container h2 { font-size: 22pt; line-height: 1.2; }
  .slideshow-description-container p { font-size: calc(1.1rem - 4pt); }
  .ss-genre { font-size: calc(0.8rem - 2pt); }
  .slideshow-description-container .ss-release-inline { font-size: calc(1.1rem - 4pt); }
  .slideshow-description-container .ss-vote { font-size: calc(1.1rem - 4pt); }
  .media-runtime { font-size: calc(1.1rem - 4pt); gap: 0; }
  
  .cast-card, .cast-card img, .cast-image-wrapper { width: 100px !important; }
  .cast-card img, .cast-image-wrapper { height: 150px !important; }
  .cast-char { font-size: 10pt !important; height: 2.4em; }
  .cast-name { font-size: 6pt !important; }
  
  .slideshow-cast-area { position: static; left: auto; right: auto; margin-top: 15px; }
  .cast-slider { display:flex; overflow-x:auto; gap:5px; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; max-width: 100%; }
  .cast-slider .cast-card { scroll-snap-align:start; }
}

@media (min-width: 769px) {
    .cast-row-second.cast-row-second-slider { max-width: calc(5 * 150px + 4 * 10px); overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .cast-row-second.cast-row-second-slider .cast-card { scroll-snap-align: start; }
}