/* Start:/local/templates/yuumpk/components/bitrix/news.list/add.spravochniki.yuumpk/style.css?17788776793764*/
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.reference-materials {
 font-family: 'Roboto', 'Arial', sans-serif;
 font-size: 1rem;
 line-height: 1.6;
 color: #333;
 max-width: 1200px;
 margin: 20px auto;
 padding: 20px;
 background: #f8f9fa;
 border-radius: 8px;
}

.reference-materials__title-main {
 font-size: 1.75rem;
 font-weight: 600;
 text-align: center;
 margin: 0 auto 20px auto;
 padding-bottom: 12px;
 border-bottom: 2px solid #ff4848;
 color: #1a1a1a;
}

.reference-materials__grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 20px;
}

.reference-material-card {
 border: 1px solid #e0e0e0;
 border-radius: 8px;
 overflow: hidden;
 background: #fff;
 transition:
  border-color 0.2s ease,
  box-shadow 0.2s ease,
  transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
 .reference-material-card:hover {
  border-color: #ff4848;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(-2px);
 }

 .reference-material-card:hover .reference-material-card__image {
  transform: scale(1.03);
 }

 .reference-material-card:hover .reference-material-card__more {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
 }
}

.reference-material-card__link {
 display: flex;
 flex-direction: column;
 height: 100%;
 text-decoration: none;
 color: inherit;
 padding: 15px;
}

.reference-material-card__link:focus-visible {
 outline: 3px dashed #0057b7;
 outline-offset: 4px;
}

.reference-material-card__image-wrapper {
 width: 100%;
 height: 140px;
 overflow: hidden;
 border-radius: 8px;
 margin-bottom: 12px;
 background: #f1f1f1;
}

.reference-material-card__image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.3s ease;
 will-change: transform;
}

.reference-material-card__content {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.reference-material-card__date {
 display: none;
}

.reference-material-card__title {
 font-size: 1.1rem;
 font-weight: 500;
 color: #111;
 line-height: 1.45;

 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.reference-material-card__preview {
 font-size: 1rem;
 color: #555;
 margin: 12px 0;
 line-height: 1.7;

 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;

 flex: 1;
}

.reference-material-card__meta {
 font-size: 0.85rem;
 color: #333;
 margin-top: 8px;
 border-top: 1px dashed #eee;
 padding-top: 8px;
}

.reference-material-card__field,
.reference-material-card__property {
 margin: 4px 0;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.reference-material-card__more {
 display: flex;
 justify-content: center;
 align-items: center;

 font-size: 0.85rem;
 font-weight: 500;
 color: #fff;

 background: #2f3b46;
 border: 1px solid rgba(255,255,255,0.06);

 padding: 10px 16px;
 border-radius: 8px;

 box-shadow: 0 4px 12px rgba(0,0,0,0.12);

 margin-top: 12px;

 opacity: 0;
 transform: translateY(10px);

 transition:
  background-color 0.2s ease,
  transform 0.2s ease,
  opacity 0.2s ease,
  box-shadow 0.2s ease;

 pointer-events: none;
}

.reference-material-card__more:hover {
 background: #24303a;
 box-shadow: 0 6px 16px rgba(0,0,0,0.16);
}

@media (max-width: 768px) {
 .reference-materials {
  padding: 16px;
 }

 .reference-materials__grid {
  grid-template-columns: 1fr;
 }

 .reference-material-card__title {
  font-size: 1.15rem;
 }

 .reference-material-card__more {
  opacity: 1;
  transform: none;
  pointer-events: auto;
 }
}

@media (max-width: 480px) {
 .reference-material-card__image-wrapper {
  height: 120px;
 }

 .reference-material-card__title {
  font-size: 1rem;
 }

 .reference-material-card__preview {
  font-size: 0.9rem;
 }
}
/* End */
/* /local/templates/yuumpk/components/bitrix/news.list/add.spravochniki.yuumpk/style.css?17788776793764 */