:root {
  --clr-gray-light: #d7dfe2;
  --clr-gray-med: #616b74;
  --clr-gray-dark: #414b56;
  --clr-link: #4d97b2;
  --clr-popular: #ef257a;
  --clr-technology: #651fff;
  --clr-psychology: #e85808;
}

.ghoud-ebc { --cols: 3; --cols-tab: 2; --cols-mob: 1; }

.ghoud-ebc .wrapper {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Map classes to CSS variables */
.ghoud-ebc.cols-1 { --cols: 1; }
.ghoud-ebc.cols-2 { --cols: 2; }
.ghoud-ebc.cols-3 { --cols: 3; }
.ghoud-ebc.cols-4 { --cols: 4; }

.ghoud-ebc.cols-tab-1 { --cols-tab: 1; }
.ghoud-ebc.cols-tab-2 { --cols-tab: 2; }
.ghoud-ebc.cols-tab-3 { --cols-tab: 3; }
.ghoud-ebc.cols-tab-4 { --cols-tab: 4; }

.ghoud-ebc.cols-mob-1 { --cols-mob: 1; }
.ghoud-ebc.cols-mob-2 { --cols-mob: 2; }
.ghoud-ebc.cols-mob-3 { --cols-mob: 3; }
.ghoud-ebc.cols-mob-4 { --cols-mob: 4; }

.ghoud-ebc .card {
  overflow: hidden;
  box-shadow: 0px 2px 20px var(--clr-gray-light);
  background: white;
  border-radius: 0.5rem;
  position: relative;
  margin: 0;
  transition: 250ms all ease-in-out;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ghoud-ebc .card:hover {
  transform: scale(1.05);
  box-shadow: 0px 2px 40px var(--clr-gray-light);
}

.ghoud-ebc .banner-img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain; /* Full image in card, not cropped */
  height: 14rem;
  width: 100%;
  display: block;
  background: #f1f5f9;
}

.ghoud-ebc .category-tag {
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  background: red;
  padding: 0.5rem 1.3rem 0.5rem 1rem;
  text-transform: uppercase;
  position: absolute;
  z-index: 1;
  top: 1rem;
  border-radius: 0 2rem 2rem 0;
}

.ghoud-ebc .card-body { 
    margin: 0 1rem 1rem 1rem; 
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    flex-shrink: 0;
    padding-top: 0.5rem;
}
.ghoud-ebc .blog-hashtag, .ghoud-ebc a.blog-hashtag { font-size: 0.85rem; font-weight: 600; color: var(--clr-link); display: inline-block; padding: 4px 10px; border-radius: 999px; background-color: rgba(77,151,178,0.12); text-decoration: none; }
.ghoud-ebc .blog-title { 
  font-size: 1.05rem; 
  line-height: 1.4; 
  margin: 0 0 0.5rem 0; 
  height: calc(1.4em * 2); /* Fixed height for 2 lines */
  min-height: calc(1.4em * 2);
  max-height: calc(1.4em * 2);
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  line-clamp: 2; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
  flex-shrink: 0; 
}
.ghoud-ebc .blog-title a { color: inherit; text-decoration: none; display: inline-block; }
.ghoud-ebc .blog-description { 
  color: var(--clr-gray-med); 
  font-size: 0.9rem; 
  line-height: 1.6;
  margin: 0 0 1rem 0; 
  height: calc(1.6em * 4); /* Fixed height for 4 lines */
  min-height: calc(1.6em * 4);
  max-height: calc(1.6em * 4);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0; 
}

.ghoud-ebc .card-profile { display: flex; margin-top: 1rem; margin-bottom: 0; align-items: center; flex-shrink: 0; }
.ghoud-ebc .profile-img { width: 60px; height: 60px; object-fit: cover; border-radius: 50%; }
.ghoud-ebc .card-profile-info { margin-left: 1rem; }
.ghoud-ebc .profile-name { font-size: 1rem; }
.ghoud-ebc .profile-followers { color: var(--clr-gray-med); font-size: 0.9rem; }

.ghoud-ebc-pagination { text-align: center; margin: 20px 0; }
.ghoud-ebc-pagination ul { display: inline-flex; gap: 8px; list-style: none; padding: 0; }
.ghoud-ebc-pagination li { display: inline-block; }
.ghoud-ebc-pagination a, .ghoud-ebc-pagination span { padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px; text-decoration: none; color: #374151; }
.ghoud-ebc-pagination .current { background: #111827; color: #fff; border-color: #111827; }

@media (max-width: 1024px) {
  .ghoud-ebc .wrapper { grid-template-columns: repeat(var(--cols-tab), 1fr); }
}
@media (max-width: 768px) {
  .ghoud-ebc .wrapper { grid-template-columns: repeat(var(--cols-mob), 1fr); }
}

/* Slider full width, no white space */
.ghoud-ebc.mode-scroller { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; }
.ghoud-ebc.mode-scroller .ghoud-ebc-slider { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
.ghoud-ebc.mode-scroller .scroller-viewport{overflow:hidden; width:100% !important;}
.ghoud-ebc.mode-scroller .swiper{
  padding-bottom:16px;
  position:relative;
  width:100% !important;
  max-width:100% !important;
  height:auto;
  overflow:hidden !important;
  margin:0 !important;
  padding-left:0;
  padding-right:0;
}
.ghoud-ebc.mode-scroller .swiper-wrapper{
  align-items:stretch !important;
  display:flex !important;
  transition-property:transform;
  height:auto !important;
  width:100% !important;
}
.ghoud-ebc.mode-scroller .swiper-slide{
  height:auto !important;
  flex-shrink:0 !important;
  display:flex !important;
  box-sizing:border-box !important;
  align-items:stretch !important;
  /* Remove width:auto !important to let Swiper calculate width */
  /* Swiper will set width based on slidesPerView and spaceBetween */
}
.ghoud-ebc.mode-scroller .swiper-slide .card{
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:100%;
  align-self:stretch;
  width:100% !important;
  /* Card design is inherited from .ghoud-ebc .card */
}
.ghoud-ebc.mode-scroller .swiper-slide .card:hover{
  transform:scale(1.02);
  box-shadow:0px 2px 40px var(--clr-gray-light);
}
.ghoud-ebc.mode-scroller .ghoud-ebc-slider{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100% !important;
  overflow:hidden;
}

/* Ensure card-body uses flexbox to push button to bottom */
.ghoud-ebc.mode-scroller .card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
}
/* Position pagination below cards, not on top */
.ghoud-ebc.mode-scroller .swiper-pagination{
    position:relative !important;
    bottom:auto !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    margin:20px auto 0 auto !important;
    text-align:center !important;
    width:auto !important;
    transform:none !important;
}
.ghoud-ebc.mode-scroller .swiper-button-next, .ghoud-ebc.mode-scroller .swiper-button-prev{color:#111827}
.ghoud-ebc.mode-scroller .swiper-button-next, .ghoud-ebc.mode-scroller .swiper-button-prev{width:44px;height:44px;position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:50%;background:transparent}
/* Default LTR offsets */
.ghoud-ebc[dir="ltr"].mode-scroller .swiper-button-prev{left:-22px}
.ghoud-ebc[dir="ltr"].mode-scroller .swiper-button-next{right:-22px}
/* RTL offsets mirror */
.ghoud-ebc[dir="rtl"].mode-scroller .swiper-button-prev{left:-22px;right:auto}
.ghoud-ebc[dir="rtl"].mode-scroller .swiper-button-next{right:-22px;left:auto}
.ghoud-ebc.mode-scroller .swiper-button-next:after, .ghoud-ebc.mode-scroller .swiper-button-prev:after{font-size:18px}
@media (max-width: 1024px){
  .ghoud-ebc[dir="ltr"].mode-scroller .swiper-button-prev{left:-12px}
  .ghoud-ebc[dir="ltr"].mode-scroller .swiper-button-next{right:-12px}
  .ghoud-ebc[dir="rtl"].mode-scroller .swiper-button-prev{left:-12px}
  .ghoud-ebc[dir="rtl"].mode-scroller .swiper-button-next{right:-12px}
}
@media (max-width: 768px){
  /* Pull arrows inside slightly on mobile to avoid clipping */
  .ghoud-ebc[dir="ltr"].mode-scroller .swiper-button-prev{left:4px}
  .ghoud-ebc[dir="ltr"].mode-scroller .swiper-button-next{right:4px}
  .ghoud-ebc[dir="rtl"].mode-scroller .swiper-button-prev{left:4px}
  .ghoud-ebc[dir="rtl"].mode-scroller .swiper-button-next{right:4px}
}
/* ensure grid unaffected */
.ghoud-ebc.mode-grid .wrapper{display:grid}


/* Direction-aware category tag for LTR/RTL */
.ghoud-ebc[dir="ltr"] .category-tag { left: 0; right: auto; border-radius: 0 2rem 2rem 0; padding: 0.5rem 1.3rem 0.5rem 1rem; text-align: left; }
.ghoud-ebc[dir="rtl"] .category-tag { right: 0; left: auto; border-radius: 2rem 0 0 2rem; padding: 0.5rem 1rem 0.5rem 1.3rem; text-align: right; }

/* Make entire card clickable */
.ghoud-ebc .card { position: relative; }
.ghoud-ebc .card .card-link-overlay { position: absolute; inset: 0; z-index: 5; text-indent: -9999px; }

/* Date under image: icon before text in LTR (left); in RTL icon starts on right, then text */
.ghoud-ebc .card-date { 
  margin: 0.5rem 1rem 0.6rem !important; 
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-direction: row !important;
  overflow: visible !important;
}
.ghoud-ebc[dir="ltr"] .card-date { 
  justify-content: flex-start !important;
  text-align: left !important;
  direction: ltr !important;
}
/* English: icon on left, then text */
.ghoud-ebc[dir="ltr"] .card-date .ail-date-icn { order: 0 !important; }
.ghoud-ebc[dir="ltr"] .card-date .profile-followers { order: 1 !important; }
/* Arabic: in RTL flex-start = right. Put date block on right, icon first (on right) */
.ghoud-ebc[dir="rtl"] .card-date { 
  justify-content: flex-start !important; /* RTL: flex-start = right side */
  text-align: right !important;
  direction: rtl !important;
}
.ghoud-ebc[dir="rtl"] .card-date .ail-date-icn { order: 0 !important; }
.ghoud-ebc[dir="rtl"] .card-date .profile-followers { order: 1 !important; }
.ghoud-ebc .card-date .ail-date-icn {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.ghoud-ebc .card-date .ail-date-icn svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.ghoud-ebc .card-date .profile-followers {
  margin: 0 !important;
  display: inline !important;
  vertical-align: middle !important;
  line-height: 1.5 !important;
}

/* CTA button (below posts) default styles */
.ghoud-ebc .ghoud-ebc-cta{margin-top:0}
.ghoud-ebc[dir="rtl"] .ghoud-ebc-cta{text-align:left}
.ghoud-ebc[dir="ltr"] .ghoud-ebc-cta{text-align:right}
.ghoud-ebc .ghoud-ebc-cta .cta-btn{background:#1491C6;color:#fff;border:1px solid transparent}
.ghoud-ebc .ghoud-ebc-cta .cta-btn:hover{background:#fff;color:#000;border-color:#1491C6}

/* Reserve space for banner image to avoid large margins */
.ghoud-ebc .card { 
  padding-top: 14rem; 
}
/* Cards fill slide width (no 300px cap) so no white space */
.ghoud-ebc.mode-scroller .swiper-slide .card { 
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Single card styling - centered with max-width 300-400px */
.ghoud-ebc.mode-single-card .wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.ghoud-ebc.mode-single-card .card {
  max-width: 400px !important;
  min-width: 300px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
/* Ensure all cards have equal height and content alignment */
.ghoud-ebc .wrapper .card,
.ghoud-ebc.mode-scroller .swiper-slide .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Ensure swiper slides and cards maintain proper sizing */
.ghoud-ebc.mode-scroller .swiper-slide {
  /* Swiper calculates width based on slidesPerView and spaceBetween */
  /* Don't set width here - let Swiper calculate it */
  min-width: 0;
  /* width will be set by Swiper dynamically */
}

.ghoud-ebc.mode-scroller .swiper-slide .card {
  /* Card should fill the slide width */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* Ensure card design is maintained - overflow handled by base .card class */
}

/* Ensure image container has consistent height */
.ghoud-ebc .card > .banner-img {
  flex-shrink: 0;
}

/* Ensure date is positioned consistently */
.ghoud-ebc .card-date {
  flex-shrink: 0;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* Make sure card-body content flows properly */
.ghoud-ebc .card-body > *:not(.ail-readmore):not(.card-profile) {
  flex-shrink: 0;
  flex-grow: 0;
}

/* Read more button inside cards */
.ghoud-ebc .card-body::after{content:"";display:block;clear:both}
/* Ensure read-more is aligned at bottom and centered */
.ghoud-ebc .ail-readmore{
    position:relative;
    z-index:6;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    background:#1491C6;
    color:#fff;
    padding:10px 16px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    line-height:1;
    border:1px solid transparent;
    width:auto !important;
    max-width:max-content;
    text-align:center;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    float:none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    height: 40px !important; /* Fixed height for button */
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
}

/* Ensure card design is preserved in swiper mode - styles inherited from .ghoud-ebc .card */
.ghoud-ebc .ail-readmore:hover{background:#fff;color:#000;border-color:#1491C6}