/*
CHANGE LOG
File: static/css/carrier_tools.css
Purpose: https://prohrhq.com/carrier-tools catalog: hero, category jump links, product cards
         (screenshot, name, benefit, button) and the closing review offer. Uses the site tokens
         from prohrhq_public.css; kept separate because that file is over its line limit.
Version History:
  2026-10-04 v2.2 - Category row is four columns; .ct-hero-call places the top Book a Call pill.
  2026-10-04 v2.1 - .ct-how: the one-line "use a tool, read the research, or ask us" summary.
  2026-10-04 v2.0 - Catalog layout (categories + screenshot cards). Replaces the v1 list styles.
  2026-10-03 v1.0 - Initial.
*/

.ct { --ct-navy: #15233f; --ct-amber: #f2b33d; padding-bottom: var(--space-8); }

.ct-hero { background: var(--ct-navy); color: #fff; }
.ct-hero__inner { max-width: 1120px; margin: 0 auto; padding: 48px 28px 40px; }
.ct-eyebrow { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ct-amber); }
.ct-hero h1 { margin: 0 0 14px; color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.01em; }
.ct-lede { margin: 0 0 26px; max-width: 720px; font-size: 1.12rem; line-height: 1.55; color: #dfe6f2; }

.ct-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ct-hero-call { display: inline-block; margin-top: 14px; }
.ct-jump a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.2; background: rgba(255,255,255,.04); }
.ct-jump a:hover, .ct-jump a:focus-visible { border-color: var(--ct-amber); background: rgba(255,255,255,.09); }
.ct-jump .ct-icon { width: 26px; height: 26px; flex: none; color: var(--ct-amber); }
.ct-how { margin: 18px 0 0; font-size: 1rem; font-weight: 600; color: #fff; }
.ct-proof { margin: 10px 0 0; font-size: .92rem; color: #b9c5d9; }

.ct-icon { width: 100%; height: 100%; display: block; }

.ct-cat, .ct-talk { max-width: 1120px; margin: 0 auto; padding: 44px 28px 0; scroll-margin-top: calc(var(--navbar-h) + 12px); }
.ct-cat__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.ct-cat__icon { flex: none; width: 48px; height: 48px; padding: 10px; border-radius: 12px; background: var(--color-accent-soft); color: var(--color-accent); box-sizing: border-box; }
.ct-cat__head h2, .ct-talk h2 { margin: 0 0 4px; padding: 0; border: 0; font-size: 1.6rem; }
.ct-cat__head p, .ct-talk p { margin: 0; max-width: 680px; color: var(--color-text-mute); line-height: 1.5; }

.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ct-card { display: flex; flex-direction: column; border: 1px solid var(--color-rule); border-radius: 12px; overflow: hidden; background: var(--color-bg); box-shadow: var(--shadow-soft); }
.ct-card__shot { position: relative; display: block; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-rule); }
.ct-card__shot img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.ct-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.ct-card__body h3 { margin: 0; font-size: 1.15rem; color: var(--ct-navy); }
.ct-card__body p { margin: 0; line-height: 1.5; flex: 1; }

.ct-btn { align-self: flex-start; margin-top: 6px; padding: 10px 16px; border: 1px solid var(--ct-navy); border-radius: 8px; color: var(--ct-navy); font-weight: 700; text-decoration: none; }
.ct-btn:hover, .ct-btn:focus-visible { background: var(--ct-navy); color: #fff; }
.ct-btn--solid { background: var(--ct-amber); border-color: var(--ct-amber); color: #1b1b1b; margin-top: 16px; }
.ct-btn--solid:hover, .ct-btn--solid:focus-visible { background: #e2a227; color: #1b1b1b; }

.ct-talk { display: flex; gap: 16px; align-items: flex-start; }
.ct-talk > div { padding: 26px 28px; border-radius: 12px; background: var(--color-bg-alt); border: 1px solid var(--color-rule); flex: 1; }

@media (max-width: 960px) {
  .ct-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ct-hero__inner { padding: 34px 20px 30px; }
  .ct-cat, .ct-talk { padding: 34px 20px 0; }
  .ct-jump { grid-template-columns: 1fr; }
  .ct-grid { grid-template-columns: 1fr; }
  .ct-talk { flex-direction: column; }
  .ct-talk > div { padding: 20px; }
}