/**
 * Cineverse Modular Stylesheet: Homepage & Landing
 * Loaded conditionally on is_front_page() || is_home()
 * Uploaded from Home PC 6-14-2026 1:41am
 */

/*
-----------------
#Section Featured Hero Module #hp-hero
-----------------
*/

/* --- Desktop / General Styles (Keep outside media queries) --- */
section#hp-hero {
  background-color: var(--white-to-black-50);
}

.cs-wrap {
  margin: 0 auto;
  max-width: 1300px;
}

#hp-hero a.cs-tile-card-anchor:hover {
  text-decoration: underline 2px var(--cs-brand);
}

#hp-hero h2.cs-tile-card-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--cs-brand);
  text-decoration-thickness: 2px;
}

#hp-hero h3.cs-tile-card-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--cs-brand);
  text-decoration-thickness: 2px;
}

#hp-hero ul.cs-tile-card-grid {
  display: grid;
  min-height: 530px;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}

/* --- Consolidated Mobile Styles --- */
@media (max-width: 767px) {

  /* 1. Reset the section padding */
  section#hp-hero {
    padding-top: 0 !important;
  }

  /* 2. THE GRID: Pull it out to touch the screen edges */
  #hp-hero ul.cs-tile-card-grid {
    display: flex;
    flex-direction: column;
    width: 100vw !important;
    /* Force to full screen width */
    margin-left: calc(var(--margin-site, 21px) * -1) !important;
    /* Pull left */
    gap: 1.5rem;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* 3. HERO TILE (Tile 1): Naturally fills the 100vw grid */
  #hp-hero ul.cs-tile-card-grid li:first-child {
    width: 100% !important;
    height: 320px !important;
    border-radius: 0 !important;
    position: relative;
  }

  #hp-hero ul.cs-tile-card-grid li:first-child article,
  #hp-hero ul.cs-tile-card-grid li:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
  }

  /* Featured Text Overlay */
  #hp-hero ul.cs-tile-card-grid li:first-child .cs-tile-card-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
  }

  #hp-hero ul.cs-tile-card-grid li:first-child .cs-tile-card-title,
  #hp-hero ul.cs-tile-card-grid li:first-child .cs-tile-card-title a {
    color: #ffffff !important;
    text-align: left;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0;
  }

  /* 4. SECONDARY TILES (Tiles 2-4): Just add margin back */
  #hp-hero ul.cs-tile-card-grid li:not(:first-child) {
    margin: 0 1rem !important;
    /* This creates the 'small gap' you want */
    width: auto !important;
    display: block;
  }

  #hp-hero ul.cs-tile-card-grid li:not(:first-child) article {
    border-radius: 8px;
    overflow: hidden;
  }
}

/* Secondary Hero Tiles */


/*
 -----------------
#Section Homepage Rants #hp-rants
 -----------------
*/

#hp-rants a.cs-tile-card-anchor:hover {
  text-decoration: underline 2px var(--cinesist-red);
}

#hp-rants .cs-tile-card-details {
  margin-block-end: 0;
  border-radius: 8px;
}

#hp-rants .cs-tile-card-details .tile-card-date,
#hp-rants .cs-tile-card-details .tile-card-byline {
  font-size: 0.8rem;
}

#hp-rants .cs-tile-card-details .tile-card-byline a {
  color: var(--cinesist-red);
  font-weight: 700;
  text-decoration: none;
}

#hp-rants .cs-tile-card-details .tile-card-byline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--cinesist-red);
  text-decoration-thickness: 2px;
}

/* 6 Tile Grid */
#hp-rants ul.cs-tile-card-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: none;
  gap: 1rem;
}

#hp-rants ul.cs-tile-card-grid li:nth-child(1) {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

#hp-rants ul.cs-tile-card-grid li:nth-child(2) {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}

#hp-rants ul.cs-tile-card-grid li:nth-child(3) {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}

#hp-rants ul.cs-tile-card-grid li:nth-child(4) {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
}

#hp-rants .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  margin-bottom: 0;
}

#hp-rants h3.cs-tile-card-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--cinesist-red);
  text-decoration-thickness: 2px;
}

/* --- Consolidated Mobile Styles --- */
@media (max-width: 767px) {

  /* 1. Make the wrapper a flex column so we can reorder children */
  #hp-rants .cs-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. Header Styling */
  #hp-rants .cs-section-header {
    margin-bottom: 2rem;
    padding: 0 1rem;
    order: 1;
    /* Keep title at top */
  }

  #hp-rants .cs-tile-card-headline {
    font-size: 1.8rem;
    text-align: center;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  #hp-rants .cs-tile-card-tagline {
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.8;
  }

  /* 3. Hide the original anchor in the header on mobile */
  #hp-rants .cs-section-head .cs-tile-card-anchor {
    display: none !important;
  }

  /* 4. Grid to 1 Column Stack */
  #hp-rants .cs-section-inner {
    order: 2;
    /* Grid comes second */
  }

  #hp-rants ul.cs-tile-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
    width: 100% !important;
  }

  #hp-rants ul.cs-tile-card-grid li {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 5. Style the "Get More Rants" button at the bottom */
  #hp-rants .get-more-mobile-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
    padding: 0 1rem;
  }

  #hp-rants .get-more-mobile-wrap a {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--cs-brand);
    color: var(--cs-text-primary);
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
}

/*
 -----------------
#Section Homepage Reviews #hp-reviews
 -----------------
*/

#hp-reviews a.cs-tile-card-anchor:hover {
  text-decoration: underline 2px var(--cinesist-gold);
}

/* 6 Tile Grid */
#hp-reviews ul.cs-tile-card-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: none;
  gap: 1rem;
}

#hp-reviews ul.cs-tile-card-grid li:nth-child(1) {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

#hp-reviews ul.cs-tile-card-grid li:nth-child(2) {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}

#hp-reviews ul.cs-tile-card-grid li:nth-child(3) {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}

#hp-reviews ul.cs-tile-card-grid li:nth-child(4) {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
}

#hp-reviews .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  margin-bottom: 0;
}

#hp-reviews .cs-tile-card>a {
  display: block;
  position: relative;
  width: 100%;
  /* This forces the tall 'video' look regardless of the image's original shape */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background-color: #000;
  /* Placeholder color while loading */
}

#hp-reviews .cs-tile-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 3. Ensure the list items don't add weird spacing */
#hp-reviews .cs-tile-card-item {
  list-style: none;
}

#hp-reviews article.cs-tile-card.reviews {
  aspect-ratio: 2 / 3;
  position: relative;
}

#hp-reviews h3.cs-tile-card-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--cinesist-gold);
  text-decoration-thickness: 2px;
}

#hp-reviews .cs-tile-card-details .tile-card-date,
#hp-reviews .cs-tile-card-details .tile-card-byline {
  font-size: 0.8rem;
}

#hp-reviews .cs-tile-card-details .tile-card-byline a {
  color: var(--cinesist-gold);
  font-weight: 700;
  text-decoration: none;
}

#hp-reviews .cs-tile-card-details .tile-card-byline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--cinesist-gold);
  text-decoration-thickness: 2px;
}

/* --- Consolidated Mobile Styles --- */
@media (max-width: 767px) {

  /* Reset the parent grid so it doesn't have tiny columns */
  #hp-reviews .cs-wrap {
    display: block !important;
    /* Switch from grid to block */
    width: 100% !important;
  }

  /* Now 'width: 100%' will actually work on the child */
  #hp-reviews .cs-section-inner {
    width: 100% !important;
    display: block !important;
  }

  /* 1. Header Styling (Same as Rants) */
  #hp-reviews .cs-tile-card-headline {
    font-size: 1.8rem;
    text-align: center;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  #hp-reviews .cs-tile-card-tagline {
    text-align: center;
    padding: 0 2rem;
    margin-bottom: 2rem;
  }

  /* Add space between the header/divider and the content */
  #hp-reviews .cs-section-header {
    margin-bottom: 2.5rem !important;
  }

  /* Optional: If the divider line specifically needs space */
  #hp-reviews .cinesist-border-gold {
    margin-bottom: 2rem !important;
  }

  /* 2. Grid to 1 Column Stack */
  #hp-reviews ul.cs-tile-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
    width: 100% !important;
  }

  #hp-reviews ul.cs-tile-card-grid li {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 3. Style the Get More Wrapper */
  #hp-reviews .get-more-mobile-wrap {
    display: flex !important;
    justify-content: center !important;
    margin-top: 2.5rem !important;
  }

  #hp-reviews .get-more-mobile-wrap a {
    display: inline-block !important;
    padding: 12px 30px !important;
    background-color: var(--cs-brand) !important;
    color: #fff !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    text-transform: uppercase;
  }
}

/*
 -----------------
#Section Homepage Predictions #hp-predictions
 -----------------
*/

#hp-predictions a.cs-tile-card-anchor:hover {
  text-decoration: underline 2px var(--cinesist-pink);
}

/* 6 Tile Grid */
#hp-predictions ul.cs-tile-card-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: none;
  gap: 2rem;
}

#hp-predictions ul.cs-tile-card-grid li {
  grid-column: span 1;
  grid-row: 1;
}

#hp-predictions ul.cs-tile-card-grid>li.cs-tile-card-item .cs-tile-card {
  aspect-ratio: 1/1 !important;
}

