/* Product-first difficulty trainer shared by Beginner through Expert. */

.difficulty-trainer {
    padding-block: var(--space-4) var(--space-10);
    background: var(--color-bg);
}

.difficulty-trainer .seo-breadcrumbs {
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.difficulty-trainer .seo-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.difficulty-trainer .seo-breadcrumbs li:not(:last-child)::after {
    margin-left: var(--space-2);
    color: var(--color-text-tertiary);
    content: '/';
}

.difficulty-trainer .seo-breadcrumbs a { color: inherit; }
.difficulty-trainer .seo-breadcrumbs a:hover { color: var(--color-primary-600); }

.difficulty-path {
    margin-bottom: var(--space-4);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.difficulty-path ol {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
}

.difficulty-path__item { position: relative; min-width: 0; }
.difficulty-path__item + .difficulty-path__item { border-left: 1px solid var(--color-border-light); }

.difficulty-path__item a {
    display: grid;
    min-height: 4.5rem;
    padding: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
}

.difficulty-path__item a:hover { background: var(--color-primary-50); }

.difficulty-path__number {
    display: grid;
    width: 2.25rem;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    place-items: center;
    color: var(--color-text-tertiary);
    background: var(--color-surface-alt);
    font-size: var(--text-xl);
}

.difficulty-path__item a > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.difficulty-path__item strong { overflow: hidden; color: var(--color-text); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.difficulty-path__item small { color: var(--color-text-tertiary); font-size: var(--text-xs); }

.difficulty-path__item.is-current::after {
    position: absolute;
    right: var(--space-3);
    bottom: 0;
    left: var(--space-3);
    height: var(--space-1);
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    content: '';
    background: var(--color-primary-500);
}

.difficulty-path__item.is-current a { background: var(--color-primary-50); }
.difficulty-path__item.is-current .difficulty-path__number { color: var(--color-on-ink); background: var(--gradient-brand); box-shadow: var(--shadow-brand-icon); }

.difficulty-hero {
    position: relative;
    display: grid;
    min-height: 29rem;
    overflow: hidden;
    padding: var(--space-8);
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius-2xl);
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
    align-items: center;
    gap: var(--space-8);
    background: linear-gradient(135deg, var(--color-primary-50), var(--color-surface) 68%);
    box-shadow: var(--shadow-md);
}

.difficulty-hero::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--space-2);
    content: '';
    background: var(--gradient-brass);
}

.difficulty-hero__copy { min-width: 0; }

