→" measured 20-22px between 520px and 1280px, because the padding that lifts them over the floor is added by the <=520px rule and by wider contexts, and nothing holds it in between. A floor on the control cannot be undone by a context that zeroes its padding. align-items:center was already here, so the text simply centres in the taller box, and gap:6px keeps the arrow spacing this markup depends on. */ .tsp-nav-viewall{display:inline-flex;align-items:center;min-height:24px;gap:6px;font-weight:600;font-size:14px;color:var(--tsp-nav-hover,#ed1c24);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px} .tsp-nav-viewall:hover{opacity:.8} .tsp-nav-live{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden} @container (max-width:760px){.tsp-nav-enabled{--tsp-nav-pv:min(var(--tsp-nav-pv-tablet,2),2)}} @container (max-width:520px){.tsp-nav-enabled{--tsp-nav-pv:min(var(--tsp-nav-pv-mobile,1),2)}.tsp-nav-btn{width:44px;height:44px}} @media(prefers-reduced-motion:reduce){.tsp-nav-enabled .tsp-nav-viewport{scroll-behavior:auto}} .tsp-sidebar--single.tsp-nav-enabled .tsp-nav-viewport>*{display:block !important}.tsp-sidebar--single.tsp-nav-enabled .tsp-sidebar__list{display:grid !important;grid-auto-flow:column;grid-template-rows:repeat(var(--tsp-nav-rows,1),auto);grid-auto-columns:100%;grid-template-columns:none !important;column-gap:0;row-gap:var(--tsp-sidebar-story-gap,14px);align-content:start}.tsp-sidebar--single.tsp-nav-enabled .tsp-sidebar__item{scroll-snap-align:start}.tsp-sidebar--single .tsp-nav-header .tsp-sidebar__heading{margin:0} @container (max-width:380px){.tsp-nav-enabled{--tsp-nav-pv:1}}@container (max-width:520px){.tsp-nav-viewall-row{text-align:center}.tsp-nav-viewall{padding:10px 6px;display:inline-flex}} /* v1.10.0: standalone View All (no arrows) sits header-right in the same grid column */.tsp-nav-viewall--header{justify-self:end;white-space:nowrap;color:var(--tsp-accent,#ed1c24);font-weight:600;font-size:14px;text-decoration:none}.tsp-nav-viewall--header:hover,.tsp-nav-viewall--header:focus-visible{text-decoration:underline} /* ========================================================================== Multi-card layouts inside the shared carousel. `.tsp-sidebar--single` assumes a NARROW sidebar: one story per view, stacked `--tsp-nav-rows` deep, column gap zeroed. That is right for a sidebar column and wrong for a wide multi-card strip using the same class — it forced every card to 100% of the track. `.tsp-nav-multi` opts a section into the column model the general rule at the top of this file already implements, so there is one sizing formula, not two. ========================================================================== */ .tsp-sidebar--single.tsp-nav-enabled.tsp-nav-multi .tsp-sidebar__list { grid-auto-columns: calc((100% - (var(--tsp-nav-pv) - 1) * var(--tsp-nav-track-gap, 16px)) / var(--tsp-nav-pv)); grid-template-rows: auto; column-gap: var(--tsp-nav-track-gap, 16px); } /* Per-view derived from the SAME arithmetic the strip's auto-fit uses — floor((container + gap) / (min + gap)) at min 210px, gap 16px — so the navigation cannot invent a second breakpoint model. */ .tsp-nav-multi { --tsp-nav-pv: 1; } @container (min-width: 436px) { .tsp-nav-multi { --tsp-nav-pv: 2; } } @container (min-width: 662px) { .tsp-nav-multi { --tsp-nav-pv: 3; } } @container (min-width: 888px) { .tsp-nav-multi { --tsp-nav-pv: 4; } } @container (min-width: 1114px) { .tsp-nav-multi { --tsp-nav-pv: 5; } } /* v1.10.343 a row cannot be wider than the cards it actually has. The per-view above is derived from the CONTAINER, which is right while there is enough content to fill it. When a section holds fewer cards than the row was sized for, every remaining track stays reserved and empty. Measured on Most Viewed at 1366: two cards of 219px in a 1200px row, so 726px -- 61% of the row -- was empty tracks under a full-width heading rule. That section is not misconfigured and its data is not wrong: only two posts have recorded views, and inventing a third would be a lie about what is being read. So the row adapts to the cards instead. Deliberately only 1 and 2. Three or more already fills enough of the row to read as intentional, and matching every count would mean a rule per count. Self-healing: the moment a third story earns a view the cap stops matching and the container arithmetic takes over again. */ /* The two-card cap only applies where two cards actually fit. Left unscoped it also overrode the 436px step, so a phone showed Most Viewed as two 168px columns with headlines wrapping to six lines. The one-card cap is safe at any width, so it stays outside. */ @container (min-width: 436px) { .tsp-nav-multi .tsp-sidebar__list:has(> :nth-child(2):last-child) { --tsp-nav-pv: 2; } } .tsp-nav-multi .tsp-sidebar__list:has(> :only-child) { --tsp-nav-pv: 1; } /* ...and at that count the card turns on its side. Filling the row is necessary but not sufficient: two cards sharing 1160px become two hero-scale tiles. Measured after the cap alone, each card was 572x430 and the section grew from ~270px tall to 490px -- more weight than a Most Viewed strip should carry, competing with the hero above it. So the image moves beside the headline rather than above it. The row is full, the section stays compact, and no story has been invented to fill it. Reverts with the cap as soon as a third card arrives. */ .tsp-nav-multi .tsp-sidebar__list:has(> :nth-child(2):last-child) .tsp-sidebar__item, .tsp-nav-multi .tsp-sidebar__list:has(> :only-child) .tsp-sidebar__item { flex-direction: row; align-items: flex-start; gap: 14px; } .tsp-nav-multi .tsp-sidebar__list:has(> :nth-child(2):last-child) .tsp-sidebar__item-image, .tsp-nav-multi .tsp-sidebar__list:has(> :only-child) .tsp-sidebar__item-image { flex: 0 0 200px; width: 200px; margin-bottom: 0; } /* Below the tablet step the row is already one card wide, so the side-by-side treatment would squeeze the headline into a sliver. Stack it again. */ @container (max-width: 560px) { .tsp-nav-multi .tsp-sidebar__list:has(> :nth-child(2):last-child) .tsp-sidebar__item, .tsp-nav-multi .tsp-sidebar__list:has(> :only-child) .tsp-sidebar__item { flex-direction: column; } .tsp-nav-multi .tsp-sidebar__list:has(> :nth-child(2):last-child) .tsp-sidebar__item-image, .tsp-nav-multi .tsp-sidebar__list:has(> :only-child) .tsp-sidebar__item-image { flex: 0 0 auto; width: 100%; } }