#hp-predictions .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  margin-bottom: 0;
}

#hp-predictions .cs-tile-card>a {
  display: block;
  position: relative;
  width: 100%;
  /* This forces the tall 'video' look regardless of the image's original shape */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background-color: #000;
  /* Placeholder color while loading */
}

/* Placing our button on the trailer title */
article.cs-tile-card.predictions {
  position: relative;
}

/* Position the button in the middle */
button.cs-tile-card-play.predictions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Perfectly offsets the button's own size */

  /* 3. Style and Opacity */
  opacity: 0.7;
  z-index: 10;

  /* Optional: Make it look like a circular play button */
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover effect to make it pop */
button.cs-tile-card-play.predictions:hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

#hp-predictions .cs-tile-card-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  display: block;
}

#hp-predictions .cs-tile-card-item {
  list-style: none;
}

#hp-predictions article.cs-tile-card.reviews {
  aspect-ratio: 2 / 3;
  position: relative;
}

#hp-predictions h3.cs-tile-card-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-pink-500);
  text-decoration-thickness: 2px;
}

#hp-predictions .cs-tile-card-details .tile-card-date,
#hp-predictions .cs-tile-card-details .tile-card-byline {
  font-size: 0.8rem;
}

#hp-predictions .cs-tile-card-details .tile-card-byline a {
  color: var(--color-pink-500);
  font-weight: 700;
  text-decoration: none;
}

#hp-predictions .cs-tile-card-details .tile-card-byline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-pink-500);
  text-decoration-thickness: 2px;
}

/*
 -----------------
#Section Homepage News #hp-news
 -----------------
*/

#hp-news a.cs-tile-card-anchor:hover {
  text-decoration: underline 2px var(--cinesist-cyan);
}

#hp-news .cs-tile-card-details {
  margin-block-end: 0;
  border-radius: 8px;
}

#hp-news .cs-tile-card-details .tile-card-date,
#hp-news .cs-tile-card-details .tile-card-byline {
  font-size: 0.8rem;
}

#hp-news .cs-tile-card-details .tile-card-byline a {
  color: var(--cinesist-cyan);
  font-weight: 700;
  text-decoration: none;
}

#hp-news .cs-tile-card-details .tile-card-byline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--cinesist-cyan);
  text-decoration-thickness: 2px;
}

/* 6 Tile Grid */
#hp-news ul.cs-tile-card-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: none;
  gap: 1rem;
}

#hp-news ul.cs-tile-card-grid li:nth-child(1) {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

#hp-news ul.cs-tile-card-grid li:nth-child(2) {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}

#hp-news ul.cs-tile-card-grid li:nth-child(3) {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}

#hp-news ul.cs-tile-card-grid li:nth-child(4) {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
}

#hp-news .cs-tile-card-grid>.cs-tile-card-item .cs-tile-card-title {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  margin-bottom: 0;
}

#hp-news h3.cs-tile-card-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--cinesist-cyan);
  text-decoration-thickness: 2px;
}

/* THE TILE GRID COMPONENT */
.cs-tile-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /* Mobile: 1 Col */
  gap: 1.5rem;
  /* Standardizing your gap */
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

/* TABLET: 2 COLUMNS */
@media (min-width: 768px) {
  .cs-tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* DESKTOP: 3 COLUMNS */
@media (min-width: 1024px) {
  .cs-tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* THE CARD (The Article) */
.card-tile {
  /* Pure decoration only */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-tile {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  /* round-edge-2 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* shadow-sm */
  transition: transform 0.3s ease;
  /* cs-zoom base */
}

.card-tile:hover {
  transform: scale(1.02);
  /* cs-zoom effect */
}

@media (max-width: 1024px) {

  /* Mobilize Hero Grid */
  .cs-tile-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }

  .cs-tile-grid>li {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

.largeTile a:hover {
  text-decoration: 3px solid underline;
  text-decoration-color: var(--brand-purple);
  color: unset;
}

.smallTile a:hover,
.cs-hero__grid-pub-info a:hover {
  text-decoration: 2px solid underline;
  text-decoration-color: var(--brand-purple);
  color: unset;
}

/* 1. The Parent Grid (12-Column Subgrid) */
.cs-tile-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  grid-template-rows: repeat(2, minmax(180px, 1fr)) !important;
  grid-template-areas: none !important;
  align-items: stretch;
}

/* 2. Reset the Tiles */
.cs-tile-grid>.card-tile {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  /* Force clipping for background zoom on side tiles */
  isolation: isolate;
  background: #000;
}

/* 3. The 2-1-2 Placement (12-Column Coordinate Map) */
/* Large Middle Tile (Anchor for Peeking Fox) */
.cs-tile-grid>*:nth-child(1) {
  grid-column: 4 / span 6 !important;
  grid-row: 1 / span 2 !important;
  aspect-ratio: auto !important;
  z-index: 1;
  overflow: hidden !important;
  /* CRITICAL: Allow peeking fox to hang outside the tile! */
}

/* Left Stacked Cards */
.cs-tile-grid>*:nth-child(2) {
  grid-column: 1 / span 3 !important;
  grid-row: 1 !important;
}

.cs-tile-grid>*:nth-child(3) {
  grid-column: 1 / span 3 !important;
  grid-row: 2 !important;
}

/* Right Stacked Cards */
.cs-tile-grid>*:nth-child(4) {
  grid-column: 10 / span 3 !important;
  grid-row: 1 !important;
}

.cs-tile-grid>*:nth-child(5) {
  grid-column: 10 / span 3 !important;
  grid-row: 2 !important;
}

.cs-tile-grid>*:nth-child(n + 2) {
  z-index: 1;
  overflow: hidden !important;
}

/* 4. Background Image & Clipping Wrapper */
.cs-tile-grid>.card-tile>a {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  display: block;
  z-index: 30;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- HERO GRID COMPONENT --- */

.cs-tile-grid {
  display: grid;
  gap: 20px;
  width: 100%;
  /* Default (Mobile): 1 column */
  grid-template-columns: 1fr;
  height: auto;
}

/* DESKTOP (1024px+) */
@media (min-width: 1024px) {
  .cs-tile-grid {
    grid-template-columns: repeat(3, 1fr);
    /* Define 2 rows that equal 530px exactly */
    grid-template-rows: repeat(2, calc((530px - 20px) / 2));
    height: 530px;
  }

  /* THE FEATURE CARD (Large) */
  .cs-tile-grid .card-tile:first-child {
    grid-column: span 2;
    grid-row: span 2;
    /* Spans both rows for full 530px */
  }

  /* THE OTHER 4 CARDS (Small) */
  .cs-tile-grid .card-tile:not(:first-child) {
    grid-column: span 1;
    grid-row: span 1;
    /* These will stack 2x2 in the 3rd column */
    min-height: 0;
    /* Prevents overflow */
  }
}

/* TABLET (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .cs-tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-tile-grid .card-tile:first-child {
    grid-column: span 2;
    /* Big card on top */
    height: 400px;
    /* Specific height for tablet hero */
  }

  .cs-tile-grid .card-tile:not(:first-child) {
    grid-column: span 1;
    /* 2x2 grid below the hero */
    height: 250px;
  }
}

/* CARDS INTERNAL STRETCH */
.card-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Fill the grid area */
  width: 100%;
}

.card-tile:hover .card-image {
  transform: scale(1.08);
}

/* 6. Details Card & Typography Styling */
.card-details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
  color: #fff;
  z-index: 35 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  pointer-events: none;
}

.card-details * {
  pointer-events: auto;
}

.card-tile-title {
  margin: 0.75rem 0;
  color: #fff !important;
  font-weight: 800;
  line-height: 1.1;
}

.card-tile:nth-child(1) .card-tile-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.card-tile:nth-child(n + 2) .card-tile-title {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
}

/**
 * LORE NEXUS PURIFIED TITLE LOGIC 
 * (Selective Visibility for Large vs Small Tiles)
 */

/* 1. Hide both by default within the tile grid */
.cs-tile-grid .largeTile,
.cs-tile-grid .smallTile {
  display: none;
}

/* 2. Lead Post (Tile 1): Only show H2 */
.cs-tile-grid> :nth-child(1) .largeTile {
  display: -webkit-box;
  /* Restores line-clamp flex behavior */
}

/* 3. Side Posts (Tile 2-5): Only show H3 */
.cs-tile-grid> :nth-child(n + 2) .smallTile {
  display: -webkit-box;
  /* Restores line-clamp flex behavior */
}

/* --- TITLE HOVER UNDERLINE (Parent Trigger) --- */

