/* ==========================================================================
   STANDARD BREAKPOINTS
   Mobile:  max-width: 480px
   Tablet:  max-width: 768px
   Desktop: max-width: 1024px
   Wide:    max-width: 1280px
   ========================================================================== */

/* ==========================================================================
   Trecker Treck — Utility Classes
   Spacing, text, display, visibility, and other atomic utilities
   ========================================================================== */

/* ==========================================================================
   SPACING — Margin Top (.TreckerMt1 through .TreckerMt6)
   1 = xs(4px), 2 = sm(8px), 3 = md(16px), 4 = lg(24px), 5 = xl(32px), 6 = 2xl(48px)
   ========================================================================== */

.TreckerMt0 { margin-top: 0 !important; }
.TreckerMt1 { margin-top: var(--trecker-space-xs) !important; }
.TreckerMt2 { margin-top: var(--trecker-space-sm) !important; }
.TreckerMt3 { margin-top: var(--trecker-space-md) !important; }
.TreckerMt4 { margin-top: var(--trecker-space-lg) !important; }
.TreckerMt5 { margin-top: var(--trecker-space-xl) !important; }
.TreckerMt6 { margin-top: var(--trecker-space-2xl) !important; }

/* Margin Bottom */
.TreckerMb0 { margin-bottom: 0 !important; }
.TreckerMb1 { margin-bottom: var(--trecker-space-xs) !important; }
.TreckerMb2 { margin-bottom: var(--trecker-space-sm) !important; }
.TreckerMb3 { margin-bottom: var(--trecker-space-md) !important; }
.TreckerMb4 { margin-bottom: var(--trecker-space-lg) !important; }
.TreckerMb5 { margin-bottom: var(--trecker-space-xl) !important; }
.TreckerMb6 { margin-bottom: var(--trecker-space-2xl) !important; }

/* Margin Left */
.TreckerMl0 { margin-left: 0 !important; }
.TreckerMl1 { margin-left: var(--trecker-space-xs) !important; }
.TreckerMl2 { margin-left: var(--trecker-space-sm) !important; }
.TreckerMl3 { margin-left: var(--trecker-space-md) !important; }
.TreckerMl4 { margin-left: var(--trecker-space-lg) !important; }
.TreckerMl5 { margin-left: var(--trecker-space-xl) !important; }
.TreckerMl6 { margin-left: var(--trecker-space-2xl) !important; }

/* Margin Right */
.TreckerMr0 { margin-right: 0 !important; }
.TreckerMr1 { margin-right: var(--trecker-space-xs) !important; }
.TreckerMr2 { margin-right: var(--trecker-space-sm) !important; }
.TreckerMr3 { margin-right: var(--trecker-space-md) !important; }
.TreckerMr4 { margin-right: var(--trecker-space-lg) !important; }
.TreckerMr5 { margin-right: var(--trecker-space-xl) !important; }
.TreckerMr6 { margin-right: var(--trecker-space-2xl) !important; }

/* Margin Horizontal (left + right) */
.TreckerMx0 { margin-left: 0 !important; margin-right: 0 !important; }
.TreckerMx1 { margin-left: var(--trecker-space-xs) !important; margin-right: var(--trecker-space-xs) !important; }
.TreckerMx2 { margin-left: var(--trecker-space-sm) !important; margin-right: var(--trecker-space-sm) !important; }
.TreckerMx3 { margin-left: var(--trecker-space-md) !important; margin-right: var(--trecker-space-md) !important; }
.TreckerMx4 { margin-left: var(--trecker-space-lg) !important; margin-right: var(--trecker-space-lg) !important; }
.TreckerMx5 { margin-left: var(--trecker-space-xl) !important; margin-right: var(--trecker-space-xl) !important; }
.TreckerMx6 { margin-left: var(--trecker-space-2xl) !important; margin-right: var(--trecker-space-2xl) !important; }

/* Margin Vertical (top + bottom) */
.TreckerMy0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.TreckerMy1 { margin-top: var(--trecker-space-xs) !important; margin-bottom: var(--trecker-space-xs) !important; }
.TreckerMy2 { margin-top: var(--trecker-space-sm) !important; margin-bottom: var(--trecker-space-sm) !important; }
.TreckerMy3 { margin-top: var(--trecker-space-md) !important; margin-bottom: var(--trecker-space-md) !important; }
.TreckerMy4 { margin-top: var(--trecker-space-lg) !important; margin-bottom: var(--trecker-space-lg) !important; }
.TreckerMy5 { margin-top: var(--trecker-space-xl) !important; margin-bottom: var(--trecker-space-xl) !important; }
.TreckerMy6 { margin-top: var(--trecker-space-2xl) !important; margin-bottom: var(--trecker-space-2xl) !important; }

