/*
 Theme Name: Redial Clinic Child
 Template: redial-clinic
 Author: Team Redial
 Author URI: https://redialclinic.com/
*/

/* =========================
   HEADER – SOCIAL ICONS
   ========================= */

.header-right {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Social icons */
.header-right a.header-icon {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 1.2rem;   /* space between divider & icon */
  margin-left: 1.2rem;    /* space from previous icon */
}

/* Divider before EVERY icon except the first */
.header-right a.header-icon:not(:first-of-type)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.6);
}

/* Icon images */
.header-right a.header-icon img {
  height: 28px;
  width: 28px;
  object-fit: contain;
  filter: invert();
  display: block;
}

/* Contact button after icons */
.header-right .header-btn {
  margin-left: 2rem;
}



/* =========================
   BLOG LISTING PAGE
   ========================= */

/* 1) Slightly wider container only on blog listing section */
.blog-listing-main .container {
  max-width: 1400px;
}

/* 2) Keep theme's own grid/layout.
      We do NOT touch .blog-list-wrapper or .blog-list-item layout anymore. */

/* 3) Make thumbnails clean rectangles without distortion */
.blog-item-thumb {
  aspect-ratio: 16 / 9;   /* keeps consistent landscape shape */
  overflow: hidden;
  border-radius: 16px;    /* matches your existing rounded style */
}

/* Image fills the box nicely */
.blog-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: absolute;
  display: block;
}

/* Optional: tweak title readability */
.blog-item-content h4 {
  font-size: 1.4rem;
  line-height: 1.3;
}
/* =========================
   BLOG TITLES – FIX SIZE
   ========================= */

/* Desktop size */
.blog-item-content h4 {
  font-size: 2.75rem;    
  line-height: 1.3;
  font-weight: 500;
}

/* Tablet */
@media (max-width: 1024px) {
  .blog-item-content h4 {
    font-size: 2.55rem;  
  }
}

/* Mobile */
@media (max-width: 768px) {
  .blog-item-content h4 {
    font-size: 2.35rem; 
	font-weight: 500;
	  content:center;
  }
}