/* 1. Target the Large Tile on Card Hover */
.card-tile:hover .largeTile {
  text-decoration-line: underline !important;
  text-decoration-thickness: 3px !important;
  text-decoration-style: solid !important;
  text-decoration-color: var(--cs-brand, #a020f0) !important;
  cursor: pointer;
}

/* 2. Target the Small Tile on Card Hover */
.card-tile:hover .smallTile {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-decoration-style: solid !important;
  text-decoration-color: var(--cs-brand, #a020f0) !important;
  cursor: pointer;
}

.card-summary {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.9;
  max-width: 600px;
  margin-bottom: 1rem;
}

/* --- Arkahna Hero Grid Scrollytelling Animation --- */

/* Ensure the tile container allows the head to peek over the top boundary */
.gb-loop-item.card-tile {
  overflow: visible !important;
  position: relative;
  z-index: 35;
}

/* Initial state of the character image (Overriding Gutenberg/Tailwind positioning & sizing conflicts) */
img#arkahna-hp-hero {
  position: absolute !important;
  top: auto !important;
  bottom: 50px !important;
  right: 20% !important;
  width: auto !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 15 !important;
  /* CRITICAL: Stacks above The Wire ground (z-index: 10) but behind hero tile (z-index: 35) */
  transform: translateY(120px) scale(0.95) !important;
  clip-path: none !important;
  transition: transform 1.8s cubic-bezier(0.45, 0, 0.55, 1) !important;
  will-change: transform;
  pointer-events: none !important;
  transform-origin: bottom center !important;
}

/* Hero Section Arkahna Peeking Animation */
.arkahna-peeking {
  pointer-events: none;
  filter: drop-shadow(0 0 0px rgba(160, 32, 240, 0));
  transition:
    transform 1.5s ease-in-out,
    filter 1.2s ease !important;
}

.cs-tile-grid .gb-loop-item.card-tile:hover .arkahna-peeking {
  transform: translateY(-130px) !important;
  filter: drop-shadow(0 0 20px rgba(160, 32, 240, 0.8)) !important;
  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    filter 0.3s ease !important;
}

.cs-tile-grid .overlay-holder {
  overflow: visible !important;
}

/* 3. Hover state for the "Peek Up" effect */
.gb-loop-item.card-tile:hover img#arkahna-hp-hero,
.gb-loop-item.card-tile.group\/main:hover img#arkahna-hp-hero {
  /* Pop up and scale slightly */
  transform: translateY(-10px) scale(1.1) !important;

  /* PEEK UP SPEED: snappier but deliberate (0.9s) */
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Hide Arkahna on all tiles EXCEPT the first one */
.card-tile:nth-child(n + 2) .arkahna-peeking {
  display: none !important;
}

/* --- THE CHARACTER COMPONENT --- */

.cs-hero-character {
  /* POSITIONING */
  position: absolute !important;
  bottom: 0;
  /* Align to the bottom of the card */
  right: -20px;
  z-index: 15 !important;
  pointer-events: none;
  /* Content behind it stays clickable */

  /* SIZING */
  width: 150px;
  /* Equivalent to w-32 */
  height: auto;
  object-fit: contain;
  transform-origin: bottom center;

  /* THE GLOW (Drop Shadow) */
  /* Using variables so it's easy to change the brand color later */
  --glow-color: rgba(209, 2, 209, 0.4);
  filter: drop-shadow(-10px 10px 15px var(--glow-color));
}

/* DARK MODE OVERRIDE */
.dark .cs-hero-character {
  --glow-color: rgba(255, 85, 0, 0.4);
}

/* RESPONSIVE: TABLET/DESKTOP */
@media (min-width: 768px) {
  .cs-hero-character {
    width: 250px;
    /* Equivalent to md:w-50 */
    top: 64px;
    /* md:top-16 */
    right: -80px;
    /* md:-right-20 */
  }
}

/* 4. Optional: The "Floor" mask to hide feet if they poke out the bottom */
.gb-loop-item.card-tile::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  /* Adjust to match page background if feet are visible below tile */
  pointer-events: none;
  z-index: 5;
}

/* 8. Mobilize Hero Grid (Max 1024px) */
@media (max-width: 1024px) {
  .cs-tile-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }

  .cs-tile-grid>.card-tile {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* Peeking Character fix for Tablet/Mobile */
  .arkahna-peeking {
    display: none !important;
    /* Hide peeking on touch devices to avoid layout shift */
  }
}

/* Extra Small Mobile (Max 767px): Cinematic Hero Proportions */
@media (max-width: 767px) {

  /* Make the main hero tile bigger and more prominent on mobile */
  .cs-tile-grid>.card-tile:nth-child(1) {
    aspect-ratio: 4 / 3 !important;
    /* Taller, bigger main tile! */
  }

  /* Make the other 4 tiles a little smaller/sleeker */
  .cs-tile-grid>.card-tile:nth-child(n + 2) {
    aspect-ratio: 2 / 1 !important;
    /* Sleeker, smaller secondary tiles! */
  }

  /* Ensure the hero container itself doesn't have redundant outer margins scrunching it */
  .cs-hp-hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/*

/*
-----------------
#the-wire The Wire Module
-----------------
*/

/* --- THE WIRE SPECIFIC LAYOUT --- */

/* Mobile (Default) */
#the-wire>.cs-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

#wire-feed {
  grid-column: 1 / -1;
  order: 1;
}

#sidebars-wrapper {
  grid-column: 1 / -1;
  order: 2;
}

/* Desktop */
@media (min-width: 1024px) {
  #the-wire>.cs-wrap {
    grid-template-columns: repeat(12, 1fr);
  }

  #wire-feed {
    grid-column: span 8;
  }

  #sidebars-wrapper {
    grid-column: span 4;
  }
}

/**
 * THE WIRE - FEED CARD PORT (Corrected for [data-theme])
 */

/* Main Card Container (Light/Default) */
.wire-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  gap: 1.5rem;
}

/* Dark Mode Overrides (Using [data-theme="dark"]) */
[data-theme="dark"] .wire-card {
  background-color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hover Effects */
.wire-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .wire-card:hover {
  border-color: rgba(217, 70, 239, 0.5);
  /* Fuchsia hover border */
}

/* 4. Desktop Layout */
@media (min-width: 640px) {
  .wire-card {
    flex-direction: row;
    align-items: center;
  }
}

/* 5. Image & Title Logic */
.wire-card-image-wrapper {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
}

@media (min-width: 640px) {
  .wire-card-image-wrapper {
    width: 240px;
    aspect-ratio: 4 / 3;
  }
}

.wire-card:hover .wire-card-image-wrapper img {
  transform: scale(1.1);
  transition: transform 0.7s ease;
}

.wire-card-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  color: #111827;
  transition: color 0.3s;
}

[data-theme="dark"] .wire-card-title {
  color: #ffffff;
}

/**
 * WIRE HOVER HIGHLIGHT
 * Replaces node-cyan-blue-highlight
 */

.wire-hover-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  /* w-1 */
  z-index: 20;
  background-color: var(--color-cyan-500);
  /* Cyan 500 default */
  opacity: 0;
  /* opacity-0 */
  transition: all 0.3s ease;
  /* transition-all duration-300 */
}

/* 1. Show on Card Hover (Triggered by parent .group) */
.wire-card:hover .wire-hover-highlight {
  opacity: 1;
  background-color: var(--color-cyan-600);
  /* Darker Cyan on hover */
}

/* 2. Theme Specific Adjustments (If needed) */
[data-theme="dark"] .wire-hover-highlight {
  /* You can keep it cyan or adjust for dark mode glow here */
  box-shadow: 0 0 10px var(--color-cyan-500);
}

/**
 * CINEFOX POP (Background Floating Element)
 * Replaces .gb-media-d38dbbef
 */

.cinefox-pop {
  position: absolute;
  top: 0;
  left: 55%;
  /* Replacing left-100 logic for consistent overlap */
  width: auto;
  height: auto;
  opacity: 0.1;
  /* opacity-20 but adjusted for better blending */
  pointer-events: none;
  z-index: 0;

  /* Initial State */
  transform: translateY(1rem);
  /* translate-y-4 */
  transition:
    transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 0.5s ease;
  /* duration-500 */
}

/* Animation on Card Hover */
.wire-card:hover .cinefox-pop {
  transform: translateY(-10rem);
  /* group-hover:-translate-y-40 */
  opacity: 0.25;
  /* Slight pop in visibility on hover */
}

/* Theme Adjustment (Dark Mode pop) */
[data-theme="dark"] .cinefox-pop {
  filter: brightness(0.8) contrast(1.2);
}

/**
 * WIRE CARD IMAGE WRAPPER
 * Replaces .wire-card-image-wrapper and internal post-image logic
 */

/* 1. The Wrapper (Container) */
.wire-card-image-wrapper {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  /* Default mobile aspect ratio */
  border-radius: 0.5rem;
  /* rounded-lg */
  overflow: hidden;
  z-index: 5;
}

/* Desktop sizing & ratio */
@media (min-width: 768px) {
  .wire-card-image-wrapper {
    width: 280px;
    /* Fixed width for consistent horizontal cards */
    aspect-ratio: 4 / 3;
    /* md:aspect-[4/3] */
  }
}

/* 2. The Post Image */
.wire-card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-cover */
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  /* duration-700 */
}

/* 3. Hover Effect: Smooth Zoom */
.wire-card:hover .wire-card-image-wrapper img {
  transform: scale(1.1);
  /* group-hover:scale-110 */
}

/**
 * WIRE CARD THUMBNAIL
 * Replaces .gb-media-6a722a6f
 */

.wire-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Using 0.8s as per your current computed style for a slightly more cinematic feel */
  transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Hover Scaling (Triggered by parent) */
.wire-card:hover .wire-card-thumb {
  transform: scale(1.1);
}

/**
 * WIRE CARD CONTENT PURIFICATION
 */

/* Details Wrapper (Replaces gb-element-4d955b7a) */
.wire-card-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  padding: 0.25rem 0;
  /* py-1 */
  z-index: 10;
  order: 2;
}

