/* ============================================
   Home page (/)
   Three tiers: the two one-step lookups, the dashboard feature (shared
   .dash-intro panel + character line-up from global.css), then compact
   tiles for the other tools. Loaded by includes/header.php for pageType 'hub'.
   ============================================ */

.home {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* --- Hero: the home page's own "portal" band. Questions on the left, the
   lookups that answer two of them on the right. The blue glow is the old
   centered home header's signature, kept so home still feels like the front
   door while sharing the interior header and nav. --- */

.home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start; /* emblem and questions sit top-left, level with the first lookup */
    gap: 28px 44px;
    padding: 38px 20px; /* 20px sides: text lines up with the panels below */
    overflow: visible; /* the item suggestions drop below the hero */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 70% 90% at 12% 0%, rgba(39, 170, 226, 0.16), transparent 60%),
        radial-gradient(ellipse 60% 70% at 100% 100%, rgba(39, 170, 226, 0.06), transparent 60%),
        var(--color-bg-panel);
}

/* The site emblem as the hero's crest (the old centered home header's logo) */
.home-hero__emblem {
    display: block;
    width: 68px;
    height: 68px;
    margin: 0 0 18px;
    filter: drop-shadow(0 6px 22px rgba(39, 170, 226, 0.38));
}

.home-hero__title {
    margin: 0 0 16px;
    /* Each question keeps to one line. The longer one, "What's this item worth?",
       is 10.9em wide, so the size is also capped at the intro column's width / 11.2
       (it would wrap in the two-column hero at 1101-1300px, iPad landscape). */
    font-size: min(clamp(1.6rem, 1rem + 2.6vw, 3.3rem), 100cqi / 11.2);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--color-text-light);
}

/* One question per line: each maps to a tool, and the rhythm is the point */
.home-hero__title span {
    display: block;
}

/* The intro column runs the hero's full height so the flourish can sit in
   the bottom-left corner, level with the bottom of the lookups */
.home-hero__intro {
    container-type: inline-size; /* sizes .home-hero__title */
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

/* A gold tooltip-style flourish anchored bottom-left: a diamond knot on the
   text edge, one rule fading out to the right. Decoration only, for the space
   the taller lookups column leaves under the lede. */
.home-hero__flourish {
    display: block;
    width: 320px;
    max-width: 100%;
    height: 24px;
    margin-top: auto;
    padding-top: 28px;
    box-sizing: content-box;
    color: var(--color-wow-gold);
    opacity: 0.55;
}

.home-hero__lede {
    max-width: 46ch;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.home-lookups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.home-lookup {
    display: flex;
    flex-direction: column;
    padding: 18px 20px 16px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: rgba(5, 9, 16, 0.55);
    box-shadow: 0 16px 36px -24px rgba(0, 0, 0, 0.9);
    transition: border-color 0.2s ease;
}

.home-lookup:focus-within {
    border-color: rgba(39, 170, 226, 0.55);
}

.home-lookup__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.home-lookup__title svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.home-lookup__fields {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* Check a name: a grid, so the name field gives way before anything collides.
   The realm column takes about a third of the row, between 8.5rem and 11rem,
   then a small Region select (US, EU, KR, TW) and the button. */
#home-name .home-lookup__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(8.5rem, 32%, 11rem) 5.25rem auto;
    align-items: end;
}

#home-name .home-lookup__go {
    padding: 0 16px;
}

.home-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.home-field--grow {
    flex: 1 1 auto;
}

.home-field label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.home-field input,
.home-field select {
    width: 100%;
    min-width: 0; /* a select won't shrink below its longest option otherwise */
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-bg-input);
    color: var(--color-text-light);
    font: inherit;
    font-size: 0.98rem;
    caret-color: var(--color-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-field select {
    width: 100%; /* sized by the #home-name grid column */
    cursor: pointer;
    /* Our own chevron, inset from the edge (the native arrow hugs it) */
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    text-overflow: ellipsis;
}

.home-field select:disabled {
    cursor: progress;
    opacity: 0.7;
}

.home-field input::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

.home-field input:focus,
.home-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(39, 170, 226, 0.18);
}

.home-field [aria-invalid="true"] {
    border-color: rgba(239, 68, 68, 0.7);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

/* Item suggestions under "Price an item" (like Price Check's own) */
#home-price .home-field--grow {
    position: relative;
}

.home-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #0d1420;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9);
}

.home-suggest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.home-suggest__item:hover,
.home-suggest__item[aria-selected="true"] {
    background: rgba(39, 170, 226, 0.12);
}

.home-suggest__icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.3);
}

.home-suggest__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 500;
}

