/* ============================================
   Home / landing page (/) — hero + shortcut-card polish
   ============================================

   Scope: templates/home/index.html only. The cards keep .admin-nav-card as
   their base (shared with the admin pages); .home-card layers presentation
   on top and never changes layout, so /admin stays untouched.

   Every colour derives from --primary / --card / --border via color-mix, so
   both themes follow with no dark-mode override — same contract as
   .form-callout (_forms.css).
   ============================================ */

/* ── Hero ─────────────────────────────────────────────────────────────── */

.home-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 14%, var(--card)) 0%,
            var(--card) 65%);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
}

.home-hero-title {
    font-weight: 700;
    margin-bottom: 0.375rem;
}

/* --text-secondary, not --text-muted: the AA-contrast note on the old
   .admin-page-header subtitle carries over (muted is 2.5:1 on light). */
.home-hero-subtitle {
    color: var(--text-secondary);
}

/* Filled and unhidden by home.js; starts [hidden] so no empty chip paints.
   The explicit [hidden] rule is required: this class's display beats the
   UA sheet's [hidden]{display:none} in the cascade, so without it the
   attribute would do nothing. */
.home-hero-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
}

.home-hero-date[hidden] {
    display: none;
}

/* Decorative only (aria-hidden). Bleeds off the block-end corner; the low
   color-mix keeps it a watermark in both themes. */
.home-hero-watermark {
    position: absolute;
    inset-inline-end: 1.25rem;
    inset-block-end: -1.5rem;
    font-size: 7.5rem;
    line-height: 1;
    color: color-mix(in srgb, var(--primary) 8%, transparent);
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .home-hero {
        padding: 1.25rem;
    }

    .home-hero-watermark {
        display: none;
    }
}

/* ── Shortcut cards ───────────────────────────────────────────────────── */

.home-card {
    box-shadow: var(--shadow-xs);
}

.home-card:hover {
    box-shadow: var(--shadow-md);
}

.home-card .nav-icon {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 18%, transparent),
            color-mix(in srgb, var(--primary) 7%, transparent));
    transition: transform var(--transition-fast);
}

.home-card:hover .nav-icon {
    transform: scale(1.08);
}

/* Forward chevron on the end edge: wakes + slides 4px further on hover via
   a LOGICAL margin, never translateX (which would not mirror under RTL).
   The base glyph points forward for LTR; the dir rule below flips it. The
   static transform is safe on purpose: no state class authors transform on
   this element, so the RTL-vs-state-specificity trap (CLAUDE.md, the mobile
   drawer) does not apply here. */
.home-card-arrow {
    margin-inline-start: auto;
    margin-inline-end: 4px;
    color: var(--primary);
    opacity: 0.3;
    transition: opacity var(--transition-fast), margin var(--transition-fast);
    flex-shrink: 0;
}

.home-card:hover .home-card-arrow {
    opacity: 1;
    margin-inline-end: 0;
}

html[dir="rtl"] .home-card-arrow {
    transform: scaleX(-1);
}