/* Shared styles for generated content, service, and location pages. */
/* Services pages: reduce section padding from 80px to 40px */
main .section {
  padding-block: var(--space-10);
}

.compact-hero {
  padding-block: var(--space-16);
}

.compact-hero .section-label {
  display: inline-block;
  margin-bottom: var(--space-3);
}

.generated-grid .card-icon {
  font-size: 0;
  width: 64px;
  height: 64px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.generated-grid .card-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}
.generated-grid .feature-card:hover .card-icon {
  background: linear-gradient(135deg, rgba(255,77,83,.32), rgba(232,35,42,.14));
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 10px 28px rgba(232,35,42,.22), inset 0 1px 1px rgba(255,255,255,.75), inset 0 -8px 12px -6px rgba(232,35,42,.2);
  transform: scale(1.08) rotate(-3deg);
}
.generated-grid .feature-card:hover .card-icon svg path,
.generated-grid .feature-card:hover .card-icon svg rect,
.generated-grid .feature-card:hover .card-icon svg circle,
.generated-grid .feature-card:hover .card-icon svg polyline,
.generated-grid .feature-card:hover .card-icon svg line {
  stroke: var(--color-primary-dark);
}
.generated-grid .feature-card:hover .card-icon svg [fill="#E8232A"],
.generated-grid .feature-card:hover .card-icon svg [fill="currentColor"] {
  fill: var(--color-primary-dark);
}

/* Tech stack tags */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}
.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-charcoal);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.tech-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg);
}
.tech-tag span { font-size: 1.1rem; }

/* Related services */
.related-services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}
.related-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-charcoal);
  transition: all var(--transition-base);
}
.related-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.related-link::after {
  content: '→';
  color: var(--color-primary);
  font-size: var(--text-base);
}

.generated-cta {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
  text-align: center;
}

.generated-cta h2 {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.generated-cta p {
  max-width: 620px;
  margin: 0 auto var(--space-8);
  color: rgba(255, 255, 255, .84);
}

.sitemap-list {
  columns: 3;
  column-gap: var(--space-12);
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-list li {
  break-inside: avoid;
  margin-bottom: var(--space-3);
}

.sitemap-list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-charcoal);
  font-size: var(--text-sm);
}

.sitemap-list a:hover {
  color: var(--color-primary);
  border-color: rgba(232, 35, 42, .24);
  background: var(--color-primary-bg);
}

@media (max-width: 992px) {
  .sitemap-list { columns: 2; }
}

@media (max-width: 768px) {
  .service-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero-visual {
    max-width: 100%;
  }
}

.service-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-12);
  align-items: center;
}

.hero-visual img {
  width: 100%;
  max-width: 650px;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  margin-top: var(--space-10);
}

.service-detail.reverse .detail-visual {
  order: -1;
}

.detail-visual img {
  width: 100%;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 992px) {
  .service-detail { grid-template-columns: 1fr; }
  .service-detail.reverse .detail-visual { order: 0; }
}

@media (max-width: 576px) {
  .sitemap-list { columns: 1; }
}