.home-suggest__type {
    flex: none;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.home-lookup__go {
    flex: none;
    gap: 9px;
    height: 44px;
    padding: 0 20px;
    /* the same type as the dashboard's Open all and Reset */
    font-size: 0.92rem;
    font-weight: 600;
}

.home-lookup__go svg {
    flex: none;
    width: 17px;
    height: 17px;
    transition: color 0.2s ease;
}

.home-lookup__go:hover svg,
.home-lookup__go:focus-visible svg {
    color: var(--color-primary);
}

.home-lookup__note {
    margin: 12px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.home-lookup__note a,
.home-lookup__note .home-lookup__link,
.home-lookup__note-error {
    white-space: nowrap;
}

/* "Switch game" opens the header's game switcher: a button dressed as the note's links */
.home-lookup__note .home-lookup__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.home-lookup__note a,
.home-lookup__note .home-lookup__link {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(39, 170, 226, 0.4);
    text-underline-offset: 3px;
}

.home-lookup__note a:hover,
.home-lookup__note .home-lookup__link:hover,
.home-lookup__note .home-lookup__link:focus-visible {
    text-decoration-color: currentColor;
}

.home-lookup__note-error {
    color: #fca5a5;
}

/* --- Dashboard feature (layout from the shared .dash-intro panel) --- */

.home-feature {
    margin-bottom: 0;
    /* The line-up gets the wider column here (the dashboard intro splits 50/50) */
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

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

/* Signed out: the sample dashboard's numbers, flagged as a sample */
.home-feature__sample-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin: 4px 0 22px;
}

.home-feature__sample-stats .home-stats {
    margin: 0;
}

/* Signed in: their own five characters (dashboard/includes/overview.php) */
.home-feature__lineup {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    min-height: 300px;
    padding: 64px 0 12px;   /* room over the tallest heads and horns */
    container-type: inline-size;
}

.home-feature .fav-classes {
    margin-bottom: 22px;
}

/* Signed in: the glow follows their saved faction theme */
.home-feature[data-faction="alliance"] {
    background:
        radial-gradient(60% 90% at 78% 100%, rgba(72, 146, 255, 0.2), transparent 70%),
        var(--color-bg-panel);
    border-color: rgba(72, 146, 255, 0.3);
}

.home-feature[data-faction="horde"] {
    background:
        radial-gradient(60% 90% at 78% 100%, rgba(232, 52, 44, 0.2), transparent 70%),
        var(--color-bg-panel);
    border-color: rgba(232, 52, 44, 0.3);
}

.home-feature .dash-intro__copy h2 {
    max-width: none;
    font-size: clamp(1.45rem, 1rem + 1.2vw, 1.85rem);
}

.home-feature__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
}

.home-feature .dash-intro__cta img {
    width: 18px;
    height: 18px;
}

/* The quieter second choice beside Sign in: a text link, not a button */
.home-feature__sample {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.28);
    text-underline-offset: 4px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.home-feature__sample:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

.home-feature__sample svg {
    flex: none;
    width: 14px;
    height: 14px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-feature__sample:hover svg {
    transform: translateX(3px);
}

/* Signed in: "Open your dashboard" with Settings + Sign out locked up under it.
   The lock-up is as wide as its widest row (normally the Open button), and
   Settings / Sign out split that width evenly, so the pair ends flush with it. */
.home-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 44px;
    margin: 10px 0 20px;
}

.home-stats div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.home-stats dt {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.home-stats dd {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-light);
}

/* --- More tools: Name Generator and Mount Palette side by side, each showing
   its page intro's art; Azeroth Living as a slim full-width row below --- */

.home-more__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

/* Name Generator and Mount Palette take half each; the slim row under them
   (Azeroth Living, About, Buy me a coffee) takes a third each */
.home-more__grid > .home-tile {
    grid-column: span 3;
}

.home-more__grid > .home-tile--wide {
    grid-column: span 2;
}

.home-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 14px 20px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-panel);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.home-tile:hover {
    border-color: rgba(39, 170, 226, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.7);
    text-decoration: none;
}

.home-tile__art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 158px;
    border-radius: var(--radius-md);
    overflow: hidden;
    /* closest-side: the glow reaches zero before any edge of the box, so it never shows a cut line */
    background: radial-gradient(closest-side, rgba(39, 170, 226, 0.11), rgba(39, 170, 226, 0.05) 50%, transparent);
}

.home-tile__art .intro-faces {
    --face: 50px;
}

/* Mounts stand on the art box's floor, like the Mount Palette intro */
.home-tile__art--floor {
    align-items: flex-end;
    padding: 0 12px;
    /* Pooled low under the mounts, but fading out above the box's bottom edge */
    background: radial-gradient(closest-side at 50% 70%, rgba(39, 170, 226, 0.13), rgba(39, 170, 226, 0.05) 55%, transparent);
}

.home-tile__art--floor .intro-mounts {
    max-width: 316px;
}

.home-tile__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 26px;
}

.home-tile__name .badge {
    /* the gap spaces it; when it wraps under the name it lines up left */
    margin-left: 0;
}

