/* user.css is loaded last from Joomla. Other override .css files are not loaded */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@import 'global.css';
@import 'menu.css';

/* =========================
   BASE
========================= */
body {
    font-family: "Raleway", sans-serif;
}

.font-playfair {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    color: rgb(96, 94, 94);
}

/* Didot – italic */
@font-face {
    font-family: "Didot eText W01 Italic";
    src: url("https://db.onlinewebfonts.com/t/16efa2896f117dae2debeb23ab4715dd.eot");
    src: url("https://db.onlinewebfonts.com/t/16efa2896f117dae2debeb23ab4715dd.eot?#iefix") format("embedded-opentype"),
         url("https://db.onlinewebfonts.com/t/16efa2896f117dae2debeb23ab4715dd.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/16efa2896f117dae2debeb23ab4715dd.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/16efa2896f117dae2debeb23ab4715dd.ttf") format("truetype"),
         url("https://db.onlinewebfonts.com/t/16efa2896f117dae2debeb23ab4715dd.svg#Didot eText W01 Italic") format("svg");
}

.didot-italic {
    font-family: "Didot eText W01 Italic", serif;
    font-style: italic;
    color: rgb(96, 94, 94);
}

/* =========================
   HERO (CUSTOM DIV)
========================= */
.hero-image {
    position: relative;
    width: 100%;
    height: min(85vh, 820px);
    overflow: clip;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: center;

    /* СЪЩАТА scroll-анимация */
    animation: heroZoom 1s linear both;
    animation-timeline: scroll(y root);
    animation-range: 0% 60%;
}

@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.18); }
}






/* HERO overlay (прост вариант) */
.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
}

/* Заглавие */
.hero-title {
  font-size: 6vh;
  color: rgba(0, 0, 0, 0.85);
  text-shadow: 0 0 5px rgba(255,255,255,0.9); 
  line-height: 0.9;
  margin: 0;
}

/* Подзаглавие */
.hero-subtitle {
  font-size: 2vh;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 5px rgba(0,0,0,0.6);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 8px 0 0 0;
}

.hero-title {
  font-weight: 300;
}


/* =========================
   HERO - MOBILE FIX
========================= */
@media (max-width: 768px){
  .hero-image{
    height: 34vh !important;       /* пробвай 40-55vh */
    min-height: 34vh !important;
    max-height: 34vh !important;
  }

  .hero-image > img{
    object-position: center 35% !important; /* мести фокуса: 20%-60% */
  }

  .hero-title{ font-size: 4.5vh !important; }
  .hero-subtitle{ font-size: 1.8vh !important; }
}







/* =========================
   GALLERY
========================= */
.portfolio-grid .portfolio-img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    display: block;
}

.pg-item-box-image img {
    width: 100%;
    object-fit: cover;
}

.pg-item-box {
    padding: 4px;
    margin: 0;
}

.collaborator-img {
    width: 100%;
    height: 390px;
    object-fit: cover;
}

/* Photoswipe */
.pswp__caption,
.pswp__top-bar,
.pswp__item {
    background-color: #fff !important;
}

.pswp__caption__center {
    color: rgba(54, 54, 54, 1) !important;
}