/* Taxonomy & Time Wrapper */
.wire-tax-time {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* gap-3 */
  margin-bottom: 0.75rem;
  /* mb-3 */
}

/* Wire Card Title (Purified & Underline Logic) */
.wire-card-title {
  font-family: var(--font-sans);
  font-size: 1.5rem !important;
  /* text-2xl */
  font-weight: 900;
  /* font-black */
  line-height: 1.25;
  /* leading-snug */
  margin-bottom: 0 !important;
  /* mb-2 */
  color: #111827;
  /* text-gray-900 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: text-decoration-color 0.3s ease;
  text-decoration: none;
}

/* LIGHT MODE: Cyan 500 Underline on Hover */
.wire-card:hover .wire-card-title {
  text-decoration: underline;
  color: inherit;
  text-decoration-color: var(--color-cyan-500) !important;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* DARK MODE: White Text + Cyan 600 Underline on Hover */
[data-theme="dark"] .wire-card-title {
  color: #ffffff;
}

[data-theme="dark"] .wire-card:hover .wire-card-title {
  text-decoration-color: var(--color-cyan-600) !important;
}

/* Wire Card Excerpt */
.wire-card-excerpt {
  font-family: var(--font-inter);
  font-size: 0.875rem;
  /* text-sm */
  color: #4b5563;
  /* text-gray-600 */
  margin-bottom: 1rem;
  /* mb-4 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

[data-theme="dark"] .wire-card-excerpt {
  color: #9ca3af;
  /* dark:text-gray-400 */
}

/* Remove fixed margins that fight flex spacing */
.wire-tax-time,
.wire-card-title,
.wire-card-excerpt {
  margin-top: 0;
  margin-bottom: 0.5rem;
  /* Consistent small gap */
}

/* Pin Publisher to the Bottom */
.card-pub {
  margin-top: auto !important;
  /* Forces this specific element to the bottom */
  padding-top: 1rem;
}

/* Ensure our Line-Clamp */
.wire-card-title,
.wire-card-excerpt {
  padding: 0 !important;
  /* Never use padding on clamped elements */
  box-sizing: content-box;
}

/*
-----------------
#cinescore-banner The Cinescore Banner Module
-----------------
*/

/* Banner Section ID */
#cinescore-banner {
  position: relative;
  overflow: hidden;
  background: radial-gradient(var(--flex-snarkive-50) 20%, var(--contrast-2) 100%);
  z-index: 20;
}

/* THE BACKGROUND GLOW EFFECTS */
.banner-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: var(--cs-brand-glow, rgba(209, 2, 209, 0.2));
  filter: blur(150px);
  pointer-events: none;
}

.banner-pulse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cs-brand), transparent 60%), transparent);
  mix-blend-mode: screen;
  filter: blur(10px);
  pointer-events: none;
  animation: pulse 4s infinite ease-in-out;
}

/* THE CONTENT WRAP */
#cinescore-banner .cs-wrap {
  /* Uses our global 1300px centered grid */
  align-items: start;
  row-gap: 2rem;
  z-index: 10;
}

/* ANIMATION */
@keyframes pulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.8;
  }
}

/* THE HEADER (Row 1 - Centered) */
.banner-header {
  grid-column: 1 / -1 !important;
  /* Spans all 12 */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* THE BADGE GRID (Row 2 Badge Clusters - Centered) */
.banner-badges {
  grid-column: 1 / -1 !important;
  /* Spans all 12 */
  display: grid;
  gap: 1.5rem;
  width: 100%;
  grid-template-columns: repeat(5, 1fr) !important;
}

/* RESPONSIVE: STACK ON MOBILE */
@media (max-width: 1024px) {

  .banner-header,
  .banner-badges {
    grid-column: 1 / -1 !important;
    /* Full width */
    justify-content: center;
    /* Center text/badges on mobile */
    text-align: center;
  }

  .banner-badges {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .banner-badges {
    grid-template-columns: 1fr !important;
  }

  .banner-badges .cs-badge {
    aspect-ratio: auto !important;
    padding: 1.25rem 1rem !important;
  }
}

.cs-cinescore-banner {
  padding: 2rem 0;
  background: linear-gradient(45deg, var(--cs-brand-20, var(--cs-brand-500)));
  border-top: 1px solid var(--cs-brand-300);
  border-bottom: 1px solid var(--cs-brand-300);
  overflow: hidden;
}

/* Banner Centered Orb Glow */
.cinescore-banner-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(150px);
  pointer-events: none;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: color-mix(in srgb, var(--cs-brand-100), transparent 40%);
}

/* Dark Mode (Manual Attribute Toggle) */
[data-theme="dark"] .cinescore-banner-glow {
  background-color: color-mix(in srgb, var(--cs-brand-400), transparent 60%);
}

/* Dark Mode (System Preference) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="default"]) .cinescore-banner-glow {
    background-color: color-mix(in srgb, var(--cs-brand-400), transparent 60%);
  }
}

.cinescore-banner-pulse-grad {
  mix-blend-mode: screen;
  pointer-events: none;
}

.cinescore-banner-wrapper {
  max-width: var(--cs-width-lg);
  margin: 0 auto;
  text-align: center;
}

.cs-badge {
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cs-badge:hover {
  /* background: rgba(255,255,255,0.05); */
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.1);
}

/* Fix: Restores badges to squares with rounded corners */
.banner-badges .cs-badge {
  border-radius: 0.75rem !important;
  /* Adjust 1rem to 12px or 16px based on preference */
  aspect-ratio: 1 / 1;
  /* Optional: Ensures they stay perfectly square */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cinescore-banner-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

/* Badge Tiers */
.cs-badge.is-legendary {
  border-color: var(--color-yellow-500);
}

.cs-badge.is-epic {
  border-color: var(--color-blue-500);
}

.cs-badge.is-basic {
  border-color: var(--color-green-500);
}

.cs-badge.is-trash {
  border-color: var(--color-gray-500);
}

.cs-badge.is-burn {
  border-color: var(--color-red-500);
}

.cs-badge.is-legendary:hover {
  border-color: var(--color-yellow-500);
  box-shadow: 10px 10px 50px 1px var(--color-yellow-500);
  background-color: var(--color-yellow-400);
}

.cs-badge.is-epic:hover {
  border-color: var(--color-blue-500);
  box-shadow: 10 10 50px 1px var(--color-blue-500);
  background-color: var(--color-blue-400);
}

.cs-badge.is-basic:hover {
  border-color: var(--color-green-500);
  box-shadow: 10 10 50px 1px var(--color-green-500);
  background-color: var(--color-green-400);
}

.cs-badge.is-trash:hover {
  border-color: var(--color-gray-500);
  box-shadow: 10px 10px 50px 1px var(--color-gray-500);
  background-color: var(--color-gray-400);
}

.cs-badge.is-burn:hover {
  border-color: var(--color-red-500);
  box-shadow: 10px 10px 50px 1px var(--color-red-500);
  background: var(--color-red-500);
}

.banner-btn-wrapper {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 2rem 0;
  justify-self: stretch;
}

@media (min-width: 1024px) {
  .banner-btn-wrapper {
    grid-column: 6 / span 2 !important;
  }
}

@media (max-width: 1023px) {
  .banner-btn-wrapper {
    grid-column: 1 / -1 !important;
    justify-self: center;
  }
}

.banner-cta {
  padding: 1rem 1rem !important;
  background: var(--cs-brand);
  color: white;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.5rem !important;
  transition: all 0.3s ease;
  width: 100% !important;
  text-align: center;
}

/*
-----------------
5 - UI Elements (Buttons, Pills, Badges)
-----------------
*/

/* Hub Pill Styling */
.hub-pill {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 3px;
  color: #fff !important;
  transition:
    filter 0.2s ease,
    transform 0.1s ease;
  white-space: nowrap;
}

.hub-pill:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

.pill-red {
  background-color: var(--cinesist-red) !important;
}

.pill-blue {
  background-color: var(--cinesist-tv) !important;
}

.pill-green {
  background-color: var(--cinesist-gaming) !important;
}

.pill-gray {
  background-color: var(--cinesist-industry) !important;
}

/* Mobile Optimization */
@media (max-width: 1024px) {
  /* .cs-bottom-header,
  .cs-bottom-header-start, 
  .cs-bottom-header-end {
    display: none !important;
  } */

  .cinesist-intel-command-bar {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }

  .intel-stream-module,
  .hubs-nav-module {
    width: 100%;
    justify-content: center;
  }

  .hubs-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .editor-styles-wrapper .cs-master-grid__header-bottom {
    display: Flex;
  }
}

/* --- Cinesist Intel Stream: Fix for One-Line Ticker --- */
.cs-sub-nav-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-height: 3.5rem;
  /* Ensure a stable height */
}

.news-ticker-col {
  flex: 1 1 auto !important;
  /* Take up remaining space */
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
}

.cs-intel-stream-label {
  flex-shrink: 0;
  margin-right: 0;
  white-space: nowrap;
}

.cinesist-ticker-container {
  width: 100%;
  height: 1.5rem;
  /* Force a single line height */
  position: relative;
  overflow: hidden;
  flex-grow: 1;
}

