/* ─────────────────────────────────────────
   Features Section Widget – Frontend Styles
───────────────────────────────────────── */

/* ── Section ── */
.ftsw-section {
  background-color: hsl(150, 15%, 6%);
  padding: 0 2rem 8rem;
}

.ftsw-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Header ── */
.ftsw-header {
  margin-bottom: 4rem;
}

.ftsw-label {
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: hsl(32, 39%, 59%);
  margin-bottom: 1rem;
  display: block;
  font-family: 'DM Sans', sans-serif;
}

.ftsw-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  color: #ffffff;
  line-height: 1.15;
}

.ftsw-heading span {
  color: hsl(32, 39%, 59%);
}

/* ── Grid ── */
.ftsw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: hsl(150, 10%, 20%);
}

@media (min-width: 768px) {
  .ftsw-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Feature Card ── */
.ftsw-feature {
  background-color: hsl(150, 15%, 6%);
  padding: 3rem;
  transition: background-color 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ftsw-feature:hover {
  background-color: hsl(150, 15%, 16%);
}

/* ── Number ── */
.ftsw-number {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3.75rem;
  color: hsla(32, 39%, 59%, 0.2);
  transition: color 0.5s ease;
  line-height: 1;
  margin-bottom: 1rem;
}

.ftsw-feature:hover .ftsw-number {
  color: hsla(32, 39%, 59%, 0.4);
}

/* ── Icon ── */
.ftsw-icon {
  display: block;
  font-size: 40px;
  color: hsla(32, 39%, 59%, 0.5);
  transition: color 0.5s ease;
  margin-bottom: 1rem;
  line-height: 1;
}

.ftsw-icon svg,
.ftsw-icon i {
  width: 1em;
  height: 1em;
}

.ftsw-feature:hover .ftsw-icon {
  color: hsl(32, 39%, 59%);
}

/* ── Card Title ── */
.ftsw-feature-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.875rem;
  color: #ffffff;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* ── Card Description ── */
.ftsw-feature-desc {
  color: hsl(150, 5%, 55%);
  line-height: 1.625;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
}

/* ── Card Link ── */
.ftsw-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1rem;
  color: hsl(32, 39%, 59%);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  font-family: 'DM Sans', sans-serif;
}

.ftsw-card-link:hover {
  color: #ffffff;
}

/* ── Editor Guard ── */
.elementor-editor-active .ftsw-feature {
  opacity: 1 !important;
  transform: none !important;
}

.elementor-editor-active .ftsw-header > * {
  opacity: 1 !important;
  transform: none !important;
}