/* ═══════════════════════════════════════════════════════════
   SOS BLOG ARCHIVE — CSS
   Styles for [sos_blog_card] shortcode
   
   Uses CSS Grid for the 2-column card layout.
   No dependency on Enfold's Grid Row / table-cell.
   
   USAGE:
     Loop template:  [sos_blog_card words="40"]
     Filter bar:     [sos_blog_category_filter]
═══════════════════════════════════════════════════════════ */


/* ── BLOG ARCHIVE CARD ──────────────────────────────────── */

.sos-blog-archive {
  display: grid;
  grid-template-columns: 2fr 3fr;        /* 40% image | 60% content */
  min-height: 400px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  max-width: 80%;
  margin: 0 auto 32px auto;              /* Centered + spacing between cards */
  position: relative;
  top: 0;
  overflow: hidden;                       /* Safe here — it's our own div, not Enfold's */
  transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s cubic-bezier(0.22, 1.36, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1.36, 0.36, 1);
}

.sos-blog-archive:hover {
  top: -8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.08);
}


/* ── FILTER ANIMATION CLASSES ───────────────────────────── */
/* Matches framer-motion: scale(0.5)→scale(1), spring bounce: 0.35 */

.sos-blog-archive.sos-blog-visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.sos-blog-archive.sos-blog-hidden {
  opacity: 0 !important;
  transform: scale(0.5) !important;
  pointer-events: none;
}

.sos-blog-archive.sos-blog-js-hide {
  display: none !important;
}


/* ── 1. IMAGE CELL ──────────────────────────────────────── */

.sos-blog-card-img {
  position: relative;
  overflow: hidden;
  border-radius: 24px 0 0 24px;
}

.sos-blog-image-link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
}

.sos-blog-image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sos-blog-feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.7s ease;
}

/* Zoom image on card hover */
.sos-blog-archive:hover .sos-blog-feature-image {
  transform: scale(1.05);
}


/* ── 2. CONTENT CELL ────────────────────────────────────── */

.sos-blog-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 48px;
}


/* ── 3. META ROW (Category Badge + Date) ────────────────── */

.sos-blog-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sos-blog-cat-badge {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #1d1d1f;
  cursor: default;
  pointer-events: none;
}

.sos-blog-cat-label {
  text-transform: uppercase;
}

.sos-blog-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8e8e93;
  font-weight: 400;
}

.sos-calendar-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* ── 4. TITLE ───────────────────────────────────────────── */

.sos-blog-entry-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 16px 0;
}

.sos-blog-entry-title a {
  color: #1d1d1f;
  text-decoration: none;
  transition: color 0.3s ease;
}


/* ── 5. EXCERPT ─────────────────────────────────────────── */

.sos-blog-excerpt {
  font-size: 15px;
  line-height: 1.7;
  color: #6e6e73;
  margin: 0 0 24px 0;
  max-width: 560px;
}


/* ── 6. READ MORE BUTTON ────────────────────────────────── */

.sos-blog-read-more-wrap {
  margin-top: auto;
}

.sos-blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #1d1d1f;
  font-weight: 600;
  font-size: 14px;
  transition: gap 0.3s ease;
}

.sos-blog-read-more-text {
  color: #1d1d1f;
}

.sos-blog-read-more-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 16px;
  color: #1d1d1f;
}

/* Arrow slides right on card hover */
.sos-blog-archive:hover .sos-blog-read-more-arrow {
  transform: translateX(6px);
}

/* Also on direct link hover */
.sos-blog-read-more:hover .sos-blog-read-more-arrow {
  transform: translateX(6px);
}


/* ── 7. CATEGORY FILTER BAR ─────────────────────────────── */

.sos-blog-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding: 0;
}

.sos-filter-pill {
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: #6e6e73;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: inherit;
  transition: all 0.25s ease;
}

.sos-filter-pill:hover {
  background: #1d1d1f;
  color: #ffffff;
  border-color: transparent;
}

.sos-filter-pill.sos-filter-active {
  background: #1d1d1f;
  color: #ffffff;
  border-color: transparent;
}


/* ── 8. PAGINATION ──────────────────────────────────────── */

.sos-blog-pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 40px;
}

