/* Inner pages: blog, practices, guide, privacy. Loaded after style.css and
   built on the same tokens: Inter Tight above 20px, Inter at 20px and below,
   Roboto Serif for the lead only,
   2px radii and hairline rules, brass as the single accent. */

/* The nav is fixed and takes no space; main.js publishes its height. */
.page #page-content { padding-top: var(--nav-height, 5.5rem); }
/* Inner pages share the landing's 1160px container; only running text is held
   to a reading measure (65ch), so the page edges line up across the site. */
.article__title, .article__head h1 { max-width: 26ch; }
.lead, .page-head__lead { max-width: 60ch; }
[hidden] { display: none !important; }

/* ---------- page head (indexes) ---------- */
.page-head { padding: clamp(2rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 {
  margin: 0 0 1rem;
  font-size: var(--size-h1);
  text-wrap: balance;
  line-height: var(--lh-h1);
}
.page-head__lead {
  max-width: 60ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--size-lead);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-lead);
}

/* ---------- blog index ---------- */
.blog-index { padding-bottom: clamp(3rem, 6vw, 5rem); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2.5rem;
}
.chip {
  padding: 0.5rem 0.875rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: var(--size-small);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.chip:hover { color: var(--text); border-color: var(--accent-brass); }
.chip[aria-pressed="true"] {
  background-color: var(--accent-brass);
  border-color: var(--accent-brass);
  color: var(--background-deep);
  font-weight: 500;
}
.chip:focus-visible { outline: 2px solid var(--accent-brass); outline-offset: 2px; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-card { border-top: 1px solid var(--border); }
.post-card:last-child { border-bottom: 1px solid var(--border); }
.post-card__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0;
}
.post-card__cat {
  margin: 0 0 0.5rem;
  color: var(--text-secondary);
  font-size: var(--size-note);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls-note);
  line-height: var(--lh-note);
  font-family: var(--font-mono);
}
.post-card__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: var(--size-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  text-wrap: balance;
  transition: color 0.2s ease;
  letter-spacing: var(--ls-h3);
}
.post-card--featured .post-card__title {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  font-weight: 600;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.post-card__excerpt {
  max-width: 65ch;
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: var(--size-card);
  line-height: var(--lh-card);
}
.post-card__meta { margin: 0; color: var(--text-muted); font-size: var(--size-small);
  font-family: var(--font-mono);
  font-size: var(--size-note);
  font-weight: 400;
  line-height: var(--lh-note);
  letter-spacing: var(--ls-note);
  color: var(--text-secondary);
}
.post-card__link:hover .post-card__title,
.post-card__link:focus-visible .post-card__title { color: var(--accent-brass-text); }
.post-card__cover {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1;
  padding: 0.75rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent-brass);
  border-radius: 2px;
}
.post-card__cover span {
  color: var(--text-secondary);
  font-size: var(--size-small);
  line-height: 1.3;
}

/* ---------- article / practice / privacy ---------- */
.article { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  color: var(--text-muted);
  font-size: var(--size-small);
}
.breadcrumb a { color: var(--text-secondary); border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--text); border-bottom-color: var(--accent-brass); }
.breadcrumb__back { display: inline-flex; align-items: center; gap: 0.5rem; padding-block: 0.375rem; }
.breadcrumb__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumb__back:hover .breadcrumb__icon { transform: translateX(-3px); }
}
.article__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: var(--lh-h1);
  text-wrap: balance;
  letter-spacing: var(--ls-h1);
  font-weight: 600;
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: var(--size-note);
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: var(--lh-note);
  letter-spacing: var(--ls-note);
}
.article--practice .article__title { margin-bottom: 2rem; }
.article--post .lead { font-family: var(--font-serif); font-weight: 400; }

/* Reading text: 17px / 1.65, never wider than 65 characters. Section heads
   inside an article are H3-scale body-font headings (the display face is
   reserved for page-level H1/H2 at 32px and up). */
.prose { font-size: var(--size-body); line-height: 1.65;
  line-height: var(--lh-prose);
}
.prose > * { max-width: 65ch; }
.prose p { margin: 0 0 1em; }
.prose h2, .prose h3 {
  margin: 2.5rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: var(--size-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-height, 72px) + 1rem);
}
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0 0 1em;
  padding-left: 1.25rem;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--text-muted); }
.prose strong { font-weight: 600; }
.prose a { border-bottom: 1px solid var(--accent-brass); }
.lead {
  color: var(--text-secondary);
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  font-family: var(--font-body);
  font-weight: 400;
}
.article__legal {
  margin: 2.5rem 0 0;
  color: var(--text-muted);
  font-size: var(--size-small);
}

/* ---------- related posts ---------- */
.related { padding-bottom: clamp(3rem, 6vw, 5rem); }
.related__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: var(--size-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-h3);
}
.related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.related__list li { border-bottom: 1px solid var(--border); }
.related__list a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 0;
}
.related__cat {
  font-family: var(--font-mono);
  font-size: var(--size-note);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls-note);
  line-height: var(--lh-note);
  color: var(--text-secondary);
}
.related__name {
  font-size: var(--size-h4);
  font-weight: 500;
  line-height: 1.35;
  transition: color 0.2s ease;
}
.related__list a:hover .related__name,
.related__list a:focus-visible .related__name { color: var(--accent-brass-text); }

