/* ==========================================================================
   9WEB STARTER THEME — RESPONSIVE
   The 9Web breakpoint scale (documented once, referenced everywhere):

     Mobile        0–479px    (default / no media query)
     Large Mobile  480–767px
     Tablet        768–1023px
     Laptop        1024–1279px
     Desktop       1280–1439px
     Large Desktop 1440px+

   This file holds cross-cutting responsive behavior — grid column
   counts and small utility classes. Component-specific responsive
   rules (e.g. a hero's mobile layout) belong with that component's
   own CSS in later phases, not here.
   ========================================================================== */

/* ---- Grid column count per breakpoint ---------------------------------
   4 columns is already the default set on .is-9w-grid itself in
   layout.css — no query needed to restate it for the 0–767px range. */

@media (min-width: 768px) {
	.is-9w-grid { --9w-grid-cols: 8; }
}

@media (min-width: 1024px) {
	.is-9w-grid { --9w-grid-cols: 12; }
}

/* ---- Responsive column spans -------------------------------------------
   .is-9w-col-6/8/12 default to full-width (see layout.css) because a
   span greater than the grid's current column count forces the browser
   to create implicit, auto-sized extra columns — which overflows the
   layout rather than gracefully wrapping. Each class only takes its
   real span once the grid has grown enough columns to fit it:

     span 6, span 8  -> unlock at 768px  (grid has 8 columns)
     span 12         -> unlock at 1024px (grid has 12 columns; at the
                         768px tier the grid still only has 8 columns,
                         so span 12 stays full-width until 1024px)

   .is-9w-col-2/3/4 need no override — they never exceed 4, the
   smallest grid the site ever renders, so they are always safe. */

@media (min-width: 768px) {
	.is-9w-col-6 { grid-column: span 6; }
	.is-9w-col-8 { grid-column: span 8; }
}

@media (min-width: 1024px) {
	.is-9w-col-12 { grid-column: span 12; }
}

/* ---- Visibility utilities ------------------------------------------------ */

.is-9w-hide-mobile {
	display: none;
}

@media (min-width: 768px) {
	.is-9w-hide-mobile { display: revert; }
	.is-9w-hide-tablet-up { display: none; }
}

/* ---- Responsive text alignment -------------------------------------------- */

.is-9w-text-center-mobile {
	text-align: center;
}

@media (min-width: 768px) {
	.is-9w-text-center-mobile { text-align: revert; }
}