/* Flipcards grid and card styling */
.flipcard-section {
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
}

.flipcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2.2rem;
  justify-items: center;
}

/* On smaller screens keep flipcards below project-top-row (auth) to prevent overlap */
@media (max-width: 900px) {
  .flipcard-section {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 650px) {
  .flipcard-grid {
    grid-template-columns: 1fr;
    grid-gap: 1.2rem;
  }
}

.flipcard {
  perspective: 1200px;
  width: 340px;
  height: 240px;
  position: relative;
  background: transparent;
  /* premium glassy shadow */
  box-shadow: var(--shadow-main);
  border-radius: 22px;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.58s cubic-bezier(.39,.31,.6,.88);
  border-radius: 22px;
}

.flipcard.flipped .flip-inner {
  transform: rotateY(180deg);
}

/* Both faces glassy, but with background tint for readability */
.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 4px 18px #3d52a012;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-glass);
  border: 1.5px solid var(--border);
}

.flip-front {
  z-index: 1;
  cursor: pointer;
  user-select: none;
  padding: 0;
  transition: box-shadow .15s, border-color .15s;
}

.flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 1px 8px #3d52a011;
}

.flip-title {
  font-size: 1.17rem;
  font-weight: 700;
  margin-top: -.12rem;
  color: var(--primary);
  background: var(--surface-glass);
  padding: .5rem 1.1rem;
  border-radius: 0 0 15px 15px;
  width: 100%;
  text-align: center;
  letter-spacing: .4px;
  border-top: 1.2px solid var(--border);
}

/* Back of the card */
.flip-back {
  transform: rotateY(180deg);
  z-index: 2;
  flex-direction: column;
  padding: 0;
  justify-content: flex-start;
  align-items: stretch;
  background: var(--surface-glass);
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 24px #7091e612;
  position: absolute;
}

.flip-back video {
  width: 100%;
  height: 160px;
  border-radius: 0 0 19px 19px;
  margin-top: 32px;
  background: #000;
  object-fit: cover;
  display: block;
  outline: none;
  box-shadow: 0 2px 12px #2d365730;
}

/* Speaker overlay (centered on video, glassy, with subtle border/shadow) */
.speaker-overlay {
  position: absolute;
  left: 50%;
  top: 108px;
  width: 52px;
  height: 52px;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-glass);
  border-radius: 50%;
  z-index: 8;
  box-shadow: 0 4px 18px #7091e61a;
  cursor: pointer;
  border: 2.5px solid var(--accent);
  outline: none;
  transition: opacity 0.19s, box-shadow 0.18s, border-color 0.16s, background 0.13s;
}

.speaker-overlay:hover, .speaker-overlay:active {
  background: var(--primary-light);
  border-color: var(--primary);
  box-shadow: 0 2px 6px #7091e63a;
}

.speaker-overlay[hidden] { display: none !important; }

/* Close and fullscreen buttons */
.flipcard-close, .flipcard-fullscreen {
  position: absolute;
  top: 10px;
  width: 34px;
  height: 34px;
  background: var(--surface-glass);
  border: 1.5px solid var(--border);
  color: var(--accent);
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: bold;
  z-index: 12;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .97;
  transition: background .14s, border-color .14s, color .15s;
  box-shadow: 0 2px 8px #7091e610;
}

.flipcard-close {
  right: 14px;
  color: #ea4c2d;
  border-color: #ea4c2d88;
}

.flipcard-close:hover {
  background: #ea4c2d11;
  color: #fff;
  border-color: #ea4c2dee;
}

.flipcard-fullscreen {
  right: 54px;
  color: var(--primary-light);
  font-size: 1.15rem;
  border-color: var(--primary-light);
}

.flipcard-fullscreen:hover {
  background: var(--primary-light);
  color: var(--surface);
  border-color: var(--primary);
}

/* Flipcard modal */
.flipcard-modal {
  display: none;
  position: fixed;
  z-index: 99;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(44,52,90,0.55);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}

.flipcard-modal.open {
  display: flex;
}

.flipcard-modal-content {
  background: var(--surface-glass);
  border-radius: 22px;
  padding: 1.3rem 1.2rem 1.4rem;
  box-shadow: 0 4px 38px #3d52a055;
  position: relative;
  max-width: 96vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.8px solid var(--border);
}

.flipcard-modal-close {
  position: absolute;
  right: 10px; top: 10px;
  background: var(--surface-glass);
  border: 1.5px solid #ea4c2d88;
  color: #ea4c2d;
  border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 1.4rem;
  z-index: 99;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .97;
  box-shadow: 0 2px 8px #ea4c2d17;
  transition: background .13s, color .13s, border-color .12s;
}

.flipcard-modal-close:hover {
  background: #ea4c2d12;
  color: #fff;
  border-color: #ea4c2dee;
}

.flipcard-modal video {
  max-width: 80vw;
  max-height: 64vh;
  border-radius: 18px;
  background: #10182d;
  outline: none;
  box-shadow: 0 2px 14px #3d52a033;
}

@media (max-width: 650px) {
  .flipcard { width: 98vw; height: 220px; }
  .flip-back video { height: 120px; margin-top: 22px;}
}