/* =========================================================================
   Landing-page editorial copy — the intro/about block on the 2D and 3D
   puzzle landing pages. Adds crawlable body text below the puzzle card grid.
   "Crossword Paper" re-skin — palette + type from tokens.css.
   ========================================================================= */

.landing-copy {
    /* Wide enough for the three family cards to sit side by side. The prose
       inside stays on a readable measure — see __inner > p below — so widening
       the container does not widen the text. */
    max-width: 1080px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3.5rem;
    color: var(--text);
}

/* Running text is held to a comfortable measure regardless of container width. */
.landing-copy__inner > h2,
.landing-copy__inner > p {
    max-width: 66ch;
}

.landing-copy__inner h2 {
    margin: 0 0 0.85rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h2);
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--text);
}

.landing-copy__inner h3 {
    margin: 1.9rem 0 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    color: var(--text);
}

.landing-copy__subhead {
    margin-top: 2.4rem !important;
}

.landing-copy__inner p {
    margin: 0 0 1rem;
    font-size: var(--fs-body);
    line-height: 1.72;
    color: var(--text-muted);
}

.landing-copy__inner strong {
    color: var(--text);
}

/* Links inside running prose only.
   This was `.landing-copy__inner a`, which at specificity (0,1,1) also beat the
   (0,1,0) class rules on the cards below — so `text-decoration: none` on
   .journal-card and .home-blog-teaser__all never applied, and the underline
   propagated across every line of each card. Scoping it to the paragraphs it was
   written for removes the whole class of collision. */
.landing-copy__inner p a {
    color: var(--brand-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.landing-copy__inner p a:hover {
    color: var(--accent);
}

@media (max-width: 600px) {
    .landing-copy {
        padding: 1.5rem 1rem 2.5rem;
    }
    .landing-copy__inner h2 {
        font-size: 1.5rem;
    }
}

/* ── "Three flavours of puzzle" — family cards ───────────────────────────────
   These replaced a three-item bullet list. The list stated the taxonomy in the
   same running prose as everything else on the page; the cards show it, in the
   card language used by the rest of the site, and give each family the colour it
   already carries in the puzzle chips and on the About page.
   ------------------------------------------------------------------------- */

.flavour-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.1rem 0 0;
}

.flavour-card {
    --flavour: var(--cat-word);

    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
    overflow: hidden;
    padding: 1.35rem 1.25rem 1.25rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    transition: border-color 0.18s ease, transform 0.18s ease;
}

/* The family colour, as a hairline along the top edge of its card. */
.flavour-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--flavour);
}

.flavour-card:hover {
    border-color: color-mix(in srgb, var(--flavour) 45%, var(--line));
    transform: translateY(-2px);
}

.flavour-card[data-family="word"]    { --flavour: var(--cat-word); }
.flavour-card[data-family="logic"]   { --flavour: var(--cat-logic); }
.flavour-card[data-family="spatial"] { --flavour: var(--cat-spatial); }

.flavour-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-sm);
    color: var(--flavour);
    background: color-mix(in srgb, var(--flavour) 12%, transparent);
}

.flavour-card__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.flavour-card__title {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
}

.flavour-card__count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

.flavour-card__copy {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.flavour-card__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
}

.flavour-card__list li {
    margin: 0;
    padding: 0.16rem 0.5rem;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--text-muted);
    background: var(--bg-2);
    border-radius: 999px;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .flavour-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Word carries eight names and needs the full width once the grid folds. */
    .flavour-card[data-family="word"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .flavour-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── "From the puzzle journal" ───────────────────────────────────────────────
   Was a stack of bordered full-width rows — the last piece of the page still in
   the plain-list register the rest of the site had moved away from. Now a card
   grid in the same language as the family cards above it.
   ------------------------------------------------------------------------- */

.home-blog-teaser {
    margin-top: 2.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.home-blog-teaser__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.home-blog-teaser__head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    color: var(--text);
}

.home-blog-teaser__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-blog-teaser__list li {
    margin: 0;
    display: flex;
}

.journal-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    padding: 1.1rem 1.15rem;
    text-decoration: none;
    color: inherit;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.journal-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.journal-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.journal-card__date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

.journal-card__title {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

.journal-card__desc {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
    /* Descriptions are meta descriptions and can run long; clamp rather than let
       one card set the height of the row. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.journal-card__more {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--accent);
}

.home-blog-teaser__all {
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.home-blog-teaser__all:hover {
    text-decoration: underline;
}

@media (max-width: 860px) {
    .home-blog-teaser__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .home-blog-teaser__list {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Side by side, the heading breaks across two lines while the link holds the
       right edge; stacked reads better. */
    .home-blog-teaser__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}