/* ═══════════════════════════════════════════
   Pensiunea Atlantis · court.css
   „Curtea" — buton care extinde animat videoul (încărcat la cerere)
   ═══════════════════════════════════════════ */

.court { height: 56vh !important; min-height: 360px; position: relative; overflow: hidden; transition: height 0.8s var(--ease); }
.court-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: opacity 0.6s ease; }
.court .court-overlay { z-index: 2; }
.court-content { z-index: 3; transition: opacity 0.4s ease; }

.court-play { margin-top: 1.7rem; display: inline-flex; align-items: center; gap: 0.7rem; background: var(--gold); color: var(--ink); border: none; cursor: pointer; font-family: 'Jost', sans-serif; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.95rem 2.1rem; transition: transform 0.3s var(--ease), box-shadow 0.3s, background 0.3s; }
.court-play:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(184,144,90,0.4); background: var(--gold-light); }
.court-play .cp-ico { font-size: 0.66rem; }

.court-stage { position: absolute; inset: 0; z-index: 4; background: #0d1f16; display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease); }
.court-stage video { animation: courtFade 0.9s var(--ease); }
@keyframes courtFade { from { opacity: 0; } to { opacity: 1; } }

.court.is-playing { height: 86vh !important; }
.court.is-playing .court-stage { opacity: 1; pointer-events: auto; }
.court.is-playing .court-content { opacity: 0; pointer-events: none; }
.court.is-playing .court-poster { opacity: 0.2; }

.court-close { position: absolute; top: 18px; right: 18px; z-index: 6; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(12,18,10,0.55); color: #fff; font-size: 1.05rem; cursor: pointer; transition: background 0.25s, transform 0.3s var(--ease), color 0.25s; }
.court-close:hover { background: var(--gold); color: var(--ink); transform: rotate(90deg); }

@media (max-width: 900px) {
  .court { height: 52vh !important; min-height: 320px; }
  .court.is-playing { height: 70vh !important; }
}