/* hepatolog.az - home page below the hero.
   Scoped to the .hm_* blocks; the banner/hero is untouched. */

.hm_sec {
  padding: 96px 0;
}

.hm_eyebrow {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--coral-soft);
  color: var(--wine);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.hm_head {
  max-width: 660px;
  margin-bottom: 48px;
}

.hm_head h2 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 1.22;
  font-weight: 700;
  color: var(--wine);
}

.hm_head p {
  margin-top: 16px;
  font-size: 17px;
  line-height: 30px;
  color: #4b5563;
}

.hm_head_row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.hm_more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  /* --coral (#fc7575) на белом даёт контраст 2.64 при норме AA 4.5.
     --red (#ca2e31) из той же палитры даёт 5.32 */
  color: var(--red);
  white-space: nowrap;
}

.hm_more i {
  transition: transform 0.3s var(--ease);
}

.hm_more:hover i {
  transform: translateX(4px);
}

/* ---------- hepatitis types ---------- */

.hm_hep_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.hm_hep_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  padding: 34px 30px 30px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--ink-soft);
  box-shadow: 0 3px 16px -10px rgba(22, 47, 98, 0.35);
  transition: all 0.3s var(--ease);
}

.hm_hep_card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--grad, linear-gradient(90deg, var(--red), var(--wine-deep)));
}

.hm_a { --grad: linear-gradient(90deg, #f14972 0%, #eb58b9 100%); --dot: #eb58b9; }
.hm_b { --grad: linear-gradient(90deg, #ca2e31 0%, #771c2e 100%); --dot: #ca2e31; }
.hm_c { --grad: linear-gradient(90deg, #ff9f14 0%, #fc7575 100%); --dot: #ff9f14; }
.hm_d { --grad: linear-gradient(90deg, #26ad8e 0%, #5bc199 100%); --dot: #26ad8e; }

.hm_letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.35s var(--ease);
}

.hm_hep_card h3 {
  margin-top: 24px;
  font-size: 21px;
  font-weight: 600;
  color: var(--wine);
}

.hm_hep_card p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 26px;
  color: #6b7280;
}

.hm_hep_card .hm_more {
  margin-top: 22px;
}

.hm_hep_card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 26px 44px -24px rgba(119, 28, 46, 0.45);
}

.hm_hep_card:hover .hm_letter {
  transform: translateY(-3px) scale(1.05);
}

/* ---------- elastometry ---------- */

.hm_elasto {
  background: linear-gradient(180deg, #f7fbfd 0%, var(--surface) 100%);
}

.hm_elasto_grid,
.hm_doc_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  align-items: center;
}

.hm_elasto_media {
  padding: 30px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--ink-soft);
  box-shadow: 0 30px 55px -36px rgba(22, 47, 98, 0.5);
}

.hm_elasto_media img {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.hm_elasto_text h2,
.hm_doc_text h2 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 1.22;
  font-weight: 700;
  color: var(--wine);
}

.hm_elasto_text > p,
.hm_doc_text > p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 32px;
  color: #4b5563;
}

.hm_checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
}

.hm_checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 24px;
  color: #374151;
}

.hm_checks i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: linear-gradient(180deg, #26ad8e 0%, #5bc199 100%);
  color: #fff;
  font-size: 10px;
}

/* ---------- doctor ---------- */

.hm_doc_text h2 span {
  color: var(--coral);
}

.hm_doc_contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 30px 0 26px;
}

.hm_doc_contacts a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--ink-soft);
  box-shadow: 0 3px 14px -10px rgba(22, 47, 98, 0.4);
  transition: all 0.3s var(--ease);
}

.hm_doc_contacts i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--red) 0%, var(--wine-deep) 100%);
  color: #fff;
  font-size: 15px;
}

.hm_doc_contacts a:last-child i {
  background: linear-gradient(140deg, #ff9f14 0%, var(--coral) 100%);
}

.hm_doc_contacts span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: 17px;
  font-weight: 600;
  color: var(--wine);
}

.hm_doc_contacts small {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}

.hm_doc_contacts a:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 20px 34px -22px rgba(119, 28, 46, 0.5);
}

.hm_doc_media {
  position: relative;
  isolation: isolate;
}

.hm_doc_media img {
  display: block;
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 34px 60px -36px rgba(22, 47, 98, 0.6);
}

.hm_doc_media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 26px -26px -26px 26px;
  border-radius: 24px;
  background: linear-gradient(140deg, rgba(252, 117, 117, 0.55) 0%, rgba(123, 30, 49, 0.3) 100%);
}

.hm_doc_media .play_btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- latest posts ---------- */

.hm_news {
  background: linear-gradient(180deg, #f7fbfd 0%, var(--surface) 100%);
}

.hm_nc {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--ink-soft);
  box-shadow: 0 3px 16px -10px rgba(22, 47, 98, 0.35);
  transition: all 0.3s var(--ease);
}

.hm_nc_thumb {
  display: block;
  overflow: hidden;
}

.hm_nc_thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 37 / 20;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.hm_nc:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 28px 46px -26px rgba(119, 28, 46, 0.45);
}

