/* ==========================================================================
   Stare Łamy — Magazyn Miłośników Zwierząt
   styles.css
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Nunito+Sans:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   Custom Properties (Light Mode)
   -------------------------------------------------------------------------- */
:root {
  --bg:          #FBF6F1;
  --bg-card:     #FFFFFF;
  --text:        #3D2B3D;
  --text-muted:  #6B5B6B;
  --accent:      #E07A5F;
  --link:        #2A7F7B;
  --border:      #EADFD6;
  --header-bg:   #FFFFFF;
  --shadow:      0 2px 12px rgba(61, 43, 61, 0.08);
  --radius:      12px;
  --radius-sm:   6px;
  --max-content: 720px;
  --max-wrap:    1200px;
  --font-sans:   'Nunito Sans', system-ui, sans-serif;
  --font-serif:  'Fraunces', Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #1A1219;
    --bg-card:     #251C24;
    --text:        #EDE4E4;
    --text-muted:  #B09EB0;
    --accent:      #E07A5F;
    --link:        #5ABFBA;
    --border:      #3D2E3D;
    --header-bg:   #1E151E;
    --shadow:      0 2px 12px rgba(0, 0, 0, 0.35);
  }
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.25;
  color: var(--text);
}

p {
  margin-bottom: 1.25em;
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}

li {
  margin-bottom: 0.4em;
}

/* --------------------------------------------------------------------------
   Layout Helper
   -------------------------------------------------------------------------- */
.wrap {
  width: 92%;
  max-width: var(--max-wrap);
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Site Header
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(61, 43, 61, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  flex-wrap: wrap;
}

.site-header__logo {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-header__logo:hover {
  color: var(--accent);
}

.site-header__logo span {
  color: var(--accent);
}

.site-nav {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.site-nav a {
  display: block;
  padding: 0.4rem 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}

.site-nav a:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* --------------------------------------------------------------------------
   Feature (strona główna — wyróżniony artykuł)
   -------------------------------------------------------------------------- */
.feature {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 2.5rem 0;
}

@media (max-width: 700px) {
  .feature {
    grid-template-columns: 1fr;
  }
}

.feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 280px;
}

.feature__body {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.feature__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.feature__title {
  font-size: 1.75rem;
  font-weight: 700;
}

.feature__lead {
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.65;
}

.feature__link {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 0.6rem 1.35rem;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 700;
  align-self: flex-start;
  transition: opacity 0.15s;
}

.feature__link:hover {
  opacity: 0.88;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Section Headers (filary)
   -------------------------------------------------------------------------- */
.section {
  padding: 3rem 0 2rem;
}

.section--alt {
  background: color-mix(in srgb, var(--border) 30%, var(--bg));
}

.section__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.75rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.75rem;
}

.section__title {
  font-size: 1.45rem;
  font-weight: 700;
}

.section__subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Post Cards Grid
   -------------------------------------------------------------------------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}

.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(61, 43, 61, 0.12);
}

.post-card__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.post-card__body {
  padding: 1.1rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.55rem;
}

.post-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.post-card__title a {
  color: var(--text);
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--link);
}

.post-card__lead {
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}

.more {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--link);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.more:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Pill Tags (filary)
   -------------------------------------------------------------------------- */
.pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent);
  text-decoration: none;
}

.pill--teal {
  background: color-mix(in srgb, var(--link) 12%, var(--bg));
  color: var(--link);
}

/* --------------------------------------------------------------------------
   Article Layout
   -------------------------------------------------------------------------- */
.article-hero {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 2rem;
}

.article-wrap {
  max-width: var(--max-content);
  margin: 2.5rem auto;
  padding: 0 1rem;
}

.article-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.article-meta time {
  font-weight: 600;
}

.article-title {
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  font-weight: 700;
  margin-bottom: 0.9rem;
  line-height: 1.2;
}

.article-lead {
  font-size: 1.08rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 1.75rem;
  font-style: italic;
}

.article-body h2 {
  font-size: 1.35rem;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.article-body h3 {
  font-size: 1.1rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   TOC Box
   -------------------------------------------------------------------------- */
.toc-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--link);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.5rem;
  margin: 1.75rem 0 2rem;
}

.toc-box__title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
}

.toc-box ol {
  margin: 0;
  padding-left: 1.3em;
  font-size: 0.9rem;
}

.toc-box a {
  text-decoration: none;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Callout "Warto wiedzieć"
   -------------------------------------------------------------------------- */
.callout {
  background: color-mix(in srgb, var(--link) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--link) 25%, var(--border));
  border-left: 4px solid var(--link);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}

.callout__title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--link);
  margin-bottom: 0.6rem;
}