.home-tile__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.home-tile__desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.home-tile__arrow {
    position: absolute;
    right: 18px;
    bottom: 20px;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-tile:hover .home-tile__arrow {
    transform: translateX(3px);
}

.home-tile--soon:hover .home-tile__arrow {
    transform: translate(2px, -2px);
}

/* Azeroth Living: a slim full-width row */
.home-tile--wide {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 14px 56px 14px 20px;
}

.home-tile--wide .home-tile__art {
    flex: none;
    height: auto;
    background: none;
    overflow: visible;
}

.home-tile--wide .home-tile__body {
    padding-right: 0;
}

.home-tile--wide .home-tile__arrow {
    top: 50%;
    bottom: auto;
    margin-top: -9px;
}

/* Small marks for the slim row: gold sparkles for What's new, a gold figure for About */
.home-mark img,
.home-mark svg {
    display: block;
    width: 48px;
    height: 48px;
    padding: 9px;
    border-radius: 12px;
}

.home-mark--about svg,
.home-mark--new svg {
    border: 1px solid rgba(255, 209, 0, 0.45);
    background: rgba(255, 209, 0, 0.1);
    color: var(--color-wow-gold);
}

/* Not built yet, so a dashed placeholder mark */
.home-house svg {
    width: 48px;
    height: 48px;
    padding: 10px;
    border: 1px dashed rgba(255, 209, 0, 0.45);
    border-radius: 12px;
    color: var(--color-wow-gold);
    background: rgba(255, 209, 0, 0.05);
}

@media (prefers-reduced-motion: reduce) {
    .home-tile,
    .home-tile__arrow,
    .home-feature__sample svg {
        transition: none;
    }
    .home-tile:hover {
        transform: none;
    }
}

/* --- Responsive --- */

@media (max-width: 1100px) {
    /* Stacked: no empty corner to fill */
    .home-hero__flourish {
        display: none;
    }
    .home-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 30px 20px 20px;
    }
    .home-lookups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .home-lookups {
        grid-template-columns: minmax(0, 1fr);
    }
    .home-more__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .home-more__grid > .home-tile,
    .home-more__grid > .home-tile--wide {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    /* Phones: the dashboard feature's buttons and links center in the panel */
    /* Four numbers in one row (sample and signed in) */
    .home-feature .home-stats {
        display: grid;
        grid-template-columns: repeat(4, auto);
        gap: 10px 18px;
    }
    .home-feature .home-stats dd {
        font-size: 1.35rem;
    }
    .home-feature__actions {
        flex-direction: column;
        justify-content: center;
    }
    .home-feature .account-lockup {
        display: flex;
        width: fit-content;
        margin-inline: auto;
    }
}

@media (max-width: 560px) {
    .home-hero {
        padding: 22px 20px 20px;
    }
    .home-hero__emblem {
        width: 52px;
        height: 52px;
        margin-bottom: 14px;
    }
    .home-stats {
        gap: 14px 32px;
    }
    .home-lookup {
        padding: 16px;
    }
    .home-lookup__fields {
        flex-wrap: wrap;
    }
    .home-field--grow {
        flex-basis: 100%;
    }
    /* Phones: the name on its own row, then realm and region, then the button full width */
    #home-name .home-lookup__fields {
        grid-template-columns: minmax(0, 1fr) 5.25rem;
    }
    #home-name .home-lookup__go {
        grid-column: 1 / -1;
        justify-content: center;
    }
    #home-name .home-field--grow {
        grid-column: 1 / -1;
    }
    .home-field select {
        width: 100%;
    }
    #home-price .home-lookup__go {
        flex: 1 1 auto;
    }
    .home-tile__art {
        height: 136px;
    }
    .home-tile__art .intro-faces {
        --face: 40px;
    }
    .home-tile--wide {
        padding: 12px 48px 12px 16px;
        gap: 14px;
    }
    .home-tile__desc {
        font-size: 0.84rem;
    }
}

/* Optical tuning, measured per button at 0.92rem with 17px icons: the usual
   1px label lift left both labels about 1px high here, so they sit at 0 */
.home-lookup__go .btn-label {
    top: 0;
}

/* Lookup fields on the dashboard Filters panel's scale: labels 0.72rem
   caps at 700, values 0.92rem at 500 (the Check / Find prices size),
   placeholders regular */
.home-field label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.home-field input,
.home-field select {
    font-size: 0.92rem;
    font-weight: 500;
}

.home-field input::placeholder {
    font-weight: 400;
}

/* Narrow phones (399px and below, 2026-09-30): the dashboard feature tightens, signed in
   and signed out: less air around the copy, the four numbers smaller so they sit inside
   the panel, and closer buttons */
@media (max-width: 399px) {
    .home-feature .dash-intro__copy { padding-top: 22px; }
    .home-feature .dash-intro__copy h2 { font-size: 1.35rem; margin-bottom: 8px; }
    .home-feature .dash-intro__lede { font-size: 0.92rem; line-height: 1.5; margin-bottom: 14px; }
    /* The numbers go two by two instead of shrinking (a signed-in player's 2,085 pets
       didn't fit four across) */
    .home-feature .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
    .home-feature__sample-stats { gap: 10px 14px; margin: 2px 0 16px; }
    .home-feature__actions { gap: 10px; }
    .home-feature .fav-classes { margin-bottom: 16px; }
    .home-feature .signin-trust { margin-top: 12px; font-size: 0.78rem; }
    .home-feature .account-lockup { gap: 8px; }
}