/* ==========================================================================
   pages/index.css - Főoldal specifikus szabályok
   ========================================================================== */

/* -- "Részletek" hover-jelzés a szolgáltatás-kártyákon ---------------------- */
.rx-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-2);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rx-card:hover .rx-card__more { opacity: 1; transform: translateX(0); }

/* -- Szolgáltatás-modal (lásd assets/js/service-modal.js) -------------------
   Az általános modal-váz a components.css-ben van - itt csak az egy hasábos
   elrendezés és a saját tartalmi elemek jönnek. A kép (.service-modal__media)
   opcionális - ha egy szolgáltatáshoz nincs valós fotó, a JS rejtve hagyja. */
.service-modal__panel { max-width: 600px; max-height: 88dvh; overflow-y: auto; }

.service-modal__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-raised); }
.service-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.service-modal__content { padding: clamp(2rem, 4vw, 3rem); }
.service-modal__content p { margin-bottom: var(--space-md); }

.service-modal__icon { display: block; font-size: 2.4rem; line-height: 1; color: var(--accent-2); margin-bottom: 0.6rem; }

.service-modal__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
  margin-bottom: var(--space-md);
}
.service-modal__meta i { color: var(--accent-2); }

.service-modal__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}
.service-modal__list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--fs-small); }
.service-modal__list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}