/* =============================================
   TEAM — тъмен фон
   ============================================= */
.team {
  background: var(--darkest);
  padding: 100px 0 80px;
}

.team .sec-tag  { color: var(--ash); }
.team .sec-title { color: var(--white); }
.team .sec-head { border-bottom-color: rgba(248,245,240,.08); }
.tc-name  { color: var(--white); }
.tc-role  { color: var(--stone); }

/* =============================================
   TEAM GRID — 4 колони
   ============================================= */
.team-grid {
  padding: 0 64px;
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* =============================================
   TEAM CARD
   ============================================= */
.team-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  cursor: pointer;
}

/* Двете снимки */
.tc-img {
  width: 100%;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center top;
  position: absolute;
  top: 0; left: 0;
  transition: opacity .5s ease, transform .5s ease;
}

/* Wrapper за да държи височината */
.team-card::before {
  content: '';
  display: block;
  padding-top: 133.33%; /* 3:4 ratio */
}

.tc-img-1 {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.tc-img-2 {
  opacity: 0;
  transform: scale(1.05);
  z-index: 2;
}

/* Hover — смяна на снимка */
.team-card:hover .tc-img-1 {
  opacity: 0;
  transform: scale(1.05);
}

.team-card:hover .tc-img-2 {
  opacity: 1;
  transform: scale(1);
}

/* Location badge */
.tc-location {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(14,12,10,.75);
  color: var(--concrete);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  z-index: 5;
  opacity: 0;
  transition: opacity .3s ease;
}

.team-card:hover .tc-location {
  opacity: 1;
}

/* Overlay с бутон */
.tc-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(14,12,10,.95) 0%, rgba(14,12,10,.5) 60%, transparent 100%);
  padding: 24px 16px 20px;
  z-index: 6;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.team-card:hover .tc-overlay {
  opacity: 1;
  transform: translateY(0);
}

.tc-overlay-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--white);
  margin-bottom: 2px;
}

.tc-overlay-role {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 14px;
}

.tc-overlay-btn {
  display: block;
  text-align: center;
  background: var(--white);
  color: var(--darkest);
  padding: 10px 16px;
  border-radius: var(--r);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s;
}

.tc-overlay-btn:hover {
  background: var(--concrete);
}

/* Info под снимката */
.tc-info {
  position: relative;
  z-index: 3;
  padding: 16px 0 8px;
  transition: opacity .3s;
}

.team-card:hover .tc-info {
  opacity: 0;
}

.tc-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.tc-role {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1200px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 24px;
  }
}

/* =============================================
   Индивидуални корекции на снимки (вързани за човека)
   ============================================= */
.tc-daniel .tc-img-1 {
  background-size: 88% !important;
  background-position: center 5% !important;
  background-repeat: no-repeat !important;
  background-color: #0e0c0a !important;
}


/* =============================================
   МЕНИДЖМЪНТ — Атанас Биджеков, Константин Чукалов
   Картите преизползват .team-card / .tc-img / .tc-info.
   Тук стои само това, което се различава от бръснарите.
   ============================================= */

/* Секцията продължава тъмния блок на екипа */
.management {
  background: var(--darkest);
  padding: 20px 0 90px;
}

/* правилата горе са вързани за .team — дублират се за .management */
.management .sec-tag   { color: var(--ash); }
.management .sec-title { color: var(--white); }
.management .sec-head  { border-bottom-color: rgba(248,245,240,.08); }

/* Решетка: две центрирани карти, но със ШИРИНАТА на бръснарските.
   Затова flex, а не grid — 2 елемента в 4-колонна решетка биха
   увиснали вляво, а фиксиран max-width ги прави дребни.
   Ширината се смята от същите колони и gap-ове като .team-grid. */
.mgmt-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.mgmt-grid .mgmt-card {
  width: calc((100% - 72px) / 4);   /* 4 колони, 3 × 24px gap */
}

@media (max-width: 1200px) {
  .mgmt-grid .mgmt-card { width: calc((100% - 48px) / 3); }  /* 3 колони */
}

@media (max-width: 768px) {
  .mgmt-grid .mgmt-card { width: calc((100% - 24px) / 2); }  /* 2 колони */
}

/* Мениджърите нямат резервация и локация */
.team-card.mgmt-card .tc-overlay,
.team-card.mgmt-card .tc-location {
  display: none;
}

/* ВАЖНО: базовото правило скрива .tc-info при hover, защото overlay-ът
   поема името. Тук overlay няма — значи името трябва да остане. */
.team-card.mgmt-card:hover .tc-info {
  opacity: 1;
}

/* Атанас има само една снимка. Без това .tc-img-1 избледнява до 0
   и картата почернява. Zoom-ът идва наготово от базовия hover. */
.team-card.mgmt-card.mc-single:hover .tc-img-1 {
  opacity: 1;
}

/* Ролята в червено — за разлика от бръснарите.
   Махни този блок, ако предпочиташ var(--stone) като екипа. */
.mgmt-card .tc-role {
  color: var(--red, #c8241c);
}

/* Индивидуални корекции: снимките са изрязани точно 3:4,
   така че засега не трябват. При нужда се добавят тук,
   вързани за човека (.mc-<slug>), НЕ за позицията:
   .mc-atanas .tc-img-1 { background-position: center 8% !important; } */

@media (prefers-reduced-motion: reduce) {
  .mgmt-card .tc-img,
  .mgmt-card .tc-info { transition: none; }
  .team-card.mgmt-card:hover .tc-img-1,
  .team-card.mgmt-card:hover .tc-img-2 { transform: none; }
}


/* =============================================
   MAP TABS — Dunav / Grand
   Активният бутон е ТЪМЕН (--darkest), неактивният по-светъл (--bg3).
   Състоянието се управлява само през класа .active-tab.
   ============================================= */
.map-tab-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--bg3);
  color: var(--stone);
  transition: background .2s ease, color .2s ease;
}

.map-tab-btn.active-tab {
  background: var(--darkest);
  color: var(--white);
}


/* =============================================
   LIGHTBOX — мобилни корекции
   На телефон стрелките заемаха твърде много място и
   прихващаха тапа върху снимката.
   ============================================= */
@media (max-width: 768px) {
  /* тапът трябва да стига до .gallery-item, а не да спира в overlay-а */
  .gi-overlay {
    pointer-events: none;
  }

  .lightbox {
    padding: 0;
  }

  .lb-inner {
    max-width: 100vw;
    max-height: 82vh;
  }

  .lb-inner img {
    max-width: 94vw;
    max-height: 82vh;
  }

  /* по-малки стрелки, за да не покриват снимката */
  .lb-prev,
  .lb-next {
    font-size: 40px;
    padding: 0 12px;
    z-index: 2;
  }

  .lb-close {
    top: 12px;
    right: 16px;
    font-size: 40px;
    z-index: 3;
  }
}


/* =============================================
   GALLERY — клик/тап и фон преди зареждане
   cursor:pointer е нужен на iOS Safari, за да
   праща click към div елемент.
   ============================================= */
.gallery-item {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gallery-item .gi-img {
  background-color: #1a1816;   /* докато плочката се зареди */
}

.gallery-item:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}