.hm_nc:hover .hm_nc_thumb img {
  transform: scale(1.05);
}

.hm_nc_body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 26px 26px;
}

.hm_nc_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  /* было #9099a8 — контраст 2.87 на белом, ниже нормы AA 4.5; стало 5.48 */
  color: #5f6a7a;
}

.hm_nc_meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hm_nc_meta i {
  color: var(--coral);
}

.hm_nc_cat {
  display: inline-flex;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--coral-soft);
  color: var(--wine);
  font-weight: 600;
  transition: all 0.3s var(--ease);
}

.hm_nc_cat:hover {
  background: var(--coral);
  color: #fff;
}

.hm_nc_body h3 {
  margin-top: 16px;
  font-size: 20px;
  line-height: 29px;
  font-weight: 600;
}

.hm_nc_body h3 a {
  color: var(--wine);
  transition: color 0.3s var(--ease);
}

.hm_nc_body h3 a:hover {
  color: var(--coral);
}

.hm_nc_body p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 27px;
  color: #4b5563;
}

.hm_nc_body .hm_more {
  margin-top: auto;
  padding-top: 20px;
}

.hm_news_caros .owl-stage {
  display: flex;
}

.hm_news_caros .owl-item {
  display: flex;
  height: auto;
}

.hm_news_caros .item {
  display: flex;
  width: 100%;
}

/* ---------- testimonials ---------- */

.hm_rev_item {
  position: relative;
  padding: 34px 32px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--ink-soft);
  border-left: 3px solid var(--coral);
  box-shadow: 0 3px 16px -10px rgba(22, 47, 98, 0.35);
  transition: all 0.3s var(--ease);
}

.hm_rev_item:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 44px -26px rgba(119, 28, 46, 0.45);
}

.hm_rev_item > i {
  font-size: 26px;
  color: var(--coral);
  opacity: 0.5;
}

.hm_rev_item p {
  margin-top: 16px;
  min-height: 150px;
  font-size: 16px;
  line-height: 29px;
  color: #3f4756;
}

.hm_rev_who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(22, 47, 98, 0.08);
}

.hm_rev_who img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--coral-soft);
}

.hm_rev_who strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--wine);
}

.hm_rev_who span {
  display: block;
  font-size: 14px;
  /* тот же случай, что и в .hm_nc_meta: 2.87 на белом — ниже нормы AA */
  color: #5f6a7a;
}

/* ---------- call to action ---------- */

.hm_cta {
  padding: 0 0 100px;
}

.hm_cta_box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding: 42px 46px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--wine) 0%, var(--wine-deep) 60%, #5d1526 100%);
  box-shadow: 0 30px 55px -34px rgba(119, 28, 46, 0.85);
}

.hm_cta_box h2 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}

.hm_cta_box p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.82);
}

.hm_cta_actions {
  display: flex;
  align-items: center;
  gap: 26px;
}

.hm_cta_actions .hm_more {
  color: #fff;
}

.hm_cta_actions .hm_more:hover {
  color: var(--coral);
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
  .hm_hep_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm_elasto_grid, .hm_doc_grid { gap: 40px; }
  .hm_elasto_text h2, .hm_doc_text h2, .hm_head h2 { font-size: 32px; }
}

@media (max-width: 991px) {
  .hm_sec { padding: 72px 0; }
  .hm_elasto_grid, .hm_doc_grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hm_doc_media { max-width: 520px; }
  .hm_doc_media::before { inset: 20px -20px -20px 20px; }
  .hm_cta_box { grid-template-columns: minmax(0, 1fr); padding: 34px; }
}

@media (max-width: 767px) {
  .hm_sec { padding: 56px 0; }
  .hm_hep_grid { grid-template-columns: minmax(0, 1fr); }
  .hm_checks { grid-template-columns: minmax(0, 1fr); }
  .hm_head h2, .hm_elasto_text h2, .hm_doc_text h2 { font-size: 27px; }
  .hm_head { margin-bottom: 34px; }
  .hm_doc_contacts a { width: 100%; }
  .hm_cta_box h2 { font-size: 24px; }
  .hm_cta_actions { flex-direction: column; align-items: flex-start; }
  .hm_rev_item p { min-height: 0; }
}

/* the theme pins the carousel arrows to the top-right of the section,
   so the "all posts" button lives under the carousel instead */
.hm_news_all {
  display: flex;
  justify-content: center;
  margin-top: 46px;
}

.hm_news .owl-nav {
  top: -110px !important;
}

/* owl forces `img { width: 100% }` on carousel items - the avatars need their own size */
.hm_rev_caros .owl-item img,
.hm_rev_who img {
  width: 52px !important;
  height: 52px;
  flex: 0 0 52px;
}

/* equal-height cards inside the testimonial carousel */
.hm_rev_caros .owl-stage {
  display: flex;
}

.hm_rev_caros .owl-item {
  display: flex;
  height: auto;
}

.hm_rev_item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hm_rev_item p {
  flex: 1 1 auto;
}