/* Hand Drawn Video Grid v5.1 CSS - full-height videos inside boxes */

:root {
  --hdvg-full-height: 100vh !important;
  --hdvg-half-height: 60vh !important;
  --hdvg-left-square-height: 90vh !important;
  --hdvg-right-square-height: 90vh !important;
  --hdvg-top-height:45vh !important;
  --hdvg-bottom-height: 45vh !important;
}

.hdvg-left-square video,
.hdvg-right-square video,
.hdvg-left-top video,
.hdvg-left-bottom video,
.hdvg-right-top video,
.hdvg-right-bottom video {
    object-fit: cover !important;
   object-position: center center !important;
    height: 100% !important;
}


/* ⭐ LEFT SQUARE — Always 1:1 */
.hdvg-left-square {
  aspect-ratio: 1/1;
  width: 100%;
  height: auto !important;
}

/* ⭐ RIGHT SIDE — FOLLOW LEFT SQUARE HEIGHT */
.hdvg-right-top,
.hdvg-right-bottom {
  height: 100% !important;          /* half-half of left square */
  width: 100%;
  aspect-ratio: auto !important;   /* disable fixed ratio */
}

.hdvg-grid .hdvg-item:first-child .hdvg-overlay-text {
  bottom: 10% !important;
    top: auto !important;     
    left: 50%;
    transform: translateX(-50%);
}

/* ==========================
   Grid Layout
   ========================== */
.hdvg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row dense;
  gap: 0;
  align-items: start;
}

.hdvg-item {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: #000;
  min-height: 140px;
  cursor: pointer;
  transition: transform .25s ease;
  z-index: 1;
}

.hdvg-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
}

/* ✅ Make video fill full height & width of its container */
.hdvg-thumb video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    object-fit: cover !important;
  object-position: 50% 30% !important;
  border: 0;
  pointer-events: none;
  transition: transform 0.5s ease;
}

/* Make iframe background cover fully */
.hdvg-thumb .hdvg-bg-video-iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* Overlay text */
.hdvg-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  color: #fff;
  font-family: "Jost", Sans-serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-align: center;
  opacity: 0;
  transition: all 0.35s ease;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  z-index: 3;
  pointer-events: none;
  width: 80%;
  line-height: 1.3;
}

.hdvg-caption {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.hdvg-desc {
  margin: 4px 0 0;
  font-size: 1.5rem;
  opacity: .95;
  display: block;
  margin-top: 35px;
}

/* Show overlay text on hover */
.hdvg-item:hover .hdvg-overlay-text {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Cinematic hover effect */
.hdvg-item:hover video {
/*   transform: scale(1.08); */
  filter: brightness(0.8);
}

/* Dark overlay */
.hdvg-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hdvg-item:hover::after {
  opacity: 1;
}

/* ==========================
   Modal Styles
   ========================== */
.hdvg-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 999999;
}

.hdvg-modal.active {
  display: flex !important;
}

.hdvg-modal-inner {
  background: transparent;
  padding: 8px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 85%;
  width: 920px;
  position: relative;
  outline: none;
}

/* .hdvg-modal-content {
  width: 100%;
  height: 60vh;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
} */

.hdvg-modal-content {
    width: 90vw;
    max-width: 900px;
    aspect-ratio: 16/9;      /* FIX: perfect ratio */
    height: auto !important;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.hdvg-modal-close {
  position: absolute;
  right: 8px;
  top: 6px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}

/* ==========================
   Layout Pattern Classes
   ========================== */
.hdvg-full {
  grid-column: 1 / -1;
  grid-row: span 1;
  min-height: var(--hdvg-full-height);
}

.hdvg-half {
  grid-column: span 1;
  grid-row: span 1;
  min-height: var(--hdvg-half-height);
}

.hdvg-left-square {
  grid-column: 1 / 2;
  grid-row: span 2;
  min-height: var(--hdvg-left-square-height);
}

.hdvg-right-square {
  grid-column: 2 / 3;
  grid-row: span 2;
  min-height: var(--hdvg-right-square-height);
}

.hdvg-right-top {
  grid-column: 2 / 3;
  grid-row: auto;
  min-height: var(--hdvg-top-height);
}

.hdvg-right-bottom {
  grid-column: 2 / 3;
  grid-row: auto;
  min-height: var(--hdvg-bottom-height);
}

.hdvg-left-top {
  grid-column: 1 / 2;
  grid-row: span 1;
  min-height: var(--hdvg-top-height);
}

.hdvg-left-bottom {
  grid-column: 1 / 2;
  grid-row: auto;
  min-height: var(--hdvg-bottom-height);
}

/* Three equal boxes row (3-column layout) */
.hdvg-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1 / -1;
}

.hdvg-row-3 .hdvg-item {
  min-height: var(--hdvg-third-height, 48vh);
	 object-fit: cover !important;
	object-position: center center !important;
	
}

/* ==========================
   Responsive
   ========================== */
@media (max-width: 768px) {
  .hdvg-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .hdvg-left-square,
  .hdvg-right-square,
  .hdvg-right-top,
  .hdvg-right-bottom,
  .hdvg-left-top,
  .hdvg-left-bottom,
  .hdvg-row-3 .hdvg-item {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 200px;
  }

  .hdvg-modal-content {
    height: 45vh;
  }
	:root {
  --hdvg-full-height: 300px !important;
  --hdvg-half-height: 405px !important;
  --hdvg-left-square-height: 952px !important;
  --hdvg-right-square-height: 952px !important;
  --hdvg-top-height: 476px !important;
  --hdvg-bottom-height: 476px !important;
}
	
.hdvg-half {
 
  min-height:200px !important;
}	
.hdvg-overlay-text {
 
	font-size: 15px;}	
.hdvg-desc {
    
	font-size: 13px;}	
	
}

/* Force YouTube/Vimeo iframe to behave like background video */
.hdvg-thumb iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  /* Prevent showing controls */
  object-fit: cover !important;
}



/* Prevent YouTube controls & hover UI */
.hdvg-thumb iframe::-webkit-media-controls {
  display: none !important;
}

.hdvg-thumb iframe * {
  pointer-events: none !important;
}


/* DESKTOP FIX — logo crop nahi hoga */
@media (min-width: 769px) {
  .hdvg-thumb video {
      object-position: top center !important; /* PERFECT for desktop */
  }
}


/* MOBILE FIX — aapka same rakha */
@media (max-width: 768px) {
  .hdvg-thumb video {
      object-position: right top !important; /* jaisa aapko chahiye */
  }
	
	
}

.hdvg-thumb,
.hdvg-thumb video,
.hdvg-thumb iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    line-height: 0 !important;
    background: #000 !important;
}