/*
 * ph- grid & layout primitives. Two-state responsive system only: mobile
 * (default, unprefixed classes) and desktop, split at a single breakpoint
 * (900px — see base.css's breakpoint comment). No sm/md/xl/2xl tiers.
 *
 * .ph-band/.ph-container generalize the full-bleed pattern first proven in
 * pages/home.css's .band/.wrap (scoped to .pasumai-home there) — same
 * 100vw/-50vw bleed technique, same overflow-x:clip fix for the vertical
 * scrollbar's width offsetting the bleed by a few px, but applied once here
 * at the site root instead of copied per page.
 */

body {
    overflow-x: clip;
}

/* ---------- Container & full-bleed band ---------- */
.ph-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.ph-band {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    box-sizing: border-box;
}

/* ---------- 12-column grid (CSS Grid, not float/negative-margin) ---------- */
.ph-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--ph-space-4);
}

.ph-row-tight {
    gap: var(--ph-space-2);
}

.ph-row-loose {
    gap: var(--ph-space-6);
}

/* Mobile (default) column spans */
.ph-col-1  { grid-column: span 1; }
.ph-col-2  { grid-column: span 2; }
.ph-col-3  { grid-column: span 3; }
.ph-col-4  { grid-column: span 4; }
.ph-col-5  { grid-column: span 5; }
.ph-col-6  { grid-column: span 6; }
.ph-col-7  { grid-column: span 7; }
.ph-col-8  { grid-column: span 8; }
.ph-col-9  { grid-column: span 9; }
.ph-col-10 { grid-column: span 10; }
.ph-col-11 { grid-column: span 11; }
.ph-col-12 { grid-column: span 12; }

/* Desktop overrides — apply a mobile span (ph-col-12 to stack, or a
   smaller one for a mobile multi-up layout) plus a ph-col-d-* to change
   the span at 900px+. */
@media (min-width: 900px) {
    .ph-col-d-1  { grid-column: span 1; }
    .ph-col-d-2  { grid-column: span 2; }
    .ph-col-d-3  { grid-column: span 3; }
    .ph-col-d-4  { grid-column: span 4; }
    .ph-col-d-5  { grid-column: span 5; }
    .ph-col-d-6  { grid-column: span 6; }
    .ph-col-d-7  { grid-column: span 7; }
    .ph-col-d-8  { grid-column: span 8; }
    .ph-col-d-9  { grid-column: span 9; }
    .ph-col-d-10 { grid-column: span 10; }
    .ph-col-d-11 { grid-column: span 11; }
    .ph-col-d-12 { grid-column: span 12; }
}

/* ---------- Layout-adjacent display utilities (mobile default / desktop) ---------- */
.ph-d-none  { display: none; }
.ph-d-block { display: block; }
.ph-d-flex  { display: flex; }
.ph-d-grid  { display: grid; }

@media (min-width: 900px) {
    .ph-d-desktop-none  { display: none; }
    .ph-d-desktop-block { display: block; }
    .ph-d-desktop-flex  { display: flex; }
    .ph-d-desktop-grid  { display: grid; }
}