/* Homepage — olden-times-study visual register.
 *
 * Every course row is a pocket of postcards (Try a course, Recommended,
 * The library all share this treatment). Each card is a cream linen
 * cardstock with a tipped-in photograph and a typewriter-strip of
 * metadata. Slight per-nth-child jitter rotation so the row looks
 * hand-placed rather than machine-laid.
 *
 * Cream / serif / muted colours are kept for the physical objects
 * regardless of the surrounding dark/light theme — a postcard doesn't
 * change colour when the room lights dim.
 */

/* ───────────────────────── POSTCARDS ────────────────────────── */

.scroll-row--postcards {
    /* Reduce the scroll-row's inherited gap so overlap-with-rotation
     * feels like a stack rather than a grid. */
    gap: 14px;
    padding-top: 8px;
    padding-bottom: 12px;
}

.home-postcard {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    background: #f6ede0;            /* cream linen cardstock */
    border-radius: 4px;
    padding: 10px;
    text-decoration: none;
    color: #2a2520;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        0 10px 18px rgba(0, 0, 0, 0.18);
    transition:
        transform .4s cubic-bezier(.2,.75,.2,1),
        box-shadow .35s ease;
    position: relative;
    border-bottom: 0;  /* override global a { border-bottom } */
}
/* Linen weave via a faint repeating gradient. Keeps the card from
 * looking like a flat rectangle without needing an image asset. */
.home-postcard::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background:
        repeating-linear-gradient(135deg,
            rgba(0, 0, 0, 0.02) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px);
    pointer-events: none;
    opacity: 0.9;
}

/* Slight jitter per position — looks hand-placed. Keyed by nth-child
 * so adding/removing cards reshuffles organically. */
.scroll-row--postcards .home-postcard:nth-child(3n+1) { transform: rotate(-0.9deg); }
.scroll-row--postcards .home-postcard:nth-child(3n+2) { transform: rotate(0.5deg); }
.scroll-row--postcards .home-postcard:nth-child(3n+3) { transform: rotate(-0.3deg); }
.scroll-row--postcards .home-postcard:nth-child(4n)    { transform: rotate(1.1deg); }

.home-postcard:hover {
    transform: translateY(-5px) rotate(0);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.28),
        0 22px 34px rgba(0, 0, 0, 0.22);
}

.home-postcard__photo {
    display: block;
    aspect-ratio: 16 / 9;
    background: #dcd4c4;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;  /* keeps photo above the linen pseudo-element */
}
.home-postcard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.home-postcard:hover .home-postcard__photo img { transform: scale(1.03); }

/* No-image fallback — solid pastel cardstock with a subtle diagonal
 * sheen so the tile doesn't read as flat colour. Same language as the
 * catalog page. */
.home-postcard__photo--color {
    background:
        linear-gradient(135deg,
            var(--course-color, #c8b89a),
            color-mix(in oklab, var(--course-color, #c8b89a) 82%, #fff));
}

.home-postcard__meta {
    padding: 2px 4px 4px;
    position: relative;
    z-index: 1;
}
.home-postcard__call {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 4px;
}
.home-postcard__title {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: rgba(0, 0, 0, 0.88);
    margin: 0 0 4px;
    font-weight: 500;
}
.home-postcard__chapters {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.48);
    margin: 0;
}

/* ───────────────────── LANGUAGES GRID ───────────────────────── */
/* Replaces the old generic categories grid. A flag, a name, a count.
 * Uses the site's regular surface colours (not cream cardstock) so
 * visually it sits apart from the postcard rows above — these are
 * "navigation tiles" into a shelf-filtered view, not artefacts. */

.lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.lang-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 18px 20px;
    background: var(--surface, var(--bg-2));
    border: 1px solid var(--rule);
    border-radius: var(--radius-md, 12px);
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);  /* override global a { border-bottom:dotted } */
    transition: border-color .15s, background .15s, transform .2s;
}
.lang-tile:hover {
    border-color: var(--amber);
    transform: translateY(-2px);
}
.lang-tile__flag {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 2px;
}
.lang-tile__name {
    font-family: var(--font-serif);
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--text);
}
.lang-tile__meta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}