/* Margin Auto */
.TreckerMxAuto { margin-left: auto !important; margin-right: auto !important; }
.TreckerMlAuto { margin-left: auto !important; }
.TreckerMrAuto { margin-right: auto !important; }

/* ==========================================================================
   SPACING — Padding
   ========================================================================== */

.TreckerP0 { padding: 0 !important; }
.TreckerP1 { padding: var(--trecker-space-xs) !important; }
.TreckerP2 { padding: var(--trecker-space-sm) !important; }
.TreckerP3 { padding: var(--trecker-space-md) !important; }
.TreckerP4 { padding: var(--trecker-space-lg) !important; }
.TreckerP5 { padding: var(--trecker-space-xl) !important; }
.TreckerP6 { padding: var(--trecker-space-2xl) !important; }

/* Padding Top */
.TreckerPt0 { padding-top: 0 !important; }
.TreckerPt1 { padding-top: var(--trecker-space-xs) !important; }
.TreckerPt2 { padding-top: var(--trecker-space-sm) !important; }
.TreckerPt3 { padding-top: var(--trecker-space-md) !important; }
.TreckerPt4 { padding-top: var(--trecker-space-lg) !important; }
.TreckerPt5 { padding-top: var(--trecker-space-xl) !important; }
.TreckerPt6 { padding-top: var(--trecker-space-2xl) !important; }

/* Padding Bottom */
.TreckerPb0 { padding-bottom: 0 !important; }
.TreckerPb1 { padding-bottom: var(--trecker-space-xs) !important; }
.TreckerPb2 { padding-bottom: var(--trecker-space-sm) !important; }
.TreckerPb3 { padding-bottom: var(--trecker-space-md) !important; }
.TreckerPb4 { padding-bottom: var(--trecker-space-lg) !important; }
.TreckerPb5 { padding-bottom: var(--trecker-space-xl) !important; }
.TreckerPb6 { padding-bottom: var(--trecker-space-2xl) !important; }

/* Padding Left */
.TreckerPl0 { padding-left: 0 !important; }
.TreckerPl1 { padding-left: var(--trecker-space-xs) !important; }
.TreckerPl2 { padding-left: var(--trecker-space-sm) !important; }
.TreckerPl3 { padding-left: var(--trecker-space-md) !important; }
.TreckerPl4 { padding-left: var(--trecker-space-lg) !important; }
.TreckerPl5 { padding-left: var(--trecker-space-xl) !important; }
.TreckerPl6 { padding-left: var(--trecker-space-2xl) !important; }

/* Padding Right */
.TreckerPr0 { padding-right: 0 !important; }
.TreckerPr1 { padding-right: var(--trecker-space-xs) !important; }
.TreckerPr2 { padding-right: var(--trecker-space-sm) !important; }
.TreckerPr3 { padding-right: var(--trecker-space-md) !important; }
.TreckerPr4 { padding-right: var(--trecker-space-lg) !important; }
.TreckerPr5 { padding-right: var(--trecker-space-xl) !important; }
.TreckerPr6 { padding-right: var(--trecker-space-2xl) !important; }

/* Padding Horizontal */
.TreckerPx0 { padding-left: 0 !important; padding-right: 0 !important; }
.TreckerPx1 { padding-left: var(--trecker-space-xs) !important; padding-right: var(--trecker-space-xs) !important; }
.TreckerPx2 { padding-left: var(--trecker-space-sm) !important; padding-right: var(--trecker-space-sm) !important; }
.TreckerPx3 { padding-left: var(--trecker-space-md) !important; padding-right: var(--trecker-space-md) !important; }
.TreckerPx4 { padding-left: var(--trecker-space-lg) !important; padding-right: var(--trecker-space-lg) !important; }
.TreckerPx5 { padding-left: var(--trecker-space-xl) !important; padding-right: var(--trecker-space-xl) !important; }
.TreckerPx6 { padding-left: var(--trecker-space-2xl) !important; padding-right: var(--trecker-space-2xl) !important; }

