/*
 * landing-grid.css
 * Minimal layout utilities replacing Bootstrap for FreightManager.Landing.
 * Only includes what is actually used in the Razor pages and components.
 */

/* ──────────────────────────────────────────────────────────────────────────
   Container
   ────────────────────────────────────────────────────────────────────────── */
.container,
.container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1.5rem;
    box-sizing: border-box;
}

@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: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* container-xl: constrained only from xl up */
@media (min-width: 1200px) { .container-xl { max-width: 1140px; } }

/* header uses container-fluid container-xl together */
.container-fluid.container-xl {
    padding-inline: 1.5rem;
}
@media (min-width: 1200px) {
    .container-fluid.container-xl {
        max-width: 1140px;
        margin-inline: auto;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Row & columns
   ────────────────────────────────────────────────────────────────────────── */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -0.75rem;
}

.row > * {
    box-sizing: border-box;
    padding-inline: 0.75rem;
    width: 100%;
    flex-shrink: 0;
}

/* gap-y utilities */
.gy-3 { row-gap: 1rem; }
.gy-4 { row-gap: 1.5rem; }
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }

/* justify row */
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.justify-items-center { justify-items: center; }

/* ── sm ≥ 576px ─────────────────────────────────────────────────────────── */
@media (min-width: 576px) {
    .col-sm-6 { width: 50%; }
}

/* ── md ≥ 768px ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .col-md-4 { width: 33.3333%; }
    .col-md-6 { width: 50%; }
}

/* ── lg ≥ 992px ─────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .col-lg-4 { width: 33.3333%; }
    .col-lg-5 { width: 41.6666%; }
    .col-lg-6 { width: 50%; }
    .col-lg-9 { width: 75%; }
}

/* ── xl ≥ 1200px ────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
    .col-xl-8  { width: 66.6666%; }
    .col-xl-10 { width: 83.3333%; }
    .d-xl-none { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Flex display utilities
   ────────────────────────────────────────────────────────────────────────── */
.d-flex { display: flex; }
.d-none { display: none !important; }

.flex-column          { flex-direction: column; }
.flex-wrap            { flex-wrap: wrap; }
.flex-row-reverse     { flex-direction: row-reverse; }
.flex-column-reverse  { flex-direction: column-reverse; }

@media (min-width: 576px) {
    .flex-sm-row { flex-direction: row; }
}

.align-items-center  { align-items: center; }
.align-items-start   { align-items: flex-start; }
.align-items-stretch { align-items: stretch; }

/* ──────────────────────────────────────────────────────────────────────────
   Spacing utilities (only values actually used)
   ────────────────────────────────────────────────────────────────────────── */
.m-3  { margin: 1rem; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-0 { margin-top: 0; }
.ms-1 { margin-inline-start: 0.25rem; }
.me-1 { margin-inline-end: 0.25rem; }
.me-2 { margin-inline-end: 0.5rem; }
.ms-2 { margin-inline-start: 0.5rem; }

.px-1 { padding-inline: 0.25rem; }
.px-2 { padding-inline: 0.5rem; }
.px-3 { padding-inline: 1rem; }
.py-2 { padding-block: 0.5rem; }
.py-5 { padding-block: 3rem; }
.pa-4 { padding: 1.5rem; }

/* ──────────────────────────────────────────────────────────────────────────
   Typography utilities
   ────────────────────────────────────────────────────────────────────────── */
.text-center    { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.text-dark      { color: var(--heading-color, #2f241d); }
.text-secondary { color: var(--muted-color, #7d726b); }
.fst-italic     { font-style: italic; }
.fw-semibold    { font-weight: 600; }
.small          { font-size: 0.875em; }
.text-decoration-none { text-decoration: none; }

/* ──────────────────────────────────────────────────────────────────────────
   Image
   ────────────────────────────────────────────────────────────────────────── */
.img-fluid { max-width: 100%; height: auto; }

/* ──────────────────────────────────────────────────────────────────────────
   Position helpers
   ────────────────────────────────────────────────────────────────────────── */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.fixed-top {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1030;
}
.top-0   { top: 0; }
.start-0 { left: 0; inset-inline-start: 0; }

.min-vh-100 { min-height: 100vh; }

/* ──────────────────────────────────────────────────────────────────────────
   Border helpers used on skip link (bg-white border rounded)
   ────────────────────────────────────────────────────────────────────────── */
.bg-white { background-color: #fff; }
.border   { border: 1px solid rgba(0, 0, 0, 0.12); }
.rounded  { border-radius: 0.375rem; }

/* ──────────────────────────────────────────────────────────────────────────
   Accessibility — visually hidden
   ────────────────────────────────────────────────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}