/* =========================================================================
   urhema_studies.css — study library grid (Phase 2).

   Conventions (matches urhema_today.css):
     - Page-scoped .ub-studies__* names (house .ub- prefix, like .ub-today__*).
     - Reuses the shared primitives from urhema_components.css rather than
       redefining them: .ub-card (surface), .ub-chip / .ub-chip--accent (tags),
       .ub-meter / .ub-meter__fill (progress), plus .ub-hatch from the shell.
     - Tokens only — no raw hex, no font stacks. A colour that isn't in
       urhema_tokens.css means the token file changes, not this one.
     - Premium reads coral (.ub-chip--accent), matching the retired-ember
       decision and the Today study Premium chip. Text-weight accent is
       accent-700 (accent-500 fails contrast on light backgrounds).
   ========================================================================= */

.ub-studies {
    width: 100%;
    max-width: var(--ub-width-shell);
    margin-inline: auto;
    padding-inline: var(--ub-gutter);
    padding-block: var(--ub-space-7) var(--ub-space-9);
}

/* ---- Header ----------------------------------------------------------- */

.ub-studies__header {
    max-width: var(--ub-width-reading);
    margin-bottom: var(--ub-space-6);
}
.ub-studies__title {
    margin: 0 0 var(--ub-space-3);
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-2xl);
    line-height: var(--ub-leading-tight);
    letter-spacing: var(--ub-tracking-tight);
    color: var(--ub-ink);
}
.ub-studies__lede {
    margin: 0;
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-body);
    color: var(--ub-ink-soft);
}

/* ---- Filters (segmented control) ------------------------------------- */

.ub-studies__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ub-space-3) var(--ub-space-5);
    padding-bottom: var(--ub-space-4);
    margin-bottom: var(--ub-space-6);
    border-bottom: var(--ub-rule-strong);
}
.ub-studies__filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ub-studies__filter {
    display: inline-block;
    padding: var(--ub-space-2) var(--ub-space-3);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-soft);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--ub-radius-sm);
    transition: color var(--ub-duration-fast) var(--ub-ease),
                background var(--ub-duration-fast) var(--ub-ease);
}
.ub-studies__filter:hover { color: var(--ub-ink); background: var(--ub-paper-sunken); }
.ub-studies__filter.is-active {
    color: var(--ub-ink);
    font-weight: 600;
    background: var(--ub-paper-raised);
    border-color: var(--ub-line-strong);
}
/* Disabled filters stay visible so the feature is discoverable, but read as
   inert not broken — cursor + opacity + (view adds) title/aria, not colour alone. */
.ub-studies__filter.is-disabled {
    color: var(--ub-ink-muted);
    opacity: 0.6;
    cursor: not-allowed;
}
.ub-studies__count {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

/* ---- Grid ------------------------------------------------------------- */

.ub-studies__grid {
    display: grid;
    /* Admin-configurable via --ub-studies-card-min-width (set inline in StudyLibrary.cshtml
       from Model.CardMinWidthPx). 17rem stays as the fallback for the custom property, so the
       grid renders correctly even before the value exists or if it's ever null. Deliberately
       still a minmax() floor, not a fixed column count — auto-fill keeps doing the same
       responsive work it always has; only the target width changes. */
    grid-template-columns: repeat(auto-fill, minmax(var(--ub-studies-card-min-width, 17rem), 1fr));
    gap: var(--ub-space-6) var(--ub-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ub-studies__item { min-width: 0; }

/* ---- Card ------------------------------------------------------------- */
/* Base surface (bg/border/radius/shadow + hover) comes from
   .ub-card.ub-card--interactive in the view. This adds the study-card layout only. */

.ub-studies__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0;

    /* Deeper by default, not just on hover. --ub-shadow-float already carries a subtle
       accent-tinted ring in dark theme specifically (baked into the token itself), so this
       reuses an effect the design system already anticipated rather than inventing a new one.
       Assumes urhema_studies.css loads AFTER urhema_components.css (same specificity as
       .ub-card's own box-shadow, so source order decides) — matches this file's own header
       comment describing itself as the later, page-specific layer. */
    box-shadow: var(--ub-shadow-float);
}

/* Accent reserved for Premium alone — deliberately the only card-level color signal on this
   page, so it never has to compete with a difficulty color for attention (see the
   .ub-chip--difficulty-* comment below for why difficulty stays grayscale instead). */
.ub-studies__card.is-premium {
    border-top: 4px solid var(--ub-accent-500);
}
.ub-studies__card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.ub-studies__card-media {
    aspect-ratio: 16 / 9;
    background: var(--ub-paper-sunken);
    border-bottom: var(--ub-rule);
}
.ub-studies__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ub-studies__card-media .ub-hatch { width: 100%; height: 100%; }
.ub-studies__card.is-locked .ub-studies__card-media { opacity: 0.75; }

.ub-studies__card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--ub-space-3);
    padding: var(--ub-space-4);
}
.ub-studies__card-meta { display: flex; flex-wrap: wrap; gap: var(--ub-space-2); }