/* ---------- call to action at the end of every page ---------- */
.cta-block {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background-color: var(--background-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-block__title {
  margin: 0 0 0.75rem;
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
}
.cta-block__text { margin: 0 0 1.5rem; color: var(--text-secondary); }
.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.cta-block__phone {
  font-size: var(--size-h3);
  font-weight: 600;
  transition: color 0.2s ease;
  font-family: var(--font-display);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-h3);
}
.cta-block__phone:hover { color: var(--accent-brass-text); }
.cta-block__note {
  margin: 1.25rem 0 0;
  color: var(--text-muted);
  font-size: var(--size-small);
}

/* ---------- guide ---------- */
.guide__hero { padding: clamp(1.5rem, 4vw, 3rem) 0 1rem; }
.guide__call {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 2.25rem 0 0;
}
/* The call button is the shared primary button; this only adds room around the icon. */
.guide__call-button { padding: 0.875rem 1.75rem; }
.guide__call-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--size-small);
}
.guide__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--call-green);
  animation: scene-live-blink 1.6s ease-in-out infinite;
}
.prose h2#dobre-praktyki {
  margin-top: 3rem;
  font-size: var(--size-h2);
  font-weight: 600;
  line-height: var(--lh-h2);
}
/* The nine practices as wide horizontal cards, one per row: number and title on
   the left, the text on the right. Quiet frame, generous padding, a readable
   measure (no stretched lines, no one-word last lines). */
.practices {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 3rem;
  padding: 0;
  list-style: none;
}
.practice {
  display: grid;
  grid-template-columns: 3rem minmax(0, 20rem) minmax(0, 1fr);
  gap: 0 2rem;
  align-items: start;
  padding: 2.25rem 2.5rem;
  border: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-height, 72px) + 1rem);
}
.practice__n {
  padding-top: 0.5rem;
  color: var(--text-secondary);
  font-size: var(--size-note);
  font-weight: 400;
  line-height: var(--lh-note);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-note);
}
.practice__title {
  margin: 0;
  font-size: 1.375rem;
  text-wrap: pretty;
}
.practice p {
  max-width: 62ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--size-body);
  line-height: 1.6;
  text-wrap: pretty;
}
@media (max-width: 899px) {
  .practice { grid-template-columns: 3rem minmax(0, 1fr); padding: 1.75rem; }
  .practice p { grid-column: 2; margin-top: 0.75rem; }
}
@media (max-width: 599px) {
  .practice { grid-template-columns: 1fr; padding: 1.5rem; }
  .practice__n { padding-top: 0; margin-bottom: 1rem; }
  .practice p { grid-column: 1; }
}
.callbar { display: none; }

/* ---------- practice index ---------- */
.practice-index { padding-bottom: clamp(3rem, 6vw, 5rem); }
.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 2.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.practice-card a { display: flex; flex-direction: column; gap: 0.75rem; }
.practice-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--surface);
  border: 1px solid var(--border);
}
.practice-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.practice-card__title {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: var(--size-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-wrap: balance;
}
.practice-card__text { margin: 0; color: var(--text-secondary);
  font-size: var(--size-card);
  line-height: var(--lh-card);
}
.practice-card__go {
  align-self: flex-start;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid var(--accent-brass);
  font-weight: 500;
}
.practice-card a:hover .practice-card__title,
.practice-card a:focus-visible .practice-card__title { color: var(--accent-brass-text); }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  /* The cover is a decorative placeholder that repeats the category; on a
     phone it only squeezed the title into a six-line column. */
  .post-card__link { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 0; }
  .post-card__cover { display: none; }
  .callbar {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--accent-brass);
    color: var(--background-deep);
    font-size: 1.1875rem;
    font-weight: 500;
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .callbar--wait { transform: translateY(100%); }
  .page--guide { --cta-bar-height: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .guide__dot { animation: none; }
}

/* Guide page: one wider measure for the title, the lead and the steps, so they
   share the same right edge (about 62rem of the 1160px column). */
.page--guide .article__title,
.page--guide .lead { max-width: 62rem; }
.page--guide .article__title { text-wrap: pretty; }

/* Phones: filter chips and the back link reach 44 px. */
@media (max-width: 1023px), (pointer: coarse) {
  .chip { min-height: 2.75rem; padding-inline: 1rem; }
  .breadcrumb { align-items: center; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .breadcrumb__back { padding-block: 0; }
}
@media (max-width: 767px) {
  /* Running intro text: 18 px reads as a standfirst on a phone; 20 px serif
     filled most of the first screen. The detention guide keeps its size: its
     opening paragraph carries the facts that matter most. */
  .lead, .page-head__lead { font-size: 1.125rem; line-height: 1.5; }
  .page--guide .lead { font-size: var(--size-lead); }
}

/* Phones: the closing block is two full-width buttons, so the number is
   something to press, not just something to read. */
@media (max-width: 767px) {
  .cta-block__actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .cta-block__actions .button-primary { display: flex; justify-content: center; text-align: center; }
  .cta-block__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border: 1px solid var(--border);
    border-radius: 2px;
  }
}