/* Hallmark · component: responsive service refinements · genre: editorial · theme: existing Luis Lopez brand
 * preserves: Fraunces + DM Sans · purple and warm-paper palette · existing page structures
 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.hero-inner,
.hero-content,
.hero-visual,
.related-articles-grid,
.related-article-card {
  min-width: 0;
}

.hero-title,
.foto-hero-title,
.section-title {
  overflow-wrap: anywhere;
}

.related-article-card img {
  width: 100%;
  height: 56.25cqw;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.related-articles-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto 2rem;
}

.related-article-card {
  display: block;
  container-type: inline-size;
  flex: 1 1 0;
  max-width: 300px;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: color-mix(in srgb, var(--bg-card) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--purple) 16%, transparent);
  border-radius: 10px;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}

.related-article-card:hover,
.related-article-card:focus-visible {
  border-color: color-mix(in srgb, var(--purple) 32%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--purple) 13%, transparent);
  transform: translateY(-3px);
}

.related-article-card:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

.related-article-card:active {
  transform: translateY(-1px);
}

.related-article-card[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.related-article-card strong {
  display: block;
  padding: 0.65rem 0.85rem 0.75rem;
  color: var(--purple);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .hero,
  .page-hero,
  .webapp-hero {
    min-height: auto !important;
    padding-bottom: 3.5rem !important;
  }

  .hero-inner,
  .webapp-hero-inner {
    gap: 0.75rem !important;
  }

  .hero-inner > .hero-visual,
  .webapp-hero-inner > .hero-visual {
    margin-top: 1.35rem !important;
    margin-bottom: 1.15rem !important;
  }

  .service-social-compact .hero-inner > .hero-visual {
    width: min(140px, 38vw) !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .service-podcast-compact .hero-inner > .hero-visual {
    width: min(230px, 58vw) !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-ctas .btn,
  .hero-buttons .btn,
  .webapp-cta .btn {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .related-articles-grid {
    flex-wrap: wrap;
  }

  .related-article-card {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb,
  .page-orb {
    animation: none !important;
  }
}