/*
 * WikiHome.css — landing-page styling for /<wiki>/home.
 *
 * Scoped to .home-* classes so the file is harmless when included on
 * every page. Only the German wiki's home.md currently uses these
 * classes; other wikis keep their existing centered-list layout.
 *
 * Layout:
 *   .home-hero    Logo + tagline + %SEARCH_HERO%
 *   .home-tiles   4-card quick-access grid
 *   .home-stats   Version/download row (anchored as #downloads)
 *   .home-support Support CTA strip at the bottom
 */

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

.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(0.5 * var(--behnke-basic));
    padding: calc(2.5 * var(--behnke-basic)) 0 var(--behnke-basic);
}

.home-hero__logo {
    width: clamp(140px, 18vw, 200px);
    height: auto;
}

.home-hero__tagline {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #777;
}

/* ── Tile grid ─────────────────────────────────────────────────────── */

.home-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--behnke-basic);
    margin: 0 auto calc(1.5 * var(--behnke-basic));
    max-width: 1100px;
}

.home-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(0.3 * var(--behnke-basic));
    padding: calc(1.1 * var(--behnke-basic));
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: calc(0.7 * var(--behnke-basic));
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.home-tile:hover {
    border-color: var(--behnke-design, #0066cc);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Override .wiki-icon's default body-font sizing so the tile icon
   actually reads as the visual anchor of the card. */
.home-tile__icon.wiki-icon {
    width: calc(2.4 * var(--behnke-basic));
    height: calc(2.4 * var(--behnke-basic));
    margin: 0 0 calc(0.3 * var(--behnke-basic));
}

.home-tile__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
}

.home-tile__sub {
    font-size: 0.88rem;
    color: #666;
    line-height: 1.4;
}

/* The manual tile gets a subtle blue accent — it's the marquee feature
   we want to draw attention to, and it visually echoes the brand. */
.home-tile--manual {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.04), rgba(0, 102, 204, 0.10));
    border-color: rgba(0, 102, 204, 0.20);
}

.home-tile--manual .home-tile__title {
    color: var(--behnke-design, #0066cc);
}

/* ── Downloads/versions strip ──────────────────────────────────────── */

.home-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(0.5 * var(--behnke-basic)) calc(1.6 * var(--behnke-basic));
    /* Top tight (visually glued to the search above), bottom roomy so
       the tiles read as a separate section rather than the next row
       of the same band. */
    margin: 0 auto calc(3 * var(--behnke-basic));
    padding: calc(0.4 * var(--behnke-basic)) var(--behnke-basic);
    max-width: 1100px;
    font-size: 0.9rem;
    color: #555;
}

.home-download {
    display: inline-flex;
    align-items: center;
    gap: calc(0.5 * var(--behnke-basic));
    white-space: nowrap;
}

.home-download strong {
    color: var(--behnke-design, #0066cc);
    font-weight: 600;
}

.home-download a {
    color: var(--behnke-design, #0066cc);
    text-decoration: none;
}

.home-download a:hover {
    text-decoration: underline;
}

/* ── Help hint ─────────────────────────────────────────────────────── */

/* When the home page is rendered, .wiki-main becomes a flex column so
   the hint can be pushed to the very bottom of the scroll container
   via `margin-top: auto`, regardless of how short the rest of the
   home content is. Without this, plain top-margin would leave the
   hint floating somewhere in the middle on a half-empty viewport. */
.wiki-main:has(> .home-hint) {
    display: flex;
    flex-direction: column;
}

/* Tiny one-line note at the bottom of the home page pointing users at
   the hotline and the support-ticket form. Replaces an earlier
   gradient "support" panel — the hint reads as a polite tip rather
   than a call-out, which is the right weight for users who haven't
   yet exhausted the wiki itself. */
.home-hint {
    text-align: center;
    font-size: 0.88rem;
    color: #777;
    margin: auto auto 0;
    padding: var(--behnke-basic) 0 calc(0.5 * var(--behnke-basic));
    max-width: 1100px;
    width: 100%;
    box-sizing: border-box;
}

.home-hint a {
    color: var(--behnke-design, #0066cc);
    text-decoration: none;
    font-weight: 600;
}

.home-hint a:hover {
    text-decoration: underline;
}

/* ── Mobile tuning ─────────────────────────────────────────────────── */

@media (max-width: 700px) {
    .home-hero {
        padding: calc(0.5 * var(--behnke-basic)) 0;
    }
    .home-tiles {
        margin-bottom: var(--behnke-basic);
    }
    .home-tile {
        padding: var(--behnke-basic);
    }
}