/* Rámování a jemné vnější mezery */
.project-card{
    border:1px solid #e9ecef;           /* požadovaný border 1px kolem celého artiklu */
    border-radius:.75rem;
    padding:.5rem;                       /* mírná vnitřní mezera vlevo/vpravo */
  }
  
  /* Stejná výška hlavního obrázkového boxu + obraz VŽDY celý */
  .project-card .project-thumb{
    --card-h: clamp(240px, 24vw, 340px); /* jednotná výška napříč kartami */
    height: var(--card-h);
    background:#f7f7f77d;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    /* flex + contain = obraz se zmenší, aby se vešel celý, bez deformace */
  }
  .project-card .project-thumb img{
    width:100%; height:100%;
    object-fit: contain;                 /* ukaž vždy celý obrázek, bez natažení */
    object-position: center;
    display:block;
  }
  
  /* META GRID – 4 stejné dlaždice vedle sebe na md+, s mezerami */
  .meta-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:.5rem;
    padding: 0 .25rem;                   /* lehká mezera vlevo/vpravo */
  }
  @media (min-width: 768px){
    .meta-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  
  /* Meta dlaždice (šedé) */
  .meta-tile{
    display:flex; align-items:center; gap:.35rem;
    padding:.5rem .65rem;
    border:1px solid #e9ecef;
    border-radius:.65rem;
    background:#f8f9fa;
    font-size:.925rem;
    color:#495057;
    min-height: 42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .meta-flag{
    display:flex; align-items:center; justify-content:center;
    padding:.35rem;                      /* trochu menší vnitřní mezera pro ikonu */
  }
  .meta-flag img{
    height:18px; width:auto; display:block; /* malinká vlajka */
  }
  
  /* Ikonová tlačítka sociálních sítí – větší vodorovné mezery */
  .social-wrap{ gap:.5rem .6rem; }       /* řádková x sloupcová mezera */
  .btn-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:10px;
    border:1px solid #e9ecef; background:#fff;
    margin: 0 .2rem;                     /* mezera vpravo i vlevo u každé ikony */
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  .btn-icon:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.06); background:#f8f9fa; }
  
  /* Nadpis – decentní hover */
  .project-card .card-title a{ color:#1f1f1f; }
  .project-card .card-title a:hover{ color:#003049; }
  
  /* Mobil: menší výška obrázku */
  @media (max-width: 767.98px){
    .project-card .project-thumb{ --card-h: 220px; }
  }
  
  .btn-maincolor:hover {
    transform: translateY(-2px);
    opacity: 0.9;
  }
  
  /* Barvy jednotlivých značek */
  .btn-maincolor.facebook  { background-color: #1877F2; }
  .btn-maincolor.linkedin  { background-color: #0077B5; }
  .btn-maincolor.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
  .btn-maincolor.x         { background-color: #000; }
  .btn-maincolor.youtube   { background-color: #FF0000; }
  
  .btn-maincolor i {
    font-size: 16px;
  }

  .btn-group-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* výchozí stav – bez mezer na PC */
  }
  
  /* Mobilní zobrazení – tlačítka pod sebe s mezerami */
  @media (max-width: 767.98px) {
    .btn-group-flex {
      flex-direction: column;
      gap: 10px; /* rovnoměrné odsazení mezi tlačítky */
      align-items: center; /* zarovnání na střed */
    }
  
    .btn-group-flex .btn {
      width: 80%; /* volitelně: tlačítka menší než plná šířka */
    }
  }




/* ====== DETAIL PROJEKTU – 2 meta-tile na řádku, moderní styl ====== */

/* Nadpis projektu */
.project-title {
  font-weight: 700;
  font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
  color: #003049;
  margin-bottom: 1.25rem;
  position: relative;
}

.project-detail .meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}

@media (max-width: 767.98px) {
  .project-detail .meta-grid {
    grid-template-columns: 1fr;
  }
}


.project-detail .meta-tile {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .75rem;
  border: 1px solid #e9ecef;
  border-radius: .65rem;
  background: #f8f9fa;
  font-size: .95rem;
  color: black;
  min-height: 46px;
}
.project-detail .meta-flag {
  justify-content: center;
  padding: .35rem;
}
.project-detail .meta-flag img {
  height: 32px;
  width: auto;
  display: block;
}

/* Erasmus logo */
.erasmus-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.erasmus-wrap img {
  height: 34px;
  width: auto;
}

/* Aside obrázek – vždy celý */
.project-detail .aside-thumb {
  --aside-h: clamp(260px, 28vw, 360px);
  height: var(--aside-h);
  background: white;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.project-detail .aside-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Sociální ikony */
.social-wrap {
  gap: .6rem;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e9ecef;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  background: #f8f9fa;
}

/* Text */
.project-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #333;
}

/* Karty */
.project-article.card {
  border-radius: .9rem;
}

.btn-maincolor:hover {
  transform: translateY(-2px);
  background-color: transparent!important;
  border-color: #cc0101;
  color: #cc0101;
}

/* Barvy jednotlivých značek */
.btn-maincolor.facebook  { background-color: #1877F2; }
.btn-maincolor.linkedin  { background-color: #0077B5; }
.btn-maincolor.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.btn-maincolor.x         { background-color: #000; }
.btn-maincolor.youtube   { background-color: #FF0000; }

.btn-maincolor i {
  font-size: 16px;
}