/* =====================================================================
   AI STUDIO SECTION — showreel, 16:9 grid, 9:16 rail, video lightbox.
   Markup in index.html (#ai-studio); data + behaviour in assets/js/ai-studio.js.
   ===================================================================== */
.ai-studio-section {
   --ais-pink: #f472b6;
   --ais-pink-strong: #db2777;
   --ais-card: rgba(255, 255, 255, 0.04);
   --ais-line: rgba(255, 255, 255, 0.1);
   --ais-muted: rgba(255, 255, 255, 0.6);
   position: relative;
   padding: 110px 0 100px;
   color: var(--tj-white);
}

.ai-studio-section [hidden],
.ais-card[hidden],
.ais-group[hidden] {
   display: none !important;
}

/* ---------- Heading ---------- */
/* Two columns: text + CTA on the left, showreel on the right */
.ais-head {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
   align-items: center;
   gap: 48px;
   margin-bottom: 80px;
}
.ais-head-text { min-width: 0; }
.ais-eyebrow {
   display: block;
   margin-bottom: 14px;
   color: var(--ais-pink);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 2.4px;
   text-transform: uppercase;
}
.ais-title {
   margin: 0 0 18px;
   font-size: 42px;
   font-weight: 800;
   line-height: 1.12;
   letter-spacing: -1px;
   color: var(--tj-white);
}
.ais-title span {
   display: block;
   background: linear-gradient(90deg, #f9a8d4 0%, var(--ais-pink) 45%, #c084fc 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}
.ais-lead {
   margin: 0;
   max-width: 560px;
   color: var(--ais-muted);
   font-size: 15.5px;
   line-height: 1.65;
}
.ais-cta {
   margin-top: 28px;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 24px;
   border-radius: 999px;
   background: var(--ais-pink-strong);
   color: var(--tj-white);
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   box-shadow: 0 14px 34px -14px rgba(219, 39, 119, 0.9);
   transition: transform 0.3s ease, background 0.3s ease;
}
.ais-cta i { font-size: 12px; transition: transform 0.3s ease; }
.ais-cta:hover {
   color: var(--tj-white);
   background: #ec4899;
   transform: translateY(-2px);
}
.ais-cta:hover i { transform: translateX(4px); }

/* ---------- Showreel ---------- */
.ais-reel {
   position: relative;
   aspect-ratio: 16 / 9;
   width: 100%;
   overflow: hidden;
   border-radius: 22px;
   border: 1px solid var(--ais-line);
   background:
      radial-gradient(60% 80% at 20% 30%, rgba(124, 58, 237, 0.55) 0%, transparent 70%),
      radial-gradient(60% 80% at 85% 70%, rgba(219, 39, 119, 0.45) 0%, transparent 70%),
      #1a0f2e;
   box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
.ais-reel iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}
.ais-reel-facade {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   padding: 0;
   border: 0;
   background: transparent center / cover no-repeat;
   color: inherit;
   cursor: default;
}
.ais-reel.has-video .ais-reel-facade { cursor: pointer; }
.ais-reel.has-video .ais-reel-facade::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.45) 100%);
}
.ais-reel-badge {
   position: absolute;
   top: 22px;
   left: 22px;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 14px;
   border-radius: 999px;
   background: rgba(10, 5, 20, 0.6);
   border: 1px solid var(--ais-line);
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 1.6px;
   text-transform: uppercase;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
}
.ais-reel-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #f43f5e;
   box-shadow: 0 0 10px #f43f5e;
}
.ais-reel-duration {
   position: absolute;
   right: 22px;
   bottom: 20px;
   z-index: 1;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.85);
}
.ais-reel-duration:empty { display: none; }
.ais-reel-soon {
   position: absolute;
   left: 50%;
   top: calc(50% + 62px);
   transform: translateX(-50%);
   color: var(--ais-muted);
   font-size: 13px;
   white-space: nowrap;
}
.ais-reel.has-video .ais-reel-soon { display: none; }

/* ---------- Shared play button ---------- */
.ais-play {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.92);
   color: #1a1033;
   font-size: 15px;
   transform: translate(-50%, -50%);
   box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
   transition: transform 0.3s ease, background 0.3s ease;
}
.ais-play i { margin-left: 3px; }
.ais-play--lg {
   width: 88px;
   height: 88px;
   font-size: 24px;
}
.ais-reel.has-video .ais-reel-facade:hover .ais-play,
.ais-media:hover .ais-play {
   transform: translate(-50%, -50%) scale(1.1);
   background: var(--tj-white);
}