/* Padding Vertical */
.TreckerPy0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.TreckerPy1 { padding-top: var(--trecker-space-xs) !important; padding-bottom: var(--trecker-space-xs) !important; }
.TreckerPy2 { padding-top: var(--trecker-space-sm) !important; padding-bottom: var(--trecker-space-sm) !important; }
.TreckerPy3 { padding-top: var(--trecker-space-md) !important; padding-bottom: var(--trecker-space-md) !important; }
.TreckerPy4 { padding-top: var(--trecker-space-lg) !important; padding-bottom: var(--trecker-space-lg) !important; }
.TreckerPy5 { padding-top: var(--trecker-space-xl) !important; padding-bottom: var(--trecker-space-xl) !important; }
.TreckerPy6 { padding-top: var(--trecker-space-2xl) !important; padding-bottom: var(--trecker-space-2xl) !important; }

/* ==========================================================================
   TEXT ALIGNMENT
   ========================================================================== */

.TreckerTextLeft { text-align: left !important; }
.TreckerTextCenter { text-align: center !important; }
.TreckerTextRight { text-align: right !important; }

/* ==========================================================================
   TEXT SIZING
   ========================================================================== */

.TreckerTextXs { font-size: var(--trecker-font-size-xs) !important; }
.TreckerTextSm { font-size: var(--trecker-font-size-sm) !important; }
.TreckerTextBase { font-size: var(--trecker-font-size-base) !important; }
.TreckerTextMd { font-size: var(--trecker-font-size-md) !important; }
.TreckerTextLg { font-size: var(--trecker-font-size-lg) !important; }
.TreckerTextXl { font-size: var(--trecker-font-size-xl) !important; }
.TreckerText2xl { font-size: var(--trecker-font-size-2xl) !important; }
.TreckerText3xl { font-size: var(--trecker-font-size-3xl) !important; }
.TreckerTextHero { font-size: var(--trecker-font-size-hero) !important; }

/* ==========================================================================
   FONT WEIGHT
   ========================================================================== */

.TreckerFontRegular { font-weight: var(--trecker-font-weight-regular) !important; }
.TreckerFontMedium { font-weight: var(--trecker-font-weight-medium) !important; }
.TreckerFontSemibold { font-weight: var(--trecker-font-weight-semibold) !important; }
.TreckerFontBold { font-weight: var(--trecker-font-weight-bold) !important; }

/* ==========================================================================
   TEXT COLORS
   ========================================================================== */

.TreckerTextPrimary { color: var(--trecker-text-primary) !important; }
.TreckerTextSecondary { color: var(--trecker-text-secondary) !important; }
.TreckerTextTertiary { color: var(--trecker-text-tertiary) !important; }
.TreckerTextSuccess { color: var(--trecker-success) !important; }
.TreckerTextWarning { color: var(--trecker-warning) !important; }
.TreckerTextError { color: var(--trecker-error) !important; }
.TreckerTextInfo { color: var(--trecker-info) !important; }
.TreckerTextAccent { color: var(--trecker-accent) !important; }
.TreckerTextLink { color: var(--trecker-text-link) !important; }
.TreckerTextInverse { color: var(--trecker-text-inverse) !important; }

/* ==========================================================================
   BACKGROUND COLORS
   ========================================================================== */

.TreckerBgPrimary { background-color: var(--trecker-bg-primary) !important; }
.TreckerBgSecondary { background-color: var(--trecker-bg-secondary) !important; }
.TreckerBgTertiary { background-color: var(--trecker-bg-tertiary) !important; }
.TreckerBgCard { background-color: var(--trecker-bg-card) !important; }
.TreckerBgAccentLight { background-color: var(--trecker-accent-light) !important; }
.TreckerBgSuccessLight { background-color: var(--trecker-success-bg) !important; }
.TreckerBgWarningLight { background-color: var(--trecker-warning-bg) !important; }
.TreckerBgErrorLight { background-color: var(--trecker-error-bg) !important; }
.TreckerBgInfoLight { background-color: var(--trecker-info-bg) !important; }

/* ==========================================================================
   DISPLAY
   ========================================================================== */

.TreckerHidden { display: none !important; }
.TreckerBlock { display: block !important; }
.TreckerInline { display: inline !important; }
.TreckerInlineBlock { display: inline-block !important; }
.TreckerInlineFlex { display: inline-flex !important; }

