/* ============================================================
   Custom styles — Changtse · Foto y Cine
   ============================================================ */

/* --- Lightbox caption ---------------------------------------
   Sits bottom-left and LIFTED above the video control bar, so it
   never covers the scrubber/play and never collides with the
   top counter (e.g. "4 / 8"). Only the links capture clicks. --- */
.lg-outer .lg-sub-html{
	top:auto;
	bottom:0;
	left:0;
	right:auto;
	width:auto;
	max-width:60%;
	text-align:left;
	padding:14px 26px 84px 26px;     /* big bottom padding lifts text above the controls */
	background:none;
	text-shadow:0 1px 8px rgba(0,0,0,.9);
	pointer-events:none;             /* clicks pass through to player... */
}
.lg-outer .lg-sub-html h4{ margin:0 0 3px; font-size:1.05rem; font-weight:600; line-height:1.2; }
.lg-outer .lg-sub-html p{ margin:0; font-size:.85rem; opacity:.9; }
.lg-outer .lg-sub-html a{            /* ...except the links themselves */
	pointer-events:auto;
	color:#fff; text-decoration:none;
	border-bottom:1px solid rgba(255,255,255,.5);
}
.lg-outer .lg-sub-html a:hover{ color:#e0a7cf; border-color:#e0a7cf; }

/* On small screens give more clearance and full width */
@media (max-width: 640px){
	.lg-outer .lg-sub-html{ max-width:100%; padding-bottom:96px; }
}

/* --- Clickable title/category on grid tiles --- */
.pgi-title a, .pgi-category a{ color:inherit; text-decoration:none; }
.pgi-title a:hover, .pgi-category a:hover{ color:#e0a7cf; }

/* --- Hero background video (homepage) --- */
.ph-image .ph-bg-video{
	width:100%; height:100%;
	object-fit:cover;
	display:block;
}

/* --- Feature-page main video player --- */
.tt-feature-video{
	width:100%; height:auto; display:block;
	background:#000; border-radius:4px;
}

/* --- Contact page portrait --- */
.contact-photo{
	max-width:280px; width:100%; height:auto;
	border-radius:6px; display:block;
	margin:26px 0 6px;
}

/* --- Contact portrait: big & vertical, above the contact info --- */
.contact-photo-wrap{ margin:8px 0 34px; }
.contact-photo{
	width:100%; max-width:440px;
	aspect-ratio:4 / 5;
	object-fit:cover; object-position:50% 15%;   /* bias toward the head */
	border-radius:6px; display:block;
	margin:0;
}

/* --- Foto page: one tile per project (opens that project's set) --- */
.foto-project a.lg-trigger:not(:first-child){ display:none; }
.foto-project .tt-gallery-item{ position:relative; display:block; }
.foto-meta{
	position:absolute; left:0; right:0; bottom:0;
	padding:14px 16px; color:#fff; font-size:.82rem; letter-spacing:.02em;
	background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
	opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.foto-project .tt-gallery-item:hover .foto-meta{ opacity:1; }

/* --- Responsive YouTube embeds (feature pages) --- */
.tt-video-embed{ position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; background:#000; border-radius:4px; margin-bottom:26px; }
.tt-video-embed iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.tt-episode-title{ margin:0 0 10px; font-size:1.05rem; }
.tt-season-head{ margin:38px 0 18px; }

/* --- Destacados (landing carousels, full width) --- */
.destacado{ margin-top:60px; }
.destacado-slider{ width:100%; overflow:hidden; }
.destacado-slider .swiper-wrapper{ align-items:flex-start; }
.destacado-still{ display:block; overflow:hidden; }
.destacado-still img{ width:100%; height:auto; display:block; }
.destacado-title{ text-align:center; margin:0 0 18px; }
.destacado-info{ text-align:center; margin-top:18px; }
.destacado-desc{ max-width:760px; margin:0 auto 14px; }

/* ============================================================
   Botón de like (corazón) — banner de página
   ============================================================ */
.made-with-love{ pointer-events:auto; }
.tt-like{ cursor:pointer; }
.tt-like:hover{ opacity:1; }
.made-with-love:hover{ opacity:1; }
.tt-like .mwl-icon i{ transition:transform .25s ease, color .25s ease; }
.tt-like:hover .mwl-icon i{ transform:scale(1.15); }
.tt-like.liked .mwl-icon i{ color:#ff3b5c; }
.tt-like .tt-like-count{ font-variant-numeric:tabular-nums; min-width:1ch; display:inline-block; }
.tt-like.tt-like-pop .mwl-icon i{ animation:ttLikePop .45s ease; }
@keyframes ttLikePop{
	0%{ transform:scale(1); }
	40%{ transform:scale(1.65); }
	100%{ transform:scale(1); }
}

/* --- Like dentro del lightbox (barra superior) --- */
.lg-toolbar .lg-like{
	cursor:pointer; float:right;
	display:inline-flex; align-items:center; gap:7px;
	height:47px; padding:0 14px;
	color:#999; font-size:16px;
	transition:color .2s ease;
}
.lg-toolbar .lg-like:hover{ color:#fff; }
.lg-toolbar .lg-like.liked i{ color:#ff3b5c; }
.lg-toolbar .lg-like-count{ font-size:13px; font-variant-numeric:tabular-nums; }

/* ============================================================
   Toggle de idioma ES/EN (botón flotante)
   ============================================================ */
#tt-lang-toggle{
	position:fixed; left:20px; bottom:20px; z-index:99990;
	background:rgba(18,18,18,.72); color:#fff;
	border:1px solid rgba(255,255,255,.28); border-radius:30px;
	padding:9px 15px; font-size:12px; font-weight:600; letter-spacing:.14em;
	cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
	transition:background .2s ease, transform .2s ease;
}
#tt-lang-toggle:hover{ background:rgba(18,18,18,.95); transform:scale(1.06); }
@media (max-width:640px){
	#tt-lang-toggle{ left:14px; bottom:14px; padding:8px 13px; }
}