/**
 * Minimal Bootstrap 4-style grid and utilities for walltopia-v2.
 *
 * Ported subset — only classes actually used in v2 templates.
 * Audit date: 2026-04-21
 *
 * Do NOT expand this file speculatively. When a new class is needed,
 * add it deliberately and note where it's used.
 *
 * M1 (decisions.md #41): this file keeps its own internal Bootstrap
 * min-width steps (576/768/992/1200) unchanged — it is a self-contained
 * vendor-style ladder, not migrated to the theme's 479/767/1023/1249
 * breakpoint ladder in base.css. Its 768px step happens to align with that
 * ladder's tablet boundary; the others (576/992/1200) do not correspond to
 * anything in the theme ladder and are left as-is.
 */

/* ========================================================================
   Container

   Note: xl breakpoint uses 1250px (not Bootstrap 4 default 1140px).
   This matches the old Walltopia theme's effective content width and
   reduces excessive whitespace on wide desktops.
   ======================================================================== */

.container,
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1250px; } }

/* ========================================================================
   Row + column base
   ======================================================================== */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

[class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* ========================================================================
   Columns — only used sizes
   ======================================================================== */

/* xs (default, no min-width) */
.col-xs-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xs-8  { flex: 0 0 66.666666%; max-width: 66.666666%; }

/* sm ≥576px */
@media (min-width: 576px) {
    .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-8  { flex: 0 0 66.666666%; max-width: 66.666666%; }
}

/* md ≥768px */
@media (min-width: 768px) {
    /* col-md / col-md-auto / col-md-N: acf-blocks/columns-content.php (default
       `col-12 col-md` = equal columns; selectable widths 2,3,4,6,8,9,10,12),
       woocommerce/archive-product.php header (col-md, col-md-auto). */
    .col-md      { flex: 1 0 0%; max-width: 100%; }
    .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-md-8  { flex: 0 0 66.666666%; max-width: 66.666666%; }
    .col-md-9  { flex: 0 0 75%;        max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-12 { flex: 0 0 100%;       max-width: 100%; }

    /* Row gutter: prod's old theme gives `.row > .col*` margin-bottom 30px from
       768px up only (below that columns stack with no gap). */
    .col-md, .col-md-2, .col-md-3, .col-md-4, .col-md-6,
    .col-md-8, .col-md-9, .col-md-10, .col-md-12 { margin-bottom: 30px; }
}

/* lg ≥992px */
@media (min-width: 992px) {
    /* col-lg-4/-8: acf-blocks/home-testimonials.php (intro 8 / slider 4) */
    .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8  { flex: 0 0 66.666666%; max-width: 66.666666%; }
    .col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* ========================================================================
   Spacing utilities — only used values
   Scale: 0=0, 3=1rem, 4=1.5rem, 5=3rem (Bootstrap 4)
   ======================================================================== */

.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.p-4  { padding: 1.5rem !important; }

.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* ========================================================================
   Display utilities
   ======================================================================== */

.d-none { display: none !important; }

/* ========================================================================
   Flexbox alignment utilities
   ======================================================================== */

.align-items-center     { align-items: center !important; }
.align-items-start      { align-items: flex-start !important; }
.align-items-end        { align-items: flex-end !important; }
.align-items-stretch    { align-items: stretch !important; }
.align-items-baseline   { align-items: baseline !important; }

.justify-content-center        { justify-content: center !important; }
.justify-content-start         { justify-content: flex-start !important; }
.justify-content-end           { justify-content: flex-end !important; }
.justify-content-between       { justify-content: space-between !important; }
.justify-content-around        { justify-content: space-around !important; }

/* ========================================================================
   Text utilities
   ======================================================================== */

.text-center { text-align: center !important; }

/* ========================================================================
   Position utilities
   ======================================================================== */

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-static   { position: static !important; }

/* ========================================================================
   Font-weight utilities
   ======================================================================== */

/* Used in: woocommerce/single-product/meta.php (.fw-bold) */
.fw-bold   { font-weight: 700 !important; }
.fw-normal { font-weight: 400 !important; }

/* ========================================================================
   Text color utilities (Bootstrap subset)
   ======================================================================== */

/* Used in: inc/woocommerce.php (.text-secondary) */
.text-secondary { color: #6c757d !important; }

/* Used in: footer Custom HTML widgets (social group labels, DB content) */
.text-white { color: #fff !important; }

/* ========================================================================
   Shadow utility
   ======================================================================== */

/* Used in: woocommerce/content-product.php (product card wrapper).
   Old-theme shadow value, not the Bootstrap default. */
.shadow { box-shadow: 1px 3px 12px 0 rgba(0, 0, 0, 0.3) !important; }