/**
 * EZ Integral Design System — WordPress Adapter
 * ==============================================
 * WORDPRESS-ONLY LAYER — do not transfer to another frontend.
 *
 * This file will progressively map legacy WordPress screens/components onto
 * tokens from ez-design-system.css.
 *
 * Foundation phase intentionally contains NO active selectors. This guarantees
 * that introducing the architecture does not alter the current 0.7.3.285 UI.
 * Future migrations should be added screen-by-screen here (or in clearly
 * referenced adapter modules), while platform-independent rules remain in
 * ez-design-system.css.
 */

/* =========================================================
 * 0.7.3.287 — Home screen migration #1
 * =========================================================
 * Scope: dashboard Home only (tab=login).
 * Goal: preserve the established visual identity while giving the Home screen
 * stable proportions on ultrawide displays and component-led responsiveness.
 * No community, shop, messages, course-room or admin selectors belong here yet.
 * ======================================================= */

/* Wide monitors add breathing room around the app instead of stretching it. */
body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-dashboard-frame {
    width: min(100%, var(--ezsc-ds-app-max));
    max-width: var(--ezsc-ds-app-max);
    margin-inline: auto;
}

/* The Home screen is now a responsive size container. */
body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v2 {
    width: 100%;
    max-width: var(--ezsc-ds-content-max);
    margin-inline: auto;
    padding: var(--ezsc-ds-page-gutter);
    gap: var(--ezsc-ds-layout-gap);
    container-type: inline-size;
    container-name: ezsc-home;
}

/* Display copy scales gently, while ordinary working text remains stable. */
body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v3-hero-copy h1 {
    font-size: var(--ezsc-ds-hero-title-fluid) !important;
    line-height: 1.14 !important;
}

body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v3-hero-copy p {
    font-size: var(--ezsc-ds-hero-copy-fluid) !important;
    line-height: var(--ezsc-ds-line-body) !important;
}

body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v3-post-content,
body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v3-empty {
    font-size: var(--ezsc-ds-font-body) !important;
    line-height: var(--ezsc-ds-line-body) !important;
}

body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v3-post-header strong,
body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v3-side-card.is-course > strong {
    font-size: var(--ezsc-ds-font-ui) !important;
}

body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v3-post-header span,
body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v3-post-footer,
body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v3-side-course-meta {
    font-size: var(--ezsc-ds-font-meta) !important;
}

/* Let cards use available room naturally rather than relying on viewport names. */
body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v3-content-grid {
    grid-template-columns: minmax(min(100%, var(--ezsc-ds-card-min)), 0.7fr) minmax(0, 1.55fr);
    gap: var(--ezsc-ds-layout-gap);
}

/* Component breakpoint: Home layout reacts to its own available width. */
@container ezsc-home (max-width: 48rem) {
    .ezsc-home-v3-content-grid {
        display: flex;
        flex-direction: column;
        gap: var(--ezsc-ds-layout-gap);
    }

    .ezsc-home-v3-feed,
    .ezsc-home-v3-side {
        width: 100%;
    }

    .ezsc-home-v3-feed {
        order: 1;
    }

    .ezsc-home-v3-side {
        order: 2;
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    }

    .ezsc-home-v3-side-card.is-welcome {
        grid-column: 1 / -1;
    }
}

@container ezsc-home (max-width: 35rem) {
    .ezsc-home-v3-hero {
        min-height: 11rem;
        border-radius: var(--ezsc-ds-radius-lg);
    }

    .ezsc-home-v3-hero-copy {
        right: var(--ezsc-ds-space-4);
        bottom: var(--ezsc-ds-space-4);
        max-width: 84%;
    }

    .ezsc-home-v3-side {
        grid-template-columns: 1fr;
    }
}

/* Accessibility: keep keyboard focus visible without changing mouse styling. */
body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v2 :where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    box-shadow: var(--ezsc-ds-focus-ring);
}

/* Respect users who request less motion. */
@media (prefers-reduced-motion: reduce) {
    body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v2 *,
    body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v2 *::before,
    body.ezsc-dashboard-app .ezsc-dashboard-shell.is-dashboard-tab-login .ezsc-home-v2 *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}