/* کاشی‌های ابزار (home/inc/tool_tiles.html) روی صفحه‌ی خانه و صفحه‌ی /tools/.
   همان ToolsCard اپ: جعبه‌ی ۶۶ پیکسلی گرد با رنگ دامنه‌ی ۷٪، آیکون ۳۶ پیکسلی به رنگ دامنه و عنوان زیرش.
   آیکون‌ها SVGهای static/img/tools/اند که از drawableهای اپ ساخته شده‌اند؛ رنگشان را mask از این‌جا می‌گیرد.
   موبایل‌فرست: چهار کاشی در ردیف، از md به بالا هشت کاشی در یک ردیف. */

/* ===== رنگ دامنه‌ها (EleColors اپ) ===== */
.site-tool-project { --tool-tint: #1e88e5; --tool-bg: rgba(30, 136, 229, .07); }
.site-tool-service { --tool-tint: #fb6107; --tool-bg: rgba(251, 97, 7, .07); }
.site-tool-commercial { --tool-tint: #6151c5; --tool-bg: rgba(97, 81, 197, .07); }
.site-tool-blog { --tool-tint: #00897b; --tool-bg: rgba(0, 137, 123, .07); }
.site-tool-store { --tool-tint: #c50101; --tool-bg: rgba(197, 1, 1, .07); }
.site-tool-soon { --tool-tint: rgba(33, 37, 41, .7); --tool-bg: rgba(33, 37, 41, .07); }

/* ===== آیکون‌ها ===== */
.site-tool-icon-mini-project { --tool-icon: url(/static/img/tools/mini-project.svg); }
.site-tool-icon-contract { --tool-icon: url(/static/img/tools/contract.svg); }
.site-tool-icon-commission { --tool-icon: url(/static/img/tools/commission.svg); }
.site-tool-icon-learn { --tool-icon: url(/static/img/tools/learn.svg); transform: scale(.85); }
.site-tool-icon-my-projects { --tool-icon: url(/static/img/tools/my-projects.svg); }
.site-tool-icon-sample-projects { --tool-icon: url(/static/img/tools/sample-projects.svg); }
.site-tool-icon-store { --tool-icon: url(/static/img/tools/store.svg); }
.site-tool-icon-accounting { --tool-icon: url(/static/img/tools/accounting.svg); }

/* ===== بالای صفحه‌ی خانه: ردیف بنرها و کارت ابزارها ===== */
/* روی گوشی ترتیب اپ است (بنرها، بعد ابزارها)؛ از lg به بالا ابزارها بالای بنرها می‌آیند. فاصله‌ی زیر هدر را
   همین بسته می‌دهد، نه بخشی که اول آمده، تا جابه‌جایی ترتیب فاصله را خراب نکند. */
.home-top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: calc(var(--site-header-overlap) + .75rem) 0 1.25rem;
}

/* نوار دانلود اندروید خودش فاصله‌ی هدر را جبران کرده است */
.site-app-strip:not([hidden]) ~ .home-top {
    padding-top: .75rem;
}

.site-tools {
    list-style: none;
    margin: 0;
    padding: 1rem .25rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem .25rem;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
}

/* ===== یک کاشی ===== */
.site-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #212529;
    font: inherit;
    text-align: center;
    text-decoration: none;
}

.site-tool-art {
    position: relative;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    max-width: 100%;
    border-radius: 28px;
    background: var(--tool-bg);
    transition: box-shadow .15s ease;
}

.site-tool-icon {
    width: 36px;
    height: 36px;
    background-color: var(--tool-tint);
    -webkit-mask: var(--tool-icon) center / contain no-repeat;
    mask: var(--tool-icon) center / contain no-repeat;
}

.site-tool-title {
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.5;
}

a.site-tool:hover .site-tool-art,
button.site-tool:hover .site-tool-art {
    box-shadow: inset 0 0 0 1.5px var(--tool-tint);
}

.site-tool:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 4px;
    border-radius: 12px;
}

/* «اپ»: ابزاری که فقط در اپ است و برگه‌ی «در اپ» را باز می‌کند */
.site-tool-badge {
    position: absolute;
    top: -4px;
    left: -6px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--site-app-green, #198754);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.6;
}

/* «به‌زودی»: مثل اپ، قرمز و ۳۵ درجه چرخیده روی گوشه‌ی بالای کاشی */
.site-tool-soon {
    cursor: default;
}

.site-tool-soon .site-tool-title {
    color: #6c757d;
}

.site-tool-soon-tag {
    position: absolute;
    top: -2px;
    right: -10px;
    transform: rotate(35deg);
    color: var(--bs-danger);
    font-size: .65rem;
    font-weight: 700;
}

/* ===== صفحه‌ی /tools/ ===== */
.tools-page {
    padding: calc(var(--site-header-overlap) + 1.25rem) 0 2rem;
}

.site-app-strip:not([hidden]) ~ .tools-page {
    padding-top: 1.25rem;
}

.tools-page-title {
    margin-bottom: 1rem;
    font-size: 1.35rem;
    font-weight: 800;
}

.site-tools.site-tools-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.site-tools-page .site-tool {
    justify-content: flex-start;
    padding: 1.1rem .75rem 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
}

.site-tools-page .site-tool-art {
    width: 72px;
    height: 72px;
}

.site-tools-page .site-tool-icon {
    width: 40px;
    height: 40px;
}

.site-tools-page .site-tool-title {
    font-size: .95rem;
    font-weight: 700;
}

.site-tool-desc {
    color: #6c757d;
    font-size: .78rem;
    line-height: 1.7;
}

.tools-page-more {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}

.tools-page-more a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 999px;
    color: #212529;
    font-size: .88rem;
    text-decoration: none;
}

.tools-page-more i {
    color: var(--bs-primary);
}

@media (min-width: 576px) {
    .site-tools.site-tools-page {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .site-tools {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        padding: 1.25rem .75rem;
        border-radius: 24px;
    }

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

/* دسکتاپ: ابزارها بالای ردیف بنرها */
@media (min-width: 992px) {
    .home-top .home-tools {
        order: -1;
    }
}