/* ==========================================================================
   VISIBILITY — RESPONSIVE
   ========================================================================== */

/* Hidden on mobile (< 768px) */
@media (max-width: 767px) {
    .TreckerHiddenMobile { display: none !important; }
}

/* Hidden on tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .TreckerHiddenTablet { display: none !important; }
}

/* Hidden on desktop (>= 1024px) */
@media (min-width: 1024px) {
    .TreckerHiddenDesktop { display: none !important; }
}

/* Show only on specific breakpoints */
@media (min-width: 768px) {
    .TreckerShowMobileOnly { display: none !important; }
}

@media (max-width: 767px), (min-width: 1024px) {
    .TreckerShowTabletOnly { display: none !important; }
}

@media (max-width: 1023px) {
    .TreckerShowDesktopOnly { display: none !important; }
}

/* ==========================================================================
   OVERFLOW
   ========================================================================== */

.TreckerOverflowHidden { overflow: hidden !important; }
.TreckerOverflowAuto { overflow: auto !important; }
.TreckerOverflowScroll { overflow: scroll !important; }
.TreckerOverflowXAuto { overflow-x: auto !important; }
.TreckerOverflowYAuto { overflow-y: auto !important; }

/* ==========================================================================
   WIDTH
   ========================================================================== */

.TreckerWFull { width: 100% !important; }
.TreckerWAuto { width: auto !important; }
.TreckerW50 { width: 50% !important; }
.TreckerMaxWFull { max-width: 100% !important; }
.TreckerMinW0 { min-width: 0 !important; }

/* ==========================================================================
   HEIGHT
   ========================================================================== */

.TreckerHFull { height: 100% !important; }
.TreckerHAuto { height: auto !important; }
.TreckerHScreen { height: 100vh !important; height: 100dvh !important; }
.TreckerMinHScreen { min-height: 100vh !important; min-height: 100dvh !important; }

/* ==========================================================================
   CURSOR
   ========================================================================== */

.TreckerCursorPointer { cursor: pointer !important; }
.TreckerCursorDefault { cursor: default !important; }
.TreckerCursorNotAllowed { cursor: not-allowed !important; }
.TreckerCursorGrab { cursor: grab !important; }

/* ==========================================================================
   SCREEN READER ONLY
   ========================================================================== */

.TreckerSrOnly {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* ==========================================================================
   TEXT UTILITIES
   ========================================================================== */

.TreckerTruncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.TreckerNoWrap {
    white-space: nowrap !important;
}

.TreckerWordBreak {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.TreckerUppercase {
    text-transform: uppercase !important;
    letter-spacing: var(--trecker-letter-spacing-wide) !important;
}

.TreckerCapitalize {
    text-transform: capitalize !important;
}

.TreckerLineClamp2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}

.TreckerLineClamp3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}

/* ==========================================================================
   BORDER UTILITIES
   ========================================================================== */

.TreckerBorder { border: 1px solid var(--trecker-border) !important; }
.TreckerBorderTop { border-top: 1px solid var(--trecker-border) !important; }
.TreckerBorderBottom { border-bottom: 1px solid var(--trecker-border) !important; }
.TreckerBorderNone { border: none !important; }

.TreckerRounded { border-radius: var(--trecker-border-radius-md) !important; }
.TreckerRoundedSm { border-radius: var(--trecker-border-radius-sm) !important; }
.TreckerRoundedLg { border-radius: var(--trecker-border-radius-lg) !important; }
.TreckerRoundedXl { border-radius: var(--trecker-border-radius-xl) !important; }
.TreckerRoundedFull { border-radius: var(--trecker-border-radius-full) !important; }

/* ==========================================================================
   SHADOW UTILITIES
   ========================================================================== */

.TreckerShadowNone { box-shadow: none !important; }
.TreckerShadowSm { box-shadow: var(--trecker-shadow-sm) !important; }
.TreckerShadowMd { box-shadow: var(--trecker-shadow-md) !important; }
.TreckerShadowLg { box-shadow: var(--trecker-shadow-lg) !important; }
.TreckerShadowXl { box-shadow: var(--trecker-shadow-xl) !important; }

/* ==========================================================================
   POSITION UTILITIES
   ========================================================================== */

