/* ==========================================================================
   CZYTUJ — system.css
   Komponenty layoutu: site-mast, hero, sheet, entry, card-grid, title-index,
   channel-card, site-foot. Tokeny w kit.css.
   ========================================================================== */

/* ---------- Nagłówek ---------- */
.site-mast { background: var(--mast); color: var(--mast-ink); }
.site-mast__inner {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-mast__logo { display: block; line-height: 0; flex: none; }
.site-mast__logo img { height: 35px; width: auto; }
.site-nav { margin-left: auto; }
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: flex-end;
}
.site-nav a {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--mast-ink);
  text-decoration: none;
  opacity: .85;
}
.site-nav a:hover, .site-nav a[aria-current] { opacity: 1; color: #fff; }
.site-nav a[aria-current] { box-shadow: 0 2px 0 #fff; }

/* Menu na wąskich ekranach: przełącznik checkbox + label, bez JS */
.site-nav__toggle { display: none; }
@media (max-width: 860px) {
  .site-mast__inner { flex-wrap: wrap; }
  .site-nav { display: contents; }
  .site-nav__toggle {
    display: block; margin-left: auto; cursor: pointer;
    font-family: var(--font-display); font-size: var(--fs-meta);
    text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--mast-ink);
    padding: 6px 0;
  }
  .site-nav ul { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-end; padding: var(--space-1) 0; }
  #nav-toggle:checked ~ ul { display: flex; }
  #nav-toggle:focus-visible + .site-nav__toggle { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* ---------- Hero (strona główna, listy kategorii) ---------- */
.hero {
  position: relative;
  background: var(--mast);
  color: var(--mast-ink);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: var(--space-6) var(--space-2) var(--space-6);
  text-align: center;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  color: #fff;
  margin: 0 0 var(--space-2);
  line-height: 1;
}
.hero__lead { max-width: 560px; margin: 0 auto; font-style: italic; color: rgba(255, 255, 255, .85); }
/* strona główna: okładka ze starego motywu z karmazynową nakładką, tylko pod tytułem */
.hero--cover { background: var(--mast) url("/assets/cover.webp") center / cover no-repeat; border-top: 0; }
.hero--cover::before { content: ""; position: absolute; inset: 0; background: var(--cover-veil); }
.hero--cover > * { position: relative; }
.hero--cover .hero__lead { color: #fff; }
.hero .meta { color: rgba(255, 255, 255, .7); display: block; margin-bottom: var(--space-2); }

/* ---------- Karta z treścią ---------- */
.sheet {
  max-width: var(--col-content);
  margin: var(--space-5) auto var(--space-6);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-6) var(--space-5);
}
.sheet--wide { max-width: var(--col-wide); }
@media (max-width: 760px) {
  .sheet { margin: 0 0 var(--space-4); border-radius: 0; box-shadow: none; padding: var(--space-4) var(--space-2); }
}

/* ---------- Wpis ---------- */
.entry__head { margin-bottom: var(--space-4); }
.entry__head .meta { display: block; margin-bottom: var(--space-2); }
.entry__head .meta a { color: inherit; text-decoration: none; }
.entry__head .meta a:hover { color: var(--accent); }
.entry__title { margin: 0; }
.entry__image { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.entry__image img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
@media (max-width: 760px) { .entry__image { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-2)) var(--space-4); border-radius: 0; } }

.entry__body { font-size: var(--fs-poem); line-height: var(--lh-poem); }
.entry__body > :first-child { margin-top: 0; }
.entry__body > :last-child { margin-bottom: 0; }
.entry__body p { margin-bottom: 1.6em; }
.entry__body img { display: block; margin: var(--space-3) 0; border-radius: var(--radius); }
.entry__body a > img { display: inline-block; margin: var(--space-1) 0; max-width: min(260px, 100%); }  /* przyciski/logotypy z WP */
.entry__body iframe { display: block; width: 100%; border: 0; margin: var(--space-3) 0; }
.entry__body video { display: block; width: 100%; margin: var(--space-3) 0; }
.entry__body table { border-collapse: collapse; margin: var(--space-3) 0; }
.entry__body td { vertical-align: top; padding: 0 var(--space-3) var(--space-2) 0; }
.entry__body h2, .entry__body h3 { margin-top: var(--space-5); }
.entry__body ul, .entry__body ol { padding-left: 1.4em; }

.spotify { margin: 0 0 var(--space-5); }
.spotify iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }

