/*
==========================================================

The hc-service-card component is the canonical
Hexterika Cyberlab service card.

Do not redesign its HTML hierarchy or CSS structure
unless intentionally creating Version 2.

I tried to adjust the spacing but the AI made it worse so I
revert back to this version. Do not try to adjust it again.

If you do try to adjust spacing again, revert to this one as
the checkpoint of the good one.

==========================================================
*/


/* ==========================================================
   01. Design Tokens
   Colors, radius, reusable values
   ========================================================== */

:root {
  --hc-bg: #070b14;
  --hc-surface: #11172a;
  --hc-surface-open: #151d33;
  --hc-panel: #1b2440;
  --hc-border: #2a3658;

  --hc-text: #e6e9f0;
  --hc-muted: #a8afc0;
  --hc-soft: #d7dbe4;

  --hc-accent: #00ff9d;
  --hc-cyan: #22d3ee;

  --hc-radius-lg: 14px;
  --hc-radius-md: 10px;
  --hc-radius-sm: 6px;
}


/* ==========================================================
   02. Page Layout
   Applies to hc-services.html main content
   ========================================================== */

main {
  background: var(--hc-bg);
  color: var(--hc-text);
}

.hc-services {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
  color: var(--hc-text);
}

.hc-services__title {
  color: var(--hc-accent);
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 2rem;
}


/* ==========================================================
   03. Hero / Intro
   Top section of services page
   ========================================================== */

.hc-services-hero {
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 1rem 3rem;
  text-align: center;
}

.hc-services-hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.3rem, 6vw, 4.5rem);
  line-height: 1.05;
  color: var(--hc-text);
}

.hc-services-hero__lead,
.hc-services-hero__note {
  color: var(--hc-soft);
  line-height: 1.7;
  max-width: 900px;
  margin: 0.75rem auto;
}

.hc-services-hero__link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--hc-accent);
  font-weight: 700;
}


/* ==========================================================
   04. Service Card
   Outer collapsible card component
   ========================================================== */

.hc-service-card {
  margin-bottom: 1.25rem;
}

.hc-service-card__details {
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-lg);
  overflow: hidden;
}


/* ==========================================================
   05. Service Card Summary
   Collapsed/visible part of each card
   ========================================================== */

.hc-service-card__summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.hc-service-card__summary::-webkit-details-marker {
  display: none;
}

.hc-service-card__eyebrow {
  color: var(--hc-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}

.hc-service-card__title {
  font-size: 1.25rem;
  margin: 0;
  color: var(--hc-text);
}

.hc-service-card__intro {
  margin: 0.5rem 0 0;
  color: var(--hc-muted);
  line-height: 1.6;
  max-width: 680px;
}

.hc-service-card__toggle {
  color: var(--hc-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  white-space: nowrap;
}

.hc-service-card__toggle::before {
  content: "[+]";
}

.hc-service-card__details[open] .hc-service-card__toggle::before {
  content: "[-]";
}


/* ==========================================================
   06. Service Card Expanded Content
   Opened part of each card
   ========================================================== */

.hc-service-card__content {
  background: var(--hc-surface-open);
  border-top: 1px solid var(--hc-border);
  padding: 1.5rem;
}

.hc-service-card__snapshot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.hc-service-card__snapshot span {
  border: 1px solid var(--hc-border);
  background: var(--hc-bg);
  color: var(--hc-soft);
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
}


/* ==========================================================
   07. Service Inner Panels
   Good fit, included, not included, deliverables
   ========================================================== */

.hc-service-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.hc-service-panel,
.hc-service-price {
  background: var(--hc-panel);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-md);
  padding: 1rem;
}

.hc-service-panel h3,
.hc-service-price h3 {
  color: var(--hc-accent);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.hc-service-panel ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--hc-muted);
  line-height: 1.6;
}

.hc-service-panel li + li {
  margin-top: 0.45rem;
}


/* ==========================================================
   08. Service Price / Extra Service Notes
   Pricing block and service-specific notes
   ========================================================== */

.hc-service-price {
  margin-top: 1rem;
}

.hc-service-price p {
  color: var(--hc-muted);
  line-height: 1.6;
  margin: 0.5rem 0 0;
}

.hc-service-price strong {
  color: var(--hc-text);
}

.hc-service-price s {
  color: var(--hc-muted);
}


/* ==========================================================
   09. How I Work
   Process card inside services page
   ========================================================== */

.hc-service-card__process {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hc-process-step {
  background: var(--hc-panel);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-md);
  padding: 1rem;
}

.hc-process-step h3 {
  margin: 0 0 0.75rem;
  color: var(--hc-accent);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hc-process-step p {
  margin: 0;
  color: var(--hc-muted);
  line-height: 1.7;
}


/* ==========================================================
   10. Content Cards
   Sample Work, Free Chat, future non-service cards
   ========================================================== */

.hc-info-card {
  max-width: 960px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-lg);
  color: var(--hc-text);
}

.hc-info-card h2 {
  color: var(--hc-accent);
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
}

.hc-info-card p {
  color: var(--hc-muted);
  line-height: 1.7;
}

.hc-link-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.hc-link-grid a,
.hc-primary-link {
  display: block;
  padding: 0.9rem 1rem;
  background: var(--hc-panel);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-md);
  color: var(--hc-accent);
  font-weight: 700;
  text-decoration: none;
}

.hc-link-grid a:hover,
.hc-primary-link:hover {
  border-color: var(--hc-accent);
}


/* ==========================================================
   11. Accessibility
   Keyboard focus states
   ========================================================== */

.hc-service-card__summary:focus-visible {
  outline: 2px solid var(--hc-accent);
  outline-offset: 4px;
}


/* ==========================================================
   12. Responsive
   Mobile layout
   ========================================================== */

@media (max-width: 720px) {
  .hc-service-card__summary {
    align-items: flex-start;
  }

  .hc-service-card__grid {
    grid-template-columns: 1fr;
  }

  .hc-service-card__content {
    padding: 1rem;
  }
}