main.blog-page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;

  article {
    display: flex;
    flex-direction: column;
    gap: 1.1667em;
    max-width: 100%;
    
    header {
      display: none;
    }
    
    section, footer {
      max-width: 70ch;
    }

    .content {
      display: flex;
      flex-direction: column;
      gap: 1.1667em;
    }

    .source {
      color: #666666;
    }
  }
}

main.blog-index {
  padding: 2vh 2vw;
  flex-grow: 1;
  
  display: flex;
  flex-direction: column;     /* items stack top-to-bottom */
  flex-wrap: wrap;            /* columns wrap left-to-right */
  justify-content: flex-end;  /* pack the wrapped rows to the bottom of the container */
  align-content: flex-start;  /* align to the left */

  /* row-gap: 5px;
  column-gap: 2.5px; */

  article {
    /* width: 24vw; */
    height: auto;
    flex-shrink: 0;
    overflow-wrap: anywhere;
    margin-bottom: 2px;
    margin-left: var(--rand-offset-x, 0);
    padding-right: var(--rand-delta-w, 0);
    transform: translate3d(0,0,0) rotate(var(--rand-rot));    
    transform-origin: 50% 100%; 
    animation: almost-falling var(--rand-speed, 1s) cubic-bezier(.45, 0, .55, 1) var(--rand-delay, 0) infinite alternate;
    will-change: transform; 

    &:hover, &:focus-visible {
      animation-play-state: paused;
      transform: translate3d(calc(var(--drift-x) * 1.35), -5px, 0) rotate(calc(var(--rot) + var(--wobble-rot) * 1.35));
      z-index: 2;
    }
    
    a {
      display: inline-block;
      max-width: 100%;
      align-content: center;
      width: fit-content;
      min-height: 44px;
      padding: 6px 9px 7px;
      /* border: 1px solid white; */
      background-color: #64624A;
      text-decoration: none;
      color: white;
      transition: filter 180ms ease, box-shadow 180ms ease;
      hyphens: none;
      /* text-wrap: pretty; */

      &:hover, &:focus-visible {
        /* background-color: black !important; */
        filter: brightness(.94);
        box-shadow: 0 7px 10px rgba(0,0,0,.10);
        outline: none;
      }

      * {
        display: inline;
        font-size: 1em;
        font-weight: normal;
        line-height: 1;
        text-wrap: inherit;
      }
    }

    time {
      display: none;
    }
  }

  /* 3. RESPONSIVE BREAK CODES ENGINE */
  .column-break {
    display: none; /* Hide ALL break lines by default */
    flex-basis: 100%; /* When visible, force a full vertical container break */
    width: 0;
    margin: 0;
    padding: 0;
  }

  /* 🖥️ PROFILE 1: LARGE SCREENS (Over 1000px height) */
  @media (min-height: 1001px) {
    .column-break.break-large {
      display: block;
    }
    /* disable for items at bottom */
    article:has(+ .column-break.break-large) {
      transform: none;
    }
  }

  /* 🖥️ PROFILE 2: NORMAL DESKTOP SCREENS (801px - 1000px height) */
  @media (max-height: 1000px) and (min-height: 801px) {
    .column-break.break-desktop {
      display: block;
    }
    /* disable for items at bottom */
    article:has(+ .column-break.break-desktop) {
      transform: none;
    }
  }

  /* 💻 PROFILE 3: LAPTOP SCREENS (551px - 800px height) */
  @media (max-height: 800px) and (min-height: 551px) {
    .column-break.break-laptop {
      display: block;
    }
    /* disable for items at bottom */
    article:has(+ .column-break.break-laptop) {
      transform: none;
    }
  }

  /* 📱 PROFILE 4: TABLET / SHORT MOBILE SCREENS (Up to 550px height) */
  @media (max-height: 550px) {
    .column-break.break-tablet {
      display: block;
    }
    /* disable for items at bottom */
    article:has(+ .column-break.break-tablet) {
      transform: none;
    }
  }
}

@media (min-width: 601px) {
  html.template-blogindexpage {
    --blog-grid-columns: 3;
  }
  html.template-blogindexpage, html.template-blogindexpage body {
    height: 100%;
    overflow: hidden; /* Prevents the main page from scrolling vertically */

    main.blog-index { 
      max-height: 100%; 
      overflow-x: auto;           /* horizontal scrolling */
      overflow-y: hidden;
      margin: 0 -1vw;
      padding: 0 1vw;

      article {
        width: calc(100vw / var(--blog-grid-columns) - 1vw);
      }
    }
  }
}
@media (min-width: 801px) {
  html.template-blogindexpage {
    --blog-grid-columns: 3;
  }
}
@media (min-width: 1001px) {
  html.template-blogindexpage {
    --blog-grid-columns: 4;
  }
}
@media (min-width: 1201px) {
  html.template-blogindexpage {
    --blog-grid-columns: 5;
  }
}
@media (min-width: 1401px) {
  html.template-blogindexpage {
    --blog-grid-columns: 6;
  }
}


/* ANIMATIONS */

@keyframes almost-falling {
  0% {
    transform: translate3d(calc(var(--rand-drift-x) * -.38), 0, 0)
               rotate(calc(var(--rand-rot) - var(--rand-wobble-rot) * .42));
  }
  28% {
    transform: translate3d(calc(var(--rand-drift-x) * .18), calc(var(--rand-drift-y) * -.35), 0)
               rotate(calc(var(--rand-rot) + var(--rand-wobble-rot) * .12));
  }
  62% {
    transform: translate3d(calc(var(--rand-drift-x) * -.12), var(--rand-drift-y), 0)
               rotate(calc(var(--rand-rot) - var(--rand-wobble-rot) * .18));
  }
  100% {
    transform: translate3d(var(--rand-drift-x), calc(var(--rand-drift-y) * -.55), 0)
               rotate(calc(var(--rand-rot) + var(--rand-wobble-rot)));
  }
}