/* ==========================================================================
   GLOBAL IMAGE CARD SYSTEM
   One reusable overlay for every photo-backed card, banner, and gallery tile.
   Load after design-system.css — overrides light-theme text on photography.
   ========================================================================== */

:root {
  --img-card-radius: 22px;
  --img-card-overlay: radial-gradient(
      circle at top right,
      rgba(47, 107, 255, 0.12),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(5, 12, 25, 0.08) 0%,
      rgba(5, 12, 25, 0.18) 25%,
      rgba(5, 12, 25, 0.45) 55%,
      rgba(5, 12, 25, 0.82) 100%
    );
  --img-card-overlay-hover: radial-gradient(
      circle at top right,
      rgba(47, 107, 255, 0.16),
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgba(5, 12, 25, 0.12) 0%,
      rgba(5, 12, 25, 0.24) 25%,
      rgba(5, 12, 25, 0.52) 55%,
      rgba(5, 12, 25, 0.9) 100%
    );
  --img-card-title: #ffffff;
  --img-card-desc: rgba(255, 255, 255, 0.9);
  --img-card-label: rgba(255, 255, 255, 0.8);
  --img-card-text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  --img-card-badge-bg: rgba(255, 255, 255, 0.16);
  --img-card-badge-border: rgba(255, 255, 255, 0.2);
  --img-card-lift: 6px;
  --img-card-zoom: 1.03;
  --img-card-glow: rgba(47, 107, 255, 0.38);
  --img-card-transition: 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Legacy shells inherit the same system as .image-card */
:is(
  .image-card,
  .sd-industry-card,
  .industry-grid-card,
  .ent-culture-grid > div,
  .about-delivery-shot,
  .about-leader,
  .about-collage-item,
  .p4-media-band,
  .p4-overlap-img,
  .ent-case-featured-media,
  .hero-cases .ent-case-featured
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--img-card-radius);
}

/* --------------------------------------------------------------------------
   Image fill
   -------------------------------------------------------------------------- */
.image-card > img,
.image-card > picture,
.image-card picture img,
.sd-industry-card > picture,
.sd-industry-card > img,
.sd-industry-card picture img,
.industry-grid-card .industry-image-bg,
.ent-culture-grid > div picture,
.ent-culture-grid > div img,
.about-delivery-shot img,
.about-leader img,
.about-collage-item img,
.p4-media-band picture,
.p4-media-band img,
.p4-overlap-img img,
.ent-case-featured-media picture,
.ent-case-featured-media img,
.hero-cases .ent-case-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sd-industry-card > picture,
.sd-industry-card > img,
.ent-culture-grid > div picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sd-industry-card picture img {
  position: absolute;
  inset: 0;
}

.p4-media-band picture,
.p4-media-band img {
  min-height: 280px;
}

/* --------------------------------------------------------------------------
   Premium overlay — pseudo + dedicated overlay nodes
   -------------------------------------------------------------------------- */
.image-card::after,
.sd-industry-card::after,
.ent-culture-grid > div::after,
.about-delivery-shot::after,
.about-leader::after,
.about-collage-item::after,
.p4-media-band::after,
.p4-overlap-img::after,
.ent-case-featured-media::after,
.industry-gradient-overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--img-card-overlay) !important;
  transition: background var(--img-card-transition);
}

.about-leader-overlay {
  pointer-events: auto;
  background: transparent !important;
}

.image-card:hover::after,
.sd-industry-card:hover::after,
.ent-culture-grid > div:hover::after,
.about-delivery-shot:hover::after,
.about-leader:hover::after,
.about-collage-item:hover::after,
.p4-media-band:hover::after,
.p4-overlap-img:hover::after,
.ent-case-featured-media:hover::after,
.industry-grid-card:hover .industry-gradient-overlay,
.about-leader:hover::after {
  background: var(--img-card-overlay-hover) !important;
}

/* Homepage industries — override page-specific gradients */
#industries-sec .industry-gradient-overlay {
  background: var(--img-card-overlay) !important;
}

#industries-sec .industry-grid-card:hover .industry-gradient-overlay {
  background: var(--img-card-overlay-hover) !important;
}

/* --------------------------------------------------------------------------
   Card interaction — lift + image zoom
   -------------------------------------------------------------------------- */
