/* Update 26D-1: shared neon-card hover treatment plus server overview polish. */

/* Shared FlaroCity inner-page cards now react like the Portfolio cards. */
:where(
  .feature-link,
  .glass-panel,
  .price-card,
  .repair-card,
  .portfolio-card,
  .dashboard-panel,
  .dashboard-summary,
  .notice-panel
) {
  --card-glow: var(--accent, var(--cyan));
  position: relative;
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background-color .24s ease;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .feature-link,
    .glass-panel,
    .price-card,
    .repair-card,
    .portfolio-card,
    .dashboard-panel,
    .dashboard-summary,
    .notice-panel
  ):hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--card-glow) 76%, white 8%);
    box-shadow:
      0 20px 56px color-mix(in srgb, var(--card-glow) 24%, transparent),
      0 0 28px color-mix(in srgb, var(--card-glow) 18%, transparent),
      inset 0 1px rgba(255, 255, 255, .055);
  }
}

:where(
  .feature-link,
  .glass-panel,
  .price-card,
  .repair-card,
  .portfolio-card,
  .dashboard-panel,
  .dashboard-summary,
  .notice-panel
):focus-within {
  border-color: color-mix(in srgb, var(--card-glow) 76%, white 8%);
  box-shadow:
    0 18px 48px color-mix(in srgb, var(--card-glow) 22%, transparent),
    0 0 24px color-mix(in srgb, var(--card-glow) 16%, transparent),
    inset 0 1px rgba(255, 255, 255, .055);
}

/* The overview hero had been overridden to 520–640px. Keep it cinematic but useful. */
.servers-page .servers-overview-hero {
  min-height: clamp(340px, 27vw, 440px) !important;
  max-height: 460px;
}

.servers-page .servers-overview-hero > img {
  object-position: center 42% !important;
  filter: brightness(1.42) saturate(1.18) contrast(.96);
  transform: scale(1.012);
}

.servers-page .servers-overview-hero::after {
  background:
    radial-gradient(circle at 50% 43%, rgba(113, 72, 255, .12), transparent 30%),
    linear-gradient(90deg, rgba(5, 5, 17, .62), rgba(7, 5, 20, .12) 50%, rgba(5, 5, 17, .46)),
    linear-gradient(0deg, #070715 0%, rgba(7, 7, 21, .38) 52%, rgba(7, 7, 21, .08) 100%);
}

.servers-page .servers-overview-hero .ark-overlay {
  padding-bottom: clamp(32px, 4.5vw, 56px);
}

.servers-page .servers-overview-hero .ark-overlay h1 {
  font-size: clamp(2.7rem, 4.7vw, 4.7rem);
}

.server-connect.cyan { --accent: var(--cyan); }
.server-connect.pink { --accent: var(--pink); }
.server-connect .server-status-row { grid-column: 1 / -1; }

/* Give plain glass panels a visible accent edge on the requested service pages. */
.service-web-design-page .glass-panel::before,
.server-pages-centered .glass-panel::before,
.server-rules-page .rules-intro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--cyan)), transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent, var(--cyan)) 48%, transparent);
}

/* Hosting, design, repair and rules already carry individual accent colors. */
.service-hosting-page .price-card,
.service-web-design-page .glass-panel,
.service-repair-page .repair-card,
.server-rules-page .repair-card,
.server-pages-centered .glass-panel {
  --card-glow: var(--accent, var(--cyan));
}

@media (max-width: 760px) {
  .servers-page .servers-overview-hero {
    min-height: 320px !important;
    max-height: none;
  }

  .servers-page .servers-overview-hero > img {
    object-position: 58% center !important;
    filter: brightness(1.34) saturate(1.14) contrast(.98);
  }

  .server-connect .server-status-row { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .feature-link,
    .glass-panel,
    .price-card,
    .repair-card,
    .portfolio-card,
    .dashboard-panel,
    .dashboard-summary,
    .notice-panel
  ) {
    transition: border-color .01ms, box-shadow .01ms;
  }

  :where(
    .feature-link,
    .glass-panel,
    .price-card,
    .repair-card,
    .portfolio-card,
    .dashboard-panel,
    .dashboard-summary,
    .notice-panel
  ):hover {
    transform: none;
  }
}