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

.rss-module,.rss-block{
  --rss-accent:var(--cms-accent,var(--bs-primary,#0d6efd));
  --rss-accent-ink:var(--cms-accent-ink,var(--rss-accent));
  --rss-accent-soft:var(--cms-accent-soft,color-mix(in srgb,var(--rss-accent) 12%,transparent));
  --rss-solid:var(--cms-button-bg,var(--rss-accent));
  --rss-on-solid:var(--cms-button-color,#fff);
  --rss-text:var(--bs-body-color,#212529);
  --rss-muted:var(--bs-secondary-color,#6c757d);
  --rss-border:var(--bs-border-color,#dee2e6);
  --rss-surface:var(--cms-surface,var(--bs-body-bg,#fff));
  --rss-soft:var(--cms-surface-soft,var(--bs-tertiary-bg,#f8f9fa));
  --rss-line:var(--cms-surface-border-width,1px);
  --rss-radius:var(--cms-radius,12px);
  --rss-radius-sm:var(--cms-radius-sm,8px);
  container-type:inline-size;
}
:where(.rss-module,.rss-block) a:not([class]){color:var(--rss-accent-ink)}

.rss-module{margin-bottom:2rem}
.rss-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.85rem;color:var(--rss-muted);margin-bottom:.5rem}
.rss-crumbs a{color:inherit;text-decoration:none}
.rss-crumbs a:hover{color:var(--rss-accent-ink);text-decoration:underline}
.rss-crumbs .bi{font-size:.7rem}
.rss-head{margin-bottom:1.25rem}
.rss-head__title{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .4rem;font-size:clamp(1.5rem,1.25rem + 1vw,2.1rem);line-height:1.2}
.rss-head__title .bi-rss{color:#f26522}
.rss-head__lead{color:var(--rss-muted);max-width:70ch;margin:0}
.rss-head__meta{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:0 0 .4rem;font-size:.88rem;color:var(--rss-muted)}
.rss-empty{padding:1.25rem;border:var(--rss-line) dashed var(--rss-border);border-radius:var(--rss-radius);color:var(--rss-muted);text-align:center}

.rss-grid{display:grid;gap:1rem}
@container (min-width:40rem){.rss-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:66rem){.rss-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rss-feed-card{display:flex;flex-direction:column;padding:1rem 1.1rem;border:var(--rss-line) solid var(--rss-border);border-radius:var(--rss-radius);background:var(--rss-surface)}
.rss-feed-card__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem .75rem;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:2px solid var(--rss-accent)}
.rss-feed-card__title{margin:0;font-size:1.05rem}
.rss-feed-card__link.rss-feed-card__link{color:var(--rss-text);text-decoration:none}
.rss-feed-card__link.rss-feed-card__link:hover{color:var(--rss-accent-ink)}
.rss-feed-card__host{font-size:.78rem;color:var(--rss-muted)}
.rss-feed-card__empty{color:var(--rss-muted);font-size:.9rem;margin:0}
.rss-feed-card .rss-more{margin-top:auto}

.rss-list{list-style:none;margin:0 0 .5rem;padding:0}
.rss-item{display:flex;gap:.75rem;padding:.5rem 0;border-bottom:1px solid color-mix(in srgb,var(--rss-border) 70%,transparent)}
.rss-item:last-child{border-bottom:0}
.rss-item__image{flex:none;width:6rem;height:4rem;object-fit:cover;border-radius:var(--rss-radius-sm);background:var(--rss-soft)}
.rss-item__body{min-width:0}
.rss-item__title.rss-item__title{color:var(--rss-text);font-weight:600;line-height:1.35;text-decoration:none;overflow-wrap:anywhere}
.rss-item__title.rss-item__title:hover{color:var(--rss-accent-ink);text-decoration:underline}
.rss-item__ext{font-size:.7em;margin-left:.3rem;color:var(--rss-muted)}
.rss-item__meta{margin-top:.15rem;font-size:.78rem;color:var(--rss-muted)}
.rss-item__feed.rss-item__feed{color:var(--rss-accent-ink);text-decoration:none}
.rss-item__summary{margin:.3rem 0 0;font-size:.9rem;color:var(--rss-muted)}
.rss-list--full .rss-item{padding:.8rem 0}
.rss-list--full .rss-item__title.rss-item__title{font-size:1.05rem}
@container (max-width:26rem){.rss-item.has-image{flex-direction:column}.rss-item__image{width:100%;height:auto;aspect-ratio:16/9}}
.rss-more.rss-more{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--rss-accent-ink);text-decoration:none}
.rss-more.rss-more:hover{text-decoration:underline}
.rss-pagination{margin-top:1rem}

.rss-tabs{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.4rem;margin:0 0 1rem;scrollbar-width:thin}
.rss-tabs__item.rss-tabs__item{flex:none;padding:.3rem .75rem;border:var(--rss-line) solid var(--rss-border);border-radius:999px;font-size:.82rem;color:var(--rss-text);text-decoration:none;white-space:nowrap;background:var(--rss-surface)}
.rss-tabs__item.rss-tabs__item:hover{border-color:var(--rss-accent);color:var(--rss-accent-ink)}
.rss-tabs__item.rss-tabs__item.is-active{background:var(--rss-solid);border-color:var(--rss-solid);color:var(--rss-on-solid)}

.rss-entry__image{display:block;max-width:100%;height:auto;margin:0 0 1rem;border-radius:var(--rss-radius)}
.rss-entry__summary{font-size:1.05rem;margin:0 0 1.25rem;max-width:70ch}
.rss-entry__note{margin:1.25rem 0 0;font-size:.8rem;color:var(--rss-muted)}

/* Block */
.rss-block__source{margin:0 0 .3rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.rss-block__source-link.rss-block__source-link{color:var(--rss-muted);text-decoration:none}
.rss-block__source-link.rss-block__source-link:hover{color:var(--rss-accent-ink)}
.rss-block__source .bi-rss{color:#f26522}
.rss-block .rss-item{padding:.4rem 0}
.rss-block .rss-item__title.rss-item__title{font-weight:500;font-size:.9rem}
.rss-block__empty{margin:0 0 .4rem;font-size:.9rem;color:var(--rss-muted)}
.rss-block__more.rss-block__more{display:inline-block;margin-top:.25rem;font-size:.85rem;font-weight:600;color:var(--rss-accent-ink)}