/* =========================================================================
   templates.css — WP page templates, home page, 404, blog, comments.
   ========================================================================= */

/* ── Reading container ──────────────────────────────────── */
.md-container--reading { max-width: 72ch; padding-block: 24px 48px; }

/* ── Page header ────────────────────────────────────────── */
.page-header { padding: 16px 0 24px; }
.page-header .page-title { margin: 0; }
.archive-description { margin-top: 8px; color: var(--md-sys-color-on-surface-variant); max-width: 72ch; }

/* ── Posts list ─────────────────────────────────────────── */
.posts-list {
  display: flex; flex-direction: column; gap: 24px;
}
.posts-list article {
  padding: 20px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  background: var(--md-sys-color-surface);
}
.posts-list .entry-header { margin-bottom: 12px; }
.posts-list .entry-title {
  margin: 0;
  font-size: 1.25rem; font-weight: 500;
  line-height: 1.3;
}
.posts-list .entry-title a { color: var(--md-sys-color-on-surface); text-decoration: none; }
.posts-list .entry-title a:hover { color: var(--md-sys-color-primary); }
.posts-list .entry-meta {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.8125rem;
  margin-top: 6px;
}
.posts-list .entry-content { color: var(--md-sys-color-on-surface); }
.posts-list .entry-footer { margin-top: 12px; color: var(--md-sys-color-on-surface-variant); font-size: 0.8125rem; }

/* ── Post navigation ────────────────────────────────────── */
.posts-navigation,
.post-navigation {
  margin: 24px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.posts-navigation a,
.post-navigation a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}
.posts-navigation a:hover,
.post-navigation a:hover { text-decoration: underline; }
.post-navigation .nav-subtitle {
  display: block;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.75rem;
  margin-bottom: 2px;
}

/* ── 404 ────────────────────────────────────────────────── */
.error-404__content {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 48px 16px 64px;
  min-height: 50vh;
}
.error-404__code {
  color: var(--md-sys-color-primary);
  font-weight: 700;
  opacity: 0.3;
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: 1;
}
.error-404__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.error-404__search { margin-top: 20px; width: 100%; max-width: 480px; }
.error-404__search .md-search--page {
  display: flex; gap: 8px;
}
.error-404__search .md-text-field--outlined { flex: 1 1 auto; }

.error-404__cats {
  padding: 8px 0 56px;
  max-width: 1080px;
  margin: 0 auto;
}
.error-404__cats > h2 {
  margin: 0 0 16px;
  color: var(--md-sys-color-on-surface);
  text-align: center;
}
.error-404__cats-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .error-404__cats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 840px) { .error-404__cats-grid { grid-template-columns: repeat(4, 1fr); } }

