/* Main Container */
@font-face {
  font-family: 'Montserrat Armenian';
  src: url('../fonts/web_font/Montserratarm-Regular.woff2') format('woff2'),
      url('../fonts/web_font/Montserrat-Armenian-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat Armenian bold';
  src:
      url('../fonts/web_font/Montserratarm-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat Armenian semiBold';
  src:
      url('../fonts/web_font/Montserratarm-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat Armenian light';
  src:
      url('../fonts/web_font/Montserratarm-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.videoTitle {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  height: calc(1.4em * 3); /* 3 տող */
  color: #333;
  padding: 10px 10px 15px;
}


body {
  font-family: 'Montserrat Armenian';
  max-width: 100%;
}

main {
  padding: 9% 4% 2%;
}

.container-two-column {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px; /* Use gap for better spacing */
}

/* === Left Side (Main News) === */
.left-banner {
  width: 58%;
  box-sizing: border-box;
  position: relative;
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 469px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.banner-img {
  width: 100%;
  height: 100%; /* Fill the wrapper */
  object-fit: cover;
}

.banner-title {
  font-family: 'Montserrat Armenian semiBold';
  font-size: 25px;
  margin: 11px 0 11px 25px;
  color: #111;
}

.banner-text {
font-size: 13px;
line-height: 1.6;
color: #6C6C6C;
margin-left: 22px;
margin-right: 22px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
.banner-text a {
  color: #833F6D;
  text-decoration: none;
  font-family: 'Montserrat Armenian bold';
}

/* === Right Side (Grid) === */
.right-doctors {
  width: 42%; /* Adjusted width */
  padding-left: 20px;
  box-sizing: border-box;
  border-left: 1.5px solid #EAEAEA;
  display: flex;
  align-items: flex-start;
}

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%; /* Grid should fill its container */
}

.doctor-card {
  background-color: #ffffff;
  text-align: center;
  transition: transform 0.2s ease;
  /* Removed fixed width and height to allow grid to control sizing */
}

.doctor-card:hover {
  transform: translateY(-3px);
}

.doctor-card img {
  width: 100%;
  height: 140px; /* Consistent image height */
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.doctor-card p {
  font-size: 12px;
  font-family: 'Montserrat Armenian light';
  color: #151515;
  line-height: 1.5;
  height: 57px;
  padding: 8px 3px 3px;
  margin: 0;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* === Dots for Slider === */
.dot-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.dot {
  width: 9px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  opacity: 0.95;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.dot:hover {
  transform: scale(1.2);
}

.dot.active {
  background-color: #B760A5;
}


.ad-banner {
  position: relative;
  max-width: 100%;
  margin: 20px 4%;
  border-radius: 10px;
  overflow: hidden; /* Սա կարևոր է, որպեսզի նկարի կլորացված անկյունները ճիշտ երևան */
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
  /* ՈՉ ՄԻ `height` հատկություն այստեղ */
}

.ad-banner .ad-slide {
  display: none; /* Սկզբից բոլոր սլայդերը թաքնված են */
}

.ad-banner .ad-slide.active {
  display: block; /* JavaScript-ը ակտիվ սլայդին տալիս է այս կլասը, և այն երևում է */
}

/* ✨ ԱՄԵՆԱԿԱՐԵՎՈՐ ՄԱՍԸ ✨ */
.ad-banner img {
  display: block; /* Հեռացնում է նկարի տակի ավելորդ տարածությունը */
  width: 100%;    /* Նկարի լայնությունը հավասարեցնում է կոնտեյների լայնությանը */
  height: auto;   /* ԲԱՐՁՐՈՒԹՅՈՒՆԸ ԱՎՏՈՄԱՏ Է՝ սա պահպանում է նկարի ճիշտ համամասնությունները */
}
/* ============================================= */
/* === ԳՈՎԱԶԴԻ ՎԵՐՋՆԱԿԱՆ ՈՒՂՂՈՒՄ === */
/* ============================================= */

/* 1. Հեռացնում ենք կոնտեյների ֆիքսված բարձրությունը */
#ad-banner, #mobile-ad-banner {
  height: auto !important;
}

/* 2. Ուղղում ենք բուն նկարի ցուցադրումը (ԱՄԵՆԱԿԱՐԵՎՈՐԸ) */
#ad-banner .ad-slide img,
#mobile-ad-banner .ad-slide img {
  width: 100% !important;
  height: auto !important; /* Սա ստիպում է պահպանել համամասնությունները */
  object-fit: contain !important; /* Սա թույլ չի տալիս նկարը կտրվի */
  position: static !important; /* Չեղարկում է հնարավոր կոնֆլիկտները */
  opacity: 1 !important; /* Համոզվում ենք, որ տեսանելի է */
}

/* 3. Համոզվում ենք, որ ակտիվ սլայդը տեսանելի է */
#ad-banner .ad-slide.active,
#mobile-ad-banner .ad-slide.active {
  display: block !important;
  position: relative !important;
  height: auto !important;
  opacity: 1 !important;
}
/* =================================================================== */
/* Responsive Styles                                                 */
/* =================================================================== */

/* Tablet & Large Mobile (≤ 1024px) */
@media (max-width: 1024px) {
  .container-two-column {
    flex-direction: column;
    gap: 30px;
  }

  .left-banner,
  .right-doctors {
    width: 100%;
    padding: 0;
    border-left: none;
  }

  .doctors-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns fit well on tablets */
    gap: 16px;
  }

  .image-wrapper {
    height: 420px;
    margin-bottom: 15px;
  }

  .banner-title {
      margin-left: 0;
  }
  .banner-text {
      margin-left: 0;
      margin-right: 0;
      -webkit-line-clamp: 4;
  }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  main {
    padding: 16% 4%; /* Adjust main padding */
  }

  .doctors-grid {
    grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns */
    gap: 14px;
  }

  .banner-title {
    font-size: 20px;
  }

  .banner-text {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }

  .image-wrapper {
      height: 320px;
  }
}

/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {
  main {
      padding: 26% 4%;
  }
  .image-wrapper {
      height: 250px;
  }
  .banner-title {
    font-size: 18px;
  }

  .banner-text {
    font-size: 13px;
  }

  .doctor-card p {
    font-size: 11px;
    height: 85px; /* Adjust height for 3 lines of smaller text */
  }

  .dot {
    width: 7px;
    height: 7px;
  }
}



/* ================================== */
/* News Section Styles       */
/* ================================== */

/* Desktop View styles (901px and wider) */
.news-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* Forces columns to have same height */
  gap: 25px; /* Space between columns */
  padding: 3% 4%;
  width: 100%;
  box-sizing: border-box;
  margin: 40px 0; /* Add some vertical spacing from other sections */
}

.news-column {
  flex: 1; /* Allows news columns to grow and take available space */
  display: flex;
  flex-direction: column;
  gap: 25px; /* Space between news cards */
  min-width: 0; /* Prevents flex items from overflowing */
}

.news-group-card {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.news-heading {
  font-family: 'Montserrat Armenian semiBold';
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #EAEAEA;
}

.news-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  text-decoration: none;
  color: inherit;
}

.news-card img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.news-content {
  display: flex;
  flex-direction: column;
}

.news-content h3 {
  margin: 0;
  font-family: 'Montserrat Armenian semiBold';
  font-size: 15px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-content h3 a {
  color: #111;
}

.news-date {
  font-size: 13px;
  color: #888;
  margin-top: 8px;
}

.vertical-divider {
  width: 1.5px;
  background-color: #EAEAEA;
}

/* --- QR Banner Column --- */
.qr-banner-column {
  flex-basis: 280px; /* Give QR banner a fixed width */
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qr-card {
  width: 100%;
}

.qr-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}




/* ======================================================= */
/* RESPONSIVE STYLES for screens 900px and smaller         */
/* ======================================================= */



/* Adjustments for very small screens */
@media (max-width: 480px) {
  .news-heading {
      font-size: 20px;
  }

  .news-card {
      /* Կարող ենք նկարը և տեքստը իրար տակ դասավորել */
      flex-direction: column;
      align-items: center;
      text-align: center;
  }
  .news-card img {
      width: 100%;
      height: 180px; /* Ավելի մեծ նկար՝ ուղղահայաց տեսքի համար */
  }
  .news-date {
      margin-top: 12px;
  }
  
}