.TreckerRelative { position: relative !important; }
.TreckerAbsolute { position: absolute !important; }
.TreckerFixed { position: fixed !important; }
.TreckerSticky { position: sticky !important; top: 0; }

/* ==========================================================================
   OPACITY
   ========================================================================== */

.TreckerOpacity0 { opacity: 0 !important; }
.TreckerOpacity25 { opacity: 0.25 !important; }
.TreckerOpacity50 { opacity: 0.5 !important; }
.TreckerOpacity75 { opacity: 0.75 !important; }
.TreckerOpacity100 { opacity: 1 !important; }

/* ==========================================================================
   INTERACTION
   ========================================================================== */

.TreckerPointerEventsNone { pointer-events: none !important; }
.TreckerPointerEventsAuto { pointer-events: auto !important; }
.TreckerUserSelectNone { user-select: none !important; -webkit-user-select: none !important; }

/* ==========================================================================
   GAP UTILITIES
   ========================================================================== */

.TreckerGap1 { gap: var(--trecker-space-xs) !important; }
.TreckerGap2 { gap: var(--trecker-space-sm) !important; }
.TreckerGap3 { gap: var(--trecker-space-md) !important; }
.TreckerGap4 { gap: var(--trecker-space-lg) !important; }
.TreckerGap5 { gap: var(--trecker-space-xl) !important; }
.TreckerGap6 { gap: var(--trecker-space-2xl) !important; }

/* ==========================================================================
   HOME PAGE STYLES - MODERN REDESIGN
   ========================================================================== */

.TreckerHomeMidContent {
    background-color: var(--trecker-bg-primary);
}

/* Hero Event Card */
.TreckerHomeHeroEvent {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    border: 2px solid var(--trecker-accent);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(255, 138, 61, 0.08) 0%,
        rgba(255, 76, 30, 0.04) 100%);
}

.TreckerHomeHeroEventBg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right,
        rgba(255, 138, 61, 0.1) 0%,
        transparent 60%);
    pointer-events: none;
}

.TreckerHomeHeroEventContent {
    position: relative;
    z-index: 1;
    padding: var(--trecker-space-2xl);
}

.TreckerHomeHeroEventLabel {
    display: inline-block;
    background-color: rgba(255, 138, 61, 0.15);
    color: var(--trecker-accent);
    padding: 6px 14px;
    border-radius: var(--trecker-border-radius-full);
    font-size: var(--trecker-font-size-xs);
    font-weight: var(--trecker-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--trecker-letter-spacing-wide);
}

.TreckerHomeHeroEventInfo {
    display: flex;
    flex-direction: column;
    gap: var(--trecker-space-sm);
    font-size: var(--trecker-font-size-sm);
    color: var(--trecker-text-secondary);
}

.TreckerHomeHeroCTA {
    display: flex;
    justify-content: center;
    gap: var(--trecker-space-md);
    flex-wrap: wrap;
}

/* Quick Links Section */
.TreckerHomeQuickLinksSection {
    padding: var(--trecker-space-3xl) var(--trecker-space-lg);
    background: linear-gradient(180deg,
        var(--trecker-bg-primary) 0%,
        var(--trecker-bg-secondary) 100%);
}

.TreckerHomeQuickLinksGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--trecker-space-lg);
}

.TreckerHomeQuickLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--trecker-space-md);
    padding: var(--trecker-space-xl);
    background-color: var(--trecker-bg-card);
    border: 1px solid var(--trecker-border);
    border-radius: var(--trecker-border-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all var(--trecker-transition-normal);
    cursor: pointer;
}

.TreckerHomeQuickLink:hover {
    border-color: var(--trecker-accent);
    box-shadow: 0 8px 16px rgba(255, 138, 61, 0.15);
    transform: translateY(-4px);
}

.TreckerHomeQuickLinkIcon {
    font-size: 2.5rem;
    line-height: 1;
}

.TreckerHomeQuickLink h3 {
    margin: 0;
    color: var(--trecker-text-primary);
    font-size: var(--trecker-font-size-md);
    font-weight: var(--trecker-font-weight-semibold);
    text-align: center;
}

.TreckerHomeQuickLink p {
    margin: 0;
    color: var(--trecker-text-secondary);
    font-size: var(--trecker-font-size-sm);
    text-align: center;
}

