[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  [data-reveal].revealed {
    opacity: 1;
    transform: none;
  }
  
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .related-card[data-reveal] {
    opacity: 1;
    transform: none;
  }
  
  .related-card[data-reveal] > .frame {
    opacity: 1;
    visibility: visible;
    display: block;
  }
  
  .related-card[data-reveal] > .frame img {
    opacity: 1;
    visibility: visible;
    display: block;
  }
  
  /* Reveal the text */
  .related-card[data-reveal] > .kicker,
  .related-card[data-reveal] > h3,
  .related-card[data-reveal] > .byline {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
  }
  
  .related-card[data-reveal].revealed > .kicker,
  .related-card[data-reveal].revealed > h3,
  .related-card[data-reveal].revealed > .byline {
    opacity: 1;
    transform: none;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .related-card[data-reveal] > .kicker,
    .related-card[data-reveal] > h3,
    .related-card[data-reveal] > .byline {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  @media (max-width: 767.98px) {
    .all-categories-menu {
      display: none !important;
    }
  }

  /* =========================
   SEARCH BAR
========================= */

/* #site-search {
    display: none !important;
    width: 100%;
  }
  
  #site-search.open {
    display: block !important;
  }
  
  #site-search form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  
  #site-search input {
    flex: 1;
    width: 100%;
  }
  
  #site-search .btn {
    flex-shrink: 0;
  } */

  /* @keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
  } */

  .content-preview {
    position: relative;
    height: 130px;
    overflow: hidden;
    text-align: left !important;
  }
  
  .content-preview > div {
    margin: 0;
    text-align: left !important;
  }
  
  .content-preview p {
    margin-top: 0;
    margin-bottom: 8px;
    text-align: left !important;
  }

  .category-badge-n2 {
    position: absolute;
  
    /* X = center of image */
    left: 50%;
  
    /* Y = bottom of image */
    bottom: 10px;
  
    transform: translateX(-50%);
  
    z-index: 30;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    padding: 7px 15px;
  
    background: rgba(255, 255, 255, 0.96);
    color: rgba(0, 0, 0, 0.88);
  
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
  
    text-transform: uppercase;
    white-space: nowrap;
  
    border-radius: 4px;
  
    cursor: pointer;
  
    box-shadow:
      0 3px 10px rgba(0, 0, 0, 0.25);
  
    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  
  .category-badge-n2:hover {
    background: #a60e88;
    color: #fff;
  
    transform: translateX(-50%) translateY(-4px);
  
    box-shadow:
      0 7px 18px rgba(0, 0, 0, 0.35);
  }

  .banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
  
    pointer-events: none;
  
    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.12) 35%,
        rgba(0, 0, 0, 0.55) 65%,
        rgba(0, 0, 0, 0.88) 100%
      );
  }



/* ===================== TOP STORIES GRID ===================== */

.story-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

.story-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;

  min-width: 0;
  height: 100%;

  background: var(--card);
  border: 1px solid var(--rule);
  padding: .85rem;

  box-shadow: var(--shadow);

  overflow: hidden;
}

.story-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;

  flex-shrink: 0;
}

.story-card h3 {
  font-size: 1.18rem;
  line-height: 1.16;

  margin: 0;

  flex-shrink: 0;
}

.story-card p {
  font-size: .92rem;
  color: var(--ink-2);
  margin: 0;
}

/* ===================== CONTENT PREVIEW ===================== */

.content-previewn {
  position: relative;

  width: 100%;
  height: 45px;
  min-height: 45px;
  max-height: 45px;

  overflow: hidden;

  text-align: left !important;

  flex-shrink: 0;

  line-height: 1.4;
}

.content-previewn > div {
  width: 100%;
  height: 45px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  text-align: left !important;
}

/* Reset HTML coming from article.content */
.content-previewn p,
.content-previewn div,
.content-previewn span {
  margin-top: 0;
  margin-bottom: 0;

  text-align: left !important;
}

/* Prevent headings inside article content from becoming huge */
.content-previewn h1,
.content-previewn h2,
.content-previewn h3,
.content-previewn h4,
.content-previewn h5,
.content-previewn h6 {
  margin: 0;
  padding: 0;

  font-size: .92rem;
  line-height: 1.4;
  font-weight: normal;
}

/* Prevent lists from adding unexpected height */
.content-previewn ul,
.content-previewn ol {
  margin: 0;
  padding-left: 1rem;
}

