/* ================================================================
   COMPONENTS.CSS — Galerie, Instructori, Benefits, Testimoniale,
                    Locație, Modals (interior)
   ================================================================ */

/* ===== GALERIE MASONRY ===== */
.gallery-masonry {
  columns: 4 220px;
  column-gap: 10px;
}
.gallery-masonry .gal-item {
  break-inside: avoid;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* Înălțimi variate pentru efect masonry natural */
.gallery-masonry .gal-item:nth-child(1)  .img-ph { height: 260px; }
.gallery-masonry .gal-item:nth-child(2)  .img-ph { height: 180px; }
.gallery-masonry .gal-item:nth-child(3)  .img-ph { height: 320px; }
.gallery-masonry .gal-item:nth-child(4)  .img-ph { height: 200px; }
.gallery-masonry .gal-item:nth-child(5)  .img-ph { height: 240px; }
.gallery-masonry .gal-item:nth-child(6)  .img-ph { height: 180px; }
.gallery-masonry .gal-item:nth-child(7)  .img-ph { height: 300px; }
.gallery-masonry .gal-item:nth-child(8)  .img-ph { height: 160px; }
.gallery-masonry .gal-item:nth-child(9)  .img-ph { height: 220px; }
.gallery-masonry .gal-item:nth-child(10) .img-ph { height: 280px; }
/* Când înlocuiești placeholder-ul cu <img>, adaugă:
   .gallery-masonry .gal-item img { width:100%; display:block; } */
.gallery-masonry .gal-item .img-ph {
  border-radius: 0;
  border: none;
  width: 100%;
}

/* ===== INSTRUCTORI — 4 pe rând ===== */
.instructors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .instructors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .instructors-grid { grid-template-columns: 1fr; } }

.instructor-card {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid rgba(61, 26, 74, .08);
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.instructor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.instructor-card-photo { aspect-ratio: 3 / 4; }
.instructor-card-photo .img-ph {
  border-radius: 0;
  border: none;
  width: 100%;
  height: 100%;
}
.instructor-card-info { padding: 14px 16px; }
.instructor-card-name {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--plum);
  margin-bottom: 3px;
  font-weight: 400;
}
.instructor-card-studio {
  font-size: .74rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 300;
}
.instructor-card-classes {
  font-size: .72rem;
  color: var(--text-soft);
  line-height: 1.6;
  font-weight: 300;
}

/* ===== BENEFITS ===== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.benefit-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 28px 24px;
}
.benefit-icon { margin-bottom: 14px; }
.benefit-title {
  font-family: var(--font-head);
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: var(--lav-light);
  font-weight: 400;
}
.benefit-text {
  font-size: .85rem;
  color: rgba(251,245,238,.72);
  line-height: 1.75;
  font-weight: 300;
}

/* ===== TESTIMONIALE CARUSEL ===== */
.carousel-outer {
  overflow: hidden;
  position: relative;
  margin: 0 -24px;
}
.carousel-track {
  display: flex;
  gap: 20px;
  will-change: transform;
  transition: transform .5s cubic-bezier(.25, .46, .45, .94);
  padding: 8px 24px 16px;
}

.testimonial-card {
  flex: 0 0 340px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(61, 26, 74, .08);
  padding: 36px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
@media (max-width: 480px) {
  .testimonial-card { flex: 0 0 calc(100vw - 48px); }
}

/* ❝ mare, stânga, nu se suprapune cu textul */
.testimonial-card::before {
  content: '\275E';
  font-family: var(--font-head);
  font-size: 5rem;
  line-height: 1;
  color: var(--lav-pale);
  position: absolute;
  top: 16px;
  left: 24px;
  pointer-events: none;
  user-select: none;
}
.testimonial-quote {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-soft);
  line-height: 1.7;
  font-weight: 400;
  margin-top: 44px; /* spațiu pentru ❝ deasupra */
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.testimonial-avatar .img-ph {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  border: none;
}
.testimonial-name { font-weight: 500; font-size: .88rem; color: var(--text-main); }
.testimonial-detail { font-size: .74rem; color: var(--text-muted); font-weight: 300; }
.testimonial-stars {
  color: var(--lavender);
  font-size: .85rem;
  letter-spacing: 2px;
  margin-bottom: 2px;
}

/* Controale carusel */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lav-light);
  border: none;
  cursor: pointer;
  transition: all .3s;
  padding: 0;
}
.carousel-dot.active {
  background: var(--lavender);
  width: 24px;
  border-radius: 4px;
}

