/*
 * Mesozoic Haven component theme bridge + layout presets
 * -------------------------------------------------------
 * This stylesheet loads after site.css and components.css.
 *
 * Purpose:
 * 1. Make the ORIGINAL shared cards/widgets use the same semantic theme tokens
 *    as newer specialized widgets.
 * 2. Provide easy 2 / 3 / 4 / max-width presets for repeatable card widgets.
 * 3. Provide compact / standard / spacious timeline presets.
 *
 * IMPORTANT:
 * Recolor components by changing the semantic variables in components.css.
 * Avoid hard-coding colors inside individual page widgets.
 */

/* ========================================================================== 
   1. Theme bridge for older shared components
   ========================================================================== */

/* Standard cards and card-style column children now use shared component tokens. */
.mh-card,
.mh-columns--cards > * {
    border-color: var(--mh-component-border);
    background: var(--mh-component-bg);
    color: var(--mh-component-text);
}

.mh-card--soft {
    background: var(--mh-component-bg-soft);
}

/* Featured cards use the active semantic widget accent. */
.mh-card--featured {
    border-top-color: var(--mh-widget-accent);
}

/* Informational note cards also use the active semantic accent. */
.mh-card--note {
    border-left-color: var(--mh-widget-accent);
}

/* Riptide keeps the crimson identity, but now references the semantic danger token. */
.mh-card--riptide {
    border-color: color-mix(in srgb, var(--mh-accent-danger) 45%, var(--mh-component-border));
    background: color-mix(in srgb, var(--mh-accent-danger) 7%, var(--mh-component-bg));
}

.mh-card--riptide .mh-card__eyebrow {
    color: var(--mh-accent-danger);
}

/* Interactive cards follow whichever semantic theme class is applied. */
.mh-card--interactive:hover,
.mh-card--interactive:focus-within {
    border-color: var(--mh-widget-accent);
}

.mh-card__eyebrow {
    color: var(--mh-widget-accent);
}

/* Shared tables use the same surfaces/borders as cards/widgets. */
.mh-table {
    background: var(--mh-component-bg);
    color: var(--mh-component-text);
}

.mh-table th,
.mh-table td {
    border-color: var(--mh-component-border);
}

/* Standard buttons follow shared component surfaces. */
.mh-button {
    border-color: var(--mh-component-border);
    background: var(--mh-component-bg);
    color: var(--mh-component-text);
}

.mh-button:hover,
.mh-button:focus-visible {
    background: var(--mh-component-bg-soft);
}

/* Primary buttons use the active semantic accent rather than a fixed color. */
.mh-button--primary {
    border-color: var(--mh-widget-accent);
    background: var(--mh-widget-accent);
    color: #fff;
}

.mh-button--primary:hover,
.mh-button--primary:focus-visible {
    background: color-mix(in srgb, var(--mh-widget-accent) 86%, #000);
}

/* Media placeholders use shared neutral surfaces. */
.mh-placeholder {
    border-color: var(--mh-component-border);
    background: color-mix(in srgb, var(--mh-component-bg-soft) 65%, transparent);
    color: var(--mh-component-muted);
}

/* ========================================================================== 
   2. Generic repeatable widget/card grids
   ========================================================================== */

/*
 * Use mh-widget-grid for ANY repeatable widgets (event cards, spotlights,
 * stream cards, server cards, etc.). Add exactly one preset class.
 */
.mh-widget-grid,
.mh-card-grid,
.mh-stat-grid {
    display: grid;
    gap: var(--mh-gap);
}

/* Explicit presets. */
.mh-widget-grid--2,
.mh-card-grid--2,
.mh-stat-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mh-widget-grid--3,
.mh-card-grid--3,
.mh-stat-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mh-widget-grid--4,
.mh-card-grid--4,
.mh-stat-grid--4,
.mh-widget-grid--max,
.mh-card-grid--max,
.mh-stat-grid--max {
    /* Four across is the comfortable maximum at the normal 1240px site width. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Auto-fit is useful when the exact number of cards changes dynamically. */
.mh-widget-grid--auto,
.mh-card-grid--auto,
.mh-stat-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* ========================================================================== 
   3. Timeline presets
   ========================================================================== */

/* Standard timeline remains the default components.css spacing. */
.mh-timeline--compact .mh-timeline__item {
    padding-bottom: 14px;
}

.mh-timeline--compact {
    font-size: 0.94rem;
}

.mh-timeline--spacious .mh-timeline__item {
    padding-bottom: 38px;
}

.mh-timeline--spacious .mh-timeline__title {
    font-size: 1.15rem;
}

/* Optional boxed timeline: useful for histories, release roadmaps, or milestones. */
.mh-timeline--boxed .mh-timeline__item {
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--mh-component-border);
    border-radius: var(--mh-radius-md);
    background: var(--mh-component-bg);
}

.mh-timeline--boxed .mh-timeline__item::before {
    top: 20px;
}

/* ========================================================================== 
   4. Responsive presets
   ========================================================================== */

@media (max-width: 900px) {
    .mh-widget-grid--4,
    .mh-card-grid--4,
    .mh-stat-grid--4,
    .mh-widget-grid--max,
    .mh-card-grid--max,
    .mh-stat-grid--max {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mh-widget-grid--3,
    .mh-card-grid--3,
    .mh-stat-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .mh-widget-grid--2,
    .mh-widget-grid--3,
    .mh-widget-grid--4,
    .mh-widget-grid--max,
    .mh-card-grid--2,
    .mh-card-grid--3,
    .mh-card-grid--4,
    .mh-card-grid--max,
    .mh-stat-grid--2,
    .mh-stat-grid--3,
    .mh-stat-grid--4,
    .mh-stat-grid--max {
        grid-template-columns: 1fr;
    }
}