.entry__foot {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}

/* ---------- Sekcja „więcej” pod wpisem / na stronie głównej ---------- */
.more { max-width: var(--col-wide); margin: 0 auto var(--space-7); padding: 0 var(--space-2); }
.more__title { text-align: center; margin-bottom: var(--space-4); }

/* ---------- Siatka kart ---------- */
.card-grid {
  list-style: none; margin: var(--space-3) 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform var(--dur) var(--ease);
}
.card:hover { transform: translateY(-2px); color: inherit; }
.card__img { aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.card__body { padding: var(--space-2) var(--space-2) var(--space-3); }
.card__title { font-family: var(--font-display); font-size: 18px; line-height: 1.25; color: var(--ink); margin: 0 0 6px; }
.card:hover .card__title { color: var(--accent); }
.card .meta { font-size: 11px; line-height: 1.5; display: block; }
/* w wąskiej kolumnie wpisu karty są mniejsze */
.entry__body .card-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
.entry__body .card__title { font-size: 16px; margin-top: 0; }
.entry__body ul.card-grid, .entry__body ul.title-index { padding-left: 0; }

/* ---------- Duże zajawki (sekcje strony głównej, jak w starym motywie) ---------- */
.feature-list { list-style: none; margin: var(--space-3) 0 var(--space-4); padding: 0; display: grid; gap: 30px; }
.entry__body ul.feature-list { padding-left: 0; }
.feature { position: relative; }
.feature__link {
  position: relative; display: block;
  aspect-ratio: 580 / 325;
  background: var(--mast);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
}
.entry__body .feature__link img,
.feature__link img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  margin: 0; border-radius: 0; max-width: none;
  transition: transform 600ms var(--ease);
}
.feature__link:hover img { transform: scale(1.03); }
.entry__body .feature__title,
.feature__title {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 12px var(--space-3) 14px;
  background: rgba(0, 0, 0, .32);
  color: #E6E6E6;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.feature__link:hover .feature__title { color: #fff; }
.feature--player .feature__title { top: 0; bottom: auto; }
.feature__player { position: relative; z-index: 1; margin-top: -50px; padding: 0 10px; }
.entry__body .feature__player iframe,
.feature__player iframe {
  display: block; width: 100%; height: 152px; margin: 0; border: 0; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 4px 16px rgba(180, 40, 60, .3);
}

/* ---------- Indeks alfabetyczny ---------- */
.title-index {
  list-style: none; margin: var(--space-3) 0; padding: 0;
  columns: 2 240px; column-gap: var(--space-5);
  font-size: 15px; line-height: 1.5;
}
.title-index li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.title-index a { color: var(--ink-text); text-decoration: none; }
.title-index a:hover { color: var(--accent); }
.title-index__letter {
  font-family: var(--font-display); color: var(--accent); font-size: 20px;
  border-bottom: 0 !important; padding-top: var(--space-2) !important;
}

/* ---------- Karta kanału (YouTube / YouTube Music) ---------- */
.channel-card {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 14px;
  color: #fff;
  margin: var(--space-3) 0;
}
.channel-card__link { display: flex; align-items: center; gap: var(--space-2); color: #fff; text-decoration: none; flex: 1; min-width: 0; }
.channel-card__link:hover { color: #fff; }
.channel-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin: 0; flex: none; }
.channel-card__service { font-size: 12px; opacity: .75; }
.channel-card__name { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.channel-card .btn { background: #fff; color: #111; flex: none; }
.channel-card .btn:hover { background: #eee; color: #111; }

/* ---------- Stopka ---------- */
.site-foot {
  border-top: 1px solid var(--rule);
  padding: var(--space-5) var(--space-2) var(--space-6);
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.site-foot p { margin: 0 0 var(--space-1); }
.site-foot a { color: var(--ink-soft); }
.site-foot a:hover { color: var(--accent); }