/**
 * Scale2Clinic — Grid & Layout System
 * 12-column grid, fluid containers, responsive breakpoints.
 */
:root {
  --grid-cols: 12;
  --grid-gap: 1.5rem;
  --container-max: 1280px;
  --container-padding: 1.5rem;
}

.s2c-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); width: 100%; }
.s2c-grid { display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr); gap: var(--grid-gap); }

.s2c-col-1 { grid-column: span 1 }
.s2c-col-2 { grid-column: span 2 }
.s2c-col-3 { grid-column: span 3 }
.s2c-col-4 { grid-column: span 4 }
.s2c-col-5 { grid-column: span 5 }
.s2c-col-6 { grid-column: span 6 }
.s2c-col-7 { grid-column: span 7 }
.s2c-col-8 { grid-column: span 8 }
.s2c-col-9 { grid-column: span 9 }
.s2c-col-10 { grid-column: span 10 }
.s2c-col-11 { grid-column: span 11 }
.s2c-col-12 { grid-column: span 12 }

@media (max-width: 1024px) { .s2c-grid { --grid-cols: 8 } }
@media (max-width: 768px) { .s2c-grid { --grid-cols: 4 } [class*="s2c-col-"] { grid-column: span 4 } }
@media (max-width: 640px) { .s2c-container { --container-padding: 1rem } .s2c-grid { gap: 1rem } }