/* 
===========================================================================
NEWS SPOOF GRID CONTROL (MASONRY PUSH SPOOFS)
- This file controls: 
  1️⃣ .article { width } — column widths
  2️⃣ .article.featured { width } — featured size
  3️⃣ .article.spoof.pos-N — which spoofs are active to horizontally push featured
- Masonry layout needs spoofs to have: display: block + height: 1px to push.
- Base hides ALL spoofs. Min/max media queries only "turn on" the ones needed.
===========================================================================
*/




/* Base spoof style (now applied on <li class="article spoof ...">) */
.article.spoof {
  display: none;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  background-color:transparent; /* DEBUG */
}

/* Globally hide ALL spoofs */
.article.spoof.pos-1,
.article.spoof.pos-2,
.article.spoof.pos-3,
.article.spoof.pos-4,
.article.spoof.pos-5,
.article.spoof.pos-6,
.article.spoof.pos-7,
.article.spoof.pos-8,
.article.spoof.pos-9,
.article.spoof.pos-10,
.article.spoof.pos-11,
.article.spoof.pos-12,
.article.spoof.pos-13,
.article.spoof.pos-14,
.article.spoof.pos-15,
.article.spoof.pos-16,
.article.spoof.pos-17,
.article.spoof.pos-18,
.article.spoof.pos-19,
.article.spoof.pos-20 {
  display: none;
  height: 0px;
}

  .news-grid-holder {
  max-width:1800px;
  margin:auto;
}

  .article { width: 25%; }
  .article.featured { width: 50%; }
  .article.spoof.pos-1
 {
    display: block;
    height: 1px;
  }


/* 4 columns: 1200px–1799px */
@media (min-width: 1200px) and (max-width: 1799px) {
  .article { width: 25%; }
  .article.featured { width: 50%; }

  .article.spoof.pos-1 {
    display: block;
    height: 1px;
  }
}

/* 4 columns: 900px–1199px */
@media (min-width: 900px) and (max-width: 1199px) {
  .article { width: 25%; }
  .article.featured { width: 50%; }

  .article.spoof.pos-1 {
    display: block;
    height: 1px;
  }
}



/* 3 columns: 744px–899px */
@media (min-width: 744px) and (max-width: 899px) {
  
  .choiceChosen a, .choiceChosen a:hover {  
      text-underline-offset: 10px;
  }
  
  .featured h1 {
  font-size: 4vw !important;
  line-height: 4vw !important;
}
  
  .article { width: 33.3333%; }
  .article.featured { width: 100%; }

  .article.spoof.pos-1 {
    display: block;
    height: 1px;
  }
  
  .news-grid-holder {
  margin-left:10px;
  margin-right:10px;
  }

  
  
}



/* 2 columns: 600px–743px */
@media (min-width: 600px) and (max-width: 743px) {
  .article { width: 50%; }
  .article.featured { width: 100%; }

  /* If you want a tiny nudge to keep spacing symmetrical, keep one: */
  .article.spoof.pos-1 {
    display: block;
    height: 1px;
  }
}

/* 1 column: ≤ 599px */
@media (max-width: 599px) {
  .article { width: 100%; }
  .article.featured { width: 100%; }
  /* No spoofs active */
  .article-inner { padding-left:0px; padding-right:0px; padding-top:5px;}
  
}