/* Review hero: 4/8 grid — identity card + welcome-offer panel */

.ccs-rev-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ccs-gutter);
  align-items: start;
  margin: 0 0 64px;
  /* Spans the full .ccs-rev__container width — no unified container wrapper.
     The offer card has its own white background + shadow + accent border;
     the identity column sits on the page grey, mirroring the Stitch design 3
     hero pattern. */
}
@media (min-width: 1024px) {
  /* Tight identity column — logo is 192px and the H1 lives in the pagehead
     now, so 240px is plenty. Offer card gets the rest. */
  .ccs-rev-hero { grid-template-columns: 240px 1fr; }
}

/* Identity column */
.ccs-rev-hero__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 1024px) {
  .ccs-rev-hero__identity { align-items: flex-start; text-align: left; }
}

.ccs-rev-hero__logo {
  width: 192px;
  height: 192px;
  background: #fff;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin-bottom: 24px;
}
.ccs-rev-hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ccs-rev-hero__name {
  font-family: var(--ccs-font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ccs-primary);
  margin: 0 0 8px 0;
}

.ccs-rev-hero__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}
.ccs-rev-hero__rating .material-symbols-outlined {
  color: var(--ccs-secondary);
  font-size: 24px;
}
.ccs-rev-hero__rating-text {
  margin-left: 8px;
  font-family: var(--ccs-font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ccs-outline);
}

.ccs-rev-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
@media (min-width: 1024px) {
  .ccs-rev-hero__badges { justify-content: flex-start; }
}
.ccs-rev-hero__badge {
  background: var(--ccs-badge-bg);
  color: var(--ccs-primary);
  padding: 6px 12px;
  border-radius: var(--ccs-radius-full);
  font-family: var(--ccs-font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* .ccs-rev-pagehead and .ccs-rev-featured-wrap live in pagehead.css — shared
   between review and comparison redesigns. */