/* ============================================================
   Ingetrans – Services Widget CSS
   ============================================================ */

:root {
  --gfservices-brand:       #EF4444;
  --gfservices-dark:        #0f172a;
  --gfservices-card-bg:     #ffffff;
  --gfservices-border:      #e2e8f0;
  --gfservices-radius:      16px;
  --gfservices-gap:         20px;
}

/* ── Section ── */
.gfservices-services-section {
  background-color: #f8fafc;
  padding-top:    112px;
  padding-bottom: 112px;
  overflow: hidden;
}

.gfservices-container {
  max-width: 1440px;
  margin:    0 auto;
  padding:   0 24px;
}

@media (min-width: 1024px) {
  .gfservices-container { padding: 0 48px; }
}

/* ── Header ── */
.gfservices-section-header {
  text-align: center;
  max-width:  720px;
  margin:     0 auto 64px;
}

.gfservices-eyebrow {
  display:        inline-block;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight:    700;
  color:          var(--gfservices-brand);
  margin-bottom:  12px;
}

.gfservices-section-title {
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  letter-spacing: -0.03em;
  line-height:    1.1;
  color:          #0f172a;
  margin:         0 0 20px;
}

.gfservices-section-subtitle {
  font-size:   1.0625rem;
  color:       #64748b;
  line-height: 1.7;
  margin:      0;
}

/* ── Grid ── */
.gfservices-grid {
  display: grid;
  gap:     var(--gfservices-gap);
}
.gfservices-grid--2 { grid-template-columns: repeat(2, 1fr); }
.gfservices-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gfservices-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1279px) {
  .gfservices-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gfservices-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .gfservices-grid--4,
  .gfservices-grid--3,
  .gfservices-grid--2 { grid-template-columns: 1fr; }
}

/* ── Card Base ── */
.gfservices-card {
  background:  var(--gfservices-card-bg);
  border:      1px solid var(--gfservices-border);
  border-radius: var(--gfservices-radius);
  padding:     36px;
  transition:  transform .4s cubic-bezier(.22,1,.36,1),
               box-shadow .4s cubic-bezier(.22,1,.36,1),
               border-color .4s ease;
}

.gfservices-card--lift:hover {
  transform:    translateY(-6px);
  box-shadow:   0 24px 60px -12px rgba(15,23,42,.15);
  border-color: transparent;
}

/* ── Card – Featured ── */
.gfservices-card--featured {
  background:   #0f172a;
  border-color: #1e293b;
}

.gfservices-card--featured.gfservices-card--lift:hover {
  border-color: #334155;
  box-shadow:   0 24px 60px -12px rgba(0,0,0,.4);
}

/* ── Icon ── */
.gfservices-card__icon {
  width:           56px;
  height:          56px;
  border-radius:   12px;
  display:         grid;
  place-items:     center;
  margin-bottom:   24px;
  background:      #f1f5f9;
  color:           #334155;
  transition:      background .35s ease, color .35s ease;
}

.gfservices-card:not(.gfservices-card--featured):hover .gfservices-card__icon {
  background: #0f172a;
  color:      #ffffff;
}

.gfservices-card--featured .gfservices-card__icon {
  background: color-mix(in srgb, var(--gfservices-brand) 15%, transparent);
  color:      var(--gfservices-brand);
}

.gfservices-card__icon svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.gfservices-card__icon i {
  font-size: 24px;
  color: inherit;
}

/* ── Text ── */
.gfservices-card__title {
  font-size:      1.2rem;
  font-weight:    800;
  letter-spacing: -0.02em;
  color:          #0f172a;
  margin:         0 0 12px;
}

.gfservices-card--featured .gfservices-card__title { color: #ffffff; }

.gfservices-card__desc {
  font-size:   0.875rem;
  line-height: 1.7;
  color:       #64748b;
  margin:      0 0 20px;
}

.gfservices-card--featured .gfservices-card__desc { color: #94a3b8; }

/* ── Points ── */
.gfservices-card__points {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap: 8px;
}

.gfservices-card__point {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   0.875rem;
  color:       #475569;
}

.gfservices-card--featured .gfservices-card__point { color: #cbd5e1; }

.gfservices-card__dot {
  width:       6px;
  height:      6px;
  border-radius: 50%;
  flex-shrink: 0;
  background:  #cbd5e1;
}

.gfservices-card--featured .gfservices-card__dot { background: var(--gfservices-brand); }
.gfservices-card:not(.gfservices-card--featured) .gfservices-card__dot { background: #cbd5e1; }

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */

/* --- fade-up (default) --- */
[data-animation="fade-up"] .gfservices-reveal,
[data-animation="stagger"] .gfservices-reveal {
  opacity:   0;
  transform: translateY(32px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              transform .65s cubic-bezier(.22,1,.36,1);
}

[data-animation="fade-in"] .gfservices-reveal {
  opacity:   0;
  transition: opacity .65s ease;
}

[data-animation="zoom-in"] .gfservices-reveal {
  opacity:   0;
  transform: scale(.92);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}

[data-animation="slide-left"] .gfservices-reveal {
  opacity:   0;
  transform: translateX(-40px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}

.gfservices-reveal.gfservices-animated {
  opacity:   1 !important;
  transform: none !important;
}

/* stagger delays via data-delay */
[data-animation="stagger"] .gfservices-card.gfservices-animated {
  transition-delay: calc(var(--gfservices-delay, 0) * 1ms);
}