.ticker-list {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.ticker-item {
  position: absolute !important;
  /* This is the key to one-line fades */
  top: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  /* Prevent text wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  /* Add "..." if title is too long */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out;
  display: block !important;
  /* Overwrite any block defaults */
}

.ticker-item.active {
  opacity: 1;
  visibility: visible;
}

/* --- Fix for Horizontal Hub Buttons --- */
.cs-hubs-nav-col {
  flex: 0 0 auto !important;
  /* Stay on the right */
  display: flex !important;
  justify-content: flex-end !important;
}

.cs-hubs-nav-col .wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  /* Force Horizontal */
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.cs-hubs-nav-col .wp-block-buttons {
  display: flex !important;
  flex-direction: row !important;
  /* Force buttons side-by-side */
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
}

/* Responsive: Stack only on mobile if necessary */
@media (max-width: 768px) {
  .cs-sub-nav-row {
    flex-direction: column !important;
    height: auto;
  }

  .cs-hubs-nav-col .wp-block-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- Cinesist Intel Stream Styling --- */
.cinesist-ticker-container {
  display: flex;
  align-items: center;
  background: var(--black-spy);
  width: 500px;
  color: var(--flex-text-title);
  height: 1.75rem;
  overflow: hidden;
  font-family: var(--font-sans);
}

.ticker-label {
  background: var(--cinesist-red);
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

.ticker-content {
  position: relative;
  flex-grow: 1;
  height: 100%;
}

.ticker-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
}

.ticker-item {
  position: absolute;
  top: 0;
  left: 0.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}

.ticker-item.active {
  opacity: 1;
  pointer-events: auto;
}

.ticker-item a {
  color: var(--body-fcolor);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.ticker-item a:hover {
  color: var(--body-fcolor);
  font-weight: 600;
  text-decoration: 2px underline;
  text-decoration-color: var(--brand-purple-90);
}

/* Sticky Header */
.sticky-title {
  line-height: var(--nav-height, inherit);
  font-size: 1rem;
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 600px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- Migrated from style.css (Lines 6296-6390) --- */

/*
--------------
 VOID SECTION & DATA COMPONENTS
--------------
*/

#the-void {
  background-blend-mode: screen;
  background-image: radial-gradient(var(--flex-snarkive-50) 20%, var(--contrast-2) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--flex-snarkive-90);
  border-bottom: 1px solid var(--flex-snarkive-90);
}

.void-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(150px);
  pointer-events: none;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: color-mix(in srgb, var(--cs-brand-100), transparent 40%);
}

.void-pulse-grad {
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Void Section Rumors */
.void-card-rumor-25 {
  border: 2px solid #6b7280;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
}

.void-card-rumor-50 {
  border: 4px solid var(--cinesist-gold);
  background: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      rgba(234, 179, 8, 0.1) 10px,
      rgba(234, 179, 8, 0.1) 20px);
}

.void-card-rumor-75 {
  border: 2px solid var(--brand-purple);
  box-shadow: 0 0 15px rgba(0, 102, 255, 0.4);
}

.void-card-rumor-100 {
  border: 2px solid var(--flex-legendary);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
  position: relative;
}

.void-card-rumor-100::after {
  content: "VERIFIED";
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--flex-legendary);
  color: white;
  font-size: 8px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  transform: rotate(15deg);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
}

/* ARKAHNA SUMMONING ANIMATION */

/* 1. Base Container Setup */
.arkahna-summoning-container {
  position: relative;
  display: inline-block;
  /* Or width/max-width */
  overflow: hidden;
  /* Keeps smoke inside the bounds */
  border-radius: 12px;
  /* Optional: adds a slight corner soften */
  line-height: 0;
  /* Prevents image bottom spacing */
}

/* 2. The Base Image */
.arkahna-image {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: screen;
  filter: drop-shadow(4px 4px 8px rgba(43, 214, 255, 0.8)) drop-shadow(8px 8px 24px rgba(196, 8, 240, 0.7));
  transition: filter 0.3s ease-in-out;
  animation: float 7s ease-in-out infinite;
  /* Optional: If she is on a dark background */
}

.arkahna-image:hover {
  filter: drop-shadow(0px 0px 60px rgba(0, 150, 255, 0.6));
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(1deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* THE VOID METER */
.void-meter {
  background-color: var(--cinesist-info);
  height: 100%;
  transition: width 0.8s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  /* Smooth loading feel */
  width: var(--void-width, 0%) !important;
}

/* THE INTRICATE CSS SMOKE EFFECT */

/* Define the base properties for all smoke wisps */
.smoke-effect {
  position: absolute;
  border-radius: 50%;
  /* Start spherical, blend via gradient */
  filter: blur(25px);
  /* Crucial: Softens the edges of the gradient */
  opacity: 0;
  pointer-events: none;
  /* Prevents the smoke from being clickable */
}

/* Create different smoke elements with different positions, sizes, and animations */

/* SMOKE 1: Subtle Left Hand Swirl */
.smoke-1 {
  position: absolute;
  width: 25%;
  height: 25%;
  background: radial-gradient(circle, rgba(255 105 180 / 94%) 0%, rgba(255, 255, 255, 0) 70%);
  top: 25%;
  left: 5%;
  animation: smoke_wisp_left 8s ease-in-out infinite;
  animation-delay: -2s;
  /* Starts at a different phase */
  z-index: 20;
}

/* SMOKE 2: Central Rune Pulse */
.smoke-2 {
  position: absolute;
  width: 20%;
  height: 20%;
  background: radial-gradient(circle, rgba(255 105 180 / 94%), rgb(255 120 190 / 88%) 85%);
  top: 35%;
  left: 40.5%;
  animation: smoke_pulse_center 10s ease-in-out infinite;
  border-radius: 50%;
  z-index: 99;
}

/* SMOKE 3: Subtle Right Hand Swirl (Opposite) */
.smoke-3 {
  position: absolute;
  width: 20%;
  height: 20%;
  background: radial-gradient(circle, rgba(255 105 180 / 94%) 0%, rgba(255, 255, 255, 0) 70%);
  top: 25%;
  right: 5%;
  animation: smoke_wisp_right 7s ease-in-out infinite;
  animation-delay: -4s;
  /* Starts at a different phase */
  z-index: 20;
}

/* INFINITE SMOKE KEYFRAMES */

/* Left Wisp: Drifts slightly up and right, fading in/out */
@keyframes smoke_wisp_left {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }

  20% {
    opacity: 0.5;
  }

  50% {
    transform: translate(15px, -15px) scale(1.1);
    opacity: 0.8;
  }

  80% {
    opacity: 0.3;
  }

  100% {
    transform: translate(25px, -25px) scale(0.9);
    opacity: 0;
  }
}

/* Right Wisp: Drifts slightly up and left (opposite), fading in/out */
@keyframes smoke_wisp_right {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }

  30% {
    opacity: 0.7;
  }

  60% {
    transform: translate(-10px, -10px) scale(1.05);
    opacity: 0.6;
  }

  90% {
    opacity: 0.2;
  }

  100% {
    transform: translate(-20px, -20px) scale(1);
    opacity: 0;
  }
}

/* Center Pulse: Pulsates in opacity and scale, no drift */
@keyframes smoke_pulse_center {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }

  50% {
    transform: scale(1.15);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 0.2;
  }
}

/* --- Cinesist HQ: Hero Grid Revamp --- */

/* 1. The Main Frame */
.hero-section[data-type="type-1"] {
  text-align: var(--alignment);
  margin-bottom: var(--margin-bottom, 0) !important;
}

.cs-homepage-hero-wrap {
  padding: 0.5rem 0;
  margin: 0 auto;
}

/* --- HEADING & TYPOGRAPHY STYLING --- */

/* Ensure links inside headings transition beautifully and show underline on hover */
.largeTile a,
.smallTile a {
  color: inherit !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.largeTile a:hover {
  text-decoration: 3px solid underline !important;
  text-decoration-color: var(--cs-brand, var(--flex-snarkive)) !important;
}

.smallTile a:hover {
  text-decoration: 2px solid underline !important;
  text-decoration-color: var(--cs-brand, var(--flex-snarkive)) !important;
}

/* All Category Link & Button Style */
.p-category {
  position: relative;
  z-index: 1;
  display: inline-flex;
  color: var(--cat-fcolor, inherit);
  background-color: var(--topic-accent, var(--cat-highlight));
  /* background: var(--cat-highlight-90); */
  padding: 0.25rem;
  border-radius: 0.25rem;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1;
  font-style: inherit;
}

/*
-----------------
8 - Blocks (GenerateBlocks, Core Blocks, Patterns)
-----------------
*/

/*
-----------------
9 - Archive (Category, Tag, Search Results)
-----------------
*/

/* ========================================= */
/* --- 26 - CinesistDB Landing Page --- */
/* 25. CinesistDB Landing Page Components */
.csdb-hero {
  position: relative;
  padding: 4rem 0;
  overflow: hidden;
}

.csdb-logo-wrapper img {
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(var(--cs-brand-rgb), 0.3));
}

.csdb-mission {
  font-size: 1.25rem;
  color: var(--flex-text-title);
  max-width: 800px;
  line-height: 1.6;
}

/* Slider Custom Styles */
.cs-slider-container {
  position: relative;
  width: 100%;
}

.cs-slider-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.cs-slider-item:hover {
  transform: translateY(-5px);
}

