/**
 * HYROX - Station Templates CSS
 * Covers all classes used in /templates/stations/*.php that are not
 * defined in hyrox.css or hyrox-missing.css.
 *
 * Scoped under .entry-content to match hyrox-missing.css convention.
 * Uses CSS custom properties from .hx-app (first 133 lines of hyrox.css).
 *
 * @package Hyrox
 * @since 1.0.0
 */

/* ==========================================================================
   DESIGN TOKEN FALLBACKS
   Tokens are defined on .hx-app. These rules live outside .hx-app so we
   re-declare the most-used values as local fallbacks where needed.
   ========================================================================== */

/* ==========================================================================
   1. SPECS CARD  (used on: skierg, sled-push, sled-pull, burpee)
   .hx-specs-card is already defined in hyrox-missing.css as a grid.
   These are the child elements that were missing.
   ========================================================================== */

.entry-content .hx-specs-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.entry-content .hx-specs-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6C757D;
}

.entry-content .hx-specs-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1.3;
}

/* ==========================================================================
   2. SECTION INTRO  (used on: all station detail pages)
   Sits between the h2 heading and the main table/content block.
   ========================================================================== */

.entry-content .hx-section-intro {
    color: #495057;
    font-size: 0.9375rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
    max-width: 720px;
}

/* ==========================================================================
   3. TABLE WRAPPER + TABLE NOTE  (used on: all station detail pages)
   hx-table and hx-table-wrap already defined — these two were missing.
   ========================================================================== */

.entry-content .hx-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.25rem 0;
    border-radius: 6px;
    border: 1px solid #E9ECEF;
}

/* Ensure table inside wrapper fills it and inherits correct styles */
.entry-content .hx-table-wrapper .hx-table {
    margin: 0;
    border-radius: 0;
}

.entry-content .hx-table-note {
    font-size: 0.8125rem;
    color: #6C757D;
    line-height: 1.55;
    margin-top: 0.875rem;
    padding: 0.75rem 1rem;
    background: #F8F9FA;
    border-left: 3px solid #DEE2E6;
    border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   4. BADGE VARIANTS  (record badge on skierg; neutral/hard on index)
   ========================================================================== */

/* Race record — neon yellow tint, dark text */
.entry-content .hx-badge-record {
    background: rgba(232, 255, 0, 0.18);
    color: #4A5200;
    border: 1px solid rgba(232, 255, 0, 0.5);
}

/* Neutral — used on index page for "All divisions" */
.entry-content .hx-badge-neutral {
    background: #F1F3F5;
    color: #495057;
}

/* Hard — used on index page for "Weight-based" */
.entry-content .hx-badge-hard {
    background: rgba(255, 51, 102, 0.08);
    color: #C0002B;
}

/* ==========================================================================
   5. MISTAKES LIST  (used on: skierg, sled-push, sled-pull, burpee)
   ========================================================================== */

.entry-content .hx-mistakes-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.entry-content .hx-mistake-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid #E9ECEF;
}

.entry-content .hx-mistake-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.entry-content .hx-mistake-item p {
    margin: 0.375rem 0 0;
    color: #495057;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.entry-content .hx-mistake-label {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #1A1A1A;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Accent left-bar on the label for visual weight */
.entry-content .hx-mistake-label::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    background: #FF3366;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ==========================================================================
   6. TRAINING PLAN  (used on: skierg, sled-push, sled-pull, burpee)
   4-week accordion-style plan, no JS required.
   ========================================================================== */

.entry-content .hx-training-plan {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.entry-content .hx-training-week {
    border: 1px solid #E9ECEF;
    border-radius: 10px;
    overflow: hidden;
}

.entry-content .hx-training-week-header {
    background: #1A1A1A;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.875rem 1.25rem;
    letter-spacing: 0.01em;
    /* Accent stripe */
    border-left: 4px solid #E8FF00;
}

.entry-content .hx-training-sessions {
    list-style: none;
    margin: 0;
    padding: 0.875rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    background: #FFFFFF;
}

.entry-content .hx-training-sessions li {
    font-size: 0.9rem;
    color: #333333;
    line-height: 1.6;
    padding-left: 1.125rem;
    position: relative;
}

/* Custom bullet — small neon dot */
.entry-content .hx-training-sessions li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: #E8FF00;
    border-radius: 50%;
    border: 1px solid #B8CC00;
}

/* ==========================================================================
   7. EXERCISE LIST  (used on: burpee-broad-jump)
   ========================================================================== */

.entry-content .hx-exercise-list {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.entry-content .hx-exercise-list li {
    font-size: 0.9375rem;
    color: #333333;
    line-height: 1.6;
    padding: 0.625rem 1rem 0.625rem 2.25rem;
    background: #F8F9FA;
    border-radius: 6px;
    position: relative;
    border-left: 3px solid #E8FF00;
}

.entry-content .hx-exercise-list li strong {
    color: #1A1A1A;
}

/* ==========================================================================
   8. STATS BAR  (used on: rowing, wall-balls, sandbag-lunges, farmers-carry)
   Horizontal strip of quick-stat items below the hero heading.
   ========================================================================== */

.entry-content .hx-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: #1A1A1A;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 2rem;
}

.entry-content .hx-stats-bar .hx-stat-item {
    flex: 1 1 auto;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.25rem;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    gap: 0.25rem;
}

.entry-content .hx-stats-bar .hx-stat-item:last-child {
    border-right: none;
}

.entry-content .hx-stats-bar .hx-stat-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}

