/*---------------------------------------------------------------------------------

 Theme Name:   FabUI
 Theme URI:    https://fabulous.gr
 Description:  Theme from Fabulous Design Studio
 Author:       Yiorgos Domianos
 Author URI:   https://fabulous.gr
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/
/* Container: 3 στήλες σε desktop */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 στήλες */
  gap: 20px; /* Απόσταση μεταξύ των grid items */
}

/* Στυλ για κάθε team item */
.team-item {
  border: 1px solid #eee;
  padding: 15px;
  text-align: center;  /* Προαιρετικό */
}

/* Τετράγωνη εικόνα */
.team-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* Διατηρεί τετράγωνη αναλογία (σε σύγχρονους browsers) */
  object-fit: cover;
  display: block;
  margin: 0 auto 10px; /* Κεντράρει την εικόνα & προσθέτει margin από κάτω */
}

/* Τίτλος */
.team-title {
  font-size: 20px;
  margin: 10px 0;
font-family:'Helvetica Bold';
}

/* ACF πεδίο (π.χ. position) */
.team-position {
  font-size: 16px;
  margin-bottom: 10px;
	font-family:'Helvetica Bold';
color:#646464;
}

/* Περιεχόμενο */
.team-content {
  font-size: 14px;
  line-height: 1.4;
font-family:'Helvetica Light';

}

/* Responsive: 1 στήλη σε κινητά (<=768px) */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr; /* Από 3 στήλες -> 1 στήλη */
  }
}



.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* ή ό,τι θέλετε για απόσταση */
}

.media-item {
  width: 200px; /* παράδειγμα, προσαρμόστε ανάλογα */
  text-align: center;
  position: relative;
}

.media-thumb {
  display: block;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

.media-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #fff;
  opacity: 0.8;
}

.media-title {
  margin-top: 8px;
}

/* Modal Styles */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999999999; /* αυξάνει το z-index αρκετά ώστε να είναι πάνω από κάθε άλλο στοιχείο */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.video-modal-content {
  position: relative;
  margin: 15% auto;
  width: 80%;
  max-width: 1200px; /* προαιρετικό, για να μη γίνεται τεράστιο σε μεγάλες οθόνες */
}

.video-modal-close {
  position: absolute;
  top: 10px;
  right: 25px;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  cursor: pointer;
}

.video-modal iframe {
  width: 100%;
  height: 450px; /* αυξομειώστε το αν θέλετε */
  border: none;
}