/* Layout glue for Sport100.Web — not part of the design system proper, built on its tokens.
   12-column grid, 1240px max container, 24px gutters (per the design system's layout rules). */

.s100-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.s100-section {
    padding: var(--space-9) 0;
}

.s100-section--compact {
    padding: var(--space-7) 0;
}

.s100-band--dark {
    background: var(--navy-900);
    color: var(--white);
}

.s100-band--sunken {
    background: var(--surface-sunken);
}

.s100-hero {
    padding: var(--space-8) 0 var(--space-7);
}

.s100-hero__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: 112%;
    font-size: var(--type-display-size);
    line-height: var(--type-display-line);
    letter-spacing: var(--type-display-track);
    color: var(--white);
    margin: var(--space-4) 0 var(--space-3);
}

.s100-hero__tagline {
    font-size: var(--type-body-lg-size);
    line-height: var(--type-body-lg-line);
    color: var(--text-on-dark-secondary);
    max-width: var(--container-narrow);
}

.s100-eyebrow {
    display: block;
    margin-bottom: var(--space-2);
}

.s100-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--type-heading-size);
    line-height: var(--type-heading-line);
    letter-spacing: var(--type-heading-track);
    border-bottom: var(--rule-heavy) solid var(--border-strong);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
}

.s100-band--dark .s100-heading {
    border-bottom-color: var(--white);
}

.s100-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 720px) {
    .s100-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .s100-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.s100-tag-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* .s100-tag lives here (global), not in Tag.razor.css, because it's applied both by the <Tag>
   component and directly on plain <a> nav chips (e.g. the milestone-type links on Home) —
   Blazor's CSS isolation only reaches markup a component renders itself, so a scoped stylesheet
   wouldn't reach those anchors. */
.s100-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: var(--transition-control);
}

.s100-tag:hover {
    border-color: var(--navy-900);
    color: var(--text-primary);
}

.s100-tag--active {
    color: var(--navy-950);
    background: var(--teal-100);
    border-color: var(--teal-500);
}

.s100-tag__remove {
    cursor: pointer;
    opacity: 0.6;
}

.s100-empty {
    color: var(--text-muted);
    font-size: var(--type-body-sm-size);
}

.s100-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-body-sm-size);
}

.s100-table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--type-label-size);
    letter-spacing: var(--type-label-track);
    font-weight: var(--type-label-weight);
    text-transform: uppercase;
    color: var(--text-muted);
    padding: var(--space-3) var(--space-3);
    border-bottom: var(--rule-heavy) solid var(--border-strong);
}

.s100-table td {
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.s100-table tbody tr:hover {
    background: var(--surface-sunken);
}

.s100-subhead {
    font-size: var(--type-subhead-size);
    font-weight: var(--type-subhead-weight);
    color: var(--text-secondary);
    margin: 0 0 var(--space-6);
}