/* web/themes/techprosolutions/css/components/services-home.css */
/**
 * Services Home hub — header + responsive card grid, mirroring the Calculators
 * home and the "Income Tax Services We Offer" grid. Token-driven, 4px grid.
 */

.svc-home { font-family: 'Inter', sans-serif; color: var(--et-body-color); background: linear-gradient(180deg, #fff 0%, #f6faf7 100%); }

/* 2. Headline reset (overrides new.css capitalize & font) */
.svc-home :is(h1, h2, h3, h4) {
  text-transform: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #1C3557 !important;
}

/* Navy CTA bands and dark sections must retain crisp white text with green highlights */
.svc-home .svc-theme--navy :is(h1, h2, h3, h4, .svc-title),
.svc-theme--navy :is(h1, h2, h3, h4, .svc-title) {
  color: #ffffff !important;
}
.svc-home .svc-theme--navy .et-highlight-text,
.svc-theme--navy .et-highlight-text {
  color: var(--et-highlight-green, #28aa4a) !important;
}

.svc-container { max-width: 76rem; margin-inline: auto; padding-inline: var(--et-space-6); }

.svc-home__head { padding-block: var(--et-space-12) var(--et-space-8); text-align: center; }
.svc-home__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem) !important;
  font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
  text-transform: none !important; color: #1C3557 !important; margin: 0 0 var(--et-space-3);
}
.svc-home__sub { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; color: #64748b; max-width: 40rem; margin: 0 auto; }

.svc-home__body { padding-bottom: var(--et-space-16); }
.svc-home__cat {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: #1C3557 !important;
  margin: var(--et-space-12) 0 var(--et-space-6);
}
.svc-home__cat:first-child { margin-top: 0; }

.svc-home__grid { display: grid; grid-template-columns: 1fr; gap: var(--et-space-6); }
@media (min-width: 48rem) { .svc-home__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Local Nav Search ---- */
.et-nav-search--local { display: inline-flex; align-items: center; height: 40px; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 999px; background: #fff; margin-right: 14px; position: relative; }
.et-nav-search--local .et-nav-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.et-nav-search--local .et-nav-search__toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: none; color: #141414; cursor: pointer; padding: 0; }
.et-nav-search--local input { width: 0; height: 38px; border: 0; background: none; font-family: inherit; font-size: 14px; color: #141414; outline: none; padding: 0; transition: width 0.2s ease, padding 0.2s ease; }
.et-nav-search--local input::placeholder { color: rgba(0, 0, 0, 0.45); }
.et-nav-search--local input:focus-visible { outline: none; }
.et-nav-search--local:focus-within { border-color: #141414; }
.et-nav-search--local:focus-within input, .et-nav-search--local.has-value input { width: 150px; padding-right: 16px; }

.svc-home__no-results { display: none; text-align: center; padding: var(--et-space-12) 0; color: #64748b; font-size: 1.125rem; grid-column: 1 / -1; }

/* ---- Card ---- */
.sh-card {
  display: flex; align-items: stretch; gap: var(--et-space-5);
  background: #fff; border: 1px solid #eef2ef; border-radius: var(--et-radius-lg);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  padding: var(--et-space-6); text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-height: 168px;
}
.sh-card--link:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  border-color: rgba(60, 185, 68, 0.5);
}
.sh-card--link:focus-visible { outline: 2px solid var(--et-green); outline-offset: 2px; }

.sh-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sh-card__badge {
  align-self: flex-start; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #166332; background: #eafaf0;
  padding: var(--et-space-1) var(--et-space-2); border-radius: var(--et-radius-pill); margin-bottom: var(--et-space-2);
}
.sh-card__title { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; color: #1C3557 !important; margin: 0 0 var(--et-space-2); }
.sh-card__desc { font-size: 0.9375rem; line-height: 1.55; color: #64748b; margin: 0 0 var(--et-space-4); }
.sh-card__more {
  margin-top: auto; display: inline-flex; align-items: center; gap: var(--et-space-2);
  font-size: 0.875rem; font-weight: 700; color: var(--et-green-2);
}
.sh-card__arrow { width: 1.125rem; height: 1.125rem; transition: transform 0.2s ease; }
.sh-card--link:hover .sh-card__arrow { transform: translateX(4px); }

.sh-card__media {
  flex: none; width: 40%; max-width: 13rem; border-radius: var(--et-radius-sm); overflow: hidden;
  background: linear-gradient(135deg, var(--et-wash) 0%, #eef4ff 100%);
}
.sh-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-card__media--placeholder { display: grid; place-items: center; }
.sh-card__media--placeholder svg { width: 3rem; height: 3rem; color: var(--et-green-2); opacity: 0.5; }

@media (max-width: 39.99rem) {
  .sh-card { flex-direction: column-reverse; }
  .sh-card__media { width: 100%; max-width: none; aspect-ratio: 16 / 9; }
}

/* Closing CTA band reuses svc-cta/.svc-theme--navy from svc-* components. */
.svc-home__cta { margin-top: var(--et-space-8); }
.svc-home__cta .svc-cta__grid { justify-items: stretch; }
.svc-home__cta .svc-cta__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--et-space-6);
  width: 100%;
}
@media (min-width: 62rem) {
  .svc-home__cta .svc-cta__copy {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .svc-home__cta .svc-head {
    margin-bottom: 0;
  }
  .svc-home__cta .svc-cta__btn {
    margin-top: 0;
    margin-left: var(--et-space-8);
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Progressive disclosure: Load More */
.sh-card--collapsed {
  display: none !important;
}
.sh-card--revealing {
  animation: shCardReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes shCardReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.svc-home__load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--et-space-6);
  margin-bottom: var(--et-space-2);
  width: 100%;
}
.svc-btn-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--et-space-2);
  background: #fff;
  color: var(--et-navy, #142843);
  border: 1.5px solid #d0dae5;
  border-radius: var(--et-radius-pill, 9999px);
  padding: 0.65rem 1.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.svc-btn-load-more:hover {
  background: var(--et-navy, #142843);
  color: #fff;
  border-color: var(--et-navy, #142843);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 40, 67, 0.18);
}
.svc-btn-load-more:active {
  transform: translateY(0);
}
.svc-btn-load-more:focus-visible {
  outline: 2px solid var(--et-green, #10b981);
  outline-offset: 2px;
}
.svc-btn-load-more .svc-btn__ic {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}
.svc-btn-load-more:hover .svc-btn__ic {
  transform: translateY(2px);
}
.svc-load-more__badge {
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.85;
  margin-left: 2px;
}