/*
 * WikiHome.css — landing-page styling for /<wiki>/home.
 *
 * Scoped to .home-* classes so the file is harmless when included on
 * every page.
 *
 * The German home (wiki-d) uses the priority-ordered layout below; the
 * EN/FR homes still use the .home-tiles grid + .home-downloads strip.
 *
 * German layout (top → bottom, by importance):
 *   .home-hero   Logo + tagline
 *   .home-help   Primary block: %SEARCH_HERO% + "oder" + Problemlöser bar
 *   .home-dl     Downloads (Firmware / Handbuch / IP-Video) — secondary
 *   .home-more   Minor text links (Handbuch, Einrichtungshilfen)
 *   .home-hint   Hotline / support-ticket note (pinned to the foot)
 */

/* ── 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;
}

/* ── Primary help block: search + Problemlöser ─────────────────────── */

/* Search and the Problemlöser are the two main ways a user gets help, so
   they are grouped into a single centred block at the top of the page,
   joined by a small "oder". The Problemlöser bar matches the search input
   width and sits directly beneath it, so the two read as one unit. The
   downloads block and the minor links below are then clearly secondary. */
.home-help {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto calc(2 * var(--behnke-basic));
}

.home-help__or {
    margin: calc(0.5 * var(--behnke-basic)) 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999;
}

/* Same 80 % width as .wiki-search--hero so it lines up under the input. */
.home-help__solve {
    display: flex;
    align-items: center;
    gap: calc(0.8 * var(--behnke-basic));
    width: 80%;
    box-sizing: border-box;
    padding: calc(0.85 * var(--behnke-basic)) calc(1.2 * var(--behnke-basic));
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.10), rgba(0, 102, 204, 0.22));
    border: 1px solid rgba(0, 102, 204, 0.40);
    border-radius: calc(0.6 * var(--behnke-basic));
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 18px rgba(0, 102, 204, 0.10);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.home-help__solve:hover {
    border-color: var(--behnke-design, #0066cc);
    box-shadow: 0 8px 28px rgba(0, 102, 204, 0.18);
    transform: translateY(-2px);
}

.home-help__solve-icon.wiki-icon {
    flex: 0 0 auto;
    width: calc(2.6 * var(--behnke-basic));
    height: calc(2.6 * var(--behnke-basic));
    margin: 0;
}

.home-help__solve-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #555;
}

.home-help__solve-text strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--behnke-design, #0066cc);
}

.home-help__solve-arrow {
    flex: 0 0 auto;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--behnke-design, #0066cc);
}

/* ── Secondary links (Handbuch, Einrichtungshilfen) ────────────────── */

/* Deliberately low-key: the manual and the setup guides are reachable
   from the menu and search; on the home page they are minor text links,
   not cards, so they don't compete with search / Problemlöser. */
.home-more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(0.4 * var(--behnke-basic)) calc(1.6 * var(--behnke-basic));
    margin: 0 auto;
    padding: 0 var(--behnke-basic);
    max-width: 1100px;
    font-size: 0.9rem;
}

.home-more a {
    display: inline-flex;
    align-items: center;
    gap: calc(0.4 * var(--behnke-basic));
    color: #666;
    text-decoration: none;
}

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

.home-more__icon.wiki-icon {
    flex: 0 0 auto;
    width: calc(1.2 * var(--behnke-basic));
    height: calc(1.2 * var(--behnke-basic));
    margin: 0;
}

/* ── Tile grid (EN/FR homes) ───────────────────────────────────────── */

.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 — a secondary highlight
   alongside the primary Problemlöser tile, echoing 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;
}

/* ── Downloads (German home) ───────────────────────────────────────── */

/* The three downloads (Firmware, Handbuch, IP-Video) sit directly below
   the Problemlöser banner as a clearly labelled row of buttons — a
   first-class, easy-to-find section in their own right. They are
   *outlined* (not filled), so they read one notch below the filled
   Problemlöser banner above: the page hierarchy is search → solve →
   download. Scoped to .home-dl* — the EN/FR homes keep the
   .home-download strip. The clickable triggers are the %SWITCH_*% /
   IP-Video anchors emitted server-side, hence styled via
   `.home-dl__item > a`. */
.home-dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--behnke-basic) calc(1.2 * var(--behnke-basic));
    margin: 0 auto calc(1.5 * var(--behnke-basic));
    padding: 0 var(--behnke-basic);
    max-width: 1100px;
}

.home-dl__title {
    flex: 0 0 100%;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: calc(0.2 * var(--behnke-basic));
}

.home-dl__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.3 * var(--behnke-basic));
}

.home-dl__item > a {
    display: inline-flex;
    align-items: center;
    gap: calc(0.4 * var(--behnke-basic));
    padding: calc(0.6 * var(--behnke-basic)) calc(1.2 * var(--behnke-basic));
    background: #fff;
    border: 1px solid var(--behnke-design, #0066cc);
    border-radius: calc(0.5 * var(--behnke-basic));
    color: var(--behnke-design, #0066cc);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.home-dl__item > a:hover {
    background: var(--behnke-design, #0066cc);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.18);
    transform: translateY(-1px);
}

.home-dl__ver {
    font-size: 0.78rem;
    color: #888;
}

/* ── 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);
    }
    .home-feature {
        flex-direction: column;
        text-align: center;
        gap: calc(0.6 * var(--behnke-basic));
        padding: calc(1.2 * var(--behnke-basic));
    }
    .home-feature__cta {
        width: 100%;
        justify-content: center;
    }
}