/* ==========================================================================
   GV Capital · Brand Guidelines
   media-fit.css: მოქაფები სრულად, ჭრის და ჩარჩოს გარეშე

   პრინციპი: ჩარჩო აქტივის ნამდვილ პროპორციას იმეორებს.
   მაშინ contain და cover ერთი და იგივეა: არც იჭრება, არც ზოლი რჩება.
   სიმაღლე ფიქსირდება (რომ ეკრანზე დაეტიოს), სიგანე პროპორციიდან გამომდინარეობს.

   გამონაკლისი: ყდის ფილმი (.st-cover-film), ის განზრახ ავსებს ეკრანს.
   ========================================================================== */

.st-office-feature,
.st-context-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  grid-template-columns: none;
}

.st-office-feature > .st-media,
.st-context-pair > .st-media,
.st-context-single {
  height: clamp(300px, 46vh, 470px);
  max-width: 100%;
  aspect-ratio: var(--ar);
  background: #eef2f2;
}

/* flex-ის შიგნით სიგანე პროპორციიდან თავისით მოდის */
.st-office-feature > .st-media,
.st-context-pair > .st-media {
  width: auto;
  flex: 0 1 auto;
}

/* ცალკე მდგომს სიგანე უნდა შეეკვეცოს, თორემ ბლოკი გაწელავს
   და პროპორცია აღარ მუშაობს */
.st-context-single {
  display: block;
  width: fit-content;
  align-self: center;
  margin-inline: auto;
}

.st-office-feature > .st-media video,
.st-office-feature > .st-media img,
.st-context-pair > .st-media video,
.st-context-pair > .st-media img,
.st-context-single video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --- აქტივების ნამდვილი პროპორციები --- */

/* 1920×1080 */
.st-media:has(video[data-src*="gv-facade-motion"]),
.st-context-single:has(video[data-src*="gv-fleet-motion"]) { --ar: 16 / 9; }

/* 1744×2336 */
.st-office-motion,
.st-office-still { --ar: 1744 / 2336; }

/* 1248×1664 */
.st-media:has(video[data-src*="gv-flags-motion"]) { --ar: 3 / 4; }

@media (max-width: 700px) {
  .st-office-feature,
  .st-context-pair { flex-direction: column; align-items: center; gap: 10px; }

  .st-office-feature > .st-media,
  .st-context-pair > .st-media,
  .st-context-single { height: auto; width: 100%; }
}

/* ==========================================================================
   #applications — PHYSICAL ENVIRONMENT WIDE FILM BANNER
   სიმაღლე შემცირებულია (კინემატოგრაფიული widescreen პროპორცია ~420-430px),
   რომ ზედმეტი ცარიელი ასფალტი მოიჭრას და ოფისის ბლოკიც ეკრანზე გამოჩნდეს.
   ========================================================================== */

#applications .st-wide-film {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(320px, 44vh, 430px);
  aspect-ratio: auto;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 clamp(24px, 4vh, 40px);
  background: #0d1a20;
}

#applications .st-wide-film video,
#applications .st-wide-film img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

@media (max-width: 700px) {
  #applications .st-wide-film {
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  #applications .st-wide-film video,
  #applications .st-wide-film img {
    object-fit: contain;
    object-position: center center;
  }
}

/* ==========================================================================
   #corporate და #operations — იგივე წესი, რაც #applications-ში:
   ჩარჩო აქტივის ნამდვილ პროპორციას იმეორებს, ამიტომ არც იჭრება და არც
   ზოლი რჩება. ყველა ეს აქტივი 1248×1664 / 1086×1448 არის, ანუ 3:4.

   ID-იანი სელექტორები საჭიროა: story.css, review-state.css და ux-pass.css
   ბადის განლაგებას კლასებით წერენ და ux-pass ამ ფაილის შემდეგ იტვირთება.
   flex-ზე გადასვლა grid-row/grid-column განაცხადებს ისედაც აუქმებს.
   ========================================================================== */

#corporate .st-corporate-showcase {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  height: auto;
  grid-template-columns: none;
  grid-template-rows: none;
}

#corporate .st-corporate-showcase > .st-media {
  flex: none;
  height: clamp(320px, 60vh, 660px);
  aspect-ratio: 3 / 4;
  width: auto;
  max-width: 100%;
  min-height: 0;
  background: #eef2f2;
}

/* ==========================================================================
   #operations — EVERYDAY IDENTITY BENTO GRID (FULL WIDTH)
   ========================================================================== */

#operations .st-operations-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.15fr;
  grid-template-rows: repeat(2, minmax(260px, 1fr));
  height: clamp(520px, 64vh, 640px);
  gap: clamp(14px, 1.4vw, 20px);
  width: 100%;
  max-width: 100%;
  justify-content: stretch;
  margin: 0 0 clamp(24px, 4vh, 48px);
}

#operations .st-operations-grid > .st-media {
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #eef2f2;
}

#operations .st-operations-grid > .st-uniform {
  grid-column: 1;
  grid-row: 1 / span 2;
}

#operations .st-operations-grid > .st-hardhat {
  grid-column: 2;
  grid-row: 1;
}

#operations .st-operations-grid > .st-packaging {
  grid-column: 2;
  grid-row: 2;
}

#operations .st-operations-grid > .st-material {
  grid-column: 3;
  grid-row: 1 / span 2;
}

#corporate .st-corporate-showcase > .st-media video,
#corporate .st-corporate-showcase > .st-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

#operations .st-operations-grid > .st-media video,
#operations .st-operations-grid > .st-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#operations .st-operations-grid > .st-uniform video {
  object-position: center center;
}

#operations .st-operations-grid > .st-hardhat img {
  object-position: center 25%;
}

#operations .st-operations-grid > .st-packaging img {
  object-position: center center;
}

#operations .st-operations-grid > .st-material video {
  object-position: center center;
}

@media (max-width: 860px) {
  #operations .st-operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    height: auto;
    gap: 12px;
  }
  #operations .st-operations-grid > .st-uniform {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
    height: auto;
  }
  #operations .st-operations-grid > .st-hardhat {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
    height: auto;
  }
  #operations .st-operations-grid > .st-packaging {
    grid-column: 2;
    grid-row: auto;
    aspect-ratio: 4 / 3;
    height: auto;
  }
  #operations .st-operations-grid > .st-material {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

@media (max-width: 700px) {
  #corporate .st-corporate-showcase { flex-direction: column; align-items: stretch; gap: 10px; }
  #corporate .st-corporate-showcase > .st-media { height: auto; width: 100%; }
}