/* Minimal hand-written replacement for the Bootstrap grid/utility classes
   actually used in index.php, so the full Bootstrap CSS bundle is not needed. */

*, *::before, *::after { box-sizing: border-box; }

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

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}
.row > * {
    padding-right: 12px;
    padding-left: 12px;
    width: 100%;
}

/* xs tier (0px+) — unprefixed col-N classes apply at every breakpoint
   unless overridden by a wider-tier class (col-sm-/md-/lg-/xl-/xxl-),
   matching real Bootstrap behavior. They never auto-collapse to 100%. */
.col-4 { flex: 0 0 auto; width: 33.3333%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-8 { flex: 0 0 auto; width: 66.6667%; }

/* sm tier (>=576px) */
@media (min-width: 576px) {
    .col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
    .col-sm-8 { flex: 0 0 auto; width: 66.6667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

/* md tier (>=768px) */
@media (min-width: 768px) {
    .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* lg tier (>=992px) */
@media (min-width: 992px) {
    .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* xl tier (>=1200px) */
@media (min-width: 1200px) {
    .col-xl-4 { flex: 0 0 auto; width: 33.3333%; }
    .col-xl-6 { flex: 0 0 auto; width: 50%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.6667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* xxl tier (>=1400px) */
@media (min-width: 1400px) {
    .col-xxl-4 { flex: 0 0 auto; width: 33.3333%; }
    .col-xxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxl-8 { flex: 0 0 auto; width: 66.6667%; }
    .col-xxl-12 { flex: 0 0 auto; width: 100%; }
}

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-md-end { text-align: left; }
@media (min-width: 768px) {
    .text-md-end { text-align: right; }
}

.gap-3 { gap: 1rem; }

.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.px-5 { padding-right: 3rem; padding-left: 3rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-3 { margin-bottom: 1rem; }
.me-4 { margin-right: 1.5rem; }

.display-2 { font-size: 5rem; font-weight: 300; line-height: 1.2; }
.fw-bold { font-weight: 700; }

.text-decoration-none { text-decoration: none; }
.text-secondary { color: #6c757d; }

.img-fluid { max-width: 100%; height: auto; }
.rounded-circle { border-radius: 50%; }

.btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 1rem;
    border-radius: .375rem;
}

/* Inline SVG icon helpers replacing bootstrap-icons (bi-dot, bi-chevron-right) */
.bi {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.bi-dot {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.5'/%3E%3C/svg%3E");
}
.bi-chevron-right {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