/* Prevent images inside article content from making card huge */
.content-previewn img {
  display: none;
}

/* Prevent tables from expanding the card */
.content-previewn table {
  width: 100%;
  max-width: 100%;
  font-size: .8rem;
}

/* Prevent long words/HTML from overflowing */
.content-previewn * {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* ===================== BYLINE ===================== */

.story-card .byline {
  margin-top: auto;
  flex-shrink: 0;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 960px) {
  .story-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .story-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   POSTER CARD
   ========================================== */

   .poster-card {
    position: relative !important;
  
    width: 100%;
    max-width: 300px;
  
    margin: 0 auto;
  
    overflow: hidden !important;
  }
  
  
  /* ==========================================
     POSTER IMAGE
     ========================================== */
  
  .poster-image {
    width: 100%;
  
    aspect-ratio: 300 / 600;
  
    object-fit: cover;
  
    display: block;
  
    transition: transform 0.25s ease;
  }
  
  .poster-card:hover .poster-image {
    transform: scale(1.01);
  }
  
  
  /* ==========================================
     DELETE BUTTON
     ========================================== */
  
  .poster-card .poster-delete {
    position: absolute !important;
  
    top: 15px !important;
    right: 15px !important;
  
    width: 42px !important;
    height: 42px !important;
  
    min-width: 42px !important;
    min-height: 42px !important;
  
    padding: 0 !important;
    margin: 0 !important;
  
    border: none !important;
    border-radius: 50% !important;
  
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  
    background: rgba(0, 0, 0, 0.80) !important;
  
    color: #fff !important;
  
    cursor: pointer !important;
  
    opacity: 0;
    visibility: hidden;
  
    transform: translateY(-8px);
  
    z-index: 9999 !important;
  
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease,
      transform 0.25s ease,
      background-color 0.25s ease;
  }
  
  
  /* ==========================================
     SHOW TRASH ON POSTER HOVER
     ========================================== */
  
  .poster-card:hover .poster-delete {
    opacity: 1 !important;
  
    visibility: visible !important;
  
    transform: translateY(0) !important;
  }
  
  
  /* ==========================================
     TRASH BUTTON HOVER
     ========================================== */
  
  .poster-card .poster-delete:hover {
    background: #dc3545 !important;
  
    color: #fff !important;
  
    /* Keep button completely inside image */
    transform: translateY(0) !important;
  }
  
  
  /* ==========================================
     TRASH ICON
     ========================================== */
  
  .poster-card .poster-delete svg {
    width: 16px !important;
  
    height: 16px !important;
  
    display: block !important;
  
    color: #fff !important;
  
    fill: currentColor;
  }
  
  
  /* ==========================================
     MOBILE
     ========================================== */
  
  @media (max-width: 767.98px) {
  
    .poster-card .poster-delete {
      top: 10px !important;
  
      right: 10px !important;
  
      width: 36px !important;
  
      height: 36px !important;
  
      min-width: 36px !important;
  
      min-height: 36px !important;
    }
  
    .poster-card .poster-delete svg {
      width: 14px !important;
  
      height: 14px !important;
    }
  
  }
  
  .poster-cardn {
    position: relative;
    width: 100%;
    max-width: 728px;
    margin: 0 auto;
    overflow: visible !important;
  }
  
  .poster-imagen {
    width: 100%;
    aspect-ratio: 728 / 90;
    object-fit: cover;
    display: block;
  }
  
  /* Trash button */
  .poster-cardn .poster-deleten {
    position: absolute !important;
  
    top: 10px !important;
    right: 10px !important;
  
    width: 36px !important;
    height: 36px !important;
  
    padding: 0 !important;
    margin: 0 !important;
  
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  
    border: none !important;
    border-radius: 50% !important;
  
    background: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
  
    opacity: 0;
    visibility: hidden;
  
    transform: translateY(-8px);
  
    cursor: pointer !important;
  
    z-index: 999999 !important;
  
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease,
      transform 0.25s ease;
  }
  
  /* Show on banner hover */
  .poster-cardn:hover .poster-deleten {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
  
  /* Trash hover */
  .poster-cardn .poster-deleten:hover {
    background: #dc3545 !important;
    color: #fff !important;
    transform: scale(1.1) !important;
  }
  
  /* Make icon visible */
  .poster-cardn .poster-deleten svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    color: #fff !important;
    fill: currentColor !important;
  }