:is(
  .image-card,
  .sd-industry-card,
  .industry-grid-card,
  .ent-culture-grid > div,
  .about-delivery-shot,
  .about-leader,
  .about-collage-item,
  .p4-media-band
) {
  border: 1px solid var(--ng-border, #e6edf8);
  transition:
    transform var(--img-card-transition),
    box-shadow var(--img-card-transition),
    border-color var(--img-card-transition);
}

:is(
  .image-card,
  .sd-industry-card,
  .industry-grid-card,
  .ent-culture-grid > div,
  .about-delivery-shot,
  .about-leader,
  .about-collage-item,
  .p4-media-band
):hover {
  transform: translateY(calc(-1 * var(--img-card-lift)));
  border-color: var(--img-card-glow);
  box-shadow:
    0 0 0 1px rgba(47, 107, 255, 0.12),
    0 14px 32px rgba(14, 26, 43, 0.12);
}

:is(
  .image-card,
  .sd-industry-card,
  .industry-grid-card,
  .ent-culture-grid > div,
  .about-delivery-shot,
  .about-leader,
  .about-collage-item,
  .p4-media-band,
  .p4-overlap-img,
  .ent-case-featured-media
) :is(img, picture img, .industry-image-bg) {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

:is(
  .image-card:hover,
  .sd-industry-card:hover,
  .industry-grid-card:hover,
  .ent-culture-grid > div:hover,
  .about-delivery-shot:hover,
  .about-leader:hover,
  .about-collage-item:hover,
  .p4-media-band:hover,
  .p4-overlap:hover
) :is(img, picture img, .industry-image-bg) {
  transform: scale(var(--img-card-zoom));
}

#industries-sec .industry-grid-card:hover .industry-image-bg {
  transform: scale(var(--img-card-zoom));
}

/* --------------------------------------------------------------------------
   Bottom content — always above overlay
   -------------------------------------------------------------------------- */
.image-card__content,
.sd-industry-card .body,
.industry-glass-card,
.about-collage-cap,
.p4-media-band-caption,
.p4-media-band-caption .container,
.about-leader-overlay,
.hero-cases .ent-case-featured {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.sd-industry-card .body,
.industry-glass-card,
.about-collage-cap,
.about-leader-overlay,
.image-card__content {
  padding: 1.35rem 1.25rem 1.2rem;
}

.about-leader-overlay {
  top: 0;
  justify-content: flex-end;
}

.p4-media-band-caption {
  padding: 1.75rem 0 1.5rem;
}

/* Remove inner glass panels — rely on global overlay */
#industries-sec .industry-glass-card {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  top: auto !important;
  transform: none !important;
  padding: 1.25rem 1.35rem !important;
  border-radius: 16px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

.industry-grid-card:hover .industry-glass-card {
  transform: none !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.industry-grid-card .industry-image-bg {
  z-index: 0;
}

.sd-industry-card .body {
  color: var(--img-card-desc) !important;
}

/* --------------------------------------------------------------------------
   Typography on photography — never inherit light-theme tokens
   -------------------------------------------------------------------------- */
:is(
  .image-card,
  .sd-industry-card,
  .industry-grid-card,
  .ent-culture-grid > div,
  .about-delivery-shot,
  .about-leader,
  .about-collage-item,
  .p4-media-band,
  .p4-overlap-img,
  .ent-case-featured-media,
  .hero-cases .ent-case-featured
) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .text-white,
  .industry-link
) {
  color: var(--img-card-title) !important;
  font-weight: 700 !important;
  text-shadow: var(--img-card-text-shadow);
}

:is(
  .image-card,
  .sd-industry-card,
  .industry-grid-card,
  .ent-culture-grid > div,
  .about-delivery-shot,
  .about-leader,
  .about-collage-item,
  .p4-media-band,
  .p4-overlap-img,
  .hero-cases .ent-case-featured
) :is(p, .quote, blockquote) {
  color: var(--img-card-desc) !important;
  line-height: 1.6 !important;
  text-shadow: var(--img-card-text-shadow);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 0.65rem;
}

.about-leader .quote {
  -webkit-line-clamp: 3;
}

.industry-glass-card p,
.sd-industry-card p {
  opacity: 1 !important;
}

.about-leader .role,
.industry-glass-card .industry-link,
.industry-glass-card .text-accent,
.sd-industry-card .more {
  color: #7dd3fc !important;
  text-shadow: var(--img-card-text-shadow);
}

.industry-glass-card .industry-link {
  margin-top: 0.1rem;
  font-weight: 600;
}

.sd-industry-card h3,
.industry-glass-card h3 {
  margin-bottom: 0.4rem;
  line-height: 1.25;
}

/* p4 overlap floating card (sits on image band) */
.p4-overlap-card h4 {
  color: var(--img-card-title) !important;
  font-weight: 700 !important;
  text-shadow: var(--img-card-text-shadow);
}

.p4-overlap-card p {
  color: var(--img-card-desc) !important;
  line-height: 1.6 !important;
  text-shadow: var(--img-card-text-shadow);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Badges & metadata pills
   -------------------------------------------------------------------------- */
:is(
  .image-card,
  .sd-industry-card,
  .industry-grid-card,
  .ent-culture-grid > div,
  .about-delivery-shot,
  .about-leader,
  .about-collage-item,
  .p4-media-band,
  .ent-case-featured-media
) :is(
  .sd-industry-tags span,
  .about-tags span,
  .about-leader .about-tags span,
  .ent-case-featured-badge,
  .image-card__badge
) {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: var(--img-card-badge-bg) !important;
  border: 1px solid var(--img-card-badge-border) !important;
  color: var(--img-card-title) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: none;
}

.sd-industry-tags,
.about-leader .about-tags,
.about-tags,
.image-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

/* Culture / delivery caption pills */
.ent-culture-grid > div span,
.about-delivery-shot span {
  position: absolute;
  z-index: 2;
  left: 1.25rem;
  bottom: 1.25rem;
  right: auto;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--img-card-title) !important;
  background: var(--img-card-badge-bg) !important;
  border: 1px solid var(--img-card-badge-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: none;
}

.ent-case-featured-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  gap: 0.4rem;
}

/* Featured case hero overlay (legacy full-bleed pattern) */
.hero-cases .ent-case-featured {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 1.35rem 1.25rem 1.2rem !important;
}

.hero-cases .ent-case-featured h3 {
  color: var(--img-card-title) !important;
  font-weight: 700 !important;
  text-shadow: var(--img-card-text-shadow);
}

.hero-cases .ent-case-featured p {
  color: var(--img-card-desc) !important;
  line-height: 1.6 !important;
  text-shadow: var(--img-card-text-shadow);
}

/* Beat design-system global light typography inside image cards */
:is(
  .image-card,
  .sd-industry-card,
  .industry-grid-card,
  .ent-culture-grid > div,
  .about-delivery-shot,
  .about-leader,
  .about-collage-item,
  .p4-media-band,
  .hero-cases .ent-case-featured
) :is(p, li, span:not(.sd-industry-tags span):not(.about-tags span)) {
  color: inherit;
}

:is(
  .image-card,
  .sd-industry-card,
  .industry-grid-card,
  .about-leader,
  .p4-media-band
) .text-muted {
  color: var(--img-card-label) !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .image-card,
    .sd-industry-card,
    .industry-grid-card,
    .ent-culture-grid > div,
    .about-delivery-shot,
    .about-leader,
    .about-collage-item,
    .p4-media-band,
    .p4-overlap-img,
    .ent-case-featured-media
  ),
  :is(
    .image-card,
    .sd-industry-card,
    .industry-grid-card,
    .ent-culture-grid > div,
    .about-delivery-shot,
    .about-leader,
    .about-collage-item,
    .p4-media-band,
    .p4-overlap-img,
    .ent-case-featured-media
  ) :is(img, picture img, .industry-image-bg) {
    transition: none !important;
  }

  :is(
    .image-card,
    .sd-industry-card,
    .industry-grid-card,
    .ent-culture-grid > div,
    .about-delivery-shot,
    .about-leader,
    .about-collage-item,
    .p4-media-band
  ):hover {
    transform: none;
  }

  :is(
    .image-card:hover,
    .sd-industry-card:hover,
    .industry-grid-card:hover,
    .ent-culture-grid > div:hover,
    .about-delivery-shot:hover,
    .about-leader:hover,
    .about-collage-item:hover,
    .p4-media-band:hover,
    .p4-overlap:hover
  ) :is(img, picture img, .industry-image-bg) {
    transform: none;
  }
}