/* ==========================================================================
   Google Cégem értékelések – főoldali szekció + hero-jelvény
   Színek: kizárólag a 01-base.css márkatokenjeiből (--text/--muted/--silver/
   --primary). A rgba(255,255,255,.0x) felületi tintek a ház stílusa.
   A Google logó négy színe az EGYETLEN kivétel: az a Google előírása.
   ========================================================================== */

/* --- csillagsor (közös: hero-jelvény + kártyák) --- */
.grev-star{ display:inline-block; vertical-align:-2px; }
.grev-star__bg{ fill: rgba(255,255,255,.16); }
.grev-star__fg{ fill: var(--primary); }

/* ==========================================================================
   Hero-jelvény – a meglévő .lp-grev kiegészítése valós számokkal
   ========================================================================== */
.lp-grev__score{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  font-weight:800;
  color: var(--text);
  letter-spacing:.2px;
}
.lp-grev__score b{ font-size:15px; }
.lp-grev__count{
  color: var(--muted);
  font-weight:600;
  font-size:12.5px;
  white-space:nowrap;
}

/* ==========================================================================
   Szekció
   ========================================================================== */
.grev{ padding: 46px 0 54px; }

.grev-demo{
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px dashed rgba(200,164,77,.55);
  border-radius: 10px;
  background: rgba(200,164,77,.08);
  color: var(--silver);
  font-size: 13.5px;
  line-height: 1.5;
}
.grev-demo strong{ color: var(--primary); }

/* --- fejléc --- */
.grev-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.grev-head__left{ flex: 1 1 380px; min-width: 0; }

.grev-kicker{
  display:inline-block;
  font-family:"Cinzel","Inter",system-ui,sans-serif;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color: var(--silver);
  margin-bottom:8px;
}
.grev-title{
  margin:0 0 8px;
  color: var(--text);
  font-size: clamp(22px, 3.2vw, 30px);
  line-height:1.15;
  text-wrap: balance;
}
.grev-lead{
  margin:0;
  color: var(--muted);
  line-height:1.6;
  max-width: 56ch;
}

/* --- összesített pontszám --- */
.grev-score{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding: 12px 18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  text-decoration:none;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.grev-score:hover,
.grev-score:focus-visible{
  border-color: rgba(200,164,77,.45);
  background: rgba(200,164,77,.07);
  transform: translateY(-1px);
}
.grev-score__num{
  font-size: 34px;
  font-weight: 800;
  line-height:1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.grev-score__right{ display:flex; flex-direction:column; gap:4px; }
.grev-score__stars{ display:flex; gap:1px; }
.grev-score__meta{
  color: var(--muted);
  font-size: 12.5px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
.grev-score__g{ display:inline-flex; align-items:center; gap:4px; color: var(--silver); }

/* --- kártyarács --- */
.grev-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  /* A felső korlát (460px) fontos: kevés véleménynél az `1fr` végigfeszítené a
     kártyát a teljes szélességen, és a szöveg 140+ karakter/sor lenne –
     olvashatatlan. Így 1-2 véleménynél is normál sorhosszú, középre zárt marad. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 460px));
  justify-content: center;
  gap: 16px;
}
.grev-card{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.grev-card:hover{
  border-color: rgba(200,164,77,.30);
  transform: translateY(-2px);
}

.grev-card__top{
  display:flex;
  align-items:center;
  gap:11px;
}
.grev-avatar{
  flex:0 0 auto;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background: linear-gradient(135deg, rgba(230,200,119,.22), rgba(200,164,77,.12));
  border:1px solid rgba(200,164,77,.28);
  color: var(--primary);
  font-weight:800;
  font-size:14px;
  letter-spacing:.4px;
}
.grev-card__who{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.grev-card__name{
  color: var(--text);
  font-weight:700;
  font-size:14.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.grev-card__when{ color: var(--muted); font-size:12.5px; }
.grev-card__stars{ flex:0 0 auto; display:flex; gap:1px; }

.grev-card__body{
  margin:0;
  color: var(--silver);
  font-size: 14.5px;
  line-height:1.62;
}

/* hosszú vélemény – lenyíló, hogy a kártyák ne nyúljanak el */
.grev-card__body--long{ padding:0; }

/* A böngészők eltérően rejtik el a zárt <details> tartalmát (a régi slot-alapú
   módszer és az újabb ::details-content/content-visibility nem ugyanúgy
   viselkedik). Ezért NEM bízunk rá: mindkét állapotot magunk mondjuk ki.
   Enélkül a kivonat és a teljes szöveg egyszerre látszott. */
details.grev-card__body--long:not([open]) .grev-card__full{ display:none; }
details.grev-card__body--long[open]      .grev-card__excerpt{ display:none; }

.grev-card__excerpt{
  cursor:pointer;
  display:block;            /* list-item helyett: így nincs ::marker háromszög */
  list-style:none;
  color: var(--silver);
  font-size:14.5px;
  line-height:1.62;
}
.grev-card__excerpt::-webkit-details-marker{ display:none; }
.grev-card__excerpt::marker{ content:""; }
.grev-more{
  display:block;
  margin-top:8px;
  color: var(--primary);
  font-weight:700;
  font-size:13px;
}
.grev-more::after{ content:" ▾"; }
.grev-card__full{
  margin:0;
  color: var(--silver);
  font-size:14.5px;
  line-height:1.62;
}

.grev-card__link{
  margin-top:auto;
  color: var(--muted);
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  align-self:flex-start;
}
.grev-card__link:hover,
.grev-card__link:focus-visible{ color: var(--primary); }

/* --- lábléc --- */
.grev-foot{
  margin-top: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  flex-wrap:wrap;
  text-align:center;
}
.grev-note{
  margin:0;
  color: var(--muted);
  font-size:13px;
  line-height:1.55;
  max-width: 46ch;
}

/* --- fókusz: mindig látható legyen, billentyűzettel is használható --- */
.grev-score:focus-visible,
.grev-card__link:focus-visible,
.grev-card__excerpt:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- mobil --- */
@media (max-width: 720px){
  .grev{ padding: 34px 0 40px; }
  .grev-head{ align-items:flex-start; }
  .grev-score{ width:100%; justify-content:flex-start; }
  .grev-grid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .grev-score, .grev-card{ transition: none; }
  .grev-score:hover, .grev-card:hover{ transform:none; }
}