/* Public catalog pages (/services.html, /service.html).
   Marketing-site styling, drops the portal "card" wrapper. Re-uses
   .service-section / .service-section--dark / .cta-section from styles.css
   so the catalog feels like a natural extension of the home page. */

/* ---------- Catalog (browse) ---------- */

/* Container inside a .service-section that doesn't need the 2-column
   copy/image split that home-page service sections use. */
.public-section-stacked {
  max-width: var(--max-width);
  margin: 0 auto;
}
.public-section-stacked .service-title { margin-bottom: 12px; }
.public-section-stacked .service-lede  { margin-bottom: 36px; max-width: 720px; }

/* Tighten the section padding for catalog rows so the page doesn't get
   absurdly long when there are many categories. */
.service-section.public-catalog-section { padding: 56px var(--gutter); }

/* Small intro section for the /services.html top — uses the .hero font
   sizing but without the 2-column layout. */
.public-intro {
  background: #fff;
  padding: 72px var(--gutter) 32px;
  border-bottom: 1px solid #eef1f5;
}
.public-intro-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.public-intro h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.public-intro p {
  font-family: var(--font-body);
  font-size: 18px;
  color: #4b5563;
  max-width: 720px;
  margin: 0;
}
.public-intro p a { color: var(--color-brand); font-weight: 600; }

/* Tile grid of clickable services within a category section. */
.public-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.public-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  min-height: 76px;
}
.public-tile:hover {
  border-color: var(--color-brand);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Dark-section variant: cards keep light surface but get a subtle border/shadow. */
.service-section--dark .public-tile {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}
.service-section--dark .public-tile:hover {
  border-color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.public-tile-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--color-icon-bg);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.public-tile-icon svg { width: 22px; height: 22px; }
.public-tile-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: var(--color-text);
}

/* "Sign up to get started" button at end of catalog. */
.public-tile-footer {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Service detail ---------- */

/* Hero for /service.html — uses dark navy like .feature-strip / .cta-section.
   The portal version of this hero had dark text on dark bg; this one
   explicitly sets light text so it's readable. */
.public-detail-hero {
  background: var(--color-navy);
  color: #fff;
  padding: 72px var(--gutter);
}
.public-detail-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.public-back-link {
  display: inline-block;
  color: #9fb3cb;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 20px;
}
.public-back-link:hover { color: #fff; }

.public-detail-hero h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #fff;
  letter-spacing: -0.01em;
}
.public-detail-hero .public-detail-blurb {
  font-family: var(--font-body);
  font-size: 17px;
  color: #cbd5e1;
  line-height: 1.55;
  max-width: 820px;
  margin: 0 0 14px;
}
.public-detail-hero .public-detail-tagline {
  font-family: var(--font-body);
  font-size: 15px;
  font-style: italic;
  color: #9fb3cb;
  max-width: 820px;
  margin: 0;
}

/* Three-column "What's included" cards on /service.html */
.public-detail-cards-wrap {
  background: #f6f8fa;
  padding: 64px var(--gutter);
}
.public-detail-cards {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.public-detail-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px 24px;
}
.public-detail-card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 16px;
  color: var(--color-text);
}
.public-detail-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.public-detail-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #374151;
  line-height: 1.45;
}
.public-detail-card .bullet-check { color: #2f9e69; font-weight: 700; }
.public-detail-card .bullet-cross { color: #b34a26; font-weight: 700; }
.public-detail-card .bullet-dot   { color: #6b7280; font-weight: 700; }
.public-detail-card .public-detail-doc-intro {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 12px;
}
.public-detail-card .public-detail-doc-footnote {
  font-size: 12px;
  color: #9aa4ad;
  font-style: italic;
  margin: 14px 0 0;
}
.public-detail-card .public-detail-empty {
  color: #9aa4ad;
  font-size: 14px;
  margin: 0;
}

/* "Next Steps" CTA strip on /service.html — leverages the marketing
   .cta-section pattern (dark navy panel inside a white container). */
.public-detail-cta .cta-inner { text-align: left; }
.public-detail-cta .cta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #cbd5e1;
}
.public-detail-cta .cta-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.public-detail-cta .cta-list li::before { content: "→"; color: #9fb3cb; font-weight: 700; }
.public-detail-cta .cta-button { display: inline-block; margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .public-detail-cards { grid-template-columns: 1fr; }
  .public-intro { padding: 48px var(--gutter) 24px; }
  .public-intro h1 { font-size: 40px; }
  .public-detail-hero { padding: 56px var(--gutter); }
  .public-detail-hero h1 { font-size: 36px; }
}