/* Clear images: remove full overlays, dark panel only behind text */
section.relative.overflow-hidden > img.absolute,
section.relative.overflow-hidden img.object-cover{opacity:1!important;filter:none!important}
section.relative.overflow-hidden > div.absolute.inset-0[class*="bg-gradient-to-"],
section.relative.overflow-hidden > div.absolute.inset-0[class*="bg-hero-veil"],
section.relative.overflow-hidden > div.absolute.inset-0[class*="bg-night/"],
section.relative.overflow-hidden > div.absolute.inset-0[class*="bg-black/"]{background:none!important;opacity:0!important}
section.relative.overflow-hidden:has(> img.absolute) > div.relative > div:first-child:not(form):not(ul),
section.relative.overflow-hidden:has(> img.absolute) > div.relative:not(:has(> div)){
  background:rgba(5,10,30,.55);padding:1.25rem 1.5rem;border-radius:1rem;width:fit-content;max-width:min(100%,42rem)}
section.relative.overflow-hidden:has(> img.absolute) h1,section.relative.overflow-hidden:has(> img.absolute) h2,section.relative.overflow-hidden:has(> img.absolute) p{text-shadow:0 2px 6px rgba(0,0,0,.5)}

/* White header design */
header.sticky{background:rgba(255,255,255,.97)!important;box-shadow:0 2px 12px rgba(2,10,30,.10)!important}
header.sticky nav a,header.sticky nav button,header.sticky > div > div button{color:#1e293b!important}
header.sticky nav a:hover{color:#0ea5e9!important;background:#f1f5f9!important}
header.sticky a[class*="bg-gradient-brand"],header.sticky a[class*="bg-gradient-brand"] *{color:#fff!important}

/* Service cards: readable text, visible image */
article.group .absolute.inset-0{background:linear-gradient(to right,rgba(255,255,255,.97) 0%,rgba(255,255,255,.95) 28%,rgba(255,255,255,.5) 42%,rgba(255,255,255,0) 60%)!important;opacity:1!important}

header.sticky a[href="/portal"]{color:#1e293b!important;border-color:#cbd5e1!important}
header.sticky a[href="/portal"]:hover{color:#0ea5e9!important}
/* card-text-width */ article.group .relative{max-width:54%}

/* Admin: expose the active homepage slide for direct image replacement. */
html.cms-editing main > section:first-child > img.opacity-100 {
  z-index: 40;
  pointer-events: auto;
  cursor: pointer;
  outline: 3px dashed #00aeea;
  outline-offset: -3px;
}
html.cms-editing main > section:first-child > div,
html.cms-editing main > section:first-child > span {
  pointer-events: none;
}

/* Package cards: image must span the full card width */
article.group > .relative.h-40,
article.group > .relative.overflow-hidden,
article.group .relative:has(> img.object-cover){max-width:none!important;width:100%!important}
article.group > .relative.h-40 > img{object-fit:cover;object-position:center;width:100%!important}

/* Banner artwork owns its wording: hide separate HTML copy on every image hero. */
main > section.relative.overflow-hidden:has(> img.absolute.inset-0) {
  min-height: clamp(250px, 36vw, 575px);
}
main > section.relative.overflow-hidden:has(> img.absolute.inset-0) > div:not(.absolute) {
  display: none !important;
}
main > section.relative.overflow-hidden:has(> img.absolute.inset-0) > div.absolute.inset-0 {
  display: none !important;
}
@media (max-width: 640px) {
  main > section.relative.overflow-hidden:has(> img.absolute.inset-0) {
    min-height: 220px;
  }
}

/* fix-2026-09-29: top 4 cards text was squeezed to 54% width */
article.group .relative{max-width:none!important}
article.group .relative p.max-w-\[75\%\]{max-width:100%!important}

/* fix-2026-09-29: Popular Packages — full width row, 4 cards side by side */
@media (min-width:1024px){
  section.lg\:grid-cols-\[1\.1fr_1fr\]{grid-template-columns:1fr!important}
}

/* Packages page: show each entire picture, without the shared service-card wash. */
body:has(main img[src*="packages-hero-"]) main article.group > .relative.h-40 {
  height: auto !important;
  aspect-ratio: 4 / 3;
}
body:has(main img[src*="packages-hero-"]) main article.group > .relative.h-40 > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
body:has(main img[src*="packages-hero-"]) main article.group > .relative.h-40 > div.absolute.inset-0 {
  display: none !important;
}

/* Gaming hero: artwork already contains all copy; remove duplicated HTML overlay. */
body:has(main img[src*="gaming-hero-"]) main > section:first-child > div.relative {
  display: none !important;
}
body:has(main img[src*="gaming-hero-"]) main > section:first-child > div.absolute {
  display: none !important;
}


/* Services hero: the uploaded artwork owns all visible wording. */
body:has(main img[src*="it-services-"]) main > section:first-child {
  min-height: 0 !important;
  aspect-ratio: 1901 / 647;
  background: #061b3a;
}
html body main > section.relative.overflow-hidden:has(> img.absolute.inset-0[src*="it-services-"]) > img {
  object-fit: contain !important;
  object-position: center !important;
}
html body main > section.relative.overflow-hidden:has(> img.absolute.inset-0[src*="it-services-"]) > div.relative:not(.absolute),
html body main > section.relative.overflow-hidden:has(> img.absolute.inset-0[src*="it-services-"]) > div.absolute.inset-0 {
  display: none !important;
}
html.cms-editing main > section.relative.overflow-hidden:has(> img[src*="it-services-"]) > img {
  z-index: 40;
  pointer-events: auto;
  cursor: pointer;
  outline: 3px dashed #00aeea;
  outline-offset: -3px;
}

/* page-tag based (works even after admin changes image) */
html[data-page="gaming"] main section.relative.overflow-hidden:first-of-type > div.relative,
html[data-page="gaming"] main section.relative.overflow-hidden:first-of-type > div.absolute{display:none!important}
html[data-page="services"] main section.relative.overflow-hidden:first-of-type > div.relative:not(.absolute),
html[data-page="services"] main section.relative.overflow-hidden:first-of-type > div.absolute.inset-0{display:none!important}
html[data-page="packages"] main article.group > .relative.h-40 > div.absolute.inset-0{display:none!important}
html[data-page="gaming"] main section.relative.overflow-hidden:first-of-type{min-height:clamp(250px,36vw,575px)!important}