/* Immersive feed: one layout owner for the feed. */

.v4-main:has(.v5-feed-page){max-width:none;padding:0}
.v5-feed-page{width:100%;max-width:none;margin:0;overflow-x:clip}
.v5-feed-page>.feed-header,.v5-feed-page>.lea-ribbon{display:none}
.v5-feed-page .feed-stream{gap:0;width:100%}

/* Decorative metadata stays out of the immersive surface. */
.v5-feed-page .feed-card-top,.v5-feed-page .content-pill,.v5-feed-page .v5-autoplay-sound-badge,.v5-feed-page [data-fluence-video-controls]{display:none!important}
.v5-feed-page .native-media-poster-fallback{color:transparent!important;font-size:0!important}
.v5-feed-page .fluence-subtitle-overlay{font-weight:600;letter-spacing:-.01em}
.v5-feed-page .native-media-stage--youtube .fluence-subtitle-overlay,.v5-feed-page .native-media-stage--tiktok .fluence-subtitle-overlay{border-radius:12px;box-shadow:none}

.v5-feed-page .feed-card,.v5-feed-page .media-card{width:100%;min-height:calc(100dvh - 68px);margin:0;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden}
.v5-feed-page .native-media-card{position:relative;display:flex;flex-direction:column;height:calc(100dvh - 68px);min-height:calc(100dvh - 68px);padding:0!important;background:var(--fluence-ambient-deep,#090a09)!important;color:#fff;isolation:isolate}

.v5-feed-page .native-media-card::before{content:"";position:absolute;z-index:0;inset:-12%;pointer-events:none;background:radial-gradient(circle at 14% 18%,var(--fluence-ambient-primary,#53645d) 0,transparent 47%),radial-gradient(circle at 84% 66%,var(--fluence-ambient-secondary,#746a61) 0,transparent 52%),radial-gradient(circle at 48% 104%,var(--fluence-ambient-accent,#58606f) 0,transparent 50%),var(--fluence-ambient-deep,#090a09);opacity:.72;filter:saturate(.82) brightness(.72);transform:scale(1.08)}

/* The media owns a dedicated, unobstructed region. */
.v5-feed-page .native-media-card .native-media-stage{position:relative;z-index:1;order:1;flex:1 1 0;width:100%;min-height:0;margin:0!important;padding:0;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:transparent}
.v5-feed-page .native-media-card .native-player-shell{position:relative;z-index:1;flex:0 1 auto;width:min(100%,960px);height:auto;max-width:100%;max-height:100%;margin:auto;aspect-ratio:16/9;border-radius:0;background:#000;overflow:hidden}
.v5-feed-page .native-media-card .native-player-shell>img,.v5-feed-page .native-media-card .native-player-shell>iframe,.v5-feed-page .native-media-card .native-media-poster-fallback{width:100%;height:100%;border:0;border-radius:0;display:block}
.v5-feed-page .native-media-card .native-player-shell>img{object-fit:contain}
.v5-feed-page .native-media-stage--tiktok .native-player-shell,.v5-feed-page .native-media-stage--short-form .native-player-shell,.v5-feed-page .is-short-form .native-player-shell{height:100%;width:auto;max-width:100%;max-height:100%;aspect-ratio:9/16}
.v5-feed-page .native-media-stage--spotify .native-player-shell{width:min(100%,760px);height:auto;aspect-ratio:1.9/1;margin:auto}
.v5-feed-page .native-media-stage:has(.fluence-subtitle-overlay) .native-player-shell{max-height:calc(100% - 58px)}

/* Metadata now lives below the media instead of covering it. */
.v5-feed-page .native-media-card>.v5-media-copy{position:relative;z-index:7;order:2;flex:0 0 auto;margin:0!important;padding:12px clamp(16px,3vw,28px) 4px;background:transparent;color:#fff;pointer-events:auto}
.v5-feed-page .native-media-card>.v5-media-copy>small{display:block;margin:0 0 3px;color:rgba(255,255,255,.58);font-size:11px;line-height:1.25}
.v5-feed-page .native-media-card>.v5-media-copy h2{margin:0;color:#fff;font-size:clamp(17px,2.2vw,22px);line-height:1.18;letter-spacing:-.02em}
.v5-feed-page .native-media-card>.v5-media-copy p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:5px 0 0;color:rgba(255,255,255,.68);font-size:13px;line-height:1.35}

/* Functional vocabulary stays below the copy and remains compact. */
.v5-feed-page .native-media-card>.v5-language-radar,.v5-feed-page .native-media-card>.learning-language-radar{position:relative;z-index:8;order:4;left:auto;right:auto;bottom:auto;margin:2px clamp(16px,3vw,28px) 8px;max-width:none;padding:0;background:transparent;border:0;color:#fff;backdrop-filter:none}
.v5-feed-page .native-media-card>.v5-language-radar>small,.v5-feed-page .native-media-card>.learning-language-radar>small{display:none}
.v5-feed-page .native-media-card>.v5-language-radar>div,.v5-feed-page .native-media-card>.learning-language-radar>div{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.v5-feed-page .native-media-card>.v5-language-radar>div::-webkit-scrollbar,.v5-feed-page .native-media-card>.learning-language-radar>div::-webkit-scrollbar{display:none}

/* Compact icon-only action row. Text stays in the DOM for screen readers. */
.v5-feed-page .native-media-card>.media-actions{position:relative;z-index:14;order:3;left:auto;right:auto;bottom:auto;margin:0;padding:6px clamp(16px,3vw,28px) 12px;display:flex;flex-wrap:nowrap;gap:7px;justify-content:flex-start;max-width:none;pointer-events:auto}
.v5-feed-page .native-media-card>.media-actions button{position:relative;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;margin:0;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.07);color:#fff;font-size:0!important;line-height:0;box-shadow:none;backdrop-filter:blur(10px);transition:background .15s ease,border-color .15s ease,transform .15s ease}
.v5-feed-page .native-media-card>.media-actions button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.v5-feed-page .native-media-card>.media-actions button:active{transform:scale(.95)}
.v5-feed-page .native-media-card>.media-actions button:focus-visible{outline:2px solid rgba(255,255,255,.82);outline-offset:2px}
.v5-feed-page .native-media-card>.media-actions button>svg,.v5-feed-page .native-media-card>.media-actions button>i,.v5-feed-page .native-media-card>.media-actions button>span{display:none!important}
.v5-feed-page .native-media-card>.media-actions button::before{content:"";width:18px;height:18px;background:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.v5-feed-page .native-media-card>.media-actions button[data-social="like"]::before,.v5-feed-page .native-media-card>.media-actions button[data-social-like]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21.2l8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21.2l8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E")}
.v5-feed-page .native-media-card>.media-actions button[data-social="dislike"]::before,.v5-feed-page .native-media-card>.media-actions button[data-social-dislike]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 15v4a3 3 0 0 0 3 3l4-9V2H5.7a2 2 0 0 0-2 1.7L2.3 12a2 2 0 0 0 2 2.3H10zM17 2h4v11h-4'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 15v4a3 3 0 0 0 3 3l4-9V2H5.7a2 2 0 0 0-2 1.7L2.3 12a2 2 0 0 0 2 2.3H10zM17 2h4v11h-4'/%3E%3C/svg%3E")}
.v5-feed-page .native-media-card>.media-actions button[data-social="later"]::before,.v5-feed-page .native-media-card>.media-actions button[data-social-later]::before,.v5-feed-page .native-media-card>.media-actions button[data-loop-save-media]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.v5-feed-page .native-media-card>.media-actions button[data-social="practice"]::before,.v5-feed-page .native-media-card>.media-actions button[data-social-practice]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4z'/%3E%3C/svg%3E")}
.v5-feed-page .native-media-card>.media-actions button[data-ask-lya]::before,.v5-feed-page .native-media-card>.media-actions button[data-loop-ask-lya]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M21 15a4 4 0 0 1-4 4H8l-5 3 1.5-4.5A7 7 0 1 1 21 15z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M21 15a4 4 0 0 1-4 4H8l-5 3 1.5-4.5A7 7 0 1 1 21 15z'/%3E%3C/svg%3E")}
.v5-feed-page .native-media-card>.media-actions button.is-active{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}

.v5-feed-page .native-media-card .native-learning-bar{position:absolute;z-index:10;left:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);bottom:clamp(18px,3vh,34px);width:auto;margin:0;border-radius:18px;background:rgba(10,12,11,.58);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(18px)}
.v5-feed-page .native-media-card .native-vocab-panel{position:absolute;z-index:11;left:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);bottom:clamp(88px,12vh,130px);max-height:35vh;overflow:auto}

/* Production practice opens locally on demand; closed state never covers the player. */
.v5-feed-page .native-media-card>.social-practice-panel{position:absolute;z-index:18;left:50%;bottom:86px;transform:translateX(-50%);width:min(560px,calc(100% - 36px));max-height:min(62vh,520px);overflow:auto;margin:0;padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(14,15,14,.9);color:#fff;box-shadow:0 18px 54px rgba(0,0,0,.28);backdrop-filter:blur(22px)}
.v5-feed-page .native-media-card>.social-practice-panel textarea{box-sizing:border-box;width:100%;resize:vertical;min-height:88px;max-height:180px;margin-top:12px;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:11px 12px;background:rgba(255,255,255,.08);color:#fff;font:inherit;outline:none}
.v5-feed-page .native-media-card>.social-practice-panel textarea:focus{border-color:rgba(255,255,255,.46)}
.v5-feed-page .native-media-card>.social-practice-panel .social-practice-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.v5-feed-page .native-media-card>.social-practice-panel button{border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:9px 12px;background:rgba(255,255,255,.1);color:#fff}
.v5-feed-page .native-media-card:has(>.social-practice-panel)>.v5-language-radar,.v5-feed-page .native-media-card:has(>.social-practice-panel)>.learning-language-radar{opacity:0;pointer-events:none}

/* Fluence captions stay outside the provider iframe but inside the media region. */
.v5-feed-page .native-media-stage--youtube .fluence-subtitle-overlay{position:relative;z-index:6;left:auto;right:auto;bottom:auto;transform:none;width:min(92%,760px);max-width:min(92%,760px);margin:8px auto 0;box-sizing:border-box;background:rgba(12,14,13,.78);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px)}

.v5-feed-page .feed-card:not(.native-media-card){display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,7vw,84px)!important;background:rgba(245,243,237,.96)!important}
.v5-feed-page .feed-card:not(.native-media-card) .feed-why{margin-left:0;margin-right:0;margin-bottom:0;border-radius:0;background:transparent}

@media(max-width:900px){
  .fluence-v5:has(.v5-feed-page){min-height:100dvh;width:100%;max-width:100%;margin:0!important;padding:0!important;overflow-x:hidden;background:var(--fluence-ambient-deep,#090a09)}
  .fluence-v5:has(.v5-feed-page) .v4-topbar{display:none!important}
  .fluence-v5:has(.v5-feed-page) .v4-shell{display:block;width:100%;max-width:100%;margin:0!important;padding:0!important;overflow-x:hidden}
  .fluence-v5:has(.v5-feed-page) .v4-main,.v4-main:has(.v5-feed-page){width:100%;max-width:100%;min-width:0;margin:0!important;padding:0!important;box-sizing:border-box;overflow-x:hidden}
  .v5-feed-page,.v5-feed-page .feed-stream,.v5-feed-page .feed-card,.v5-feed-page .media-card,.v5-feed-page .native-media-card{width:100%;max-width:100%;margin-left:0!important;margin-right:0!important;box-sizing:border-box}
  .v5-feed-page{overflow-x:hidden}
  .v5-feed-page .feed-card,.v5-feed-page .media-card,.v5-feed-page .native-media-card{height:100dvh;min-height:100dvh;left:auto;right:auto;transform:none}
  .v5-feed-page .native-media-card .native-media-stage{position:relative;inset:auto;width:100%;max-width:100%;height:auto;min-height:0;margin:0!important;transform:none;flex:1 1 0}
  .v5-feed-page .native-media-card .native-player-shell{position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;height:auto;max-width:100%;max-height:100%;margin:auto;aspect-ratio:16/9}
  .v5-feed-page .native-media-stage--youtube .fluence-subtitle-overlay{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:calc(100% - 24px);max-width:760px;margin:8px auto 0;transform:none}
  .v5-feed-page .native-media-stage--tiktok .native-player-shell,.v5-feed-page .native-media-stage--short-form .native-player-shell,.v5-feed-page .is-short-form .native-player-shell{position:relative;left:auto;right:auto;top:auto;transform:none;width:auto;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;margin:auto;aspect-ratio:9/16}
  .v5-feed-page .native-media-stage--tiktok .native-player-shell>img,.v5-feed-page .native-media-stage--short-form .native-player-shell>img,.v5-feed-page .is-short-form .native-player-shell>img{object-fit:contain}
  .v5-feed-page .native-media-card>.v5-media-copy{padding:10px 16px 3px}
  .v5-feed-page .native-media-card>.v5-media-copy h2{font-size:17px}
  .v5-feed-page .native-media-card>.v5-media-copy p{font-size:12.5px;-webkit-line-clamp:2}
  .v5-feed-page .native-media-card>.media-actions{padding:6px 16px calc(82px + env(safe-area-inset-bottom))}
  .v5-feed-page .native-media-card>.media-actions button{flex-basis:38px;width:38px;height:38px;min-width:38px;border-radius:11px}
  .v5-feed-page .native-media-card>.v5-language-radar,.v5-feed-page .native-media-card>.learning-language-radar{margin:0 16px 6px}
  .v5-feed-page .native-media-card .native-learning-bar{left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));width:auto;max-width:none}
  .v5-feed-page .native-media-card .native-vocab-panel{left:12px;right:12px;bottom:calc(158px + env(safe-area-inset-bottom))}
  .v5-feed-page .native-media-card>.social-practice-panel{left:12px;right:12px;bottom:calc(132px + env(safe-area-inset-bottom));transform:none;width:auto;max-height:52vh;border-radius:18px}
  .v5-feed-page .feed-card:not(.native-media-card){width:100%;max-width:100%;height:100dvh;min-height:100dvh;padding:26px 20px calc(96px + env(safe-area-inset-bottom))!important}
}
