/* Opinie (opinions) - frontend. Template-independent: the module reads the shared --cms-* tokens a template may define
   (AGENTS.md, section 23) and falls back to Bootstrap variables, so it works in every template. Layout reacts to the
   width of the module or block (container queries). Link classes are written twice (".opn-x.opn-x") so template rules
   such as ".mn-template a" do not recolour them. */

.opn-module,.opn-latest{
  --opn-accent:var(--cms-accent,var(--bs-primary,#0d6efd));
  --opn-accent-ink:var(--cms-accent-ink,var(--opn-accent));
  --opn-accent-soft:var(--cms-accent-soft,color-mix(in srgb,var(--opn-accent) 12%,transparent));
  --opn-text:var(--bs-body-color,#212529);
  --opn-muted:var(--bs-secondary-color,#6c757d);
  --opn-border:var(--bs-border-color,#dee2e6);
  --opn-surface:var(--cms-surface,var(--bs-body-bg,#fff));
  --opn-soft:var(--cms-surface-soft,var(--bs-tertiary-bg,#f8f9fa));
  --opn-line:var(--cms-surface-border-width,1px);
  --opn-shadow:var(--cms-surface-shadow,0 1px 2px rgba(0,0,0,.05));
  --opn-radius:var(--cms-radius,12px);
  --opn-radius-sm:var(--cms-radius-sm,8px);
  --opn-display:var(--cms-font-display,inherit);
  --opn-star:#f5a524;
  container-type:inline-size;
}
[data-bs-theme=dark] :is(.opn-module,.opn-latest){--opn-star:#fbbf24}
:where(.opn-module,.opn-latest) a:not([class]){color:var(--opn-accent-ink)}

.opn-module{margin-bottom:2rem}
.opn-crumbs{font-size:.85rem;color:var(--opn-muted);margin-bottom:.5rem}
.opn-crumbs a{color:inherit}
.opn-head{margin-bottom:1.25rem}
.opn-head__title{margin:0 0 .4rem;font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);line-height:1.15}
.opn-head__lead{color:var(--opn-muted);max-width:70ch;margin:0 0 .8rem}
.opn-summary{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;padding:.7rem 1rem;border-radius:var(--opn-radius);background:var(--opn-soft);border:var(--opn-line) solid var(--opn-border)}
.opn-summary__avg{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.opn-summary__add.opn-summary__add{margin-left:auto;font-weight:600;color:var(--opn-accent-ink);text-decoration:none}
.opn-summary__add.opn-summary__add:hover{text-decoration:underline}

.opn-stars{display:inline-flex;gap:.1rem;color:var(--opn-star);font-size:.95rem;line-height:1}
.opn-list{display:grid;gap:1rem;margin-bottom:1.5rem}
.opn-card{position:relative;padding:1rem 1.15rem;border:var(--opn-line) solid var(--opn-border);border-radius:var(--opn-radius);background:var(--opn-surface);box-shadow:var(--opn-shadow)}
.opn-card__head{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
.opn-card__avatar{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--opn-accent-soft);color:var(--opn-accent-ink);font-weight:700;font-size:.9rem}
.opn-card__who{min-width:0;flex:1 1 auto}
.opn-card__author{margin:0;font-size:1rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.opn-card__date{display:block;font-size:.8rem;color:var(--opn-muted)}
.opn-card__text{overflow-wrap:anywhere}
.opn-card__text p{margin:0 0 .6rem}
.opn-card__text p:last-child,.opn-card__text--short{margin-bottom:0}
.opn-card__text--short{font-size:.92rem}
.opn-card__more.opn-card__more{display:inline-block;margin-top:.35rem;font-size:.85rem;font-weight:600;color:var(--opn-accent-ink)}
.opn-card__reply{margin-top:.8rem;padding:.7rem .9rem;border-left:3px solid var(--opn-accent);border-radius:0 var(--opn-radius-sm) var(--opn-radius-sm) 0;background:var(--opn-soft);font-size:.93rem}
.opn-card__reply p{margin:0 0 .4rem}
.opn-card__reply p:last-child{margin:0}
.opn-card__reply-label{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--opn-accent-ink);margin-bottom:.25rem}
.opn-empty{text-align:center;padding:2rem 1rem;color:var(--opn-muted);border:var(--opn-line) dashed var(--opn-border);border-radius:var(--opn-radius);margin-bottom:1.5rem}
.opn-empty .bi{font-size:2rem;display:block;margin-bottom:.5rem}
.opn-pagination{margin:0 0 1.5rem}

.opn-form{padding:1.15rem;border:var(--opn-line) solid var(--opn-border);border-radius:var(--opn-radius);background:var(--opn-soft);margin-bottom:1.5rem}
.opn-form__title{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;margin:0 0 .3rem}
.opn-form__lead{color:var(--opn-muted);font-size:.9rem;margin:0 0 1rem}
.opn-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.opn-rate{border:0;padding:0;margin:0}
.opn-rate__stars{display:inline-flex;flex-direction:row-reverse;gap:.15rem}
.opn-rate__input{position:absolute;opacity:0;width:1px;height:1px}
.opn-rate__label{cursor:pointer;font-size:1.6rem;line-height:1;color:var(--opn-border);transition:color .12s ease}
.opn-rate__input:checked~.opn-rate__label,.opn-rate__label:hover,.opn-rate__label:hover~.opn-rate__label{color:var(--opn-star)}
.opn-rate__input:focus-visible+.opn-rate__label{outline:2px solid var(--opn-accent);outline-offset:2px;border-radius:4px}
.opn-rate__clear{margin-left:.75rem;vertical-align:super;font-size:.8rem}

/* Block "Ostatnie opinie" */
.opn-latest__list{display:grid;gap:.75rem}
.opn-latest .opn-card{padding:.8rem .9rem}
.opn-latest .opn-card__avatar{width:2.1rem;height:2.1rem;font-size:.8rem}
.opn-latest__links{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.75rem;font-size:.88rem;font-weight:600}
.opn-latest__link.opn-latest__link{color:var(--opn-accent-ink);text-decoration:none}
.opn-latest__link.opn-latest__link:hover{text-decoration:underline}
@container (min-width:40rem){
  .opn-latest--grid .opn-latest__list{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
}
@media (prefers-reduced-motion:reduce){.opn-rate__label{transition:none}}