/* =========================================================
   ФИЛИАЛ — карточка-плитка (для страницы «Все филиалы»)
   ========================================================= */

/* --- Сетка --- */
.branches-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-top: calc(var(--app-em)*1.75);
}

/* --- Карточка (без metro-color) --- */
.branch-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: calc(var(--app-em)*1.5) calc(var(--app-em)*1.375);
    padding-top: calc(var(--app-em)*1.75);
    border-radius: var(--r-xl);
    background: var(--surface-sunk);
    box-shadow: var(--shadow-tiny);
    border: var(--hair) solid transparent;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.branch-tile:hover {
    border-color: var(--accent-soft);
    box-shadow: var(--shadow-soft);
    transform: translateY(calc(var(--app-em)*-0.125));
}

/* =========================================================
   Плитки с metro-color (inline-стиль содержит --tile-accent)
   На цветном фоне всегда чёрный текст — в light и dark темах.
   ========================================================= */

/* Фон = цвет ветки, текст — чёрный */
.branch-tile[style*="--tile-accent"] {
    background: var(--tile-accent);
    color: #000;
}

/* Название филиала — чёрный */
.branch-tile[style*="--tile-accent"] .branch-tile__name {
    color: #000;
}

/* Факты (адрес, метро) — чёрный с лёгкой прозрачностью для иерархии */
.branch-tile[style*="--tile-accent"] .branch-tile__fact,
.branch-tile[style*="--tile-accent"] .branch-tile__fact .icon {
    color: rgba(0, 0, 0, .75);
}

/* Стрелка — полупрозрачная чёрная подложка, иконка чёрная */
.branch-tile[style*="--tile-accent"] .branch-tile__arrow {
    background: rgba(0, 0, 0, .12);
    color: #000;
}
.branch-tile[style*="--tile-accent"]:hover .branch-tile__arrow {
    background: rgba(0, 0, 0, .22);
    color: #000;
}

/* Верхняя полоска accent — на цветном фоне мягкая чёрная */
.branch-tile[style*="--tile-accent"] .branch-tile__accent {
    background: rgba(0, 0, 0, .12);
}

/* Ховер на цветной плитке — рамка чёрная полупрозрачная */
.branch-tile[style*="--tile-accent"]:hover {
    border-color: rgba(0, 0, 0, .25);
    box-shadow: var(--shadow);
}

/* Бейдж формата */
.branch-tile[style*="--tile-accent"] .branch-tile__badge {
    background: rgba(0, 0, 0, .14);
    color: #000;
}

/* Цветная полоса сверху — ветка метро (или fallback на accent) */
.branch-tile__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--app-em)*0.375);
    background: var(--tile-accent, var(--accent));
}

/* --- Шапка: название + стрелка --- */
.branch-tile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    min-width: 0;
}
.branch-tile__name {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-h4);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Круглая стрелка — маленькая, справа в шапке */
.branch-tile__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(var(--app-em)*2.25);
    height: calc(var(--app-em)*2.25);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.branch-tile__arrow .icon {
    width: calc(var(--app-em)*1.125);
    height: calc(var(--app-em)*1.125);
}
.branch-tile:hover .branch-tile__arrow {
    background: var(--accent-strong);
    color: var(--accent-ink);
    transform: translateX(calc(var(--app-em)*0.125));
}

/* --- Факты: адрес и метро --- */
.branch-tile__facts {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: auto;
}
.branch-tile__fact {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-meta);
    line-height: 1.45;
    color: var(--muted);
}
.branch-tile__fact .icon {
    flex: none;
    width: calc(var(--app-em)*1.125);
    height: calc(var(--app-em)*1.125);
    margin-top: calc(var(--app-em)*0.125);
    color: var(--accent);
    stroke-width: 1.8;
}
.branch-tile__fact > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* --- Бейдж формата обучения --- */
.branch-tile__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: calc(var(--app-em)*0.25) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--cta-soft);
    color: var(--cta-strong);
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
}

/* =========================================================
   Тёмная тема — только для карточек БЕЗ metro-color
   (иначе перебивает фон карточек с --tile-accent)
   ========================================================= */
[data-theme="dark"] .branch-tile:not([style*="--tile-accent"]) {
    background: #232e40; /* темнее surface, светлее surface-sunk — лучше читается */
}
[data-theme="dark"] .branch-tile:not([style*="--tile-accent"]):hover {
    border-color: var(--accent);
}
[data-theme="dark"] .branch-tile:not([style*="--tile-accent"]) .branch-tile__badge {
    background: var(--cta-soft);
    color: var(--cta-strong);
}

/* --- Адаптив --- */
@media (max-width: 68.75em) {
    .branches-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 48.75em) {
    .branches-tiles {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }
    .branch-tile {
        padding: calc(var(--app-em)*1.25);
        padding-top: calc(var(--app-em)*1.5);
    }
    .branch-tile__name {
        font-size: var(--fs-ui);
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .branch-tile,
    .branch-tile__arrow {
        transition: none;
    }
    .branch-tile:hover,
    .branch-tile:hover .branch-tile__arrow {
        transform: none;
    }
}


/* =========================================================
   Филиалы — сетка на странице категории
   ========================================================= */

/* Если .feed содержит карточки-плитки — раскладываем в 3 колонки */
.feed:has(> .branch-tile) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feed:has(> .branch-tile) > :not(.branch-tile) {
    grid-column: 1 / -1;
}

@media (max-width: 68.75em) {
    .feed:has(> .branch-tile) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48.75em) {
    .feed:has(> .branch-tile) {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Филиалы на главной (.branch-row) — цветной фон, чёрный текст
   Работает во всех темах.
   ========================================================= */

.branch-row[style*="--metro-bg"] {
    color: #000;
}
.branch-row[style*="--metro-bg"] .branch-row__name {
    color: #000;
}
.branch-row[style*="--metro-bg"] .branch-row__metro,
.branch-row[style*="--metro-bg"] .branch-row__body {
    color: rgba(0, 0, 0, .78);
}
.branch-row[style*="--metro-bg"] .branch-row__cta {
    background: rgba(0, 0, 0, .14);
    color: #000;
}
.branch-row[style*="--metro-bg"]:hover .branch-row__cta {
    background: rgba(0, 0, 0, .26);
    color: #000;
}
.branch-row[style*="--metro-bg"]:hover {
    border-color: rgba(0, 0, 0, .25);
}