/* ==========================================================
   Prime Economist / Zaira – Featured Grid Layout
   Applies to any View with class "pe-featured-grid".
   ========================================================== */

/* ---------- Theme tokens (customizable) ---------- */
.pe-featured-grid {
  --pe-gap: 1rem;
  --pe-gap-sm: 0.75rem;
  --pe-pad: 0.9375rem; /* 15px */
  --pe-border: 1px solid #d8d8d8;
  --pe-bg: transparent;
  --pe-bg-hover: #f8f9fa;
  --pe-text-muted: #6b7280;
}

/* ---------- Layout Wrappers ---------- */
.news-banner-post-wrap {
  padding: 25px 0;
}

.layout__region--first,
.layout__region--second,
.layout__region--content {
  padding-left: 15px;
  padding-right: 15px;
}

.layout__region--second .block-block-content {
  padding-top: 5px;
}

/* ---------- Grid Layout ---------- */
.pe-featured-grid .view-content {
  display: grid;
  grid-template-columns: 1fr 2fr; /* smalls | large */
  grid-template-rows: 1fr 1fr; /* two equal rows for smalls */
  gap: var(--pe-gap);
  align-items: stretch;
}

/* ---------- Reset Card Styles ---------- */
.pe-featured-grid .view-content .card,
.pe-featured-grid .view-content .card-body,
.pe-featured-grid .view-content .card-block,
.pe-featured-grid .view-content .card .card-block .card-body {
  border: 0;
  background: var(--pe-bg);
  padding: 0;
  border-radius: 0;
}

/* ---------- Small Posts (banner-post-five) ---------- */
.pe-featured-grid .view-content .card .banner-post-five {
  margin: 0;
}

/* Visual divider between two small cards */
.pe-featured-grid .view-content > .card:nth-of-type(2) {
  padding-bottom: 15px;
  border-bottom: var(--pe-border);
}

/* ---------- Grid Mapping via :has() (modern browsers) ---------- */
/* Small posts → left column */
.pe-featured-grid .view-content .card:has(.banner-post-five) {
  grid-column: 1;
}

/* First small → top-left */
.pe-featured-grid .view-content .card:has(.banner-post-five):nth-of-type(1) {
  grid-row: 1;
  border-bottom: var(--pe-border);
}

/* Second small → bottom-left */
.pe-featured-grid .view-content .card:has(.banner-post-five):nth-of-type(2) {
  grid-row: 2;
}

/* Big featured → full height right column */
.pe-featured-grid .view-content .card:has(.banner-post-six) {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: var(--pe-pad);
  border-left: var(--pe-border);
  background-color: var(--pe-bg);
}

/* ---------- Fallback if :has() unsupported ---------- */
@supports not (selector(.x:has(y))) {
  /* Assume card order: small, small, big */
  .pe-featured-grid .view-content > .card:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .pe-featured-grid .view-content > .card:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .pe-featured-grid .view-content > .card:nth-of-type(3) {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

/* ---------- Hover & Readability Enhancements ---------- */
.pe-featured-grid .view-content .card:hover {
  background-color: var(--pe-bg-hover);
  transition: background-color 0.2s ease-in-out;
}

/* ---------- Responsive: stack on tablets/mobiles ---------- */
@media (max-width: 768px) {
  .pe-featured-grid .view-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--pe-gap-sm);
  }

  .pe-featured-grid .view-content .card:has(.banner-post-five),
  .pe-featured-grid .view-content .card:has(.banner-post-six) {
    grid-column: 1;
    grid-row: auto;
    border-left: 0;
    padding-left: 0;
  }
}

/* ---------- Accessibility: motion & focus ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

.pe-featured-grid a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Other Blocks Styles for a page */

/* EDITORIAL SLIDER */
.editor-post-active-three {
  width: 100%;
}
/* .editor-post-active-three .slick-slide {
  width: 320px;
} */
/* Scope to this slider only */
.editor-post-active-three .slick-list {
  overflow: hidden; /* ensure no horizontal scrollbars */
}
.editor-post-active-three .slick-track {
  display: flex; /* equal heights if cards stretch */
}
.editor-post-active-three .slick-slide {
  height: auto;
}
.editor-post-active-three .card {
  height: 100%; /* let card fill slide height if needed */
  border: none;
}
/* Clamp long titles to 2 lines in the Editors' Picks slider */
.editor-post-active-three .banner-post-five .post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* ensure multi-line text */
  min-height: 3.2em; /* keeps all cards same height */
  line-height: 1.6; /* match design’s spacing */
}

[tg-theme="dark"] .pe-featured-grid .view-content .card:hover {
  background: none;
}