.entry-content .hx-stats-bar .hx-stat-value {
    display: block;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.entry-content .hx-page-header-dark .hx-stats-bar .hx-stat-value,
.hx-page-header-dark .hx-stats-bar .hx-stat-value {
    color: #E8FF00;
}

@media (max-width: 640px) {
    .entry-content .hx-stats-bar {
        border-radius: 8px;
    }

    .entry-content .hx-stats-bar .hx-stat-item {
        flex-basis: 50%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Clear border-right on every other item */
    .entry-content .hx-stats-bar .hx-stat-item:nth-child(even) {
        border-right: none;
    }

    /* Last row — remove bottom border */
    .entry-content .hx-stats-bar .hx-stat-item:nth-last-child(-n+2):not(:nth-child(even) ~ *),
    .entry-content .hx-stats-bar .hx-stat-item:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   9. PROSE  (used on: rowing, wall-balls, sandbag-lunges, farmers-carry)
   Readable long-form text block; replaces .hx-content-body in newer pages.
   ========================================================================== */

.entry-content .hx-prose {
    color: #333333;
    font-size: 0.9375rem;
    line-height: 1.75;
    max-width: 760px;
}

.entry-content .hx-prose p {
    margin-bottom: 1rem;
}

.entry-content .hx-prose p:last-child {
    margin-bottom: 0;
}

.entry-content .hx-prose strong {
    color: #1A1A1A;
    font-weight: 700;
}

/* ==========================================================================
   10. INFO GRID + INFO CARD  (used on: rowing, wall-balls, sandbag, farmers)
   Responsive card grid for technique cues and mistake callouts.
   ========================================================================== */

.entry-content .hx-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.entry-content .hx-info-card {
    background: #FFFFFF;
    border: 1px solid #E9ECEF;
    border-radius: 10px;
    padding: 1.25rem 1.25rem 1.125rem;
    position: relative;
    overflow: hidden;
}

/* Top accent stripe on all cards */
.entry-content .hx-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #E8FF00;
}

.entry-content .hx-info-card h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.entry-content .hx-info-card p {
    font-size: 0.875rem;
    color: #495057;
    line-height: 1.65;
    margin: 0;
}

/* Warning variant — red accent stripe, warm background tint */
.entry-content .hx-info-card-warning {
    background: #FFFAF9;
    border-color: #FFD6CC;
}

.entry-content .hx-info-card-warning::before {
    background: #FF3366;
}

.entry-content .hx-info-card-warning h3 {
    color: #C0002B;
}

@media (max-width: 640px) {
    .entry-content .hx-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   11. TRAINING GRID + TRAINING BLOCK
   (used on: rowing, wall-balls, sandbag-lunges, farmers-carry)
   Replaces the hx-training-plan/week pattern on newer templates.
   ========================================================================== */

.entry-content .hx-training-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.entry-content .hx-training-block {
    background: #FFFFFF;
    border: 1px solid #E9ECEF;
    border-radius: 10px;
    overflow: hidden;
}

.entry-content .hx-training-block-header {
    background: #111111;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid #E8FF00;
    line-height: 1.4;
}

.entry-content .hx-training-block ul {
    list-style: none;
    margin: 0;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.entry-content .hx-training-block ul li {
    font-size: 0.875rem;
    color: #333333;
    line-height: 1.6;
    padding-left: 1rem;
    position: relative;
}

.entry-content .hx-training-block ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    background: #E8FF00;
    border-radius: 50%;
    border: 1px solid #B8CC00;
}

@media (max-width: 640px) {
    .entry-content .hx-training-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   12. STATIONS INDEX GRID + STATION CARD CHILDREN
   (used on: stations/index.php)
   ========================================================================== */

.entry-content .hx-stations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}

/* Station card — base card is defined in hyrox.css section 18.
   These are the child elements and the coming-soon variant. */

.entry-content .hx-station-card {
    background: #FFFFFF;
    border: 1px solid #E9ECEF;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.entry-content a.hx-station-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    color: inherit;
    text-decoration: none;
}

/* Number badge in the top-left corner */
.entry-content .hx-station-card-number {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 36px;
    height: 36px;
    background: #E8FF00;
    color: #1A1A1A;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: -0.02em;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.entry-content .hx-station-card-body {
    padding: 1.125rem 1.125rem 1.125rem 3.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.entry-content .hx-station-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.25;
}

.entry-content .hx-station-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

.entry-content .hx-station-card-desc {
    font-size: 0.8375rem;
    color: #6C757D;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

/* "Full guide →" link text */
.entry-content .hx-station-card-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1A1A1A;
    margin-top: 0.25rem;
    text-decoration: none;
    gap: 0.25rem;
    transition: gap 150ms ease;
}

.entry-content a.hx-station-card:hover .hx-station-card-link {
    gap: 0.5rem;
}

/* Coming-soon variant — muted, no hover lift, no link */
.entry-content .hx-station-card-coming-soon {
    opacity: 0.58;
    pointer-events: none;
    cursor: default;
}

.entry-content .hx-station-card-coming-soon .hx-station-card-number {
    background: #DEE2E6;
    color: #6C757D;
}

.entry-content .hx-station-card-coming {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ADB5BD;
    font-style: italic;
    margin-top: 0.25rem;
}

@media (max-width: 640px) {
    .entry-content .hx-stations-grid {
        grid-template-columns: 1fr;
    }

    .entry-content .hx-station-card-coming-soon {
        display: none;
    }
}

/* ==========================================================================
   13. ORDERED LIST  (used on: stations/index.php  station sequence)
   ========================================================================== */

.entry-content .hx-ordered-list {
    list-style: none;
    counter-reset: hx-step;
    padding: 0;
    margin: 1rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.entry-content .hx-ordered-list li {
    counter-increment: hx-step;
    font-size: 0.9375rem;
    color: #333333;
    line-height: 1.6;
    padding: 0.625rem 1rem 0.625rem 3rem;
    background: #F8F9FA;
    border-radius: 8px;
    position: relative;
    border-left: 3px solid #E9ECEF;
}

.entry-content .hx-ordered-list li::before {
    content: counter(hx-step, decimal-leading-zero);
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6875rem;
    font-weight: 900;
    color: #ADB5BD;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   14. TEXT UTILITY  (used on: index table colspan cells)
   hx-text-center is referenced in hyrox-missing.css but only as a utility.
   Ensure it works inside .entry-content without .hx-app wrapper.
   ========================================================================== */

.entry-content .hx-text-center {
    text-align: center !important;
}

/* ==========================================================================
   15. CONTENT SECTION  (used on: rowing, wall-balls, sandbag, farmers)
   Spacing and typography wrapper. Already partially in hyrox-missing.css
   but without the h2/h3 sub-rules for the scoped (non-hx-app) context.
   ========================================================================== */

.entry-content .hx-content-section {
    margin: 2.5rem 0;
}

.entry-content .hx-content-section:first-of-type {
    margin-top: 1.5rem;
}

/* ==========================================================================
   16. SECTION  (used on: skierg, sled-push, sled-pull, burpee)
   Spacing wrapper for older-format station pages.
   Matches the consolidated rhythm from hyrox.css (.hx-app .hx-section).
   ========================================================================== */

.entry-content .hx-section {
    margin: 0 0 2.5rem;
    padding: 0;
}

.entry-content .hx-section:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .entry-content .hx-section {
        margin-bottom: 2rem;
    }
}

/* ==========================================================================
   RESPONSIVE OVERRIDES — breakpoint 768px
   ========================================================================== */

@media (max-width: 768px) {
    .entry-content .hx-specs-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .entry-content .hx-training-plan {
        gap: 0.625rem;
    }
}

@media (max-width: 480px) {
    .entry-content .hx-specs-card {
        grid-template-columns: 1fr;
    }

    .entry-content .hx-info-grid {
        gap: 0.75rem;
    }

    .entry-content .hx-training-grid {
        gap: 0.75rem;
    }
}