.cs-slider-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem 1rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  color: #fff;
  z-index: 2;
}

.cs-slider-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  display: inline-block;
  position: relative;
}

/* Hover Underline Animation */
.cs-hover-underline {
  position: relative;
  text-decoration: none;
}

.cs-hover-underline::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--cs-brand);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.cs-slider-item:hover .cs-hover-underline::after,
.cs-poster-card:hover .cs-hover-underline::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Poster Grid (Popular Right Now) */
.cs-poster-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1200px) {
  .cs-poster-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

.cs-poster-card {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--flex-gray-1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cs-poster-card:hover {
  box-shadow: 0 10px 30px rgba(var(--cs-brand-rgb), 0.4);
  transform: scale(1.05);
}

.cs-poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tactical HUD Banner (Operative Snapshot) */
.cs-operative-banner {
  background: linear-gradient(135deg, var(--brand-purple) 0%, #000 100%);
  border: 1px solid rgba(var(--cs-brand-rgb), 0.2);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}

.cs-operative-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cs-brand), transparent);
  animation: scanline 3s linear infinite;
}

@keyframes scanline {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    transform: translateY(400%);
    opacity: 0;
  }
}

.cs-hud-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--cs-brand);
  padding: 4px;
  background: #000;
}

.cs-hud-stats {
  display: flex;
  gap: 2rem;
  flex-grow: 1;
}

.cs-hud-stat {
  display: flex;
  flex-direction: column;
}

.cs-hud-stat-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--cs-brand);
  letter-spacing: 1px;
}

.cs-hud-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}

.cs-hud-xp-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.cs-hud-xp-progress {
  height: 100%;
  background: var(--cs-brand);
  width: 65%;
  /* Placeholder */
  box-shadow: 0 0 10px var(--cs-brand);
}

.cs-meta-badge {
  width: fit-content;
  /* Shrink background to text size */
  align-self: flex-start;
  /* Stop stretching in flex containers */
  display: inline-flex;
  /* Ensure it behaves like a badge */
  padding: 4px 12px;
  /* Adjust padding for a nice badge look */
  border-radius: 4px;
  /* Optional: round those corners */
  background-color: var(--cs-brand);
  color: #fff;
  font-weight: 700;
  text-transform: none;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  z-index: 2;
}

.cs-hover-brand-underline {
  position: relative;
  display: inline-block;
  color: #fff;
  transition: color 0.3s ease;
}

.cs-hover-brand-underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--cs-brand);
  transition: width 0.3s ease;
}

/* Hover triggers for Query Loops and Hero Tiles */
.gb-query-loop-item:hover .cs-hover-brand-underline::after,
.cs-zoom:hover .cs-hover-brand-underline::after,
.cs-hero__tile:hover .cs-hover-brand-underline::after {
  width: 100%;
}

/* Hero Overlay Styles */
.cs-db-hero__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  z-index: 1;
}

/* Database Section Titles */
.cs-db-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--cs-brand);
  padding-left: 1rem;
}

/* Now Streaming Toggle Styling */
.cs-db-filter-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.cs-db-filter-btn {
  background: var(--cs-bg-2);
  border: 1px solid var(--cs-border-color);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.3s ease;
}

.cs-db-filter-btn:hover,
.cs-db-filter-btn.is-active {
  background: var(--cs-brand);
  color: #fff;
  border-color: var(--cs-brand);
}

/* Slider Controls (Placeholders for implementation) */
.cs-db-slider-nav {
  display: flex;
  gap: 0.5rem;
}

.cs-db-slider-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cs-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cs-db-slider-arrow:hover {
  background: var(--cs-brand);
  color: #fff;
}

/* --- THE WIRE SECTION (CYBERNETIC GROUND & FOUNDATION) --- */
section#the-wire {
  position: relative;
  z-index: 10;
  /* margin-top: 0rem; */
  padding-top: 3rem;
  background: linear-gradient(to bottom,
      color-mix(in srgb, var(--cs-brand, var(--cs-brand-400)), transparent 88%),
      color-mix(in srgb, var(--cs-bg-2, #0a0a0a), transparent 40%) 40%,
      transparent 100%);
  border-top: 1px solid color-mix(in srgb, var(--cinesist-info, #00ddff), transparent 60%);
  box-shadow: inset 0 20px 40px -15px var(--cs-brand-800);
}

/* Glowing ground line beneath Arkahna's giant dragon feet */
section#the-wire::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  background: linear-gradient(to right,
      transparent,
      var(--cinesist-info, #00ddff),
      var(--cs-brand, #d102d1),
      transparent);
  filter: blur(1px);
  opacity: 0.8;
}

/* Responsive Layout for The Wire Section */

/* Desktop only: 12-column grid layout with 70/30 split */
@media (min-width: 1024px) {
  .gb-element-c147d7b9 {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    gap: 2rem !important;
  }

  #wire-feed {
    grid-column: span 8 / span 8 !important;
    /* 70% approx */
    width: 100% !important;
  }

  #sidebars-wrapper {
    grid-column: span 4 / span 4 !important;
    /* 30% approx */
    width: 100% !important;
    display: flex;
    flex-direction: column;
  }
}

/* Tablet (768px - 1023px): Stack sidebars-wrapper UNDER wire-feed */
@media (min-width: 768px) and (max-width: 1023px) {
  .gb-element-c147d7b9 {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  #wire-feed,
  #sidebars-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  #sidebars-wrapper {
    display: flex !important;
    margin-top: 2rem !important;
  }
}

/* Mobile (Max 767px): Hide sidebars-wrapper entirely & optimize horizontal padding */
@media (max-width: 767px) {
  section#the-wire {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .gb-element-c147d7b9 {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #wire-feed {
    width: 100% !important;
    max-width: 100% !important;
  }

  #sidebars-wrapper {
    display: none !important;
  }
}

/* --- The Lab Section --- */

/* Cinefox 3D Character Element */
.cinefox-lab-character {
  animation: character-breath 5s ease-in-out infinite;
  transform-origin: bottom center;
  /* Keeps feet grounded */
  will-change: transform;
  /* Buttery smooth 60fps movement */
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
  /* The "Pop" Shadow */
}

/* The original image styling to ensure the fox appears correctly on the character */
.cinefox-lab-character img {
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 2;
  /* Keeps the character above the foot shadow */
}

/* Cinefox Foot Shadow */
.cinefox-foot-shadow {
  animation: shadow-pulse 5s ease-in-out infinite;
  position: absolute;
  bottom: -30px;
  left: 80%;
  transform: translateX(-50%);
  /* Keeps it centered at the 80% mark */
  width: 140px;
  /* Adjust width to fit the character's feet */
  height: 25px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  filter: blur(12px);
  z-index: 1;
  pointer-events: none;
  /* So it doesn't block clicks */
}

/* The Breathing Animation */
@keyframes character-breath {

  0%,
  100% {
    /* Anchored at your 30px offset */
    transform: translate3d(30px, 0, 0) scale(1);
  }

  50% {
    /* Subtle 3px lift and 1.5% scale expansion */
    transform: translate3d(30px, -3px, 0) scale(1.015);
  }
}

/* The Synced Shadow Pulse */
@keyframes shadow-pulse {

  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.45;
  }

  50% {
    /* Shadow expands slightly as the character breathes in */
    transform: translateX(-50%) scale(1.05);
    opacity: 0.35;
  }
}

/* --- THE FORENSIC LAB (INTERROGATION ROOM) MOBILE RESET --- */
@media (max-width: 767px) {
  section.gb-element-interrogation-room-section {
    position: relative !important;
    padding-bottom: 5.5rem !important;
    /* Make room at the bottom for the link */
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  section.gb-element-interrogation-room-section .gb-element-ir-inner,
  section.gb-element-interrogation-room-section .gbp-section__inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Move More Reviews link to the absolute bottom of the section */
  .gb-element-ir-view-all {
    position: absolute !important;
    bottom: 1.5rem !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    z-index: 30 !important;
  }
}

/* Super Grid Level 3 Rule (ensures full-width stacking for elements inside wrapped grid containers) */
#the-lab>.cs-wrap>div,
#the-burnward>.cs-wrap>div,
#the-void>.cs-wrap>div {
  grid-column: 1 / -1 !important;
}