.difficulty-hero__eyebrow,
.difficulty-coach__eyebrow,
.difficulty-section-heading__eyebrow,
.difficulty-next > div > span {
    display: block;
    color: var(--color-primary-600);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.difficulty-hero h1 {
    max-width: 15ch;
    margin: var(--space-2) 0 0;
    font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
}

.difficulty-hero__copy > p {
    max-width: 58ch;
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.difficulty-hero__facts {
    display: grid;
    max-width: 38rem;
    margin: var(--space-5) 0 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.difficulty-hero__facts div {
    display: flex;
    padding-inline: var(--space-4);
    border-left: 1px solid var(--color-border);
    flex-direction: column;
    gap: var(--space-1);
}

.difficulty-hero__facts div:first-child { padding-left: 0; border-left: 0; }
.difficulty-hero__facts dt { color: var(--color-text-tertiary); font-size: var(--text-xs); }
.difficulty-hero__facts dd { margin: 0; color: var(--color-text); font-size: var(--text-base); font-weight: var(--weight-bold); }

.difficulty-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-top: var(--space-6);
}

.difficulty-hero__browse {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary-600);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.difficulty-hero__browse:hover { color: var(--color-primary-700); }

.difficulty-featured {
    position: relative;
    display: block;
    overflow: hidden;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-xl);
    transform: rotate(1deg);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.difficulty-featured:hover { box-shadow: var(--shadow-primary-lg); transform: rotate(0) translateY(-2px); }

.difficulty-featured__topline {
    display: flex;
    min-height: var(--control-height-sm);
    padding-inline: var(--space-1);
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.difficulty-featured__topline span:first-child { color: var(--color-primary-600); }
.difficulty-featured__board { width: 100%; }

.difficulty-featured__footer {
    display: grid;
    min-height: 4.25rem;
    padding: var(--space-3) var(--space-1) 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}

.difficulty-featured__icon {
    display: grid;
    width: 2.5rem;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    place-items: center;
    background: var(--color-primary-50);
    font-size: var(--text-xl);
}

.difficulty-featured__footer > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.difficulty-featured__footer strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.difficulty-featured__footer small { color: var(--color-text-tertiary); font-size: var(--text-xs); }
.difficulty-featured__arrow { color: var(--color-primary-500); font-size: var(--text-xl); }
.difficulty-hero__piece { justify-self: center; color: var(--color-doodle-strong); font-size: 14rem; line-height: 1; }

.difficulty-workspace {
    display: grid;
    margin-top: var(--space-8);
    grid-template-columns: 18rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
}

.difficulty-coach {
    position: sticky;
    top: calc(4rem + var(--space-4));
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.difficulty-coach h2 { margin: var(--space-1) 0 0; font-size: var(--text-xl); }

.difficulty-checklist { display: grid; margin: var(--space-5) 0 0; padding: 0; gap: var(--space-4); list-style: none; counter-reset: none; }
.difficulty-checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }

.difficulty-checklist li > span {
    display: grid;
    width: 1.75rem;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    place-items: center;
    color: var(--color-text-inverse);
    background: var(--color-primary-600);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.difficulty-checklist p { margin: 0; color: var(--color-text); font-size: var(--text-sm); line-height: var(--leading-normal); }

.difficulty-coach__audience {
    display: grid;
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
}

.difficulty-coach__audience > span { color: var(--color-primary-500); font-size: var(--text-2xl); }
.difficulty-coach__audience strong { font-size: var(--text-sm); }
.difficulty-coach__audience p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.difficulty-coach__note { margin: var(--space-4) 0 0; color: var(--color-text-tertiary); font-size: var(--text-xs); line-height: var(--leading-normal); }

.difficulty-set { min-width: 0; }

.difficulty-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-5);
}

.difficulty-section-heading h2 { margin: var(--space-1) 0 0; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.difficulty-section-heading p { max-width: 62ch; margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.difficulty-section-heading > a { display: inline-flex; min-height: var(--control-height); align-items: center; gap: var(--space-2); color: var(--color-primary-600); font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; }
.difficulty-section-heading > a:hover { color: var(--color-primary-700); }

.difficulty-puzzle-grid {
    display: grid;
    margin: var(--space-4) 0 0;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    list-style: none;
}

.difficulty-puzzle-card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.difficulty-puzzle-card:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.difficulty-puzzle-card__board { width: 100%; border: 0; border-bottom: 1px solid var(--color-border-light); border-radius: 0; }
.difficulty-puzzle-card__body { display: flex; padding: var(--space-3); flex-direction: column; gap: var(--space-2); }
.difficulty-puzzle-card__topline { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-text-tertiary); }
.difficulty-puzzle-card__topline small { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.difficulty-puzzle-card__body > strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.difficulty-puzzle-card__body > span:last-child { display: flex; align-items: center; justify-content: space-between; color: var(--color-text-secondary); font-size: var(--text-sm); }
.difficulty-puzzle-card svg { width: 1.1rem; fill: none; stroke: var(--color-primary-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.difficulty-set__empty,
.difficulty-set__complete {
    margin-top: var(--space-4);
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl);
    text-align: center;
    background: var(--color-surface);
}

.difficulty-set__empty > span { color: var(--color-primary-500); font-size: var(--text-5xl); }
.difficulty-set__empty h3 { margin: var(--space-2) 0; }
.difficulty-set__empty p,
.difficulty-set__complete { color: var(--color-text-secondary); }

.difficulty-themes { margin-top: var(--space-10); padding-block: 0; }
.difficulty-theme-grid { display: grid; margin-top: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.difficulty-theme-card {
    display: grid;
    min-height: 8rem;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.difficulty-theme-card:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-md); }

.difficulty-theme-card__icon {
    display: grid;
    width: 3rem;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    place-items: center;
    background: var(--color-primary-50);
    font-size: var(--text-2xl);
}

.difficulty-theme-card > div { display: flex; min-width: 0; flex-direction: column; }
.difficulty-theme-card strong { font-size: var(--text-base); }
.difficulty-theme-card small { margin-top: var(--space-1); color: var(--color-primary-600); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.difficulty-theme-card p { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.difficulty-theme-card > span:last-child { color: var(--color-primary-500); font-size: var(--text-xl); }

.difficulty-next {
    --color-heading: var(--color-on-ink);
    display: grid;
    margin-top: var(--space-10);
    padding: var(--space-6);
    overflow: hidden;
    border: 1px solid var(--color-ink-border);
    border-radius: var(--radius-2xl);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    color: var(--color-on-ink);
    background: var(--gradient-ink);
}

.difficulty-next__piece { color: var(--color-accent-400); font-size: var(--text-5xl); line-height: 1; }
.difficulty-next > div > span { color: var(--color-accent-400); }
.difficulty-next h2 { margin: var(--space-1) 0 0; color: var(--color-on-ink); font-size: var(--text-xl); }
.difficulty-next p { max-width: 62ch; margin: var(--space-2) 0 0; color: var(--color-on-ink-muted); font-size: var(--text-sm); }

@media (max-width: 1100px) {
    .difficulty-path { overflow-x: auto; }
    .difficulty-path ol { min-width: 47rem; }
    .difficulty-workspace { grid-template-columns: 15rem minmax(0, 1fr); }
    .difficulty-puzzle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .difficulty-trainer { padding-top: var(--space-3); }
    .difficulty-path { margin-inline: calc(-1 * var(--space-4)); border-right: 0; border-left: 0; border-radius: 0; }
    .difficulty-path ol { min-width: 43rem; }
    .difficulty-hero { min-height: 0; padding: var(--space-5); grid-template-columns: 1fr; gap: var(--space-6); }
    .difficulty-hero h1 { font-size: var(--text-4xl); }
    .difficulty-hero__copy > p { font-size: var(--text-base); }
    .difficulty-featured { width: min(100%, 24rem); justify-self: center; transform: none; }
    .difficulty-workspace { margin-top: var(--space-6); grid-template-columns: 1fr; }
    .difficulty-coach { position: static; }
    .difficulty-section-heading { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
    .difficulty-theme-grid { grid-template-columns: 1fr; }
    .difficulty-next { grid-template-columns: auto minmax(0, 1fr); }
    .difficulty-next .btn { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 480px) {
    .difficulty-hero__facts { grid-template-columns: 1fr; gap: var(--space-3); }
    .difficulty-hero__facts div { padding: 0; border-left: 0; }
    .difficulty-hero__facts div:not(:first-child) { padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); }
    .difficulty-hero__actions { align-items: stretch; flex-direction: column; }
    .difficulty-hero__actions .btn { justify-content: center; }
    .difficulty-puzzle-grid { grid-template-columns: 1fr; }
    .difficulty-theme-card { grid-template-columns: auto minmax(0, 1fr); }
    .difficulty-theme-card > span:last-child { display: none; }
    .difficulty-next { padding: var(--space-5); grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .difficulty-featured,
    .difficulty-puzzle-card { transition: none; }
    .difficulty-featured:hover,
    .difficulty-puzzle-card:hover { transform: none; }
}