/* =====================================================================
   BrightValley Link — utilities.css
   Grid, flex, spacing, text, surfaces, visibility primitives.
   ===================================================================== */
.grid { display:grid; gap: clamp(18px,2.2vw,32px); }
.g-2 { grid-template-columns: repeat(2,1fr); }
.g-3 { grid-template-columns: repeat(3,1fr); }
.g-4 { grid-template-columns: repeat(4,1fr); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); }
@media (max-width:1000px){ .g-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:920px){ .g-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .g-2,.g-3,.g-4 { grid-template-columns:1fr; } }

/* asymmetric 12-col */
.cols { display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(18px,2.4vw,36px); }
.c-3{grid-column:span 3;} .c-4{grid-column:span 4;} .c-5{grid-column:span 5;} .c-6{grid-column:span 6;}
.c-7{grid-column:span 7;} .c-8{grid-column:span 8;} .c-9{grid-column:span 9;}
@media (max-width:860px){ .cols > * { grid-column:1 / -1 !important; } }

.split { display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,5vw,72px); align-items:center; }
.split--l { grid-template-columns: 1.15fr .85fr; } .split--r { grid-template-columns: .85fr 1.15fr; }
.split--rev .split__media { order:2; }
.split__media { overflow:hidden; border-radius: var(--r-md); position:relative; }
.split__media img, .split__media svg { width:100%; aspect-ratio:4/3.3; object-fit:cover; }
@media (max-width:820px){ .split,.split--l,.split--r { grid-template-columns:1fr; } .split--rev .split__media{ order:0; } }

/* horizontal rail */
.rail { display:grid; grid-auto-flow:column; grid-auto-columns: minmax(300px, 33%); gap: clamp(16px,2vw,26px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:thin; }
.rail > * { scroll-snap-align:start; }
.rail::-webkit-scrollbar { height:8px; }
.rail::-webkit-scrollbar-thumb { background: var(--concrete); border-radius:var(--r-pill); }
@media (max-width:620px){ .rail { grid-auto-columns: minmax(82%,84%); } }

.flex { display:flex; } .flex-col { display:flex; flex-direction:column; }
.between { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.center { display:flex; align-items:center; justify-content:center; }
.end { align-items:flex-end; } .start { align-items:flex-start; }
.wgap { flex-wrap:wrap; gap:1rem; }
.gap-s{gap:.6rem;} .gap-m{gap:1.2rem;} .gap-l{gap:2rem;} .gap-xl{gap:3rem;}

.mt-1{margin-top:.6rem;} .mt-2{margin-top:1.2rem;} .mt-3{margin-top:1.8rem;} .mt-4{margin-top:2.6rem;} .mt-5{margin-top:3.6rem;}
.mb-1{margin-bottom:.6rem;} .mb-2{margin-bottom:1.2rem;} .mb-3{margin-bottom:1.8rem;} .mb-4{margin-bottom:2.6rem;}
.stack > * + *{ margin-top:1.05rem; } .stack-l > * + *{ margin-top:1.9rem; }

.tc{text-align:center;} .tr{text-align:right;}
.upper{ font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; font-weight:600; }
.display{ font-family: var(--ff-display); }
.mw-40{max-width:40ch;} .mw-50{max-width:50ch;} .mw-60{max-width:60ch;} .mw-70{max-width:70ch;}

.bordered{ border:1px solid var(--line);} .full{ width:100%;}
.round-sm{ border-radius: var(--r-sm);} .round-md{ border-radius: var(--r-md);} .round-lg{ border-radius: var(--r-lg);}
.shadow{ box-shadow: var(--sh-1);} .shadow-lg{ box-shadow: var(--sh-2);}
.obj-cover{ object-fit:cover; width:100%; height:100%; }
.r-1{aspect-ratio:1;} .r-43{aspect-ratio:4/3;} .r-169{aspect-ratio:16/9;} .r-32{aspect-ratio:3/2;}

.dot-red{ width:8px; height:8px; border-radius:50%; background:var(--red); display:inline-block; }
.kbd{ font-family: var(--ff-display); font-weight:600; font-size:.78rem; padding:.15em .5em; border:1px solid var(--line); border-radius:4px; background: var(--paper); }
.rule{ height:1px; background: var(--line); border:0; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:720px){ .hide-m{ display:none!important; } }
@media (min-width:721px){ .only-m{ display:none!important; } }