/* Solution pages — blog & product related blocks */
.sol-rel {
  --sol-rel-accent: #E05600;
  --sol-rel-dark: #111111;
  --sol-rel-grey: #666666;
  --sol-rel-line: #EAEAEA;
  --sol-rel-surface: #FBFBFA;
  --sol-rel-font-display: 'Oswald', sans-serif;
  --sol-rel-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--sol-rel-surface);
  border-top: 1px solid var(--sol-rel-line);
  padding: 4rem 0 4.5rem;
}

.hg-page .sol-rel {
  --sol-rel-accent: var(--hg-orange, #E05600);
  --sol-rel-dark: var(--hg-dark, #111111);
  --sol-rel-grey: var(--hg-grey, #666666);
  --sol-rel-line: var(--hg-accent, #F5F5F3);
  --sol-rel-surface: var(--hg-light, #FBFBFA);
}

.ig-page .sol-rel {
  --sol-rel-accent: var(--ig-orange, #FF5500);
  --sol-rel-dark: var(--ig-black, #0D0D0D);
  --sol-rel-grey: var(--ig-grey, #666666);
  --sol-rel-line: var(--ig-line, #EAEAEA);
  --sol-rel-surface: var(--ig-light, #F5F5F5);
}

.bq-page .sol-rel {
  --sol-rel-accent: var(--bq-accent, #B87333);
  --sol-rel-dark: var(--bq-charcoal, #252528);
  --sol-rel-grey: var(--bq-grey, #5c5c62);
  --sol-rel-line: var(--bq-line, #e8e6e1);
  --sol-rel-surface: var(--bq-cream, #fafaf8);
}

.bq-page .sol-rel__blog:hover {
  border-color: rgba(184, 115, 51, 0.22);
  box-shadow: var(--bq-shadow-hover, 0 20px 48px rgba(37, 37, 40, 0.12));
}

.bq-page .sol-rel__product {
  box-shadow: var(--bq-shadow, 0 12px 40px rgba(37, 37, 40, 0.08));
}

.bq-page .sol-rel__product:hover {
  border-color: rgba(184, 115, 51, 0.25);
  box-shadow: var(--bq-shadow-hover, 0 20px 48px rgba(37, 37, 40, 0.12));
  transform: translateY(-3px);
}

.bq-page .sol-rel__product-thumb img {
  filter: none;
}

.cg-page .sol-rel {
  --sol-rel-accent: var(--cg-gold, #c4a052);
  --sol-rel-dark: var(--cg-ink, #0a0f1c);
  --sol-rel-grey: var(--cg-muted, #6b7280);
  --sol-rel-line: var(--cg-cream-dark, #ede9e0);
  --sol-rel-surface: var(--cg-cream, #f8f6f1);
}

.cg-page .sol-rel__more:hover {
  color: var(--cg-ink);
  border-color: var(--cg-ink);
}

.ev-page .sol-rel {
  --sol-rel-accent: var(--ev-orange, #ff6b00);
  --sol-rel-dark: var(--ev-ink, #0c0e12);
  --sol-rel-grey: var(--ev-muted, #6b7280);
  --sol-rel-line: var(--ev-surface-dark, #ebe8e3);
  --sol-rel-surface: var(--ev-surface, #f5f4f1);
}

.ev-page .sol-rel__blog:hover {
  border-color: rgba(255, 107, 0, 0.25);
  box-shadow: var(--ev-shadow, 0 24px 64px -16px rgba(12, 14, 18, 0.18));
}

.sol-rel__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 992px) {
  .sol-rel__container {
    padding: 0 3rem;
  }
}

.sol-rel__block + .sol-rel__block {
  margin-top: 3.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--sol-rel-line);
}

.sol-rel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.75rem;
}

.sol-rel__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sol-rel-accent);
  margin-bottom: 0.45rem;
}

.sol-rel__kicker::before {
  content: '';
  width: 1.25rem;
  height: 1px;
  background: var(--sol-rel-accent);
}

.sol-rel__title {
  font-family: var(--sol-rel-font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sol-rel-dark);
  margin: 0;
}

.sol-rel__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sol-rel-accent);
  border-bottom: 1px solid var(--sol-rel-accent);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.sol-rel__more:hover {
  color: var(--sol-rel-dark);
  border-color: var(--sol-rel-dark);
}

.sol-rel__more i {
  font-size: 0.65rem;
}

/* Blog grid — 2 columns, sidebar-style cards */
.sol-rel__blog-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .sol-rel__blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
}

.sol-rel__blog {
  background: #fff;
  border: 1px solid var(--sol-rel-line);
  border-radius: 6px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.sol-rel__blog--widget {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  height: auto;
}

.sol-rel__blog-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  max-width: 72px;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 8px;
  background: #e8e8e8;
  border: 1px solid var(--sol-rel-line);
}

.sol-rel__blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.sol-rel__blog:hover .sol-rel__blog-thumb img {
  transform: scale(1.04);
}

.sol-rel__blog-descr {
  flex: 1;
  min-width: 0;
}

.sol-rel__blog:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.ig-page .sol-rel__blog:hover {
  border-color: var(--sol-rel-accent);
  box-shadow: 3px 3px 0 0 var(--sol-rel-dark);
}

.sol-rel__blog-name {
  font-family: var(--sol-rel-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 0.35rem;
}

.sol-rel__blog-name a {
  color: var(--sol-rel-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.sol-rel__blog-name a:hover {
  color: var(--sol-rel-accent);
}

.sol-rel__blog-date {
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0;
}

.sol-rel__blog-date a {
  color: var(--sol-rel-grey);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s;
}

.sol-rel__blog-date a:hover {
  color: var(--sol-rel-accent);
}

.sol-rel__blog-date i {
  font-size: 0.7rem;
}

/* Product grid — restored sizing */
.sol-rel__product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 576px) {
  .sol-rel__product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
  }
}

@media (min-width: 992px) {
  .sol-rel__product-grid {
    gap: 1rem;
  }
}

.sol-rel__product {
  background: #fff;
  border: 1px solid var(--sol-rel-line);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.sol-rel__product:hover {
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.ig-page .sol-rel__product {
  box-shadow: 2px 2px 0 0 var(--sol-rel-dark);
}

.ig-page .sol-rel__product:hover {
  border-color: var(--sol-rel-accent);
  box-shadow: 4px 4px 0 0 var(--sol-rel-dark);
  transform: translate(-1px, -1px);
}

.sol-rel__product-thumb {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f0f0f0;
  border-bottom: 1px solid var(--sol-rel-line);
}

.sol-rel__product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ig-page .sol-rel__product-thumb img {
  filter: grayscale(1) contrast(1.05);
}

.ig-page .sol-rel__product:hover .sol-rel__product-thumb img {
  filter: none;
}

.sol-rel__product:hover .sol-rel__product-thumb img {
  transform: scale(1.05);
}

.sol-rel__product-name {
  font-family: var(--sol-rel-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  padding: 0.5rem 0.45rem 0.6rem;
  text-align: center;
}

.sol-rel__product-name a {
  color: var(--sol-rel-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.sol-rel__product-name a:hover {
  color: var(--sol-rel-accent);
}

.product-spec-tag {
  display: block;
  margin: 0;
  padding: 0 0.45rem 0.65rem;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sol-rel-accent);
  line-height: 1.35;
}

.sol-rel__reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.sol-rel__reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 575px) {
  .sol-rel {
    padding: 3rem 0;
  }

  .sol-rel__block + .sol-rel__block {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }
}

/* Override solution-common: blog card = horizontal [img | title+date] */
.sol-rel .sol-rel__blog-grid--side {
  gap: 0.65rem;
}

@media (min-width: 768px) {
  .sol-rel .sol-rel__blog-grid--side {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

@media (min-width: 992px) {
  .sol-rel .sol-rel__blog-grid--side {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sol-rel .pv-sidebar-card.pv-sidebar-card--blog,
.sol-rel .sol-rel__blog.sol-rel__blog--widget {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  height: auto !important;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem;
  margin: 0;
  background: #fff;
  border: 1px solid var(--sol-rel-line);
  border-radius: 10px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sol-rel .pv-sidebar-card.pv-sidebar-card--blog:hover,
.sol-rel .sol-rel__blog.sol-rel__blog--widget:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.sol-rel .pv-sidebar-card__thumb,
.sol-rel .sol-rel__blog.sol-rel__blog--widget .sol-rel__blog-thumb {
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  aspect-ratio: auto !important;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
  border: 1px solid var(--sol-rel-line);
}

.sol-rel .pv-sidebar-card__thumb img,
.sol-rel .sol-rel__blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sol-rel .pv-sidebar-card__body,
.sol-rel .sol-rel__blog-descr {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
  display: block;
}

.sol-rel .pv-sidebar-card__title,
.sol-rel .sol-rel__blog-name {
  margin: 0;
  font-family: var(--sol-rel-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.sol-rel .pv-sidebar-card__title a,
.sol-rel .sol-rel__blog-name a {
  color: var(--sol-rel-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  transition: color 0.2s;
}

.sol-rel .pv-sidebar-card__title a:hover,
.sol-rel .sol-rel__blog-name a:hover {
  color: var(--sol-rel-accent);
}

.sol-rel .pv-sidebar-card__meta,
.sol-rel .sol-rel__blog-date {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--sol-rel-grey);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.sol-rel .pv-sidebar-card__meta .far,
.sol-rel .sol-rel__blog-date i {
  margin-right: 0.3rem;
  font-size: 0.75rem;
  opacity: 0.85;
}
