/* ============================================================
   shared/components.css — Shared UI components across all skins
   Base patterns for card hover, CTA buttons, newsletter,
   skin switcher hover. Per-skin files override via [data-skin].
   ============================================================ */

/* ── CARD HOVER BASE ──
   Default card transition + hover lift. Skins override with
   their own transform/shadow values via [data-skin] selectors.
   ──────────────────────────────────────────────────────────── */
.service-card,
.sector-card,
.value-card,
.team-card,
.article-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

/* ── CTA BUTTON BASE ──
   Shared hero-cta and cta-btn transition and hover behavior.
   Skins override with their own hover effects, border-radius,
   and visual treatments via [data-skin] selectors.
   ──────────────────────────────────────────────────────────── */
.hero-cta,
.cta-btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

/* ── NEWSLETTER FORM BASE ──
   Shared newsletter button hover behavior.
   ──────────────────────────────────────────────────────────── */
.newsletter-form button {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}

/* ── SKIN SWITCHER BUTTONS BASE ──
   Shared skin switcher button hover transition.
   ──────────────────────────────────────────────────────────── */
.skin-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}