/* ==========================================================
   ANDALUS_VIDEO_RAIL_V1 — swipe row of shorts + long tours grid
   Pairs with includes/andalus-video-rail.php. Each card is the site-wide
   an_youtube_embed(); the rules below only size it for the rail.
   ========================================================== */
.an-vrail,.an-vtours{ --vr-brand:#7d1d2b; --vr-ink:#4e352a; --vr-muted:#80675a; --vr-line:#e3d3c6; --vr-card:180px; }
.an-vrail{ padding:18px 0 6px; }
.an-vtours{ padding:30px 0 10px; }
.an-vrail__wrap{ width:min(1500px, calc(100% - 32px)); margin-inline:auto; }

.an-vrail__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.an-vrail__h{ margin:0; font-size:1.2rem; line-height:1.5; color:var(--vr-ink); font-weight:900; }
.an-vrail__count{ display:inline-block; margin-inline-start:6px; padding:2px 10px; border-radius:100px; background:#f6ebe3; color:var(--vr-brand); font-size:13px; font-weight:900; vertical-align:middle; }
.an-vrail__p{ margin:4px 0 0; color:var(--vr-muted); font-size:14px; line-height:1.7; font-weight:700; }

.an-vrail__nav{ display:flex; gap:8px; flex:none; }
.an-vrail__arrow{ width:44px; height:44px; border-radius:50%; border:1px solid var(--vr-line); background:#fff; color:var(--vr-ink); font-size:26px; line-height:1; cursor:pointer; display:grid; place-items:center; font-family:inherit; transition:background .15s, opacity .15s; }
.an-vrail__arrow:hover{ background:#f6ebe3; }
.an-vrail__arrow[disabled]{ opacity:.35; cursor:default; }

.an-vrail__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:var(--vr-card); gap:12px;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:2px;
  padding:4px 2px 14px; scrollbar-width:thin; scrollbar-color:#d8c4b6 transparent;
}
.an-vrail__track:focus-visible{ outline:3px solid #f0d4a8; outline-offset:4px; border-radius:12px; }
.an-vrail__item{ scroll-snap-align:start; min-width:0; }

/* Rail card = the component's phone layout at every width: a plain 9:16 card */
.an-vrail .an-yt[data-yt-layout="portrait"]{ width:100%; --an-yt-radius:18px; }
.an-vrail .an-yt[data-yt-layout="portrait"] .an-yt__frame{ aspect-ratio:auto; box-shadow:0 10px 26px rgba(36,16,20,.18); }
.an-vrail .an-yt[data-yt-layout="portrait"] .an-yt__stage{ position:relative; inset:auto; width:100%; height:auto; aspect-ratio:9/16; box-shadow:none; }
.an-vrail .an-yt[data-yt-layout="portrait"] .an-yt__bg{ display:none; }
.an-vrail .an-yt__btn{ width:54px; height:54px; margin:-27px 0 0 -27px; box-shadow:0 10px 24px rgba(0,0,0,.4), 0 0 0 7px rgba(255,255,255,.16); }
.an-vrail .an-yt__btn svg{ width:24px; height:24px; }
.an-vrail .an-yt__hint{ display:none; }
.an-vrail .an-yt__title{ font-size:14px; padding:34px 10px 10px; line-height:1.45; }
.an-vrail .an-yt__caption{ margin:8px 2px 0; font-size:13px; line-height:1.55; font-weight:800; }
/* After the player mounts: compact controls that fit under a narrow card */
.an-vrail .an-yt__bar{ gap:6px; margin-top:8px; flex-wrap:nowrap; }
.an-vrail .an-yt__fs,.an-vrail .an-yt__open{ min-height:40px; padding:0 10px; font-size:13px; gap:5px; }
.an-vrail .an-yt__open span{ display:none; }
/* Theater / fullscreen keep the component's own rules */
.an-vrail .an-yt.is-theater .an-yt__stage{ width:min(100vw, calc(100dvh * 9 / 16)) !important; }

/* Last card: link to the channel */
.an-vrail__all{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
  aspect-ratio:9/16; border-radius:18px; border:2px dashed var(--vr-line); background:#fffaf6;
  color:var(--vr-ink); text-decoration:none; padding:14px; font-size:14px; line-height:1.6;
}
.an-vrail__all strong{ font-size:15px; font-weight:900; }
.an-vrail__all span:last-child{ color:var(--vr-muted); font-weight:700; font-size:13px; }
.an-vrail__all-ic{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:var(--vr-brand); color:#fff; font-size:20px; }
.an-vrail__all:hover{ background:#f6ebe3; }

/* Long tours */
.an-vtours__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap:18px; margin-top:12px; align-items:start; }
.an-vtours .an-yt{ --an-yt-radius:20px; }
.an-vtours .an-yt__title{ font-size:15px; }
.an-vtours .an-yt__caption{ font-size:14px; }

@media (min-width:1100px){ .an-vrail,.an-vtours{ --vr-card:220px; } }
@media (max-width:720px){
  .an-vrail__wrap{ width:calc(100% - 20px); }
  .an-vrail,.an-vtours{ --vr-card:42vw; }
  .an-vrail__nav{ display:none; }
  .an-vrail__h{ font-size:1.08rem; }
  /* let the row run to the screen edges so it's obvious it scrolls */
  .an-vrail__track{ margin-inline:-10px; padding-inline:10px; scroll-padding-inline:10px; gap:10px; }
  .an-vrail .an-yt__fs span{ display:none; }
}
@media (max-width:360px){ .an-vrail,.an-vtours{ --vr-card:46vw; } }