/* =====================================================================
   SummitBridge — utilities.css
   Layout primitives, spacing, flex, grid, text, surfaces, visibility.
   ===================================================================== */
.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-5 { grid-template-columns: repeat(5,1fr); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); }
@media (max-width:1000px){ .g-4,.g-5 { 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,.g-5 { grid-template-columns:1fr; } }

/* architectural 12-col with optional visible gutters */
.cols { display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(18px,2.4vw,36px); }
.c-2{grid-column:span 2;} .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;} .c-10{grid-column:span 10;}
@media (max-width:860px){ .cols > * { grid-column:1 / -1 !important; } }

/* mosaic (rooms) — deliberately irregular */
.mosaic { display:grid; grid-template-columns: repeat(6,1fr); grid-auto-rows: 150px; gap: clamp(12px,1.6vw,20px); }
.m-a{ grid-column: span 3; grid-row: span 2; }
.m-b{ grid-column: span 3; grid-row: span 1; }
.m-c{ grid-column: span 2; grid-row: span 2; }
.m-d{ grid-column: span 4; grid-row: span 1; }
.m-e{ grid-column: span 2; grid-row: span 1; }
@media (max-width:760px){ .mosaic { grid-template-columns: repeat(2,1fr); } .m-a,.m-b,.m-c,.m-d,.m-e{ grid-column: span 1; grid-row: span 1; min-height:200px;} }

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

.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:700; }
.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);} .bordered-2{ border:2px solid var(--charcoal);} .full{ width:100%;}
.sharp{ border-radius:0;} .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;} .r-54{aspect-ratio:5/4;}

.divider-rule{ height:2px; background: var(--charcoal); border:0; }
.dot{ width:7px; height:7px; 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(--bone); }

.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; } }