/*QUERY LOOP PORTFOLIO GRID DEVELOPMENT - SADIE*/

/*Grid Setup*/

.hb-portfolio-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 380px;
  gap: 15px;
  padding: 0;
}

.hb-portfolio-grid .wp-block-post-template li {
	margin-block-start: 0;
}

.hb-portfolio-grid .pg-item {
  overflow: hidden;
  border-radius: 30px;
  height: 100%;
}

.hb-portfolio-grid .pg-item .wp-block-post-featured-image {
  height: 100%;
}

.hb-portfolio-grid .pg-item .wp-block-post-featured-image img {
  height: 100%;
  transition: transform 0.45s ease;
}

.hb-portfolio-grid .pg-item:hover .wp-block-post-featured-image img {
  transform: scale(1.06);
}

/*Grid Hover Overlay*/
.hb-portfolio-grid .pg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(239, 239, 239, 0.65);
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
	margin-block-start: 0;
}

.hb-portfolio-grid .pg-item:hover .pg-overlay {
  opacity: 1;
}

.hb-portfolio-grid .pg-title {
  color: #333;
	font-family: 'Work Sans', sans-serif;
	line-height: 24px;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
	padding: 7px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease 0.07s, transform 0.35s ease 0.07s;
}

.hb-portfolio-grid .pg-title a {
  color: inherit;
}

.hb-portfolio-grid .pg-item:hover .pg-title {
  opacity: 1;
  transform: translateY(0);
}

.hb-portfolio-grid .pg-title, .hb-portfolio-grid .pg-title a {
	align-content: center !important;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
}


/* Repeating span pattern (every 8 tiles)*/
@media (min-width: 481px) {
.hb-portfolio-grid .wp-block-post-template li:nth-child(6n+1), .hb-portfolio-grid .wp-block-post-template li:nth-child(6n+4) {
  grid-column: span 2;
  height: auto;
}

.hb-portfolio-grid .wp-block-post-template li:nth-child(6n+3) {
  grid-row: span 2;
  height: auto;
}
}

/* Keyboard Focus */

.hb-portfolio-grid .pg-item:focus-within .pg-overlay,
.hb-portfolio-grid .pg-item:focus-within .pg-title {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/*Portfolio Grid Tablet Adjustments */
@media (max-width: 768px) {
  .hb-portfolio-grid .wp-block-post-template {
    grid-auto-rows: 220px;
    gap: 10px;
  }
}

/*Portfolio Grid Mobile Adjustments */
@media (max-width: 480px) {
  .hb-portfolio-grid .wp-block-post-template {
    grid-template-columns: 1fr;
    grid-auto-rows: 280px;
    gap: 12px;
  }
}

/*Portfolio Grid Fade In*/
@media (prefers-reduced-motion: no-preference) {
  .hb-portfolio-grid .wp-block-post-template li {
    opacity: 0;
    animation: pg-fadein 1s ease forwards;
  }

  @keyframes pg-fadein {
    to { opacity: 1; }
  }

  .hb-portfolio-grid .wp-block-post-template li:nth-child(1)  { animation-delay: 0.07s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(2)  { animation-delay: 0.14s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(3)  { animation-delay: 0.21s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(4)  { animation-delay: 0.28s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(5)  { animation-delay: 0.35s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(6)  { animation-delay: 0.42s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(7)  { animation-delay: 0.49s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(8)  { animation-delay: 0.56s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(9)  { animation-delay: 0.63s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(10) { animation-delay: 0.70s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(11) { animation-delay: 0.77s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(12) { animation-delay: 0.84s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(13) { animation-delay: 0.91s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(14) { animation-delay: 0.98s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(15) { animation-delay: 1.05s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(16) { animation-delay: 1.12s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(17) { animation-delay: 1.19s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(18) { animation-delay: 1.26s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(19) { animation-delay: 1.33s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(20) { animation-delay: 1.40s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(21) { animation-delay: 1.47s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(22) { animation-delay: 1.54s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(23) { animation-delay: 1.61s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(24) { animation-delay: 1.68s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(25) { animation-delay: 1.75s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(26) { animation-delay: 1.82s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(27) { animation-delay: 1.89s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(28) { animation-delay: 1.96s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(29) { animation-delay: 2.03s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(30) { animation-delay: 2.10s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(31) { animation-delay: 2.17s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(32) { animation-delay: 2.24s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(33) { animation-delay: 2.31s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(34) { animation-delay: 2.38s; }
  .hb-portfolio-grid .wp-block-post-template li:nth-child(35) { animation-delay: 2.45s; }
}