/* ===========================================================================
   Digitalpnd FX · layout.css
   Container · section · grid systems · spacing & flex utilities
   =========================================================================== */
.container{width:100%;max-width:100%;margin-inline:auto;padding-inline:clamp(16px,4vw,56px)}
.container-fluid{width:100%;padding-inline:clamp(16px,4vw,56px)}
.section{padding:var(--section-y) 0}
@media(max-width:768px){.section{padding:64px 0}}

/* flex utilities */
.d-flex{display:flex}.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}.gap-2{gap:.5rem}.gap-3{gap:1rem}.gap-4{gap:1.5rem}
.align-center{align-items:center}.align-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.text-center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.muted{color:var(--txt-dim)}.small{font-size:.85rem}.hidden{display:none!important}
.cursor-pointer{cursor:pointer}.rounded{border-radius:var(--radius-sm)}.scroll-x{overflow-x:auto}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.grad-bg{background:var(--grad)}

/* flex row */
.row{display:flex;flex-wrap:wrap;gap:var(--gap);min-width:0;width:100%}
.row>*{min-width:0}
.col{flex:1 1 0;min-width:0}

/* ====== Auto-fit card grids (Apple/Stripe style) ====== */
.card-grid,.service-grid,.portfolio-grid,.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--gap);width:100%;
}

/* ====== Dashboard grid (12-col desktop, full-width stack mobile) ====== */
.dash-grid{display:grid;gap:var(--gap);min-width:0;width:100%;align-items:start}
.dash-grid>*{min-width:0;overflow-wrap:anywhere;width:100%;box-sizing:border-box}
@media(min-width:992px){
  .dash-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
  .col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
  .col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
  .col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
}
@media(max-width:991px){
  .dash-grid{grid-template-columns:1fr}
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{grid-column:1/-1}
}

/* ====== Stats grid ====== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;width:100%}
.stat-card{padding:1.4rem;min-width:0;overflow-wrap:anywhere;text-align:center}

/* ====== Form field row ====== */
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;width:100%}

/* ====== Heatmap ====== */
.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;width:100%}

/* ====== Pills ====== */
.pill-group{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;width:100%}

/* ====== Footer grid ====== */
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px;width:100%}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ====== Admin ====== */
.admin-wrap{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:24px 0;width:100%}
@media(max-width:992px){.admin-wrap{grid-template-columns:1fr}}
.admin-side{position:sticky;top:88px;align-self:start}
.admin-side a{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;border-radius:10px;color:var(--txt-dim);font-size:.9rem;transition:all var(--dur) var(--ease)}
.admin-side a.active,.admin-side a:hover{background:var(--glass-soft);color:#fff}

/* page head */
.page-head{padding:48px clamp(8px,2vw,24px) 24px}
.page-head h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em}
.page-head p{color:var(--txt-dim);margin-top:.5rem}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent);margin:2rem 0}