/* #the-void Edge Padding */
.void-inner {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (max-width: 767px) {
  .void-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* #the-burnward Edge Padding Reset (matches #the-lab's 1.25rem screen edge padding) */
@media (max-width: 767px) {
  section.gb-element-b0ecd88c {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  #the-burnward .gb-element-4c6da98f,
  #the-burnward .gb-element-4cb9b183,
  section.gb-element-b0ecd88c .gbp-section__inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

.wire-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Force Landscape/Horizontal Layout for Wire Cards across ALL viewports */
.wire-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.25rem !important;
  padding: 1rem !important;
  background: var(--flex-white-black);
  border: 1px solid var(--cinesist-border-color);
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.wire-card:is(:hover, :focus) {
  border-right-width: 0px;
  border-right-style: solid;
  border-top: 1px solid var(--cinesist-info);
  border-bottom: 1px solid var(--cinesist-info);
  border-left: 5px solid var(--cinesist-info);
  border-radius: 0.5rem;
}

.wire-card-image-wrapper {
  flex-shrink: 0 !important;
  width: 35% !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .wire-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1rem !important;
    gap: 1.25rem !important;
  }

  .wire-card-image-wrapper,
  .gb-element-32b94ba2 {
    width: 100% !important;
    max-height: none !important;
    min-height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .wire-card>.flex-grow,
  .wire-card>[class*="gb-element"],
  .gb-element-4d955b7a {
    width: 100% !important;
    max-height: none !important;
    min-height: auto !important;
    flex: 1 1 auto !important;
  }
}

.wire-card-title {
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--cs-text-primary);
}

.wire-card-excerpt {
  font-size: 0.9rem;
  color: var(--cs-text-secondary);
  line-height: 1.6;
}

/* Force the Trending Takes Widget Layout */
.takes-widget-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.takes-widget-image-wrapper {
  width: 130px !important;
  min-width: 130px !important;
  height: 88px !important;
}

.takes-widget-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.takes-widget-content-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* --- DNA BANNER --- */

/* --- Cinesist Review Card Slider --- */
.review-card-slider {
  display: flex;
  flex-direction: row;
  grid-template-columns: auto;
  column-gap: 1rem;
  flex-wrap: nowrap;
  width: 600px;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.review-slider-card {
  width: calc(50% - 8px);
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* --- Cinepress 3.0: Global Intel Card & Header Framework --- */

/* 1. THE VARIABLE ENGINE */
.cs-intel-card-section-wrapper {
  --accent: var(--brand-purple);
  /* Default to CinesistDB Brand */
  padding: 0.5rem 0;
}

/* Presets: Just add these classes to the wrapper in the editor */
.cs-intel-card-section-wrapper.is-rants,
.p-wrap.is-rants {
  --accent: var(--cinesist-red);
}

.cs-intel-card-section-wrapper.is-news,
.p-wrap.is-news {
  --accent: var(--cinesist-info);
}

.cs-intel-card-section-wrapper.is-gaming,
.p-wrap.is-gaming {
  --accent: var(--cinesist-gaming);
}

.cs-intel-card-section-wrapper.is-tv,
.p-wrap.is-tv {
  --accent: var(--cinesist-tv);
}

/* --- Cinescore Color Injection System --- */
/* Fallback for all cards */
.is-review-card {
  --cinescore-accent: var(--brand-purple);
}

/* Specific rank overrides */
.has-cinescore-legendary {
  --cinescore-accent: #50a735;
  --cinescore-accent-60: #50a73599;
  --cinescore-accent-40: #50a73566;
}

.has-cinescore-solid {
  --cinescore-accent: #c7e811;
  --cinescore-accent-60: #c7e81199;
  --cinescore-accent-40: #c7e81166;
}

.has-cinescore-redacted {
  --cinescore-accent: #ffde21;
  --cinescore-accent-60: #ffde2199;
  --cinescore-accent-40: #ffde2166;
}

.has-cinescore-compromised {
  --cinescore-accent: #ff5612;
  --cinescore-accent-60: #ff561299;
  --cinescore-accent-40: #ff561266;
}

.has-cinescore-burn {
  --cinescore-accent: #ff0d0d;
  --cinescore-accent-60: #ff0d0d99;
  --cinescore-accent-40: #ff0d0d66;
}

.has-cinescore-nr {
  --cinescore-accent: var(--flex-title-color);
  border: 4px solid var(--flex-title-color);
  border-radius: 5px;
  box-shadow: unset;
}

.has-cinescore-nr {
  border: 2px solid var(--cinescore-accent);
  border-radius: 5px;
  box-shadow: inset 0 0 15px rgba(80, 167, 53, 0.1);
}

/* Apply the Glow to elements inside */
.has-cinescore-legendary .is-review-card {
  border: 1px solid var(--cinescore-accent);
  box-shadow: inset 0 0 15px rgba(80, 167, 53, 0.1);
}

.cs-cinescore__card-value {
  color: var(--cinescore-accent);
}

/* --- [END Cinescore Color Injection System] --- */

.cs-intel-card-section-wrapper.is-movies,
.p-wrap.is-movies {
  --accent: var(--cinesist-gold);
}

.cs-intel-card-section-wrapper.is-industry,
.p-wrap.is-industry {
  --accent: var(--cinesist-industry);
}

.cs-intel-card-section-wrapper.is-topic,
.p-wrap.is-topic {
  --accent: var(--brand-purple);
}

/* 2. THE ADAPTIVE HEADER */
.cs-intel-card-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* border-bottom: 3px solid var(--flex-decor-border); */
  margin-bottom: 1rem !important;
  position: relative;
}

.cs-intel-card-section-heading {
  position: relative;
  display: inline-flex !important;
  margin: 0 !important;
  padding-bottom: 10px;
  color: var(--flex-text-title) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-style: normal;
}

/* 3. THE INTEL GRID & CARDS */
.cs-intel-card-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
}

.cs-intel-card-inner,
.cs-intel-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  padding: 0 !important;
  /* Resetting the inline padding */
}

/* Hover State: The Alert Mode */

/* 4. ELEMENT STYLING */
img.cs-intel-card-image {
  width: 100%;
  height: 15rem !important;
  object-fit: cover;
}

.cs-intel-card-inner:hover .cs-intel-card-image img {
  transform: scale(1.05);
  border-bottom: 2px solid var(--accent);
}

h1.cs-intel-card-title {
  font-size: 2.5rem;
  color: #fff !important;
}

h2.cs-intel-card-title {
  font-size: 2.5rem;
  color: #fff;
}

h3.cs-intel-card-title {
  font-size: 2.25rem;
}

h4.cs-intel-card-title {
  font-size: 2rem;
}

h5.cs-intel-card-title {
  font-size: 1.75rem;
  color: var(--flex-text-title);
}

.cs-intel-card-title a {
  color: var(--flex-text-title);
  font-size: 1.15rem;
  font-weight: 900;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
  transition: color 0.3s ease;
}

.cs-intel-card-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-intel-card-title {
  padding: 0.5rem;
  padding-left: 0;
  margin-block-end: 0 !important;
}

.cs-intel-card-excerpt {
  flex-grow: 0;
  font-size: 0.85rem !important;
  line-height: 1.5;
  color: var(--flex-text-primary);
  border-top: 1px dashed var(--flex-decor-border);
  opacity: 0.8;
  margin-block-end: 0 !important;
  overflow: hidden;
}

.cs-intel-card-excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-block-end: 0 !important;
  min-height: 2.5rem;
}

/* Meta Data & Calendar Icon */
.cs-intel-card-post-meta {
  padding: 0.5rem !important;
  /* display: flex; */
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  margin-block-end: 0 !important;
}

img.card-writer-av {
  height: 3rem !important;
  width: 3rem !important;
  border-radius: 50%;
}

.cs-intel-card-cal-icon {
  margin-block-end: 0 !important;
  color: var(--review-accent);
  fill: var(--review-accent);
}

.cs-intel-card-cal-icon svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--review-accent, var(--accent)) !important;
  fill: var(--review-accent);
  /* Calendar icon matches section color */
}

.cs-intel-card-date {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--flex-text-secondary);
}

/* Mobile: Collapse */
@media (max-width: 1024px) {
  .cs-intel-card-grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .cs-intel-card-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* --- Homepage --- */
/* Sets Adaptive BG Color */
/* Light Mode */
.bg-data-color {
  --bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--bg-opacity, 1));
}

/* Dark Mode */
[data-theme="dark"] .bg-data-color {
  --bg-opacity: 1;
  background-color: rgb(5 5 5 / var(--bg-opacity, 1));
}

/* Sets Adaptive Patterns */
/* Light Mode */
.bg-data-pattern {
  background-image: radial-gradient(rgba(209, 2, 209, 0.3) 2px, transparent 2px);
  background-size: 32px 32px;
  background-position: 0 0;
  opacity: 0.7;
  transition: all 0.5s ease;
}

/* Dark Mode */
[data-theme="dark"] .bg-data-pattern {
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(255, 85, 0, 0.05) 2px,
      rgba(255, 85, 0, 0.05) 4px),
    linear-gradient(90deg, rgba(255, 85, 0, 0.08) 1px, transparent 1px);
  background-size:
    100% 4px,
    40px 100%;
  opacity: 1;
}

/* Sets Adaptive BG Animation and Color */
/* Light Mode */
.data-scan-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, transparent 0%, rgba(209, 2, 209, 0.15) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: dataFlowScan 6s linear infinite;
  pointer-events: none;
  transition: all 0.5s ease;
}

/* Dark Mode */
[data-theme="dark"] .data-scan-line {
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 85, 0, 0.15) 50%, transparent 100%);
  animation: dataFlowScan 4s linear infinite;
}

/* Data Flow Scan Animation */
@keyframes dataFlowScan {
  0% {
    background-position: 0 -100%;
  }

  100% {
    background-position: 0 200%;
  }
}

/* Homepage Hero Grid Category Links */
.gb-primary-cat-target {
  color: var(--awhite) !important;
}

/* Homepage Category Boxes */
.cbox-title {
  font-size: 1.2rem;
}

@media (min-width: 768px) {

  /* makes .cbox elements shrink to 15% width,
     but only when the screen width is 768px or larger. */
  .rb-col-4>.block-inner>.cbox {
    flex-basis: 15%;
    width: auto;
    /* Ensures flex-basis takes precedence over width */
  }
}

