/*
 * /tools/ — the tools landing page.
 *
 * Loaded by tools.php only, and deliberately SMALL: the shelf itself is the
 * site's own `.game-box` component out of style.css, exactly as the front page
 * renders it, so there is nothing here about cards. What is left is the page
 * top — the band that says which section you are in — and it is the same
 * arrangement the mods catalogue uses for its masthead: the neutral wallpaper,
 * a scrim, and the title over it.
 *
 * Colours, type and timings come from the tokens in style.css rather than being
 * restated here, so the page follows the site theme wherever those are retuned.
 */

/* ================================ page top ================================ */

.tools-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--header-offset) + var(--header-height) + 72px) 0 60px;
}

.tools-hero-img {
    position: absolute;
    inset: 0;
    background-image: url('../img/uploads/2019/10/planets_wallpaper-min.jpg');
    background-size: cover;
    background-position: center 30%;
    opacity: 0.38;
    z-index: -2;
}

/* Fades the picture out into the page rather than cutting it off at a line, so
   the shelf below reads as the same surface. */
.tools-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--mythiq-blue) 28%, transparent) 0%, color-mix(in srgb, var(--mythiq-blue) 0%, transparent) 60%),
        linear-gradient(180deg, rgba(32, 33, 37, 0.72) 0%, rgba(32, 33, 37, 0.88) 55%, var(--bg-color) 100%);
    z-index: -1;
}

.tools-eyebrow {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mythiq-blue);
    margin: 0 0 10px;
}

.tools-hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 53px;
    line-height: 1.25;
    color: var(--text-white);
    margin: 0 0 18px;
}

.tools-hero-lead {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text-light);
    max-width: 40em;
    margin: 0;
}

/* ================================= the shelf ============================== */

/* The cards themselves are `.game-box` and `.projects-grid` out of style.css,
   untouched. All this band does is give them the spacing of a page whose shelf
   follows a page top rather than the front page's hero — where the same grid
   sits inside `.projects-section`, which pulls itself 200px up to overlap the
   hero's shape divider. That negative margin is the front page's, not the
   component's, which is why this section does not carry that class. */
.tools-shelf {
    padding: 8px 0 110px;
}

@media (max-width: 1024px) {
    .tools-hero-title {
        font-size: 40px;
    }
}

@media (max-width: 560px) {
    .tools-hero {
        padding-top: calc(var(--header-offset) + var(--header-height) + 40px);
        padding-bottom: 44px;
    }

    .tools-shelf {
        padding-bottom: 72px;
    }
}

@media (max-width: 480px) {
    .tools-hero-title {
        font-size: 32px;
    }
}