.ub-studies__card-title {
    margin: 0;
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-lg);
    line-height: var(--ub-leading-snug);
    letter-spacing: var(--ub-tracking-tight);
    color: var(--ub-ink);
}
.ub-studies__card-desc {
    margin: 0;
    font-size: var(--ub-text-sm);
    line-height: var(--ub-leading-body);
    color: var(--ub-ink-soft);
    /* Three lines then clip — uneven card heights make a grid look accidental. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Facts row pinned to the bottom so cards line up regardless of description length. */
.ub-studies__card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-3);
    margin: auto 0 0;
    padding-top: var(--ub-space-3);
    border-top: var(--ub-rule);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    color: var(--ub-ink-muted);
}
.ub-studies__card-facts dd { margin: 0; }
/* Divider between facts — a left rule, consistent with the grid's rule device. */
.ub-studies__card-facts > div + div { padding-left: var(--ub-space-3); border-left: var(--ub-rule); }

/* Difficulty tiers — grayscale only, deliberately. The front-end token system has exactly
   one hue (the coral accent) plus grayscale; no blue/green/purple family exists in
   urhema_tokens.css, and that file's own rule is that a colour that isn't there means the
   TOKEN file changes, not this one. So richness comes from weight/border crispness, not a
   second hue that would either collide with Premium's accent-colored chip (if reusing
   .ub-chip--accent from urhema_components.css) or require inventing an ungoverned color.
   Beginner intentionally has no modifier — plain base .ub-chip is already the right weight
   for the entry tier. Lives here rather than in urhema_components.css: specific to how THIS
   page displays study difficulty, not a primitive every screen needs. */
.ub-chip--difficulty-intermediate {
    color: var(--ub-ink);
    border-color: var(--ub-line-strong);
    font-weight: 700;
}
.ub-chip--difficulty-advanced {
    color: var(--ub-ink);
    background: var(--ub-paper-raised);
    border-color: var(--ub-ink-muted);
    font-weight: 700;
}

.ub-studies__card-lock {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--ub-space-2);
    margin: 0;
    padding: var(--ub-space-3) var(--ub-space-4);
    border-top: var(--ub-rule);
    background: var(--ub-paper-sunken);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    color: var(--ub-ink-soft);
}

/* ---- Progress (reuses .ub-meter) ------------------------------------- */
/* Markup: <div class="ub-studies__progress"><div class="ub-meter">
             <div class="ub-meter__fill" style="width:N%"></div></div>
           <p class="ub-studies__progress-label">…</p></div> */

.ub-studies__progress { display: flex; flex-direction: column; gap: var(--ub-space-2); }
.ub-studies__progress-label {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    color: var(--ub-ink-muted);
}

/* ---- Empty / load-more ----------------------------------------------- */

.ub-studies__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ub-space-4);
    padding: var(--ub-space-9) var(--ub-space-5);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-md);
    text-align: center;
}
.ub-studies__empty-message {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-soft);
}
.ub-studies__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ub-space-3);
    justify-content: center;
    margin-top: var(--ub-space-7);
    padding-top: var(--ub-space-6);
    border-top: var(--ub-rule);
}