.hide {
  display: none !important;
}

/* --- Reconstructed Elementor Homepage Styles --- */

/* Sets Adaptive Page Background Patterns */
/* Light Mode */
.site-wrap,
.editor-styles-wrapper {
  background-image: radial-gradient(rgba(209, 2, 209, 0.3) 2px, transparent 2px);
  background-size: 32px 32px;
  background-position: 0 0;
  transition: all 0.5s ease;
  background-color: #f2f2f2;
}

/* Dark Mode */
[data-theme="dark"] .site-wrap,
[data-theme="dark"] .editor-styles-wrapper {
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(255, 85, 0, 0.05) 2px,
      rgba(255, 85, 0, 0.05) 4px),
    linear-gradient(90deg, rgba(255, 85, 0, 0.08) 1px, transparent 1px);
  background-size:
    100% 4px,
    40px 100%;
  background-color: #171717;
}

/* Category grid card custom styles */
.cbox-inner {
  background-color: #fff !important;
}

[data-theme="dark"] .cbox-inner {
  background-color: #000 !important;
}

.cbox.cbox-1 {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.cbox.cbox-1:hover {
  transform: translateY(-8px);
}

/* Realm navigation custom background and top glowing ground line */
.cs-realms-section {
  position: relative;
  z-index: 10;
  padding-top: 0.25rem;
  background: linear-gradient(to bottom,
      color-mix(in srgb, var(--cs-brand, var(--cs-brand-400)), transparent 88%),
      color-mix(in srgb, var(--cs-bg-2, #0a0a0a), transparent 40%) 40%,
      transparent 100%);
  border-top: 1px solid color-mix(in srgb, var(--cinesist-info, #00ddff), transparent 60%);
  box-shadow: inset 0 20px 40px -15px var(--cs-brand-800);
}

.cs-realms-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 6px;
  background: linear-gradient(to right,
      transparent,
      var(--cinesist-info, #00ddff),
      var(--cs-brand, #d102d1),
      transparent);
  filter: blur(1px);
  opacity: 0.8;
}

/* Rants & Reviews Grid Card Hover Effects (.grid-box) */
.cs-rants-section .grid-box,
.cs-reviews-section .grid-box {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  transition: filter 0.3s ease;
}

.cs-rants-section .grid-box::after,
.cs-reviews-section .grid-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border: 4px solid transparent;
  border-radius: 7px;
  transition: border-color 0.2s ease;
  z-index: 100;
}

.cs-rants-section .grid-box:hover {
  filter: drop-shadow(0px 0px 30px rgba(255, 0, 0, 0.85));
}

.cs-rants-section .grid-box:hover::after {
  border-color: #e50914;
  /* Red border for Rants (Gaming/Red branding) */
}

.cs-reviews-section .grid-box:hover {
  filter: drop-shadow(0px 0px 30px rgba(0, 211, 242, 0.85));
  /* Cyan/Blue shadow for Reviews */
}

.cs-reviews-section .grid-box:hover::after {
  border-color: #00d3f2;
  /* Cyan border for Reviews */
}

.grid-box .entry-title a:hover {
  color: red !important;
  text-decoration-color: #e50914 !important;
}

/* Floating Arkahna / Cipher shadows */
.cs-void-rumors,
.cs-void-trailers {
  position: relative;
}

.cipher-hover {
  filter: drop-shadow(4px 4px 8px rgba(229, 49, 6, 1));
}

.cinefox-forensic {
  filter: drop-shadow(4px 4px 8px rgba(255, 245, 43, 0.7));
}

/* Middle Column Floating Animation */
.float-animation {
  animation: float 7s ease-in-out infinite;
  filter: drop-shadow(4px 4px 8px rgba(43, 214, 255, 0.8)) drop-shadow(8px 8px 24px rgba(196, 8, 240, 0.7));
  transition: filter 0.3s ease-in-out;
}

.float-animation:hover {
  filter: drop-shadow(0px 0px 60px rgba(0, 150, 255, 0.6));
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(1deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* Wire News Feed Card Hover & Peeking Cinefox */
.cs-wire-list .gb-loop-item.list-box {
  position: relative;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
  border-radius: 7px;
  border: 1px solid transparent;
  border-left: 5px solid transparent;
  /* Extra thick left border */
  box-sizing: border-box;
}

.cs-wire-list .gb-loop-item.list-box:hover {
  transform: translateY(-8px);
  border-color: #00d3f2;
  box-shadow: 0 0 15px rgba(0, 211, 242, 0.4);
  /* Cyan Glow */
}

.cs-wire-list .gb-loop-item.list-box::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -330px;
  right: -150px;
  width: 500px;
  height: 500px;
  background-image: url("https://cinesist.com/wp-content/uploads/2026/05/Cinefox-Hanging-Off-Edge.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right top;
  opacity: 0.15;
  pointer-events: none;
  z-index: 10;
  transition:
    bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.3s ease;
}

.cs-wire-list .gb-loop-item.list-box:hover::after {
  bottom: -190px;
  opacity: 0.3;
}

.cs-wire-list .gb-loop-item.list-box:hover .entry-title,
.cs-wire-list .gb-loop-item.list-box:hover .entry-meta {
  color: #00b8db !important;
}

/* --- Universal Mobile Layout Adjustments --- */
@media (max-width: 767px) {

  /* 1. SECTION & WRAPPER RESET (The "No Overflow" Fix) */
  section#hp-hero,
  #cs-main section {
    padding-top: 0 !important;
    overflow-x: hidden !important;
  }

  /* Force all containers to stay within viewport bounds */
  #cs-main .cs-wrap,
  #cs-main .cs-tile-card-query,
  #cs-main .cs-section-inner,
  #cs-main ul.cs-tile-card-grid {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  /* Center Headers for Predictions and News */
  #hp-predictions .cs-section-header,
  #hp-news .cs-section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
    margin-bottom: 2rem !important;
  }

  #hp-predictions .cs-tile-card-headline,
  #hp-news .cs-tile-card-headline {
    width: 100% !important;
    text-align: center !important;
  }

  #hp-predictions .cs-tile-card-tagline,
  #hp-news .cs-tile-card-tagline {
    width: 100% !important;
    text-align: center !important;
    opacity: 0.8;
  }

  /* 2. THE MAIN HERO TILE (Tile 1) */
  #hp-hero ul.cs-tile-card-grid li:first-child {
    width: 100% !important;
    height: 320px !important;
    margin: 0 0 2rem 0 !important;
    border-radius: 0 !important;
    position: relative;
  }

  #hp-hero ul.cs-tile-card-grid li:first-child article,
  #hp-hero ul.cs-tile-card-grid li:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  /* 3. UNIFORM SQUARE TILES (351x351) */
  /* Targets all other sections: Rants, Reviews, Predictions, News */
  #hp-rants li article,
  #hp-reviews li article,
  #hp-predictions li article,
  #hp-news li article {
    width: 351px !important;
    height: 351px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 1.5rem auto !important;
    /* Centering */
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  /* Ensure secondary images fill the squares perfectly */
  #hp-rants li img,
  #hp-reviews li img,
  #hp-predictions li img,
  #hp-news li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* 4. TEXT OVERLAY & BUTTONS */
  .cs-tile-card-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
  }

  .cs-tile-card-title,
  .cs-tile-card-title a {
    color: #ffffff !important;
    text-align: left;
    margin: 0;
  }

  /* Center the "Get More" buttons */
  .get-more-mobile-wrap {
    display: flex !important;
    justify-content: center !important;
    margin: 2rem 0 4rem 0 !important;
  }

  .get-more-mobile-wrap a {
    padding: 12px 30px !important;
    background: var(--cs-brand);
    color: #fff !important;
    border-radius: 5px !important;
    font-weight: bold;
    text-transform: uppercase;
  }
}

/* ==========================================================================
   HOMEPAGE MASTHEAD GRID ENGINE (home.css)
   Bypasses page builder layouts with pure parent track mappings.
   ========================================================================== */

#hp-hero .gb-query-loop {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 252.5px x 2 Rows + 20px CSS Gap = Precisely your 525px Target Height Limit */
    grid-auto-rows: 252.5px;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    max-width: 1300px;
}

@media (min-width: 1024px) {
    /* Slot 1: The Giant Feature Panel (2 Column x 2 Row Span) */
    #hp-hero .gb-query-loop > .gb-element-looper-item:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }
    /* Slot 2: The Vertical Structural Tower (1 Column x 2 Row Span) */
    #hp-hero .gb-query-loop > .gb-element-looper-item:nth-child(2) {
        grid-column: 3 / span 1;
        grid-row: 1 / span 2;
    }
    /* Slot 3 & 4: Stacked Regular Cards on the Right Edge Track */
    #hp-hero .gb-query-loop > .gb-element-looper-item:nth-child(3) {
        grid-column: 4 / span 1;
        grid-row: 1 / span 1;
    }
    #hp-hero .gb-query-loop > .gb-element-looper-item:nth-child(4) {
        grid-column: 4 / span 1;
        grid-row: 2 / span 1;
    }
    /* Dynamic Post Loop Overflow: Post 5 and onward naturally wrap into clean, safe rows */
    #hp-hero .gb-query-loop > .gb-element-looper-item:nth-child(n+5) {
        grid-column: span 1;
        grid-row: span 1;
    }
}