.sos-blog-pagination ul {
  list-style: none;
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.sos-blog-pagination li {
  display: inline-block;
}

.sos-blog-pagination a,
.sos-blog-pagination span {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #6e6e73;
  text-decoration: none;
  transition: all 0.25s ease;
}

.sos-blog-pagination a:hover {
  background: #f5f5f7;
  color: #1d1d1f;
}

.sos-blog-pagination .current {
  background: #1d1d1f;
  color: #ffffff;
}

.sos-blog-no-results {
  text-align: center;
  padding: 60px 20px;
  color: #8e8e93;
  font-size: 16px;
}


/* ── 9. RESPONSIVE ──────────────────────────────────────── */

@media only screen and (max-width: 989px) {
  .sos-blog-archive {
    max-width: 90%;
  }
}

@media only screen and (max-width: 767px) {
  .sos-blog-archive {
    grid-template-columns: 1fr;   /* Stack vertically */
    max-width: 95%;
  }

  .sos-blog-card-img {
    min-height: 250px;
    border-radius: 24px 24px 0 0;
  }

  .sos-blog-card-content {
    padding: 24px;
  }

  .sos-blog-entry-title {
    font-size: 20px;
  }

  .sos-blog-excerpt {
    font-size: 14px;
  }
}


/* ── 7. BLOG META HERO — Category pills + date (on dark bg) ── */

.sos-blog-meta-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* Reversed pill: black bg, white text — !important to beat Enfold */
.sos-blog-meta-hero .sos-blog-meta-hero-pill {
  display: inline-block !important;
  padding: 6px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  transition: background 0.3s ease, color 0.3s ease;
}

.sos-blog-meta-hero .sos-blog-meta-hero-pill:hover {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

/* White date + icon */
.sos-blog-meta-hero .sos-blog-meta-hero-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  color: #ffffff !important;
}

.sos-blog-meta-hero .sos-blog-meta-hero-date svg {
  opacity: 0.8;
}


/* ── 8. BACK TO NEWS — White arrow link on dark hero ────── */

.sos-blog-back-wrap {
  margin-bottom: 16px;
}

.sos-blog-back-link,
.sos-blog-back-link span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: gap 0.3s ease, opacity 0.3s ease !important;
}

.sos-blog-back-link {
  opacity: 0.85;
}

.sos-blog-back-link:hover,
.sos-blog-back-link:hover span {
  gap: 12px !important;
  opacity: 1 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.sos-blog-back-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.sos-blog-back-link:hover .sos-blog-back-arrow {
  transform: translateX(-4px);
}


/* =================================================================
   9. TWO-COLUMN GRID MODE
   Applied when [sos_blog_loop columns="2"] is used.
   Cards flip to vertical: image on top, content below.
================================================================= */

/* Loop wrapper: 2-column CSS grid */
.sos-blog-loop--cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
  margin-bottom: 0 !important;
}

/* Grid cards: vertical flex stack.
   NOTE: display must NOT use !important here — the JS filter sets
   card.style.display = "none" as an inline style to remove hidden cards
   from the grid flow. !important would block that inline style override. */
.sos-blog-loop--cols-2 .sos-blog-archive,
.sos-blog-archive.sos-blog-archive--grid {
  display: flex;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  min-height: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* JS filter: force-hide class beats the display:flex above */
.sos-blog-loop--cols-2 .sos-blog-archive.sos-blog-js-hide,
.sos-blog-archive.sos-blog-archive--grid.sos-blog-js-hide {
  display: none !important;
}

/* Grid image: fixed-height banner at top of card */
.sos-blog-loop--cols-2 .sos-blog-card-img,
.sos-blog-archive--grid .sos-blog-card-img {
  position: relative !important;
  height: 240px !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 24px 24px 0 0 !important;
  flex-shrink: 0;
}

/* Image fills the container */
.sos-blog-loop--cols-2 .sos-blog-image-link,
.sos-blog-archive--grid .sos-blog-image-link {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.sos-blog-loop--cols-2 .sos-blog-image-wrap,
.sos-blog-archive--grid .sos-blog-image-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.sos-blog-loop--cols-2 .sos-blog-feature-image,
.sos-blog-archive--grid .sos-blog-feature-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Content: flush below the image */
.sos-blog-loop--cols-2 .sos-blog-card-content,
.sos-blog-archive--grid .sos-blog-card-content {
  padding: 28px 32px !important;
  justify-content: flex-start !important;
  flex: 1 1 auto;
}

/* Slightly smaller title in grid mode */
.sos-blog-loop--cols-2 .sos-blog-entry-title,
.sos-blog-archive--grid .sos-blog-entry-title {
  font-size: 20px !important;
}

/* Read more anchored to bottom */
.sos-blog-loop--cols-2 .sos-blog-read-more-wrap,
.sos-blog-archive--grid .sos-blog-read-more-wrap {
  margin-top: auto;
  padding-top: 16px;
}

/* Responsive: 1 column on mobile */
@media only screen and (max-width: 768px) {
  .sos-blog-loop--cols-2 {
    grid-template-columns: 1fr !important;
  }
}