/* Sponsor Section */
.TreckerHomeSponsorSection {
    padding: var(--trecker-space-3xl) var(--trecker-space-lg);
    background-color: var(--trecker-bg-secondary);
    border-top: 1px solid var(--trecker-border);
    border-bottom: 1px solid var(--trecker-border);
}

/* Event Info Section */
.TreckerHomeEventInfoSection {
    padding: var(--trecker-space-3xl) var(--trecker-space-lg) var(--trecker-space-4xl);
    background-color: var(--trecker-bg-primary);
}

.TreckerHomeEventInfoGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--trecker-space-lg);
}

.TreckerHomeEventInfoCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--trecker-space-2xl);
    background-color: var(--trecker-bg-card);
    border: 1px solid var(--trecker-border);
    border-radius: var(--trecker-border-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all var(--trecker-transition-normal);
    cursor: pointer;
}

.TreckerHomeEventInfoCard:hover {
    border-color: var(--trecker-accent);
    box-shadow: 0 8px 16px rgba(255, 138, 61, 0.15);
    transform: translateY(-4px);
}

.TreckerHomeEventInfoCard h3 {
    margin: 0 0 var(--trecker-space-sm);
    font-size: var(--trecker-font-size-lg);
    font-weight: var(--trecker-font-weight-semibold);
    text-align: center;
}

.TreckerHomeEventInfoCard p {
    margin: 0;
    color: var(--trecker-text-secondary);
    font-size: var(--trecker-font-size-sm);
    text-align: center;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .TreckerHomeQuickLinksGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .TreckerHomeQuickLinksSection,
    .TreckerHomeSponsorSection,
    .TreckerHomeEventInfoSection {
        padding: var(--trecker-space-2xl) var(--trecker-space-md);
    }

    .TreckerHomeQuickLinksGrid {
        grid-template-columns: 1fr;
        gap: var(--trecker-space-md);
    }

    .TreckerHomeQuickLink {
        padding: var(--trecker-space-lg);
    }

    .TreckerHomeQuickLinkIcon {
        font-size: 2rem;
    }

    .TreckerHomeHeroEventContent {
        padding: var(--trecker-space-lg);
    }

    .TreckerHomeEventInfoGrid {
        grid-template-columns: 1fr;
        gap: var(--trecker-space-md);
    }

    .TreckerHomeEventInfoSection {
        padding-bottom: var(--trecker-space-3xl);
    }

    .TreckerHomeHeroCTA {
        gap: var(--trecker-space-sm);
    }

    .TreckerHomeHeroCTA .TreckerButton {
        width: 100%;
        max-width: 200px;
    }
}

/* ==========================================================================
   COMMON LAYOUT PATTERNS (replaces inline styles across admin pages)
   ========================================================================== */

/* Common layout patterns used inline across admin pages */
.TreckerFlexRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--trecker-space-md);
}

.TreckerFlexBetween {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--trecker-space-md);
}

.TreckerFlexCol {
    display: flex;
    flex-direction: column;
    gap: var(--trecker-space-md);
}

.TreckerFormGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: var(--trecker-space-md);
}

.TreckerFormGrid--narrow {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.TreckerFormGrid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* Modal overlay - currently inline-styled in 5+ admin pages */
.TreckerModalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--trecker-space-md);
}

.TreckerModalContent {
    background: var(--trecker-bg-card);
    border-radius: var(--trecker-radius-lg);
    padding: var(--trecker-space-xl);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.TreckerModalContent--wide {
    max-width: 800px;
}

.TreckerModalContent--narrow {
    max-width: 400px;
}

/* Action button groups */
.TreckerActionGroup {
    display: flex;
    flex-wrap: wrap;
    gap: var(--trecker-space-xs);
    align-items: center;
}

/* Status indicator with text (replaces color-only dots) */
.TreckerStatusDot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--trecker-font-sm);
}

.TreckerStatusDot::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.TreckerStatusDot--success::before { background: var(--trecker-success); }
.TreckerStatusDot--danger::before { background: var(--trecker-error); }
.TreckerStatusDot--warning::before { background: var(--trecker-warning); }
.TreckerStatusDot--info::before { background: var(--trecker-info); }
.TreckerStatusDot--neutral::before { background: var(--trecker-text-tertiary); }

/* Disabled overlay for cards/sections */
.TreckerDisabled {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.TreckerDisabled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--trecker-bg-primary);
    opacity: 0.3;
    border-radius: inherit;
}