/* =============================================================
   Skydent — Components: reusable building blocks
   Use these classes inside Elementor HTML widgets / sections.
   ============================================================= */

/* --- Container --- */
.sk-container { width: 100%; max-width: var(--sk-container); margin-inline: auto; padding-inline: var(--sk-gutter); }
.sk-container--sm { max-width: var(--sk-container-sm); }

/* --- Section --- */
.sk-section { padding-block: var(--sk-space-9); }
.sk-section--tight { padding-block: var(--sk-space-7); }
.sk-section--surface { background: var(--sk-surface); }
.sk-section--surface-2 { background: var(--sk-surface-2); }
.sk-section--primary { background: var(--sk-primary); color: #fff; }
.sk-section--primary :is(h1,h2,h3,h4,h5,h6) { color: #fff; }
.sk-section--navy { background: var(--sk-navy); color: #fff; }
.sk-section--navy :is(h1,h2,h3,h4,h5,h6) { color: #fff; }

/* --- Eyebrow / kicker (design: Sora caps + teal lead line) --- */
.sk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sk-font-head);
  font-size: 13px;
  font-weight: var(--sk-fw-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sk-primary);
  margin-bottom: var(--sk-space-4);
}
.sk-eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--sk-primary-light);
}
/* Centered heading blocks: line on both sides */
.sk-heading--center .sk-eyebrow { justify-content: center; }
.sk-heading--center .sk-eyebrow::after {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--sk-primary-light);
}

/* --- Buttons (design: pill, Sora, teal-deep primary, ghost outline) --- */
.sk-btn {
  --_bg: var(--sk-primary);
  --_fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: .9em 1.7em;
  font-family: var(--sk-font-head);
  font-size: .95rem;
  font-weight: var(--sk-fw-semi);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--_fg);
  background: var(--_bg);
  border: 1.5px solid var(--_bg);
  border-radius: var(--sk-radius-full);
  cursor: pointer;
  transition: background var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease);
}
.sk-btn svg { width: 16px; height: 16px; transition: transform var(--sk-dur) var(--sk-ease); }
.sk-btn:hover svg { transform: translateX(3px); }
.sk-btn:hover { color: var(--_fg); background: var(--sk-primary-dark); border-color: var(--sk-primary-dark); box-shadow: 0 8px 20px -8px var(--sk-primary); }
.sk-btn--outline { --_bg: transparent; --_fg: var(--sk-primary-dark); border-color: var(--sk-border); }
.sk-btn--outline:hover { --_fg: var(--sk-primary-dark); background: var(--sk-surface); border-color: var(--sk-primary-light); box-shadow: none; }
.sk-btn--navy { --_bg: var(--sk-navy); }
.sk-btn--navy:hover { background: var(--sk-primary-darker); border-color: var(--sk-primary-darker); }
.sk-btn--whatsapp { --_bg: var(--sk-whatsapp); }
.sk-btn--whatsapp:hover { background: #1da851; border-color: #1da851; }
.sk-btn--lg { padding: 1em 1.9em; font-size: 1rem; }
.sk-btn--block { display: flex; width: 100%; justify-content: center; }

/* --- Card --- */
.sk-card {
  background: var(--sk-bg);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  padding: var(--sk-space-5);
  box-shadow: var(--sk-shadow-sm);
  transition: transform var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease);
}
.sk-card:hover { transform: translateY(-3px); box-shadow: var(--sk-shadow-lg); }
.sk-card__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--sk-radius);
  background: var(--sk-primary-50);
  color: var(--sk-primary);
  margin-bottom: var(--sk-space-4);
}
.sk-card__icon svg { width: 28px; height: 28px; }
.sk-card__title { font-size: var(--sk-fs-xl); margin-bottom: var(--sk-space-2); }
.sk-card__text { color: var(--sk-text-soft); margin: 0; }

/* --- Grid helpers --- */
.sk-grid { display: grid; gap: var(--sk-space-5); }
.sk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sk-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .sk-grid--3, .sk-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sk-grid--2, .sk-grid--3, .sk-grid--4 { grid-template-columns: 1fr; } }

/* --- Section heading block --- */
.sk-heading { max-width: 720px; margin-bottom: var(--sk-space-6); }
.sk-heading--center { margin-inline: auto; text-align: center; }
.sk-heading p { color: var(--sk-text-soft); font-size: var(--sk-fs-lg); margin: 0; }

/* --- Utilities --- */
.sk-text-center { text-align: center; }
.sk-mt-0 { margin-top: 0; }
.sk-mb-0 { margin-bottom: 0; }
.sk-lead { font-size: var(--sk-fs-lg); color: var(--sk-text-soft); }
.sk-stack > * + * { margin-top: var(--sk-space-4); }
.sk-cluster { display: flex; flex-wrap: wrap; gap: var(--sk-space-3); align-items: center; }