/* ============================================================
   Viktor Skoczek — web (raw wireframe)
   BLOG — stránkově specifické styly (výpis článků)
   Figma: page 82:2 „Blog"
   ============================================================ */

/* ---------- Header doplňky (chybí ve sdíleném _partials.html — viz report) ---------- */
.site-nav a.is-current { color: var(--ink); font-weight: 600; }

/* ---------- Intro + kategorie ---------- */
.blog-intro { padding-block: 64px; }

.blog-eyebrow {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  color: rgba(36, 34, 35, 0.5);
}

.blog-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  color: var(--ink);
  max-width: 780px;
  margin-top: 16px;
}

.blog-lead { margin-top: 24px; max-width: 620px; }

.blog-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.blog-tabs .chip.is-active { background: var(--accent); border-color: var(--ink); color: var(--on-accent); }

/* ---------- Meta tag (společné pro featured i grid karty) ---------- */
.article-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(36, 34, 35, 0.05);
  color: var(--ink-60);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 12px;
}

/* ---------- Hlavní článek (featured) ---------- */
.article-feature { padding: 8px 0 32px; }

.feature-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(38, 36, 31, 0.18);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -18px rgba(38, 36, 31, 0.32); }
.feature-card__media { flex: 0 0 640px; height: 460px; overflow: hidden; }
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.feature-card:hover .feature-card__media img { transform: scale(1.05); }

.feature-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 48px 56px;
}
.feature-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: var(--ink);
  max-width: 528px;
}
.feature-card__desc {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-60);
  max-width: 528px;
}
.feature-card__link {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-text);
  transition: color .2s ease;
}
@media (hover: hover) {
  .feature-card__link:hover { color: var(--accent-text); text-decoration: underline; }
}

/* ---------- Grid článků ---------- */
.blog-grid { padding: 32px 0 64px; }
.blog-grid__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-grid__row + .blog-grid__row { margin-top: 24px; }

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(38, 36, 31, 0.18);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -18px rgba(38, 36, 31, 0.32); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__media { height: 300px; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.blog-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.blog-card__title {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
}

/* ---------- Newsletter ---------- */
.blog-newsletter { background: var(--sand); padding: 80px 0; }
.blog-newsletter .container { display: flex; flex-direction: column; align-items: center; text-align: center; }

.newsletter-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
  max-width: 640px;
}
.newsletter-text {
  margin-top: 16px;
  max-width: 560px;
  color: var(--ink-60);
  font-size: 16px;
  line-height: 1.5;
}
/* scoped na .blog-newsletter — footer má vlastní .newsletter-form (stack) a nesmí zdědit row layout */
/* gotcha: base.css .newsletter-form má flex-direction:column — musí se explicitně přepsat na row,
   jinak flex:0 0 148px na tlačítku sedí na hlavní (svislou) osu a z tlačítka je obří kruh */
.blog-newsletter .newsletter-form {
  margin-top: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 520px;
  max-width: 100%;
}
.blog-newsletter .form-status { width: 100%; text-align: center; }
.newsletter-form__input {
  flex: 1;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.newsletter-form__input::placeholder { color: var(--ink-40); }
.newsletter-form__input:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.13);
}
@media (hover: hover) {
  .newsletter-form__input:hover { border-color: var(--ink-40); }
}
.newsletter-form__btn { flex: 0 0 auto; }
.newsletter-fine {
  margin-top: 16px;
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--ink-60);
  text-align: center;
}

/* ---------- Responsive (základní stack) ---------- */
@media (max-width: 900px) {
  .blog-title { font-size: 36px; }

  .feature-card { flex-direction: column; }
  .feature-card__media { flex-basis: auto; width: 100%; height: 320px; }
  .feature-card__body { padding: 32px 24px; }
  .feature-card__title, .feature-card__desc { max-width: none; }

  .blog-grid__row { grid-template-columns: 1fr; }

  .blog-newsletter .newsletter-form { flex-direction: column; align-items: stretch; width: 100%; }
  .newsletter-form__btn { flex-basis: auto; }
}

/* stagger gridu: sudé karty níž (margin, ne transform — nepere se s hoverem) */
@media (min-width: 901px) {
  .blog-grid__row > .blog-card:nth-child(even) { margin-top: 30px; }
}