/* ---------- Featured video ---------- */
/* Big 16:9 player (reuses the showreel frame) + info column */
.ais-features {
   display: grid;
   gap: 28px;
   margin-bottom: 80px;
}
.ais-feature {
   display: grid;
   grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
   align-items: center;
   gap: 44px;
   padding: 22px;
   border-radius: 28px;
   border: 1px solid var(--ais-line);
   background:
      radial-gradient(70% 90% at 100% 0%, rgba(219, 39, 119, 0.14) 0%, transparent 70%),
      var(--ais-card);
}
.ais-feature-player { box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.85); }
/* 9:16 featured Short — narrow tall player, info gets the rest of the row */
.ais-feature--vertical { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.ais-feature--vertical .ais-feature-player { aspect-ratio: 9 / 16; }
.ais-feature-info { min-width: 0; padding-right: 18px; }
.ais-feature-title {
   margin: 0 0 8px;
   font-size: 32px;
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: -0.5px;
   color: var(--tj-white);
}
.ais-feature-info .ais-card-meta { font-size: 14px; }
.ais-feature-desc {
   margin: 16px 0 0;
   color: var(--ais-muted);
   font-size: 15px;
   line-height: 1.65;
}
.ais-feature-info .ais-tools { margin-top: 16px; }
.ais-feature-watch {
   margin-top: 26px;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 13px 22px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.25);
   background: rgba(255, 255, 255, 0.06);
   color: var(--tj-white);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ais-feature-watch i { font-size: 11px; }
.ais-feature-watch span {
   color: var(--ais-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
   font-weight: 400;
}
.ais-feature-watch:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.4);
   transform: translateY(-2px);
}

/* ---------- Toolbar + filters ---------- */
.ais-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 18px;
   margin-bottom: 34px;
}
.ais-subtitle {
   margin: 0;
   font-size: 26px;
   font-weight: 700;
   color: var(--tj-white);
}
.ais-filters {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}
.ais-chip {
   padding: 9px 16px;
   border-radius: 999px;
   border: 1px solid var(--ais-line);
   background: transparent;
   color: rgba(255, 255, 255, 0.85);
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
   transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ais-chip:hover { border-color: rgba(255, 255, 255, 0.3); }
.ais-chip.active {
   background: #f9a8d4;
   border-color: #f9a8d4;
   color: #3b0a24;
   font-weight: 600;
}

/* ---------- Groups ---------- */
.ais-group + .ais-group { margin-top: 56px; }
.ais-group-head {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 20px;
}
.ais-group-head h4 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: var(--tj-white);
}
.ais-ratio {
   padding: 4px 9px;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid var(--ais-line);
   color: var(--ais-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 11px;
}
.ais-rail-nav {
   display: flex;
   gap: 8px;
   margin-left: auto;
}
.ais-rail-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1px solid var(--ais-line);
   background: transparent;
   color: var(--tj-white);
   font-size: 13px;
   cursor: pointer;
   transition: background 0.25s ease, border-color 0.25s ease;
}
.ais-rail-btn:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.3);
}

/* 16:9 grid */
.ais-grid-wide {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
}

/* 9:16 horizontal rail */
.ais-rail {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: calc((100% - 4 * 20px) / 5);
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
   padding-bottom: 4px;
}
.ais-rail::-webkit-scrollbar { display: none; }
.ais-rail .ais-card { scroll-snap-align: start; }

/* ---------- Card ---------- */
.ais-card { min-width: 0; }
.ais-media {
   position: relative;
   display: block;
   width: 100%;
   aspect-ratio: 16 / 9;
   padding: 0;
   overflow: hidden;
   border-radius: 16px;
   border: 1px solid var(--ais-line);
   cursor: pointer;
   transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.ais-card--vertical .ais-media { aspect-ratio: 9 / 16; }
.ais-card:not(.is-soon) .ais-media:hover {
   transform: translateY(-4px);
   border-color: rgba(244, 114, 182, 0.45);
   box-shadow: 0 24px 50px -24px rgba(219, 39, 119, 0.6);
}
.ais-card.is-soon .ais-media { cursor: default; }
.ais-card.is-soon .ais-play { opacity: 0.75; }

.ais-thumb,
.ais-preview {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.ais-preview {
   opacity: 0;
   transition: opacity 0.3s ease;
}
.ais-media:hover .ais-preview { opacity: 1; }
/* YouTube hover preview (iframe added by JS on mouseenter) */
.ais-yt-preview {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   pointer-events: none; /* clicks still open the lightbox */
   opacity: 0;
   transition: opacity 0.3s ease;
}
.ais-media.is-previewing .ais-yt-preview { opacity: 1; }
.ais-media.is-previewing .ais-play { opacity: 0; }
.ais-shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.45) 100%);
}
.ais-tag,
.ais-duration {
   position: absolute;
   z-index: 1;
   padding: 5px 9px;
   border-radius: 6px;
   background: rgba(10, 5, 20, 0.65);
   color: var(--tj-white);
   line-height: 1;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
}
.ais-tag {
   top: 12px;
   left: 12px;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
}
.ais-duration {
   right: 12px;
   bottom: 12px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 11.5px;
}
.ais-duration--soon {
   font-family: inherit;
   font-size: 10.5px;
   letter-spacing: 0.5px;
   color: rgba(255, 255, 255, 0.8);
}

