/* =========================================================
   SERVOMIX — TOOLS
   File: css/pages/tools.css
   Used by: tools/. Markup and copy are the originals; this
   file only lays them out. Every value is a token.
========================================================= */

.tools-container{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

.tools-hero,
.tools-directory{
    position:relative;
    padding-block:var(--s-7);
}

@media (min-width:1024px){

    .tools-hero,
    .tools-directory{
        padding-block:var(--s-8);
    }
}

.tools-directory{
    padding-top:0;
}

.tools-hero-bg{
    display:none;
}

:where(main[class*="page-"]) small{
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.tools-hero .tools-container{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-7);
    align-items:center;
}

@media (min-width:1024px){

    .tools-hero .tools-container{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        gap:var(--s-8);
    }
}

.tools-hero-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
    min-width:0;
}

.tools-eyebrow,
.more-tools-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.tools-hero h1{
    font-size:min(var(--t-display), 11vw);
    line-height:1;
    font-weight:var(--w-display);
    font-stretch:var(--wd-display);
}

.tools-hero h1 span{
    display:block;
    color:var(--accent);
}

.tools-hero-content > p{
    max-width:54ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.tools-coming-message{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-2) var(--s-4);
    border-radius:var(--r-pill);
    background:var(--accent-tint);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.tools-hero-visual{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--glass-edge);
    border-radius:var(--r-panel);
    box-shadow:var(--shadow-float);
}

.tools-hero-image{
    display:block;
    width:100%;
    height:auto;
}


/* ---------------------------------------------------------
   DIRECTORY: filters, search, grid
--------------------------------------------------------- */

.tools-filter-bar{
    position:sticky;
    top:calc(var(--nav-h) + var(--s-3));
    z-index:var(--z-raised);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    margin-bottom:var(--s-5);
    padding:var(--s-2);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-card);
    background:var(--glass-strong);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    box-shadow:var(--shadow-card);
}

.tools-filters{
    display:flex;
    gap:var(--s-1);
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
}

.tool-filter{
    display:inline-flex;
    flex:none;
    align-items:center;
    gap:var(--s-2);
    min-height:40px;
    padding:0 var(--s-4);
    border:0;
    border-radius:var(--r-pill);
    background:transparent;
    color:var(--ink-2);
    font:inherit;
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    cursor:pointer;
    transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.tool-filter:hover{
    background:var(--surface-sunken);
    color:var(--ink);
}

.tool-filter.active{
    background:var(--accent);
    color:var(--ink-on-accent);
}

.tools-search{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    flex:1 1 220px;
    max-width:320px;
    min-height:40px;
    padding:0 var(--s-3);
    border:1px solid var(--line-control);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink-3);
}

@media (max-width:767px){

    .tools-search{
        max-width:none;
    }
}

.tools-search:focus-within{
    border-color:var(--accent);
    box-shadow:var(--focus-ring);
}

.tools-search input{
    flex:1;
    min-width:0;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    outline:none;
}

.tool-filter:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.tools-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-3);
}

@media (min-width:640px){

    .tools-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1024px){

    .tools-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (min-width:1280px){

    .tools-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

.tool-card{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon badge"
        "text text";
    align-items:start;
    gap:var(--s-2) var(--s-3);
    padding:var(--card-pad);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.tool-card:hover{
    border-color:var(--line-strong);
    box-shadow:var(--shadow-card);
}

.tool-card.tool-hidden{
    display:none;
}

.tool-card-primary{
    grid-column:1 / -1;
    grid-template-areas:
        "label label"
        "icon title"
        "icon badge"
        "text text";
    border-color:var(--accent);
    background:var(--accent-tint);
}

@media (min-width:1024px){

    .tool-card-primary{
        grid-column:span 2;
    }
}

.primary-label{
    grid-area:label;
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    width:max-content;
    min-height:24px;
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.primary-label .icon{
    width:12px;
    height:12px;
}

.tool-icon{
    grid-area:icon;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.tool-title-row{
    grid-area:title;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-1) var(--s-2);
}

.tool-title-row h3{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

.coming-badge{
    min-height:20px;
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--warn-soft);
    color:var(--warn);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
    line-height:20px;
}

.game-badge{
    grid-area:badge;
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    width:max-content;
    min-height:24px;
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
}

.game-badge .icon{
    width:12px;
    height:12px;
}

.tool-card > p{
    grid-area:text;
    color:var(--ink-2);
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.tools-empty{
    display:grid;
    justify-items:center;
    gap:var(--s-2);
    padding:var(--s-8) var(--s-4);
    text-align:center;
}

.tools-empty[hidden]{
    display:none;
}

.tools-empty-icon{
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--surface-sunken);
    color:var(--ink-2);
}

.tools-empty p{
    color:var(--ink-2);
}

/* more tools */
.more-tools-card{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
    align-items:center;
    margin-top:var(--s-6);
    padding:var(--card-pad-lg);
    border-radius:var(--r-panel);
    background:var(--console);
    color:var(--console-ink);
}

@media (min-width:768px){

    .more-tools-card{
        grid-template-columns:auto minmax(0, 1fr) auto;
        gap:var(--s-5);
    }
}

.more-tools-icon{
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:var(--r-control);
    background:var(--accent);
    color:var(--ink-on-accent);
}

.more-tools-content{
    display:grid;
    gap:var(--s-2);
}

.more-tools-content span{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.more-tools-content h2{
    color:var(--console-ink);
    font-size:var(--t-h2);
    line-height:var(--lh-heading);
}

.more-tools-content p{
    max-width:60ch;
    color:var(--console-ink-2);
}

.more-tools-badge{
    border-color:transparent;
    background:var(--on-accent-tint);
    color:var(--console-ink);
}