/* ============================================================
   PTR Resource Hub — production CSS package (Phase 4B)
   Scoped entirely to .hub-* classes and #page-473 context.
   Does NOT modify any existing global rule (h1..h6 reset,
   .review-card, .reviews-grid base styles, .btn, etc.) — all of
   those are reused as-is from the current production main.css.
   NOT YET APPLIED TO PRODUCTION. Prepared for review only.
   ============================================================ */

.hub-hero {
  background: linear-gradient(135deg,#1a2744 0%,#223060 100%);
  border-radius: 12px;
  padding: 48px 32px;
  margin: 24px 0;
  color: #fff;
  text-align: center;
}

/* Required fix from Phase 2's investigation: the theme's global
   `h1,h2,h3,h4,h5,h6 { color: var(--navy) }` reset (main.css) targets
   the <h1> element directly, which always wins over a color merely
   inherited from this container — hence the explicit declaration. */
.hub-hero h1 {
  color: #fff;
  font-size: 32px;
  margin: 0 0 12px;
}

.hub-hero p {
  font-size: 16px;
  color: rgba(255,255,255,.85);
  max-width: 640px;
  margin: 0 auto 24px;
}

.hub-entry-points {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.hub-entry-btn {
  background: #F97316;
  /* !important required: these are <a> tags inside the theme's
     standard .article content wrapper, and main.css's `.article a
     { color: var(--orange); }` rule (specificity 0,2,0) otherwise
     beats this class rule (0,1,0), making the text the same orange
     as its own background. Matches the theme's own existing pattern
     for this exact problem (see .btn-amazon in main.css). */
  color: #fff !important;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
}
.hub-entry-btn:hover { background: #e0670f; }

.hub-section-head {
  font-size: 24px;
  font-weight: 800;
  color: #1e2a47;
  border-bottom: 3px solid #F97316;
  padding-bottom: 8px;
  margin: 48px 0 20px;
}

.hub-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}

.hub-topic-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 16px;
  text-decoration: none;
  color: #1e2a47;
  font-weight: 600;
  font-size: 14px;
  transition: background .15s;
}
.hub-topic-tile:hover { background: #fff3e8; border-color: #F97316; }
.hub-tile-arrow { color: #F97316; font-weight: 700; }

.hub-topic-section { margin: 40px 0; }

.hub-topic-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.hub-topic-head h2 { font-size: 20px; color: #1e2a47; margin: 0; }
.hub-view-all { color: #F97316; font-weight: 700; text-decoration: none; font-size: 14px; white-space: nowrap; }

/* Thin-topic (2-card) sections get their own explicit column count
   so they never look like a card is "missing" — this rule and its
   mobile override below are the two pieces of CSS that did not exist
   in production before Phase 2/4A; everything else here reuses the
   theme's existing .reviews-grid / .review-card system untouched.
   NOTE: the page-473 grid-wrapper cleanup (post-launch fix) removed
   the outer wrapper <div> that carried this .hub-two-card class, so
   this selector currently matches nothing in production. Left in
   place harmlessly in case a future content rebuild reintroduces the
   class; the ID-scoped rule below is what actually applies today. */
.reviews-grid.hub-two-card {
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 760px;
}

/* Thin-topic 2-column fix (post-launch).
   With the wrapper-carried .hub-two-card class gone from the live
   markup, these three sections fell back to the theme's plain
   3-column .reviews-grid rule (main.css), leaving one visibly empty
   slot since each only has 2 curated cards. Scoped to the three real,
   confirmed <section id="..."> values (verified live, not assumed) —
   Septic & Sewer, Gas-Line Plumbing, Kitchen Plumbing — the only
   Explore sections with exactly 2 cards. ID+class specificity (1,1,0)
   intentionally beats main.css's plain `.reviews-grid` class rule
   (0,1,0) at every width above the mobile override just below. */
#septic-sewage .reviews-grid,
#gas-line-plumbing .reviews-grid,
#kitchen .reviews-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 760px;
}

.hub-calc-cta {
  background: #f8f9fa;
  border: 2px solid #1E2A47;
  border-radius: 10px;
  padding: 28px 32px;
  text-align: center;
  margin: 48px 0 40px;
}
.hub-calc-cta h2 { margin: 0 0 8px; font-size: 20px; color: #1e2a47; }
.hub-calc-cta p { margin: 0 0 16px; color: #555; }

@media (max-width: 900px) {
  .hub-topic-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Matches main.css's own `.reviews-grid { grid-template-columns: 1fr }`
     mobile breakpoint (also 768px) exactly, so the three thin-topic
     sections stack to one column at the same width every other
     .reviews-grid already does — the ID-scoped rule above only needs
     to win at tablet/desktop widths, not on phones. */
  #septic-sewage .reviews-grid,
  #gas-line-plumbing .reviews-grid,
  #kitchen .reviews-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

@media (max-width: 560px) {
  .hub-topic-grid { grid-template-columns: 1fr; }
  /* Phase 4A finding: without this override, .reviews-grid.hub-two-card
     (specificity 0,2,0) beats the existing global mobile
     `.reviews-grid { grid-template-columns: 1fr }` rule (specificity
     0,1,0) regardless of media-query source order, leaving thin-topic
     cards cramped into two narrow columns on phones. This restores the
     one-column stack for two-card sections at mobile widths. */
  .reviews-grid.hub-two-card { grid-template-columns: 1fr; max-width: none; }
  .hub-entry-points { flex-direction: column; }
  .hub-hero h1 { font-size: 24px; }
}