.callout p,
.callout ul {
  font-size: 0.92rem;
  margin-bottom: 0.6em;
}

.callout p:last-child,
.callout ul:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   "Figure" image caption helper
   -------------------------------------------------------------------------- */
.figure {
  margin: 1.75rem 0;
}

.figure img {
  border-radius: var(--radius-sm);
  width: 100%;
}

.figure figcaption {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.45rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   "Zobacz też" — powiązane artykuły
   -------------------------------------------------------------------------- */
.see-also {
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}

.see-also__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.see-also ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.see-also ul li::before {
  content: "→ ";
  color: var(--accent);
  font-weight: 700;
}

.see-also a {
  font-weight: 600;
  text-decoration: none;
}

.see-also a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Page Hero (o-redakcji, kontakt)
   -------------------------------------------------------------------------- */
.page-hero {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 2rem;
}

.page-title {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-body {
  max-width: var(--max-content);
  margin: 2rem auto;
  padding: 0 1rem;
}

.page-body p {
  margin-bottom: 1.15em;
}

/* --------------------------------------------------------------------------
   Site Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding: 2rem 0;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer a {
  color: var(--link);
  font-weight: 600;
}

.disclaimer {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 700px;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.breadcrumb a {
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  html {
    font-size: 16px;
  }

  .feature__body {
    padding: 1.5rem;
  }

  .feature__title {
    font-size: 1.35rem;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .site-header__inner {
    gap: 0.75rem;
  }
}

/* ============================================================
   COMPAT LAYER (added by manager) — unifies the variant class
   names produced during a multi-source build so every page
   renders with the same Fraunces/coral system. Additive only.
   ============================================================ */

/* Centered content containers (variant names) */
.page-wrapper,
.article-wrapper,
.main-content,
.article {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
.article-header { margin-bottom: 1rem; }

/* Hero images (variant class names, on <img>) */
img.hero-image,
img.article-hero__img,
img.article-hero,
.hero > img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  display: block;
}
.hero { margin-bottom: 1.5rem; }

/* Breadcrumb variant */
.breadcrumb__list {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 0; margin: 0;
  font-family: var(--font-sans); font-size: .8rem; color: var(--text-muted);
}
.breadcrumb__item { color: var(--text-muted); }
.breadcrumb__item--current { color: var(--text); }
.breadcrumb__list a { color: var(--text-muted); text-decoration: none; }

/* Nav + logo variants */
.site-nav__list {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: .25rem; padding: 0; margin: 0;
}
.site-nav__link {
  font-family: var(--font-sans); font-size: .85rem; color: var(--text-muted);
  text-decoration: none; padding: .35rem .65rem; border-radius: var(--radius-sm);
}
.site-nav__link:hover { color: var(--text); }
.site-nav__link--active { color: var(--accent); }
.site-logo {
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700;
  color: var(--text); text-decoration: none; letter-spacing: .02em;
}

/* Article meta variants */
.article-meta__pill {
  display: inline-block; padding: .2rem .7rem; border-radius: 20px;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  background: #FBE7DF; color: var(--accent);
}
.article-meta__date { font-family: var(--font-sans); font-size: .85rem; color: var(--text-muted); }

/* TOC variants */
.toc-box__label,
.toc-box__heading {
  font-family: var(--font-sans); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: .75rem;
}
.toc-box__list { padding-left: 1.25rem; }
.toc-box__list a { color: var(--link); text-decoration: none; font-family: var(--font-sans); font-size: .9rem; }

/* See-also variants */
.see-also__heading {
  font-family: var(--font-sans); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: .75rem;
}
.see-also__list { list-style: none; padding: 0; margin: 0; }
.see-also__item { margin-bottom: .4rem; }
.see-also__link { font-family: var(--font-sans); color: var(--link); text-decoration: none; font-size: .95rem; }

/* Footer variants */
.site-footer__copy,
.site-footer__disclaimer { margin: .2rem 0; }

/* Article body extras used by some articles (definition lists, inline code) */
.article-body dl { margin: 1.25rem 0 1.75rem; }
.article-body dt { font-family: var(--font-sans); font-weight: 700; font-size: .95rem; color: var(--text); margin-top: 1rem; }
.article-body dt:first-child { margin-top: 0; }
.article-body dd { margin-left: 1.25rem; margin-bottom: .25rem; color: var(--text); }
.article-body code {
  font-family: 'Courier New', Courier, monospace; background: var(--border);
  padding: .1em .4em; border-radius: 3px; font-size: .9em;
}

/* extra variant aliases */
.page-wrap { max-width: var(--max-content); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.article-date, .date { font-family: var(--font-sans); font-size: .85rem; color: var(--text-muted); }