/* ==========================================================================
   THEME — 07 utilities
   --------------------------------------------------------------------------
   A small, deliberately incomplete set of single-purpose helpers — the ones
   the views actually use. These exist so markup stays readable without
   pulling in a utility framework.

   Everything here is one declaration per class and easy to drop.
   ========================================================================== */

/* ---- Display ----------------------------------------------------------- */
.d-none      { display: none !important; }
.d-inline    { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block     { display: block !important; }
.d-flex       { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid       { display: grid !important; }

@media (min-width: 576px)  { .d-sm-flex   { display: flex !important; } .d-sm-none { display: none !important; } }
@media (min-width: 768px)  { .d-md-flex   { display: flex !important; } .d-md-none { display: none !important; } }
@media (min-width: 992px)  {
    .d-lg-flex         { display: flex !important; }
    .d-lg-block        { display: block !important; }
    .d-lg-inline-flex  { display: inline-flex !important; }
    .d-lg-none         { display: none !important; }
}
@media (min-width: 1200px) {
    .d-xl-flex         { display: flex !important; }
    .d-xl-inline       { display: inline !important; }
    .d-xl-none         { display: none !important; }
}
@media (min-width: 1400px) { .d-xxl-flex { display: flex !important; } }

/* ---- Flex -------------------------------------------------------------- */
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1 1 0%; }
.flex-none      { flex: none; }

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

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

.self-start   { align-self: flex-start; }
.self-end     { align-self: flex-end; }
.self-center  { align-self: center; }

/* ---- Direction --------------------------------------------------------- */
.row-reverse  { flex-direction: row-reverse; }

/* ---- Gap --------------------------------------------------------------- */
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }

/* ---- Margin ------------------------------------------------------------ */
.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--sp-1) !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-3 { margin-top: var(--sp-3) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.mt-5 { margin-top: var(--sp-5) !important; }
.mt-6 { margin-top: var(--sp-6) !important; }
.mt-8 { margin-top: var(--sp-8) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--sp-1) !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-3 { margin-bottom: var(--sp-3) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.mb-5 { margin-bottom: var(--sp-5) !important; }
.mb-6 { margin-bottom: var(--sp-6) !important; }
.mb-8 { margin-bottom: var(--sp-8) !important; }

.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.mx-auto { margin-inline: auto !important; }

/* ---- Padding ----------------------------------------------------------- */
.p-0 { padding: 0 !important; }
.p-2 { padding: var(--sp-2) !important; }
.p-3 { padding: var(--sp-3) !important; }
.p-4 { padding: var(--sp-4) !important; }
.p-5 { padding: var(--sp-5) !important; }
.p-6 { padding: var(--sp-6) !important; }

.pt-4 { padding-top: var(--sp-4) !important; }
.pt-6 { padding-top: var(--sp-6) !important; }
.pb-4 { padding-bottom: var(--sp-4) !important; }
.pb-6 { padding-bottom: var(--sp-6) !important; }
.py-6 { padding-block: var(--sp-6) !important; }

/* ---- Sizing ------------------------------------------------------------ */
.w-100    { width: 100% !important; }
.h-100    { height: 100% !important; }
.min-w-0  { min-width: 0; }

/* ---- Text -------------------------------------------------------------- */
.text-center  { text-align: center !important; }
.text-start   { text-align: left !important; }
.text-end     { text-align: right !important; }
.text-muted   { color: var(--text-muted) !important; }
.text-body    { color: var(--text-body) !important; }
.text-strong  { color: var(--text-strong) !important; }
.text-brand   { color: var(--brand) !important; }
.text-success-text { color: var(--success-text) !important; }
.text-danger-text  { color: var(--danger-text) !important; }
.text-warning-text { color: var(--warning-text) !important; }
.text-info-text    { color: var(--info-text) !important; }

/* Aliases for the colour names assets/js/PTCadvert.js writes into innerHTML.
   Keeping them means that shared script keeps working without being forked. */
.text-success { color: var(--success-text) !important; }
.text-danger  { color: var(--danger-text) !important; }
.text-warning { color: var(--warning-text) !important; }
.text-info    { color: var(--info-text) !important; }
.text-primary { color: var(--brand) !important; }

.text-xs   { font-size: var(--fs-xs) !important; }
.text-sm   { font-size: var(--fs-sm) !important; }
.text-md   { font-size: var(--fs-md) !important; }
.text-lg   { font-size: var(--fs-lg) !important; }
.text-xl   { font-size: var(--fs-xl) !important; }
.text-2xl  { font-size: var(--fs-2xl) !important; }
.text-3xl  { font-size: var(--fs-3xl) !important; }

.text-uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.text-nowrap { white-space: nowrap; }
.text-balance { text-wrap: balance; }

.text-mono {
    font-family: var(--font-mono);
    font-size: .8125rem;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Multi-line clamp. Purely presentational, so long advertiser-supplied text
   never stretches a card and no JS is needed. */
.clamp-2,
.clamp-3,
.clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

/* ---- Weight ------------------------------------------------------------ */
.fw-normal  { font-weight: 400 !important; }
.fw-medium  { font-weight: 500 !important; }
.fw-semibold{ font-weight: 600 !important; }
.fw-bold    { font-weight: 700 !important; }
.fw-black   { font-weight: 800 !important; }

/* ---- Decoration -------------------------------------------------------- */
.no-underline { text-decoration: none !important; }
.underline    { text-decoration: underline; }

/* ---- Lists ------------------------------------------------------------- */
.list-plain { list-style: none; padding: 0; margin: 0; }

/* ---- Position ---------------------------------------------------------- */
.relative { position: relative; }