/* =====================================================================
   GoldenTrail — utilities.css
   Small single-purpose helpers. Layout, spacing, grid, text, visibility.
   ===================================================================== */

/* grids */
.grid { display:grid; gap: clamp(20px,2.4vw,34px); }
.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(240px,1fr)); }
@media (max-width:940px){ .g-3,.g-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .g-2,.g-3,.g-4 { grid-template-columns:1fr; } }

/* masonry-ish columns */
.masonry { column-count:3; column-gap: clamp(18px,2vw,28px); }
.masonry > * { break-inside: avoid; margin-bottom: clamp(18px,2vw,28px); }
@media (max-width:900px){ .masonry { column-count:2; } }
@media (max-width:560px){ .masonry { column-count:1; } }

/* asymmetric helpers */
.col-7 { grid-column: span 7; } .col-5 { grid-column: span 5; }
.col-8 { grid-column: span 8; } .col-4 { grid-column: span 4; }
.grid-12 { display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(20px,2.4vw,34px); }
@media (max-width:820px){ .grid-12 > * { grid-column: 1 / -1 !important; } }

/* flex helpers */
.flex { display:flex; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.items-end { align-items:flex-end; }
.wrap-gap { flex-wrap:wrap; gap:1rem; }
.gap-sm { gap:.6rem; } .gap-md { gap:1.2rem; } .gap-lg { gap:2rem; }

/* spacing */
.mt-0{margin-top:0;} .mt-1{margin-top:.6rem;} .mt-2{margin-top:1.2rem;} .mt-3{margin-top:1.8rem;} .mt-4{margin-top:2.6rem;}
.mb-1{margin-bottom:.6rem;} .mb-2{margin-bottom:1.2rem;} .mb-3{margin-bottom:1.8rem;} .mb-4{margin-bottom:2.6rem;}
.pt-0{padding-top:0;} .stack > * + * { margin-top:1.1rem; }
.stack-lg > * + * { margin-top:1.8rem; }

/* text */
.text-center{ text-align:center; } .text-right{ text-align:right; }
.muted{ color: var(--muted); }
.serif{ font-family: var(--ff-display); }
.uppercase{ text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:600; }
.max-50{ max-width:50ch; } .max-60{ max-width:60ch; } .max-40{ max-width:40ch; }
.balance{ text-wrap: balance; }
.clay{ color: var(--clay); } .sage{ color: var(--sage); } .forest{ color: var(--forest); }

/* surfaces */
.rounded{ border-radius: var(--r-lg); } .rounded-md{ border-radius: var(--r-md); }
.shadow{ box-shadow: var(--sh-1); } .shadow-lg{ box-shadow: var(--sh-2); }
.bordered{ border:1px solid var(--line); }
.relative{ position:relative; } .overflow-hidden{ overflow:hidden; }
.full{ width:100%; }

/* visibility */
.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; }
.hide-mobile{ } .show-mobile{ display:none; }
@media (max-width:720px){ .hide-mobile{ display:none!important; } .show-mobile{ display:block; } }

/* aspect helpers */
.ratio-1{ aspect-ratio:1; } .ratio-43{ aspect-ratio:4/3; } .ratio-169{ aspect-ratio:16/9; }
.obj-cover{ object-fit:cover; width:100%; height:100%; }

/* dividers & misc */
.hr{ height:1px; background: var(--line); border:0; }
.dot{ width:6px; height:6px; border-radius:50%; background: var(--clay); display:inline-block; }
.kbd{ font-size:.78rem; padding:.15em .5em; border:1px solid var(--line); border-radius:6px; background: var(--cream); }
.ribbon{ display:inline-block; transform: rotate(-2deg); background: var(--clay); color:#fff; font-weight:600; font-size:.76rem; padding:.3em .9em; border-radius:6px; }
.num-badge{ font-family: var(--ff-display); font-size:1.1rem; color: var(--clay); }