/* OMID HERO + MEDIA V4
   Narrowly scoped overrides. Preserves the selected Hero and other page styles.
   Desktop badges sit within the portrait column; tablets/phones show a neat grid. */

@media (min-width:1101px) {
  main > .hero.omid-hero-clean .hero-visual .omid-hero-floating-badges {
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:8;
  }
  main > .hero.omid-hero-clean .hero-visual .omid-hero-badge.badge-1 {
    top:9% !important; left:0 !important; right:auto !important; bottom:auto !important;
  }
  main > .hero.omid-hero-clean .hero-visual .omid-hero-badge.badge-2 {
    top:12% !important; right:0 !important; left:auto !important; bottom:auto !important;
  }
  main > .hero.omid-hero-clean .hero-visual .omid-hero-badge.badge-3 {
    top:51% !important; left:0 !important; right:auto !important; bottom:auto !important;
  }
  main > .hero.omid-hero-clean .hero-visual .omid-hero-badge.badge-4 {
    top:64% !important; right:0 !important; left:auto !important; bottom:auto !important;
  }
  main > .hero.omid-hero-clean .hero-visual .omid-hero-badge.badge-5 {
    bottom:3% !important; right:12% !important; left:auto !important; top:auto !important;
  }
}

.hero.omid-hero-clean .hero-visual .omid-hero-badge {
  box-sizing:border-box !important;
  width:clamp(144px, 12.3vw, 182px) !important;
  min-width:0 !important;
  max-width:182px !important;
  padding:9px 11px !important;
  border-radius:13px !important;
  box-shadow:0 8px 20px rgba(2,12,31,.22) !important;
  border:1px solid rgba(151,183,242,.28) !important;
  background:linear-gradient(145deg,rgba(39,55,85,.95),rgba(24,37,64,.96)) !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
.hero.omid-hero-clean .hero-visual .omid-hero-badge-inner {
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
}
.hero.omid-hero-clean .hero-visual .omid-hero-badge-dot {
  flex:0 0 7px !important;
  width:7px !important;
  height:7px !important;
  min-width:7px !important;
  margin-top:4px !important;
}
.hero.omid-hero-clean .hero-visual .omid-hero-badge-text {min-width:0 !important;}
.hero.omid-hero-clean .hero-visual .omid-hero-badge-title {
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.26 !important;
  letter-spacing:0 !important;
  margin:0 !important;
  color:#fff !important;
}
.hero.omid-hero-clean .hero-visual .omid-hero-badge-sub {
  font-size:10px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  margin:3px 0 0 !important;
  color:#d4e2f7 !important;
}

@media (max-width:1100px) {
  .hero.omid-hero-clean .hero-visual .omid-hero-floating-badges {
    box-sizing:border-box;
    position:static !important;
    inset:auto !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    height:auto !important;
    max-width:650px !important;
    margin:18px auto 0 !important;
    pointer-events:auto;
  }
  .hero.omid-hero-clean .hero-visual .omid-hero-badge {
    position:static !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  .hero.omid-hero-clean .hero-visual .omid-hero-badge:last-child {
    grid-column:1 / -1;
    width:min(100%,320px) !important;
    justify-self:center;
  }
}
@media (max-width:480px) {
  .hero.omid-hero-clean .hero-visual .omid-hero-floating-badges {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .hero.omid-hero-clean .hero-visual .omid-hero-badge:last-child {
    grid-column:auto;
    width:100% !important;
  }
}

/* Restore the selected service photos on the EN and DE pages. */
#services article.service.site-v4-media-ready > img.site-v4-service-photo,
#services article.service.site-v4-media-ready > img.omid-help-photo {
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1050 / 558;
  object-fit:cover !important;
  border-radius:14px !important;
  margin:0 0 16px !important;
  opacity:1 !important;
  visibility:visible !important;
}
#services article.service.site-v4-media-ready > .icon {display:none !important;}

/* Original approved project-specific dashboard photographs. */
#projects article.project .site-v4-project-photo-frame,
#projects article.project .project-art.exact-subject-cover {
  display:block !important;
  width:100% !important;
  height:190px !important;
  min-height:190px !important;
  overflow:hidden !important;
  border-radius:0 !important;
  padding:0 !important;
}
#projects article.project .site-v4-project-photo {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* The tech-stack artwork appears only on wide viewports; readable chips on phones. */
#skills[data-site-v4-skill-hidden="yes"] {display:none !important;}
.site-v4-tech-stack {max-width:1220px !important;margin:22px auto 34px !important;}
.site-v4-tech-stack img {display:block;width:100%;height:auto;max-width:100%;border-radius:18px;}
.site-v4-tech-stack .site-v4-tech-mobile {display:none;}
@media (max-width:700px){
  .site-v4-tech-stack img {display:none;}
  .site-v4-tech-stack .site-v4-tech-mobile {display:block;padding:20px 16px;background:#f7f5ff;border:1px solid #dce2f8;border-radius:18px;}
  .site-v4-tech-mobile h2 {font-size:clamp(21px,6vw,28px);color:#142246;margin:0 0 8px;}
  .site-v4-tech-mobile p {color:#55637f;font-size:13px;line-height:1.6;margin:0 0 15px;}
  .site-v4-tech-mobile .site-v4-tech-chips {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .site-v4-tech-chips span {min-width:0;padding:10px 7px;text-align:center;border:1px solid #dce2f8;border-radius:10px;background:#fff;font-size:12px;font-weight:650;color:#203253;}
}