/*
 * v206 — Light-mode homepage service cards.
 * Reuses the verified Galactic Nexus v5.27 bright service imagery.
 * This layer is intentionally scoped to the Light theme so every other
 * theme keeps the established v205 card artwork and treatment.
 */

html[data-theme="light"] body main .showcase-service-card.website {
  --light-card-image: url("../img/light-service-cards/website-bright-v5-27.webp");
  --light-card-position: 50% 50%;
  --light-card-accent: #147f86;
}

html[data-theme="light"] body main .showcase-service-card.social {
  --light-card-image: url("../img/light-service-cards/social-bright-v5-27.webp");
  --light-card-position: 52% 50%;
  --light-card-accent: #b64f54;
}

html[data-theme="light"] body main .showcase-service-card.branding {
  --light-card-image: url("../img/light-service-cards/branding-bright-v5-27.webp");
  --light-card-position: 50% 50%;
  --light-card-accent: #8b5a22;
}

html[data-theme="light"] body main .showcase-service-card.blog {
  --light-card-image: url("../img/light-service-cards/content-bright-v5-27.webp");
  --light-card-position: 48% 50%;
  --light-card-accent: #4a6c8e;
}

html[data-theme="light"] body main .showcase-service-card.store {
  --light-card-image: url("../img/light-service-cards/store-bright-v5-27.webp");
  --light-card-position: 52% 50%;
  --light-card-accent: #8a4f70;
}

html[data-theme="light"] body main .showcase-service-card.app {
  --light-card-image: url("../img/light-service-cards/apps-bright-v5-27.webp");
  --light-card-position: 50% 50%;
  --light-card-accent: #416ca2;
}

html[data-theme="light"] body main .showcase-service-card.growth {
  --light-card-image: url("../img/light-service-cards/revamp-bright-v5-27.webp");
  --light-card-position: 50% 50%;
  --light-card-accent: #58783d;
}

html[data-theme="light"] body main .showcase-service-grid {
  display: grid !important;
}

html[data-theme="light"] body main .showcase-service-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 251, .08) 0%, rgba(255, 255, 251, .02) 48%, rgba(230, 239, 240, .32) 100%),
    var(--light-card-image) var(--light-card-position, 50% 50%) / cover no-repeat !important;
  background-color: #edf3f3 !important;
  background-blend-mode: normal !important;
  border: 1px solid color-mix(in srgb, var(--light-card-accent, #147f86) 34%, #ffffff) !important;
  box-shadow:
    0 18px 42px rgba(36, 58, 68, .18),
    0 2px 8px rgba(36, 58, 68, .08),
    inset 0 1px rgba(255, 255, 255, .9) !important;
  filter: none !important;
}

html[data-theme="light"] body main .showcase-service-card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, transparent 34%, rgba(16, 36, 46, .05) 72%, rgba(16, 36, 46, .14) 100%),
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--light-card-accent, #147f86) 16%, transparent), transparent 36%) !important;
  opacity: 1 !important;
}

html[data-theme="light"] body main .showcase-service-card::after {
  background: linear-gradient(108deg, transparent 30%, rgba(255, 255, 255, .34) 48%, transparent 66%) !important;
  opacity: .62 !important;
}

html[data-theme="light"][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card > span {
  width: fit-content !important;
  max-width: min(100%, 13ch) !important;
  padding: .38em .56em !important;
  border: 1px solid rgba(23, 35, 45, .12) !important;
  border-left: 4px solid var(--light-card-accent, #147f86) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 251, .94) !important;
  color: #17232d !important;
  -webkit-text-fill-color: #17232d !important;
  font-size: clamp(1.28rem, 2.15vw, 2rem) !important;
  line-height: 1.02 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 22px rgba(23, 35, 45, .14), inset 0 1px rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(10px) saturate(1.04);
}

html[data-theme="light"][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card > small {
  width: fit-content !important;
  max-width: min(100%, 34ch) !important;
  margin-top: auto !important;
  padding: .62em .74em !important;
  border: 1px solid rgba(23, 35, 45, .12) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 251, .92) !important;
  color: #263740 !important;
  -webkit-text-fill-color: #263740 !important;
  font-size: clamp(.76rem, .95vw, .94rem) !important;
  line-height: 1.32 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 22px rgba(23, 35, 45, .13), inset 0 1px rgba(255, 255, 255, .9) !important;
  backdrop-filter: blur(10px) saturate(1.03);
}

html[data-theme="light"][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card.growth > small .revamp-inline-offer,
html[data-theme="light"][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card.growth > small .revamp-inline-offer :is(del, strong) {
  color: #263740 !important;
  -webkit-text-fill-color: #263740 !important;
  text-shadow: none !important;
}

html[data-theme="light"][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card.growth > small .revamp-inline-offer em {
  border-color: color-mix(in srgb, var(--light-card-accent) 24%, transparent) !important;
  background: color-mix(in srgb, var(--light-card-accent) 12%, #ffffff) !important;
  color: #28451f !important;
  -webkit-text-fill-color: #28451f !important;
  text-shadow: none !important;
}

html[data-theme="light"] body main .showcase-service-card:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--light-card-accent, #147f86) 68%, #ffffff) !important;
  box-shadow:
    0 25px 54px rgba(36, 58, 68, .24),
    0 0 0 1px color-mix(in srgb, var(--light-card-accent, #147f86) 28%, transparent),
    inset 0 1px rgba(255, 255, 255, .95) !important;
}

html[data-theme="light"] body main .showcase-service-card:focus-visible {
  outline: 3px solid #126f75 !important;
  outline-offset: 4px !important;
}

@media (min-width: 1200px) {
  html[data-theme="light"] body main .showcase-service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 1280px !important;
  }

  html[data-theme="light"] body main .showcase-service-grid .showcase-service-card.growth {
    grid-column: span 2 !important;
  }
}

@media (min-width: 761px) and (max-width: 1199px) {
  html[data-theme="light"] body main .showcase-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html[data-theme="light"] body main .showcase-service-grid .showcase-service-card.growth {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  html[data-theme="light"] body main .showcase-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html[data-theme="light"] body main .showcase-service-grid .showcase-service-card.growth {
    grid-column: 1 / -1 !important;
  }

  html[data-theme="light"] body main .showcase-service-card {
    background-position: var(--light-card-position, 50% 50%) !important;
  }

  html[data-theme="light"][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card > span {
    max-width: 11ch !important;
    padding: .34em .48em !important;
    border-left-width: 3px !important;
    border-radius: 9px !important;
    font-size: clamp(1.02rem, 4.8vw, 1.38rem) !important;
  }

  html[data-theme="light"][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card > small {
    max-width: 100% !important;
    padding: .48em .56em !important;
    border-radius: 9px !important;
    font-size: clamp(.62rem, 2.45vw, .75rem) !important;
    line-height: 1.24 !important;
  }
}

@media (max-width: 380px) {
  html[data-theme="light"][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card > span {
    font-size: 1rem !important;
  }

  html[data-theme="light"][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card > small {
    padding: .43em .5em !important;
    font-size: .61rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body main .showcase-service-card,
  html[data-theme="light"] body main .showcase-service-card::before,
  html[data-theme="light"] body main .showcase-service-card::after {
    transition: none !important;
  }
}