/*
 * /calculators hub (D-042). Design-system page: 1140px column, section rhythm from --cy-section-y /
 * --cy-section-head (D-038), text sizes from the section standard (D-037).
 */
.ch-page { --ch-gutter: max(16px, env(safe-area-inset-left, 0px)); background: var(--cy-neutral-0); color: var(--cy-neutral-1000); overflow-x: clip; }
.ch-inner { max-width: 1140px; margin: 0 auto; }

/* ---------- Hero ---------- */
.ch-hero {
  padding: var(--cy-section-y) var(--ch-gutter) calc(var(--cy-section-y) - 16px);
  background:
    radial-gradient(circle at 8% 0, var(--cy-brand-50) 0, rgba(253, 234, 231, 0) 420px),
    radial-gradient(circle at 96% 100%, var(--cy-brand-50) 0, rgba(253, 234, 231, 0) 360px);
}
.ch-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ch-hero__title { margin: 0; max-width: 760px; }
.ch-hero__text { margin: 16px 0 0; max-width: 640px; font-size: var(--cy-fs-lg); line-height: 24px; }

.ch-search { position: relative; display: block; width: 100%; max-width: 560px; margin: 32px 0 0; }
.ch-search__icon { position: absolute; left: 16px; top: 12px; color: var(--cy-neutral-600, #757575); pointer-events: none; }
.ch-search .ch-search__input { width: 100%; padding-left: 52px; border-color: #757575; }

.ch-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.ch-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--cy-neutral-200, #e5e5e5); border-radius: 999px; background: var(--cy-neutral-0);
  font: 500 var(--cy-fs-md)/20px var(--cy-font); color: var(--cy-neutral-1000); cursor: pointer;
  transition: background var(--cy-duration) var(--cy-ease), border-color var(--cy-duration) var(--cy-ease);
}
.ch-chip span { font-size: var(--cy-fs-xs); color: #757575; }
.ch-chip:hover { border-color: var(--cy-brand-600); }
.ch-chip:focus-visible { outline: 2px solid var(--cy-brand-600); outline-offset: 2px; }
.ch-chip.is-active { background: var(--cy-brand-600); border-color: var(--cy-brand-600); color: var(--cy-neutral-0); }
.ch-chip.is-active span { color: rgba(255, 255, 255, 0.85); }

/* ---------- Groups ---------- */
.ch-group { padding: calc(var(--cy-section-y) / 2) var(--ch-gutter); }
.ch-group:first-of-type { padding-top: var(--cy-section-y); }
.ch-group__head p { margin: 0; font-size: var(--cy-fs-lg); line-height: 24px; }
.ch-grid { margin: var(--cy-section-head) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ch-item { display: flex; }
.ch-card {
  display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 20px;
  border-radius: 12px; background: var(--cy-neutral-0); box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  color: var(--cy-neutral-1000); text-decoration: none;
  transition: box-shadow var(--cy-duration) var(--cy-ease), transform var(--cy-duration) var(--cy-ease);
}
.ch-card:hover { color: var(--cy-neutral-1000); text-decoration: none; box-shadow: 0 0 0 1px var(--cy-brand-200), 0 6px 18px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }
.ch-card:focus-visible { outline: 2px solid var(--cy-brand-600); outline-offset: 3px; }
.ch-card__icon { flex-shrink: 0; }
.ch-card__title { margin: 4px 0 0; font: 600 var(--cy-fs-xl)/24px var(--cy-font); }
.ch-card__text { margin: 0; flex: 1; font-size: var(--cy-fs-md); line-height: 22px; }
.ch-card__go { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--cy-fs-md)/20px var(--cy-font); color: var(--cy-brand-600); }
.ch-card:hover .ch-card__go .cy-icon { transform: translateX(3px); }
.ch-card__go .cy-icon { transition: transform var(--cy-duration) var(--cy-ease); }

.ch-empty { max-width: 1140px; margin: var(--cy-section-y) auto 0; padding: 0 var(--ch-gutter); text-align: center; font-size: var(--cy-fs-lg); line-height: 24px; }

/* ---------- Call to action ---------- */
.ch-cta { padding: var(--cy-section-y) var(--ch-gutter); }
.ch-cta__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 40px;
  border-radius: 16px; background: var(--cy-brand-50);
}
.ch-cta__title { margin: 0; font: 600 var(--cy-fs-3xl)/32px var(--cy-font); }
.ch-cta__text { margin: 8px 0 0; font-size: var(--cy-fs-lg); line-height: 24px; }
.ch-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.ch-cta__actions .cy-btn { gap: 8px; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .ch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .ch-hero__text, .ch-group__head p, .ch-cta__text { font-size: var(--cy-fs-md); line-height: 22px; }
  .ch-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 2 * var(--ch-gutter)); margin-inline: calc(-1 * var(--ch-gutter)); padding: 0 var(--ch-gutter) 4px; scrollbar-width: none; }
  .ch-chips::-webkit-scrollbar { display: none; }
  .ch-chip { flex-shrink: 0; }
  .ch-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ch-card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 8px; padding: 16px; }
  .ch-card__title { flex: 1; margin: 0; font-size: var(--cy-fs-lg); line-height: 22px; }
  .ch-card__text { flex-basis: 100%; }
  .ch-cta__inner { padding: 24px 20px; }
  .ch-cta__title { font-size: var(--cy-fs-2xl); line-height: 28px; }
  .ch-cta__actions, .ch-cta__actions .cy-btn { width: 100%; }
}