/**
 * /for-agent-teams/ landing page styles
 * Consumes theme palette (--color-primary, --color-navy, --color-muted, etc.)
 */

/* Hero — inline <img> so we can carry a real alt attribute.
   Layering: img (z:0) → .hero-bg overlay w/ ::after gradient (z:1) → .hero-content (z:2). */
.for-agents-hero .hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
}
.for-agents-hero .for-agents-hero-bg {
  /* Kill both fallback image AND solid navy fill so the img shows through. */
  background-image: none;
  background-color: transparent;
  z-index: 1;
}
/* Lighter diagonal gradient so the golden-hour photo actually reads.
   Base .hero-bg::after runs 0.85 → 0.72 → 0.50 which swallows the image. */
.for-agents-hero .for-agents-hero-bg::after {
  background: linear-gradient(135deg, rgba(15,23,42,0.65) 0%, rgba(15,23,42,0.55) 50%, rgba(207,38,39,0.38) 100%);
}

/* Hero-integrated CTAs (fused into hero-content column, no floating card) */
.for-agents-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 32px 0 14px;
}
.for-agents-hero-actions .btn-primary,
.for-agents-hero-actions .btn-hero-ghost {
  min-width: 220px;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
/* Ghost button — outline on dark hero. Not using the theme's .btn-outline
   because that variant assumes a light background. */
.for-agents-hero-actions .btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.for-agents-hero-actions .btn-hero-ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
}
.for-agents-hero-microcopy {
  text-align: center;
  color: rgba(255, 255, 255, .72);
  font-size: .88rem;
  letter-spacing: .3px;
  margin: 0;
}
@media (max-width: 560px) {
  .for-agents-hero-actions { flex-direction: column; align-items: center; }
  .for-agents-hero-actions .btn-primary,
  .for-agents-hero-actions .btn-hero-ghost { width: 100%; max-width: 320px; }
}

/* Opportunity 3-card grid */
.for-agents-opportunity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.for-agents-opp-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 26px 22px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.for-agents-opp-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}
.for-agents-opp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(207, 38, 39, .08);
  color: var(--color-primary);
  margin-bottom: 14px;
}
.for-agents-opp-card h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--color-navy);
}
.for-agents-opp-card p {
  color: var(--color-muted);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
}

/* Tools grid (4 col on desktop, 2 on tablet, 1 on mobile) */
.for-agents-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.for-agents-tool-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 22px 20px;
}
.for-agents-tool-icon {
  color: var(--color-primary);
  margin-bottom: 12px;
}
.for-agents-tool-title {
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--color-navy);
}
.for-agents-tool-desc {
  color: var(--color-muted);
  font-size: .88rem;
  line-height: 1.5;
  margin: 0;
}

/* Where It Comes Together — CREB DDF + open data section.
   Sits between the tools grid (section-light) and Who This Is For (default).
   Uses the default white background but leans on red accents so it reads as
   the anchor moment of the data story without stealing thunder from the
   final dark CTA band. */
.for-agents-together-section .section-header { text-align: center; margin-bottom: 12px; }
.for-agents-together-section .section-header-text { margin: 0 auto; }
.for-agents-together-lead {
  max-width: 780px;
  margin: 0 auto 32px;
  text-align: center;
  color: var(--color-dark);
  font-size: 1.02rem;
  line-height: 1.65;
}
.for-agents-together-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.for-agents-together-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--color-primary);
  border-radius: 10px;
  padding: 26px 26px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
}
.for-agents-together-card-eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.for-agents-together-card p {
  margin: 0;
  color: var(--color-navy);
  font-size: 1rem;
  line-height: 1.6;
}
.for-agents-together-kicker {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-navy);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 22px 26px;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
@media (max-width: 720px) {
  .for-agents-together-grid { grid-template-columns: 1fr; }
  .for-agents-together-kicker { font-size: 1.08rem; padding: 18px 20px; }
}

/* Who this is for — text + side badge */
.for-agents-who-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.for-agents-who-lead {
  font-size: 1.05rem;
  color: var(--color-dark);
  line-height: 1.55;
  margin: 0 0 16px;
}
.for-agents-who-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.for-agents-who-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #e2e8f0;
}
.for-agents-who-list li:last-child { border-bottom: 0; }
.for-agents-who-list li > svg {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 5px;
}
.for-agents-who-list-content {
  flex: 1;
  min-width: 0;
  color: var(--color-dark);
  font-size: .98rem;
  line-height: 1.55;
}
.for-agents-who-list-content strong {
  display: block;
  color: var(--color-navy);
  margin-bottom: 2px;
  font-size: 1.02rem;
}
.for-agents-who-fine {
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
  padding: 14px 16px;
  background: #fef2f2;
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
}
.for-agents-who-badge {
  background: var(--color-navy);
  color: #fff;
  border-radius: 12px;
  padding: 34px 28px;
  text-align: center;
  position: sticky;
  top: 100px;
}
.for-agents-who-badge-eyebrow {
  font-size: .78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 12px;
}
.for-agents-who-badge-title {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 14px;
  color: #fff;
}
.for-agents-who-badge-sub {
  font-size: .88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}

/* What You Get — 3 col grid */
.for-agents-gets-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.for-agents-get-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 22px 20px;
}
.for-agents-get-icon {
  color: var(--color-primary);
  margin-bottom: 12px;
}
.for-agents-get-card h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--color-navy);
}
.for-agents-get-card p {
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
}

/* Mid-page PDF CTA */
.for-agents-pdf-cta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
  border: 1px solid #fcd9d9;
  border-radius: 12px;
  padding: 30px 32px;
}
.for-agents-pdf-eyebrow {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 8px;
}
.for-agents-pdf-cta-text h3 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  color: var(--color-navy);
}
.for-agents-pdf-cta-text p {
  margin: 0;
  color: var(--color-muted);
  font-size: .95rem;
  line-height: 1.55;
}
.for-agents-pdf-cta-btn { text-align: right; }

/* Button sizing helper */
.btn-lg {
  font-size: 1.05rem;
  padding: 14px 26px;
}

/* Responsive breakpoints */
@media (max-width: 960px) {
  .for-agents-opportunity-grid { grid-template-columns: 1fr; }
  .for-agents-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .for-agents-gets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .for-agents-who-wrap { grid-template-columns: 1fr; }
  .for-agents-who-badge {
    position: static;
    max-width: 420px;
    margin: 0 auto;
  }
  .for-agents-pdf-cta {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .for-agents-pdf-cta-btn { text-align: left; }
}

@media (max-width: 560px) {
  .for-agents-tools-grid { grid-template-columns: 1fr; }
  .for-agents-gets-grid { grid-template-columns: 1fr; }
  .for-agents-cta-row { padding: 18px; }
  .for-agents-cta-row .btn-primary,
  .for-agents-cta-row .btn-outline {
    width: 100%;
    min-width: 0;
  }
  .for-agents-pdf-cta { padding: 22px; }
}