/* ===== LOCAȚIE ===== */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 768px) { .location-grid { grid-template-columns: 1fr; } }
.location-map .img-ph { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
.location-info h3 { color: var(--plum); margin-bottom: 16px; }
.location-detail {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.location-detail-text strong {
  display: block;
  font-size: .88rem;
  color: var(--text-main);
  font-weight: 500;
}
.location-detail-text span { font-size: .8rem; color: var(--text-soft); font-weight: 300; }

/* ===== INTERIOR MODAL — clase ===== */
.class-modal-title {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--plum);
  margin-bottom: 4px;
  font-weight: 400;
}
.class-modal-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--text-muted);
  margin: 10px 0 16px;
  font-weight: 300;
}
.class-modal-desc {
  font-size: .9rem;
  color: var(--text-soft);
  line-height: 1.8;
  margin-bottom: 22px;
  font-weight: 300;
}
.class-modal-instr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--lav-pale);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 22px;
  cursor: pointer;
}
.class-modal-instr-row:hover { background: var(--lav-light); }
.class-modal-instr-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}
.class-modal-instr-avatar .img-ph { border-radius: 50%; width: 46px; height: 46px; border: none; }
.class-modal-instr-name { font-weight: 500; font-size: .9rem; color: var(--plum); }
.class-modal-instr-studio { font-size: .76rem; color: var(--text-muted); font-weight: 300; }
.class-modal-footer {
  display: flex;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(61, 26, 74, .08);
  flex-wrap: wrap;
}

/* ===== INTERIOR MODAL — instructori ===== */
.instr-modal-top {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.instr-modal-photo {
  width: 96px;
  height: 116px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.instr-modal-photo .img-ph { border-radius: 0; border: none; width: 96px; height: 116px; }
.instr-modal-name {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--plum);
  margin-bottom: 4px;
  font-weight: 400;
}
.instr-modal-studio { font-size: .84rem; color: var(--text-muted); margin-bottom: 12px; font-weight: 300; }
.instr-social { display: flex; gap: 8px; flex-wrap: wrap; }
.instr-social-btn {
  padding: 5px 13px;
  border-radius: 100px;
  border: 1.5px solid rgba(61, 26, 74, .18);
  background: transparent;
  font-size: .74rem;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
}
.instr-social-btn:hover { border-color: var(--lavender); color: var(--lavender); }
.instr-modal-bio {
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.8;
  margin-bottom: 18px;
  font-weight: 300;
}
.instr-modal-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.instr-gallery-img { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; }
.instr-gallery-img .img-ph { border-radius: 0; border: none; width: 100%; height: 100%; }
.instr-class-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--lav-pale);
  color: var(--plum);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: .76rem;
  margin: 0 5px 5px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 400;
}
.instr-class-pill:hover { background: var(--lavender); color: var(--white); }

/* ===== INTERIOR MODAL — eveniment ===== */
.event-modal { padding: 36px; }
.event-modal h2 {
  font-family: var(--font-head);
  font-size: 1.9rem;
  color: var(--plum);
  margin-bottom: 18px;
  font-weight: 400;
}
.event-modal p {
  font-size: .9rem;
  color: var(--text-soft);
  line-height: 1.85;
  margin-bottom: 14px;
  font-weight: 300;
}