.ais-info { padding: 14px 2px 0; }
.ais-card-title {
   margin: 0 0 4px;
   font-size: 16px;
   font-weight: 600;
   color: var(--tj-white);
}
.ais-card--vertical .ais-card-title { font-size: 14.5px; }
.ais-card-meta {
   margin: 0;
   color: var(--ais-muted);
   font-size: 13px;
   line-height: 1.45;
}
.ais-tools {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 10px;
}
.ais-tool {
   padding: 4px 9px;
   border-radius: 999px;
   background: rgba(244, 114, 182, 0.1);
   border: 1px solid rgba(244, 114, 182, 0.25);
   color: #f9a8d4;
   font-size: 11px;
   line-height: 1;
}

/* ---------- Lightbox ---------- */
html.ais-lock,
html.ais-lock body { overflow: hidden; }

.ais-lightbox {
   position: fixed;
   inset: 0;
   z-index: 1000000; /* above the mobile menu bar (meanmenu uses 999999) */
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ais-lightbox.is-open {
   opacity: 1;
   visibility: visible;
}
.ais-lightbox-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(6, 3, 12, 0.88);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
}
.ais-lightbox-dialog {
   position: relative;
   width: min(1100px, 100%, calc((100vh - 140px) * 16 / 9));
   transform: scale(0.96);
   transition: transform 0.3s ease;
}
.ais-lightbox.is-open .ais-lightbox-dialog { transform: scale(1); }
.ais-lightbox.is-vertical .ais-lightbox-dialog {
   width: min(420px, 100%, calc((100vh - 140px) * 9 / 16));
}
.ais-lightbox-frame {
   position: relative;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   border-radius: 16px;
   background: #000;
   box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9);
}
.ais-lightbox.is-vertical .ais-lightbox-frame { aspect-ratio: 9 / 16; }
.ais-lightbox-frame iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}
.ais-lightbox-caption {
   margin-top: 14px;
   color: rgba(255, 255, 255, 0.8);
   font-size: 14px;
   text-align: center;
}
.ais-lightbox-close {
   position: absolute;
   top: -48px;
   right: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.25);
   background: rgba(255, 255, 255, 0.08);
   color: var(--tj-white);
   font-size: 16px;
   cursor: pointer;
}
.ais-lightbox-close:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
   .ais-title { font-size: 36px; }
   .ais-head { gap: 36px; }
   .ais-feature { gap: 32px; }
   .ais-feature-title { font-size: 26px; }
   .ais-play--lg { width: 72px; height: 72px; font-size: 20px; }
   .ais-rail { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
}
@media (max-width: 991px) {
   .ai-studio-section { padding: 90px 0 80px; }
   .ais-head { grid-template-columns: 1fr; gap: 36px; margin-bottom: 60px; }
   .ais-features { margin-bottom: 60px; }
   .ais-feature { grid-template-columns: 1fr; gap: 26px; }
   .ais-feature--vertical .ais-feature-player { max-width: 340px; justify-self: center; }
   .ais-feature-info { padding: 0 8px 8px; }
   .ais-title { font-size: 40px; }
   .ais-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .ais-rail { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; }
}
@media (max-width: 767px) {
   .ai-studio-section { padding: 70px 0 60px; }
   .ais-title { font-size: 30px; letter-spacing: -0.5px; }
   .ais-lead { font-size: 14.5px; }
   .ais-head { margin-bottom: 44px; }
   .ais-features { gap: 20px; margin-bottom: 44px; }
   .ais-feature { padding: 12px; border-radius: 20px; }
   .ais-feature-info { padding: 0 6px 8px; }
   .ais-feature-title { font-size: 24px; }
   .ais-reel { border-radius: 16px; }
   .ais-play--lg { width: 64px; height: 64px; font-size: 18px; }
   .ais-reel-soon { top: calc(50% + 48px); font-size: 12px; }
   .ais-reel-badge { top: 14px; left: 14px; font-size: 10px; padding: 6px 11px; }
   .ais-subtitle { font-size: 22px; }
   .ais-filters {
      flex-wrap: nowrap;
      overflow-x: auto;
      width: 100%;
      scrollbar-width: none;
   }
   .ais-filters::-webkit-scrollbar { display: none; }
   .ais-chip { flex-shrink: 0; }
   .ais-grid-wide { grid-template-columns: 1fr; gap: 28px; }
   .ais-rail { grid-auto-columns: 62%; gap: 14px; }
   .ais-rail-nav { display: none; }
   .ais-lightbox { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
   .ais-media,
   .ais-play,
   .ais-lightbox,
   .ais-lightbox-dialog { transition: none; }
}