/* =========================================================
   WIRELAB — TOOLS PAGE
========================================================= */
.tools-content {
    padding-bottom: 40px;
}


/* =========================================================
   PAGE TITLE
========================================================= */
.tools-content > h2 {
    margin: 0 0 12px 0;

    font-family: inherit;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 1.5px;

    color: var(--wire-text);

    text-transform: uppercase;
}


/* =========================================================
   TOOLS GRID
========================================================= */
.tools-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}


/* =========================================================
   TOOL CARD
========================================================= */
.tool-card {
    position: relative;

    width: 100%;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;

    padding: 2px;

    border: 1px solid var(--wire-border);

    background: var(--wire-card, var(--wire-bg));

    color: var(--wire-text);
    text-decoration: none;

    box-shadow:
        0 5px 16px var(--wire-shadow),
        inset 0 1px 0 rgba(160, 94, 210, 0.45);

    overflow: hidden;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}






/* =========================================================
   TOOL INFORMATION
========================================================= */
.tool-card-content {
    position: absolute;
    inset: 2px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-end;

    box-sizing: border-box;
    padding: 20px 10px 12px;

    text-align: center;

  

    z-index: 1;
}


/* =========================================================
   TOOL IMAGE
========================================================= */
.tool-color-wheel {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    max-width: none;

    object-fit: cover;
    object-position: center;

    border: 0;
    opacity: 0.9;

    z-index: -1;
}



/* =========================================================
   TOOL TITLE
========================================================= */
.tool-card h3 {
    margin: 0;

    font-family: inherit;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.15;

    letter-spacing: 0.6px;

    color: var(--wire-text-bright, #ffffff);

    text-shadow:
        0 1px 6px rgba(0, 0, 0, 0.9);
}


/* =========================================================
   TOOL DESCRIPTION
========================================================= */
.tool-card p {
    margin: 4px 0 0 0;

    font-family: inherit;
    font-size: 10px;
    font-weight: 300;
    line-height: 1.2;

    letter-spacing: 0.8px;

    color: var(--wire-text);
}


/* =========================================================
   TOOL STATUS
========================================================= */
.tool-status {
    display: block;

    margin-top: 7px;

    font-family: inherit;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.9px;

    color: var(--wire-accent-bright);

    text-shadow:
        0 0 5px rgba(160, 94, 210, 0.35);
}


/* =========================================================
   HOVER
========================================================= */
.tool-card:hover {
    border-color: var(--wire-border-accent);

    background: var(--wire-card, var(--wire-bg));

    box-shadow:
        0 6px 18px var(--wire-shadow),
        inset 0 0 0 1px rgba(160, 94, 210, 0.25);
}

.tool-card:hover .tool-color-wheel {
    opacity: 1;
    transform: scale(1.025);
}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */
.tool-card:focus-visible {
    outline: 2px solid var(--wire-accent);
    outline-offset: 3px;
}