/* =========================
   LINKS
========================= */
.contact-link {
    color: inherit;
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

/* =========================
   MENU (DESKTOP)
========================= */
@media (min-width: 992px) {
    .mm-toggler,
    .mm-toggler-link,
    button.mm-toggler,
    button.mm-toggler-link {
        display: none !important;
    }

    .mod-menu ul.mm-collapse {
        display: none !important;
    }

    .mod-menu li:hover > ul.mm-collapse {
        display: block !important;
    }
}

.mod-menu ul.mm-collapse a {
    text-decoration: none !important;
    color: #000 !important;
}

.mod-menu ul.mm-collapse a:hover {
    color: #555 !important;
}

/* =========================
   MENU (MOBILE)
========================= */
@media (max-width: 991px) {
    .navbar-collapse {
        direction: rtl;
    }

    .navbar-toggler {
        margin-left: auto;
    }
}

/* =========================
   DECORATION
========================= */
.vertical-line {
    width: 1px;
    height: 80px;
    background-color: #000;
    opacity: 0.5;
}

/* Remove shadows */
.pg-item-box-image img,
.pg-image,
.c-Image,
.c-Image--shaded {
    box-shadow: none !important;
}

.pg-item-box,
.pg-item-box-image,
.pg-item-box a.pg-photoswipe-button,
.pg-item-box figure {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Language switcher */
.mod-languages {
    margin-top: 18px !important;
    margin-right: auto !important;
}

/* Image hover */
.pg-image {
    transition: filter 0.25s ease;
}

.pg-image:hover {
    filter: brightness(65%) contrast(110%);
}

/* =========================
   HOME SECTIONS
========================= */
.about-section p {
    text-align: center;
    line-height: 1.4;
    margin-bottom: 0.6rem;
}

.clients-label {
    margin-bottom: 2rem;
}

.clients-text {
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.clients-quote {
    margin-top: 2rem;
}

.clients-quote p {
    line-height: 1.3;
    margin-bottom: 0.4rem;
}

/* Header fix */
#mod-custom110 {
    margin-top: 20px;
    align-items: flex-start !important;
}


/* MOBILE FIX – hero да не е прекалено висок */
  /* @media (max-width: 768px) {
  .hero-image {
    height: 40vh;       /* пробвай 55–65vh ако искаш */
    max-height: 520px;  /* допълнителна защита */
  }
}   */






/* TITLE */
.team-title {
    font-family: "Playfair Display", serif;
    font-size: 56px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #111;
}

/* SUBTITLE */
.team-subtitle {
    font-size: 16px;
    color: #aaa;
    letter-spacing: 1px;
}

/* NAME */
.collaborator-name {
    margin-top: 20px;
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 500;
    color: #111;
}

/* ROLE */
.collaborator-role {
    font-size: 15px;
    color: #999;
    margin-top: 6px;
}


/* Повече въздух между редовете със снимките */
.collaborators-grid {
    margin-bottom: 70px; /* увеличи ако искаш още */
}


/* ////////////////////////////////////////////////////////////// */

  /* Специфични стилове за фиксиран 5-колонен грид */
  .team-grid-5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Центрира последния ред, ако има по-малко от 5 елемента */
    margin: 0 -10px;
  }

  .team-grid-5 .col-5-custom {
    flex: 0 0 20%; /* Точно 20% ширина за 5 колони на ред */
    max-width: 20%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 30px;
  }

  .collaborator-img {
    width: 100%;
    aspect-ratio: 1 / 1; 
    object-fit: cover;
    object-position: top;
    height: auto;
    margin-bottom: 10px;
  }

  .collaborator-name {
    font-weight: bold;
    font-size: 14px;
    line-height: 1.2;
    margin-top: 4px;
  }

  .collaborator-role {
    font-size: 12px;
    color: #666;
  }

  /* Оптимизация за много малки екрани (текстът да не се застъпва) */
  @media (max-width: 576px) {
    .collaborator-name { font-size: 11px; }
    .collaborator-role { font-size: 10px; }
    .team-grid-5 .col-5-custom { padding: 5px; }
  }
/* ////////////////////////////////////////////////////////////// */

/* Основен контейнер за екипа */
  .team-custom-wrapper {
    display: grid;
    /* По подразбиране: 1 колона за мобилни устройства */
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 40px;
  }

  /* Настройки за таблети и десктоп (над 992px) */
  @media (min-width: 992px) {
    .team-custom-wrapper {
      /* Фиксирани 5 колони */
      grid-template-columns: repeat(5, 1fr);
    }
  }

  /* Стил за всеки член */
  .collaborator-item {
    text-align: center;
  }

  .collaborator-item img {
    width: 100%;
    max-width: 250px; /* Предотвратява твърде големи снимки на мобилен телефон */
    aspect-ratio: 1 / 1; 
    object-fit: cover;
    object-position: top;
    height: auto;
    margin-bottom: 12px;
    /* transition: transform 0.3s ease; */
  }


  .collaborator-name {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
    display: block;
    color: #333;
  }

  .collaborator-role {
    font-size: 12px;
    color: #666;
    display: block;
  }


/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

.team-title {
    font-family: 'Raleway', sans-serif !important;
    font-size: 32px !important; /* Намалено от 56px */
    /* font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px; */
}