/* item-videos-rail.css
   Profile "Videos" rail (owner 2026-09-03, docs/plans/item-videos-rail-plan-2026-09-03.md): the profile's videos as
   swipable cover cards, the last section on both widths (phone: order 7 after The Basics in .new-profile-wrapper;
   desktop: relocated into the last left-column slot by relocateDesktopProfileSections()). Markup: item.php
   .np-section--videos > .ivr-head (h2 + prev/next arrows) + .ivr-scroll > .ivr-track > a.ivr-card (lazy cover img,
   play glyph, optional duration chip; covers carry data-src and item.php's initItemVideosRail() sets src once the rail is
   within 800px of the viewport). Airbnb's "Upcoming availability" rail measured at 390 on 2026-09-03: cards 224
   wide, gap 12, radius 16, scroll-snap start, full-bleed scroller with the 24px gutter as padding, 24 from the title.
   Desktop: three 4:5 cards across the column. Both widths: 40px round prev/next arrows at the title's right (owner
   2026-09-03: on the phone too), hidden by the script when the cards fit.
   Linked by item.php right before the section (only profiles with videos fetch it), not by header.php.
   No <video> element lives here; the cards only carry lazy-loaded cover images. Tokens: ink #0f0f0f, line #ececec,
   soft #f2f2f2; dark twins reuse the dark.css tokens. */
.np-section--videos { --ivr-card: 224px; --ivr-gap: 12px; }
.np-section--videos .ivr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; }   /* + the scroller's 4px shadow room = 24 from the title to the cards */
.np-section--videos .ivr-title { margin: 0 !important; padding: 0 !important; font-size: 22px !important; line-height: 26px !important; font-weight: 500 !important; letter-spacing: -0.02em !important; color: #0f0f0f !important; }
.np-section--videos .ivr-nav { display: flex; gap: 8px; flex: none; margin-block: -7px; }   /* the 40px circles overflow the 26px title row symmetrically, so the title keeps its 32 under the hairline and 24 to the cards */
.np-section--videos .ivr-nav[hidden] { display: none !important; }
.np-section--videos .ivr-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dddddd; background: #ffffff; color: #0f0f0f; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: pointer; transition: background-color 120ms ease, opacity 120ms ease; }
.np-section--videos .ivr-arrow:hover { background: #f7f7f7; }
.np-section--videos .ivr-arrow svg { width: 16px; height: 16px; }
.np-section--videos .ivr-arrow[disabled] { opacity: 0.35; cursor: default; }
.np-section--videos .ivr-arrow[disabled]:hover { background: #ffffff; }
.np-section--videos .ivr-scroll { container-type: inline-size; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 0 12px; }
.np-section--videos .ivr-scroll::-webkit-scrollbar { display: none; }
.np-section--videos .ivr-track { display: flex; gap: var(--ivr-gap); width: max-content; }
.np-section--videos .ivr-card { position: relative; display: block; flex: 0 0 var(--ivr-card); width: var(--ivr-card); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #f2f2f2; scroll-snap-align: start; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 6px 16px rgba(0, 0, 0, 0.10); -webkit-tap-highlight-color: transparent; }
.np-section--videos .ivr-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.np-section--videos .ivr-play { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #0f0f0f; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); pointer-events: none; }
.np-section--videos .ivr-play svg { display: block; margin-left: 2px; }
.np-section--videos .ivr-dur { position: absolute; left: 12px; bottom: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(15, 15, 15, 0.6); color: #ffffff; font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; pointer-events: none; }
@media (max-width: 768px) {
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--videos { order: 7; display: block !important; padding: 32px 0 24px !important; margin: 0 !important; border: 0 !important; border-top: 1px solid #ececec !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--videos .ivr-title { font-size: 22px !important; line-height: 26px !important; letter-spacing: -0.02em !important; color: #0f0f0f !important; }   /* html prefix: the phone's .np-title chain in profile12-critical is later in the DOM */
body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--videos .ivr-scroll { margin-inline: calc(50% - 50vw); padding-inline: 24px; scroll-padding-inline: 24px; }
}
@media (min-width: 769px) {
html body.item.item-airbnb-layout .item-airbnb-sidebar .np-section--videos { display: none !important; }   /* fail-safe until relocateDesktopProfileSections() moves it into .parameters */
html body.item.item-airbnb-layout .item-airbnb-body-panel .parameters .np-section--videos { --ivr-card: calc((100cqw - 24px) / 3); display: block !important; margin: 32px 0 0 !important; padding: 32px 0 0 !important; border: 0 !important; border-top: 1px solid #ececec !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
}
html[data-theme="dark"] body.item.item-airbnb-layout .np-section--videos { border-top-color: var(--esc-dk-line) !important; }
html[data-theme="dark"] body.item.item-airbnb-layout .np-section--videos .ivr-title { color: var(--esc-dk-text) !important; }
html[data-theme="dark"] body.item.item-airbnb-layout .np-section--videos .ivr-arrow { background: #1a1a1a; border-color: rgba(255, 255, 255, 0.12); color: var(--esc-dk-text); }
html[data-theme="dark"] body.item.item-airbnb-layout .np-section--videos .ivr-arrow:hover { background: #242424; }
html[data-theme="dark"] body.item.item-airbnb-layout .np-section--videos .ivr-card { background: #202020; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.4); }

/* Fancybox video modal on the phone (owner 2026-09-03, "the small cards below are cut"): the plugin sheet served from the
   CDN (assets.cdnme.net/css/videouser4.css) caps the thumbnail pill globally at max-height 70px ("5. THUMBNAIL STRIP")
   while its own phone rule asks for 110px and sizes each thumb 86px tall, so the cap won and every thumb lost its bottom
   28px. Lift the cap to the intended 12 + 86 + 12. Loaded exactly when a profile has videos (same guard as the modal). */
@media (max-width: 768px) {
html body .fancybox__container.gallery-videogal .fancybox__thumbs { height: 110px !important; max-height: 110px !important; }/* owner: the next arrow sat on the Like / Save / Views column (arrows at 15px from the edges, the column at 12px); both arrows move 45px inward */
html body .fancybox__container.gallery-videogal .f-button.is-arrow.is-prev { left: 60px !important; }
html body .fancybox__container.gallery-videogal .f-button.is-arrow.is-next { right: 60px !important; }
}