/* ============================================================
   ПЛИТКИ КАТЕГОРИЙ УСЛУГ
   ============================================================ */
.tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .tiles { grid-template-columns: repeat(2, 1fr); } }

.tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    min-height: 220px;
    transition: transform var(--t), box-shadow var(--t);
    display: flex;
    flex-direction: column;
}
.tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.tile__bg {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 65%;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    opacity: 0.65;
    z-index: 0;
    transition: opacity var(--t), transform 600ms ease;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 75%);
    mask-image: linear-gradient(to right, transparent 0%, black 75%);
    mix-blend-mode: luminosity;
}
.tile:hover .tile__bg {
    opacity: 0.85;
    transform: scale(1.05);
}

.tile__link-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.tile__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
    max-width: 65%;
}

.tile__title {
    font-size: var(--fs-lg);
    margin: 0 0 var(--space-2);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.tile__title a {
    color: inherit;
    text-decoration: none;
}
.tile__title a:hover { color: inherit; opacity: 0.8; }

.tile__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    flex: 1;
}
.tile__items li { line-height: 1.4; }
.tile__items a {
    color: inherit;
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--t-fast), opacity var(--t-fast);
    position: relative;
    z-index: 3;
}
.tile__items a:hover {
    opacity: 0.7;
    border-bottom-color: currentColor;
}

.tile__more {
    align-self: flex-start;
    margin-top: var(--space-3);
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    transition: background var(--t-fast);
    position: relative;
    z-index: 3;
}
.tile__more:hover { background: rgba(255, 255, 255, 0.85); color: inherit; }

/* ===== ТОНА ПЛИТОК (мягкие пастельные оттенки) ===== */
.tile--cyan   { background: #e0f7fa; color: #0e4a55; }
.tile--peach  { background: #ffe9d6; color: #6b3815; }
.tile--blue   { background: #dde9ff; color: #1d3a82; }
.tile--amber  { background: #fff2c2; color: #6b4d00; }
.tile--rose   { background: #ffe0e7; color: #7a253b; }
.tile--mint   { background: #d8f3df; color: #1b4d2b; }
.tile--violet { background: #e9defe; color: #44267a; }