/* VISUAL-EXTRA — real footage on the page (hero background + photo grid).
   Temporary until the production team films proper material.
   To remove: delete visual-extras.css / visual-extras.js links and the VISUAL-EXTRA blocks in index.html. */

/* hero: real room footage behind the headline, darkened so the text stays readable */
.hero-bg { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .65; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,13,28,.92) 0%, rgba(16,13,28,.74) 45%, rgba(16,13,28,.45) 100%);
}
@media (max-width: 760px) {
  .hero-bg::after { background: rgba(16,13,28,.78); }
}

/* tour video: full width above the photo grid */
.vslot.vslot-tour { margin-bottom: 14px; border-radius: var(--r-md); }

/* real photo grid */
.real-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.real-ph { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--violet-up); }
.real-ph img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.real-ph figcaption {
  position: absolute; left: 10px; bottom: 10px;
  font: 600 12px/1 var(--body); color: #F4F1FF;
  background: rgba(16,13,28,.72); padding: 7px 10px; border-radius: 999px;
}
@media (max-width: 760px) {
  .real-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .real-ph figcaption { font-size: 11px; left: 8px; bottom: 8px; }
}

/* partners band: trucking footage, tinted with the brand periwinkle so the logos and text stay readable */
.band { position: relative; overflow: hidden; }
.band > .wrap { position: relative; z-index: 1; }
.band-bg { position: absolute; inset: 0; z-index: 0; }
.band-bg video { width: 100%; height: 100%; object-fit: cover; display: block; } /* grey look is baked into partners-bg-gray.mp4 (a CSS filter on a playing video costs work every frame) */
.band-bg::after { content: ""; position: absolute; inset: 0; background: rgba(147,124,255,.84); }

/* "Qanday boshlanadi?" steps 01 (call centre), 02 (centre tour) and 03 (lessons): footage behind the card, darkened so the text stays readable */
.step.step-video { position: relative; overflow: hidden; background: #1A162B; border-color: transparent; }
.step-video > *:not(.step-bg) { position: relative; z-index: 1; }
.step-bg { position: absolute; inset: 0; z-index: 0; }
.step-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.step-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,22,43,.55) 0%, rgba(26,22,43,.86) 100%); }
.step-video .step-n { color: #937CFF; }
.step-video h4 { color: #F4F1FF; }
.step-video p { color: rgba(244,241,255,.85); }