/* =============================================
   Teens Pulse Theme - Utility Classes
   ============================================= */

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

/* --- Flexbox --- */
.tp-flex-row { flex-direction: row !important; }
.tp-flex-col { flex-direction: column !important; }
.tp-flex-wrap { flex-wrap: wrap !important; }
.tp-flex-nowrap { flex-wrap: nowrap !important; }
.tp-flex-center { align-items: center !important; justify-content: center !important; }
.tp-flex-between { justify-content: space-between !important; }
.tp-flex-start { justify-content: flex-start !important; }
.tp-flex-end { justify-content: flex-end !important; }
.tp-align-center { align-items: center !important; }
.tp-align-start { align-items: flex-start !important; }
.tp-align-end { align-items: flex-end !important; }
.tp-gap-sm { gap: 8px !important; }
.tp-gap-md { gap: 16px !important; }
.tp-gap-lg { gap: 24px !important; }
.tp-gap-xl { gap: 40px !important; }
.tp-flex-1 { flex: 1 !important; }

/* --- Grid --- */
.tp-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.tp-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.tp-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* --- Text --- */
.tp-text-left { text-align: left !important; }
.tp-text-center { text-align: center !important; }
.tp-text-right { text-align: right !important; }
.tp-text-primary { color: var(--tp-primary) !important; }
.tp-text-secondary { color: var(--tp-secondary) !important; }
.tp-text-accent { color: var(--tp-accent) !important; }
.tp-text-highlight { color: var(--tp-highlight) !important; }
.tp-text-navy { color: var(--tp-navy) !important; }
.tp-text-white { color: #ffffff !important; }
.tp-text-muted { color: var(--tp-text-light) !important; }
.tp-text-sm { font-size: 0.85rem !important; }
.tp-text-base { font-size: 1rem !important; }
.tp-text-lg { font-size: 1.15rem !important; }
.tp-text-xl { font-size: 1.3rem !important; }
.tp-text-2xl { font-size: 1.6rem !important; }
.tp-text-3xl { font-size: 2rem !important; }
.tp-text-bold { font-weight: 700 !important; }
.tp-text-semibold { font-weight: 600 !important; }
.tp-text-medium { font-weight: 500 !important; }
.tp-text-uppercase { text-transform: uppercase !important; }
.tp-text-capitalize { text-transform: capitalize !important; }
.tp-text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.tp-text-line-clamp-2 { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.tp-text-line-clamp-3 { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }

/* --- Spacing --- */
.tp-m-0 { margin: 0 !important; }
.tp-m-sm { margin: 8px !important; }
.tp-m-md { margin: 16px !important; }
.tp-m-lg { margin: 24px !important; }
.tp-m-xl { margin: 40px !important; }
.tp-mt-0 { margin-top: 0 !important; }
.tp-mt-sm { margin-top: 8px !important; }
.tp-mt-md { margin-top: 16px !important; }
.tp-mt-lg { margin-top: 24px !important; }
.tp-mt-xl { margin-top: 40px !important; }
.tp-mb-0 { margin-bottom: 0 !important; }
.tp-mb-sm { margin-bottom: 8px !important; }
.tp-mb-md { margin-bottom: 16px !important; }
.tp-mb-lg { margin-bottom: 24px !important; }
.tp-mb-xl { margin-bottom: 40px !important; }
.tp-ml-auto { margin-left: auto !important; }
.tp-mr-auto { margin-right: auto !important; }
.tp-mx-auto { margin-left: auto !important; margin-right: auto !important; }

.tp-p-0 { padding: 0 !important; }
.tp-p-sm { padding: 8px !important; }
.tp-p-md { padding: 16px !important; }
.tp-p-lg { padding: 24px !important; }
.tp-p-xl { padding: 40px !important; }
.tp-pt-0 { padding-top: 0 !important; }
.tp-pt-sm { padding-top: 8px !important; }
.tp-pt-md { padding-top: 16px !important; }
.tp-pt-lg { padding-top: 24px !important; }
.tp-pt-xl { padding-top: 40px !important; }
.tp-pb-0 { padding-bottom: 0 !important; }
.tp-pb-sm { padding-bottom: 8px !important; }
.tp-pb-md { padding-bottom: 16px !important; }
.tp-pb-lg { padding-bottom: 24px !important; }
.tp-pb-xl { padding-bottom: 40px !important; }

/* --- Background --- */
.tp-bg-white { background: var(--tp-card) !important; }
.tp-bg-light { background: var(--tp-bg) !important; }
.tp-bg-primary { background: var(--tp-primary) !important; }
.tp-bg-secondary { background: var(--tp-secondary) !important; }
.tp-bg-accent { background: var(--tp-accent) !important; }
.tp-bg-navy { background: var(--tp-navy) !important; }
.tp-bg-gradient { background: linear-gradient(135deg, var(--tp-primary), var(--tp-secondary)) !important; }

/* --- Border --- */
.tp-border { border: 1px solid var(--tp-border) !important; }
.tp-border-top { border-top: 1px solid var(--tp-border) !important; }
.tp-border-bottom { border-bottom: 1px solid var(--tp-border) !important; }
.tp-border-primary { border-color: var(--tp-primary) !important; }
.tp-rounded { border-radius: var(--tp-radius) !important; }
.tp-rounded-sm { border-radius: var(--tp-radius-sm) !important; }
.tp-rounded-pill { border-radius: var(--tp-radius-pill) !important; }
.tp-rounded-full { border-radius: 50% !important; }
.tp-shadow { box-shadow: var(--tp-shadow) !important; }
.tp-shadow-lg { box-shadow: var(--tp-shadow-hover) !important; }
.tp-shadow-none { box-shadow: none !important; }

/* --- Width / Height --- */
.tp-w-full { width: 100% !important; }
.tp-h-full { height: 100% !important; }
.tp-max-w-sm { max-width: 480px !important; }
.tp-max-w-md { max-width: 768px !important; }
.tp-max-w-lg { max-width: 900px !important; }
.tp-max-w-xl { max-width: 1200px !important; }

/* --- Position --- */
.tp-relative { position: relative !important; }
.tp-absolute { position: absolute !important; }
.tp-sticky { position: sticky !important; }

/* --- Overflow --- */
.tp-overflow-hidden { overflow: hidden !important; }
.tp-overflow-auto { overflow: auto !important; }

/* --- Opacity --- */
.tp-opacity-50 { opacity: 0.5 !important; }
.tp-opacity-75 { opacity: 0.75 !important; }
.tp-opacity-100 { opacity: 1 !important; }

/* --- Cursor --- */
.tp-cursor-pointer { cursor: pointer !important; }

/* --- Transition --- */
.tp-transition { transition: all var(--tp-transition) !important; }

/* --- Responsive Utilities --- */
@media (max-width: 768px) {
    .tp-d-md-none { display: none !important; }
    .tp-d-md-block { display: block !important; }
    .tp-d-md-flex { display: flex !important; }
    .tp-grid-md-1 { grid-template-columns: 1fr !important; }
    .tp-text-md-center { text-align: center !important; }
    .tp-text-md-left { text-align: left !important; }
    .tp-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .tp-d-md-show { display: block !important; }
    .tp-hide-desktop { display: none !important; }
}

@media (max-width: 480px) {
    .tp-d-sm-none { display: none !important; }
    .tp-grid-sm-1 { grid-template-columns: 1fr !important; }
}

/* --- Screen Reader Only --- */
.tp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Clearfix --- */
.tp-clearfix::after {
    content: '';
    display: table;
    clear: both;
}