/* Fish 1.0.9 - one list layout for every archive-type page (search, tag, actor, saved videos, categories, home page 2+,
   category) and a matching container / related grid on the single video page.
   The reference is the home page as built by the companion plugin: 210px category rail + 8px gap from 1024px, a grid of
   3 / 4 / 5 equal columns (>=992 / >=1172 / >=1402px), the inside-list ad box beside rows 1-2, and one house "AD" tile as
   the right-most card of its row. Everything is scoped to body.fish-arch / body.fish-single (printed by inc/layout.php);
   phones (< 576px) keep the stock theme grid untouched. */

/* ---- rail (theme's own; hidden when the plugin's rail, body.xwc-on, is on the page) ---- */
.fish-rail{display:none}
.fish-rail a{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#fff!important;font-size:.875rem;line-height:1.25;padding:6px 12px;border-radius:8px;text-decoration:none!important}
.fish-rail a:hover,.fish-rail a:focus{background:#2a2a2a}
.fish-rail a.fish-cur{background:#333;font-weight:600}
.fish-rail a.fish-rail-all{display:block;color:#e04848!important;margin-top:6px}
@media (min-width:1024px){
body.fish-arch:not(.xwc-on) #content{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:8px}
body.fish-arch:not(.xwc-on) #content>*{grid-column:2;min-width:0}
body.fish-arch:not(.xwc-on) #content>.fish-rail{grid-column:1;grid-row:1/span 40;align-self:start;position:sticky;top:8px;display:block;box-sizing:border-box;padding:4px 6px 12px 12px;max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#333 transparent}
}

/* ---- saved-videos title looks like the other pages' hero heading ---- */
@media (min-width:768px){body.fish-arch .saved-videos-title{margin:0;padding:30px 0;background:rgba(0,0,0,.15);font-size:36px;line-height:1.2;text-shadow:none}}

/* ---- grid: 120 unit columns, every card spans F units ---- */
body.fish-arch{--fish-f:60;--fish-t:54;--fish-bc:109}
@media (min-width:768px){body.fish-arch{--fish-f:40}}
@media (min-width:1172px){body.fish-arch{--fish-f:30}}
@media (min-width:1402px){body.fish-arch{--fish-f:24}}
@media (min-width:992px){body.fish-arch{--fish-t:36;--fish-bc:73}}
@media (min-width:1280px){body.fish-arch{--fish-t:27;--fish-bc:82}}
@media (min-width:1402px){body.fish-arch{--fish-t:24;--fish-bc:73}}
@media (min-width:576px){
body.fish-arch .video-loop>.row>.col-12>.row{display:grid;grid-template-columns:repeat(120,minmax(0,1fr));grid-auto-flow:row dense;align-items:start}
body.fish-arch .video-loop>.row>.col-12>.row>*{flex:none!important;width:auto!important;max-width:none!important;min-width:0;order:0!important;grid-column:span var(--fish-f)}
body.fish-arch .video-loop>.row>.col-12>.row>.d-none{display:none!important}
body.fish-arch .video-loop>.row>.col-12>.row>.no-saved-message{grid-column:1/-1}
/* the inside-list slot: invisible when empty, a banner row on tablets, the box beside rows 1-2 from 992px */
body.fish-arch .video-loop>.row>.col-12>.row>.fish-box-cell:not(:has(.video-block-happy)){display:none}
body.fish-arch .video-loop>.row>.col-12>.row>.fish-box-cell{grid-column:1/-1;grid-row:1;position:relative;height:260px;margin:.25rem}
body.fish-arch .fish-box-cell .video-block-happy{position:absolute;inset:0;height:auto;margin:0}
html.fish-box-nofill body.fish-arch .video-loop>.row>.col-12>.row>.fish-box-cell{display:none}
/* one house ad tile per row, always the right-most card of its row (dense flow back-fills the holes with the next videos) */
body.fish-arch .video-loop>.row>.col-12>.row>.fish-ad-cell{grid-column:calc(121 - var(--fish-f))/-1}
}
@media (min-width:992px){
html:not(.fish-box-nofill) body.fish-arch .video-loop>.row>.col-12>.row>.fish-box-cell{grid-column:var(--fish-bc)/-1;grid-row:1/span 2;align-self:stretch;height:auto;contain:size;overflow:hidden;box-sizing:border-box;background:rgba(255,255,255,.04);border:1px solid #2a2a2a;border-radius:8px}
html:not(.fish-box-nofill) body.fish-arch .video-loop>.row>.col-12>.row:has(>.fish-box-cell .video-block-happy)>.fish-first-a,
html:not(.fish-box-nofill) body.fish-arch .video-loop>.row>.col-12>.row:has(>.fish-box-cell .video-block-happy)>.fish-first-b{grid-column:span var(--fish-t)}
}
@media (min-width:992px) and (max-width:1279px){
html:not(.fish-box-nofill) body.fish-arch .video-loop>.row>.col-12>.row:has(>.fish-box-cell .video-block-happy)>.fish-first-b{grid-column:span var(--fish-f)}
}

/* ---- single video page: the related section uses the same full-width container, column counts (3 / 4 / 5) and card gap as the list
   pages; the player block (title, player, action bar, side ad) keeps its exact 1.0.8 size and is centred above it ---- */
@media (min-width:992px){
body.fish-single section.single-video-player .container{max-width:100%}
body.fish-single.xw-rgd .xw-rg-row{grid-template-columns:minmax(0,1fr) minmax(0,1020px) 30px min(calc(25% - 22.5px),320px) minmax(0,1fr);column-gap:0}
body.fish-single.xw-rgd .xw-rg-top,body.fish-single.xw-rgd .xw-rg-col>.happy-player-under{grid-column:2}
body.fish-single.xw-rgd .xw-rg-row>.happy-player-beside{grid-column:4}
body.fish-single.xw-rgd .xw-rg-col>.related-videos{grid-column:1/-1}
body.fish-single .related-videos .video-block,body.fish-single.xw-rgd .related-videos .video-block{margin:.25rem}
body.fish-single.xw-rgd .related-videos .row>[class*="col-"]{flex:0 0 33.3333%;max-width:33.3333%}
}
@media (min-width:1172px){
body.fish-single.xw-rgd .related-videos .row>[class*="col-"]{flex:0 0 25%;max-width:25%}
}
@media (min-width:1402px){
body.fish-single.xw-rgd .related-videos .row>[class*="col-"]{flex:0 0 20%;max-width:20%}
}