.error-404__cat {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
}
.error-404__cat:hover { text-decoration: none; color: var(--md-sys-color-on-surface); }
.error-404__cat-img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: var(--md-sys-shape-corner-small, 8px);
  background: var(--md-sys-color-surface-container-high);
}
.error-404__cat-img--empty {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-sys-color-primary);
}
.error-404__cat-img--empty .md-icon { font-size: 36px; }
.error-404__cat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.error-404__cat-name {
  color: var(--md-sys-color-on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.error-404__cat-count { color: var(--md-sys-color-on-surface-variant); }

/* ── Search form (standalone) ───────────────────────────── */
.md-search--page {
  display: flex; gap: 8px;
  align-items: stretch;
}
.md-search--page .md-text-field--outlined { flex: 1 1 auto; }

/* =========================================================================
   Home — hero
   ========================================================================= */
.home-hero {
  background-size: cover; background-position: center;
  color: #fff;
  padding: 0;
}
.home-hero__inner {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 48px 0 56px;
}
.home-hero__title { margin: 0; color: inherit; font-weight: 500; }
.home-hero__lead { margin: 0; color: rgba(255,255,255,0.85); max-width: 48ch; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (min-width: 840px) {
  .home-hero__inner { padding: 72px 0 80px; }
}

/* =========================================================================
   Home — section headers
   ========================================================================= */
.home-section__header {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 16px;
  margin-bottom: 20px;
}
.home-section__title { margin: 0; color: var(--md-sys-color-on-surface); }
.home-section__link { white-space: nowrap; }

/* =========================================================================
   Home — category grid
   ========================================================================= */
.home-categories { padding: 40px 0; }
.home-categories__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 600px)  { .home-categories__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 840px)  { .home-categories__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.home-categories__item { padding: 0; overflow: hidden; }
.home-categories__link {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  padding: 20px 12px;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  text-align: center;
}
.home-categories__link:hover { text-decoration: none; }
.home-categories__media {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: var(--md-sys-color-surface-container-low);
  overflow: hidden;
}
.home-categories__media img { width: 100%; height: 100%; object-fit: cover; }
.home-categories__media .md-icon { font-size: 32px; color: var(--md-sys-color-on-surface-variant); }
.home-categories__name { margin: 0; }
.home-categories__count { color: var(--md-sys-color-on-surface-variant); }

/* =========================================================================
   Home — featured products
   ========================================================================= */
.home-featured { padding: 32px 0 40px; }

/* =========================================================================
   Home — info blocks
   ========================================================================= */
.home-info { padding: 32px 0 48px; }
.home-info__grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .home-info__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-info__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.home-info__card {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 20px;
}
.home-info__icon {
  font-size: 32px;
  color: var(--md-sys-color-primary);
  line-height: 1;
}
.home-info__title { margin: 0; }
.home-info__text { margin: 0; color: var(--md-sys-color-on-surface-variant); }

/* =========================================================================
   Home — about Tech-KREP ритейл
   ========================================================================= */
.home-about { padding: 32px 0 56px; }
.home-about__header { max-width: 72ch; margin-bottom: 24px; }
.home-about__title {
  margin: 0 0 12px;
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}
.home-about__lead {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
}

.home-about__columns {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 28px;
}
@media (min-width: 760px) {
  .home-about__columns { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.home-about__col {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
}
.home-about__col p { margin: 0; color: var(--md-sys-color-on-surface-variant); }
.home-about__col-title { margin: 0; color: var(--md-sys-color-on-surface); }
.home-about__icon {
  font-size: 32px;
  color: var(--md-sys-color-primary);
  line-height: 1;
}
.home-about__list {
  margin: 4px 0 0;
  padding-left: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.home-about__list li {
  position: relative;
  padding-left: 22px;
  color: var(--md-sys-color-on-surface);
}
.home-about__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.6em;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--md-sys-color-primary);
  opacity: 0.85;
}

.home-about__body {
  background: var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container));
  border-radius: var(--md-sys-shape-corner-large, 16px);
  padding: 24px;
}
.home-about__body > p { margin: 0 0 16px; color: var(--md-sys-color-on-surface); }

.home-about__benefits {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .home-about__benefits { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
}

.home-about__benefit {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
}
.home-about__benefit-icon {
  font-size: 28px;
  line-height: 1;
  color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
  border-radius: 9999px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}
.home-about__benefit strong { display: block; margin-bottom: 2px; color: var(--md-sys-color-on-surface); }
.home-about__benefit p { margin: 0; color: var(--md-sys-color-on-surface-variant); }

.home-about__outro {
  margin: 4px 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic;
}

/* =========================================================================
   Comments — MD3 styled
   ========================================================================= */
.comments-area { margin-top: 32px; }
.comments-title { margin: 0 0 20px; }

.comment-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.comment-list .comment {
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  background: var(--md-sys-color-surface);
}
.comment-list .comment .children {
  list-style: none;
  padding-left: 24px;
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.comment-list .comment-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.comment-list .comment-author img { border-radius: 9999px; }
.comment-list .comment-author .fn { font-weight: 500; color: var(--md-sys-color-on-surface); }
.comment-list .comment-metadata a { color: var(--md-sys-color-on-surface-variant); font-size: 0.8125rem; text-decoration: none; }
.comment-list .comment-content { color: var(--md-sys-color-on-surface); font-size: 1rem; line-height: 1.6; }
.comment-list .reply a {
  display: inline-flex; margin-top: 8px;
  color: var(--md-sys-color-primary); font-size: 0.875rem; font-weight: 500;
  text-decoration: none;
}
.comment-list .reply a:hover { text-decoration: underline; }

/* Comment form */
.md-form { display: flex; flex-direction: column; gap: 16px; }
.md-form p { margin: 0; }
.md-form label { font-size: 0.875rem; font-weight: 500; color: var(--md-sys-color-on-surface); display: block; margin-bottom: 4px; }
.md-form input[type="text"],
.md-form input[type="email"],
.md-form input[type="url"],
.md-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: inherit; font-size: 1rem;
  transition: border-color 180ms, box-shadow 180ms;
}
.md-form input:focus,
.md-form textarea:focus {
  outline: 0;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}
.md-form .form-submit { margin-top: 4px; }
.no-comments { padding: 16px 0; color: var(--md-sys-color-on-surface-variant); }