/*
=========================================================
RAILS STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the shared rail and horizontal scroller styles used across joshuadaltonmedia.com. It is designed to support reusable scrollable card rows, rail headers, arrow controls, responsive track sizing, and optional desktop grid fallbacks for sections such as featured work, venues, testimonials, pricing, blog previews, and similar card-based content blocks.

What belongs in this file
-------------------------
- Shared rail shells and width wrappers
- Shared rail header and control layouts
- Shared rail arrow button styling
- Shared horizontal scroller track styling
- Shared rail hint styling
- Shared responsive rail breakpoint rules
- Shared rail variants for different card densities and desktop fallbacks

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/rails.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet in the head
2. use the shared rail class system for any horizontal scroller or rail section
3. keep truly page-specific rail tweaks inside their page skin stylesheet

Maintenance rule
----------------
If a selector is not part of the shared rail system itself, it should not be added here. Keep this file focused on reusable rail structure, controls, and responsive rail behaviour.
*/

/* ================= RAIL SHELLS ================= */
.rail{position:relative;width:min(92vw,1500px);margin-top:clamp(10px,3vw,24px);margin-inline:auto}
.rail.max{width:min(92vw,var(--maxw))}
.rail.full{width:100%}
.rail.flush{margin-top:0}

/* ================= RAIL HEADER ================= */
.rail-head{display:flex;align-items:end;justify-content:space-between;gap:12px}
.rail-head.start{align-items:start}
.rail-head.center{align-items:center}

/* ================= RAIL CONTROLS ================= */
.rail-arrows{display:none;align-items:center;gap:8px;flex:0 0 auto}
.rail-arrow{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:var(--accent);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.28);cursor:pointer;transition:transform .2s ease,filter .2s ease,opacity .2s ease}
.rail-arrow:hover{filter:brightness(1.08);transform:translateY(-1px)}
.rail-arrow:focus-visible{outline:2px solid rgba(255,77,77,.6);outline-offset:2px}
.rail-arrow[disabled]{opacity:.38;cursor:default;transform:none}
.rail-arrow svg{width:18px;height:18px;display:block}

/* ================= RAIL TRACK BASE ================= */
.rail-track{display:grid;grid-auto-flow:column;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 14px;scroll-snap-type:x proximity;scroll-padding-left:2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.rail-track::-webkit-scrollbar{height:8px}
.rail-track::-webkit-scrollbar-track{background:transparent}
.rail-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}

/* ================= RAIL TRACK VARIANTS ================= */
.rail-track.wide{grid-auto-columns:minmax(88%,1fr)}
.rail-track.compact{grid-auto-columns:minmax(74%,1fr)}
.rail-track.posts{grid-auto-columns:minmax(86%,1fr)}
.rail-track.pricing{grid-auto-columns:minmax(88%,1fr)}

/* ================= RAIL HINTS ================= */
.rail-hint{margin-top:8px;font-size:.72rem;line-height:1.35;color:var(--muted);text-align:center;opacity:.8}
.rail-hint.left{text-align:left}
.rail-hint.hide-tablet{display:block}
.rail-hint.hide-desktop{display:block}

/* ================= OPTIONAL MODIFIERS ================= */
.rail-track.tight{gap:10px}
.rail-track.loose{gap:18px}

/* ================= RESPONSIVE BREAKPOINTS ================= */

@media(min-width:360px){
	/* ================= RAIL TRACK VARIANTS ================= */
	.rail-track.wide{grid-auto-columns:minmax(84%,1fr)}
	.rail-track.compact{grid-auto-columns:minmax(68%,1fr)}
	.rail-track.posts{grid-auto-columns:minmax(78%,1fr)}
}

@media(min-width:700px){
	/* ================= RAIL SHELLS ================= */
	.rail{width:min(94vw,1600px)}
	.rail.max{width:min(92vw,var(--maxw))}
	/* ================= RAIL TRACK VARIANTS ================= */
	.rail-track.wide{grid-auto-columns:minmax(46%,1fr);gap:14px}
	.rail-track.compact{grid-auto-columns:minmax(38%,1fr);gap:14px}
	.rail-track.posts{grid-auto-columns:minmax(46%,1fr);gap:14px}
	.rail-track.pricing{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:2px 0 0;scroll-snap-type:none}
	/* ================= RAIL HINTS ================= */
	.rail-hint.left{text-align:left}
	.rail-hint.hide-tablet{display:none}
}

@media(min-width:1024px){
	/* ================= RAIL SHELLS ================= */
	.rail{width:min(96vw,1720px)}
	.rail.full{width:100%;margin-top:clamp(10px,3vw,24px);margin-inline:auto}
	/* ================= RAIL CONTROLS ================= */
	.rail-arrows{display:flex}
	/* ================= RAIL TRACK VARIANTS ================= */
	.rail-track.wide{grid-auto-columns:minmax(30%,1fr);gap:18px}
	.rail-track.compact{grid-auto-columns:minmax(19%,1fr);gap:18px}
	.rail-track.posts{width:100%;display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;overflow:visible;padding:0;scroll-snap-type:none;scroll-padding-left:0}
	.rail-track.pricing{gap:18px}
	/* ================= RAIL HINTS ================= */
	.rail-hint.hide-desktop{display:none}
}