/*-----------------------------------------------------------------------------
author:    www.visityakima.com
-----------------------------------------------------------------------------*/


/* =Yakima Valley Tourism Pillar Pages
-----------------------------------------------------------------------------*/

.videoContainer {
	position:fixed;
	margin:0;
	padding:0;
	padding-bottom: 56.25%; /* aspecct ratio for video */
	width:100%;
	height:0;
	z-index:0;
	}
	
.fullscreen-bg__video {
    width: 100%;
	height:100%;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:0;
	}
    
.videoGraphicMap {
    width:100%;   
	}
	
.videoGraphic {
    margin:0 auto;
	width:60%;
	padding:15em 0 16em 0;    
	}
    
.videoOverlay {
    position:relative;
    z-index: 5000;
    }
    
.distressedOverlayTop {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    }
    
.distressedOverlayBottom {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    }
    
.crowdRiffPillar {
    margin:0 0 4em 0;
    }
    
/* =Pillar Main Features
-----------------------------------------------------------------------------*/
    
.pillarFeatures {
    position:relative;
    display:grid;
    grid-template-columns: 1fr 1fr;
    background:#eee9e3;
    }
    
.firstPillar {
    margin:-50px 0 0 0;
    z-index:6000;
    }
    
.pillarFeatures div:first-of-type {
    background:url(../img/fifty-border.gif) top right repeat-y;
    }
    
.pillarFeatures img {
    width:100%;
    }
    
.pillarText {
    padding:5%;
    }
    
.pillarText .blueBtn, .pillarText .wineBtn {
    margin:0 0 1em 0;
    }
    
/* =Pillar Sub Nav
-----------------------------------------------------------------------------*/
    
ul.pillarSubNav {
	padding:0 0 2.75em 0;
	list-style:none;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;    
    grid-gap:2rem;
    text-align: center;
	}
    
.pillarSubNavPhoto {
    position:relative;
    -webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
    }
    
.pillarSubNavPhoto:hover {
    opacity:0.50;
    filter:alpha(opacity=50); /* For IE8 and earlier */
	}
    
.pillarSubNavPhoto img {
    width:100%;
    }
    
.pillarSubNavPhoto h2 {
    position:absolute;
    bottom:0;
    left:0;
    color:#fff;
    padding: 3%;    
    text-align: center;
    width:94%;
    margin:0;
    }
    
.beerSubNav h2 {
    background: rgba(74, 91, 45, 0.75);
    }
    
.wineSubNav h2 {
    background: rgba(140, 24, 45, 0.75);
    }
    
.farmSubNav h2 {
    background: rgba(20, 108, 55, 0.75);
    } 

/* =Pillar Grid New
-----------------------------------------------------------------------------*/

/* Grid */
.pillarGrid {
  margin: 0 auto;
  padding:0 0 2rem 0;
  display: grid;
  gap: .25rem;
}

.pillarGridFourUp {
	grid-template-columns: repeat(4, 1fr);
	}

.pillarGridThreeUp {
	grid-template-columns: repeat(3, 1fr);
	}

.pillarGridTwoUp {
	grid-template-columns: repeat(2, 1fr);
	}

/* Card */
.pillarCard {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  background: #000;
}

.pillarCardFull {
  position: relative;
}

/* Image */
.cardImage {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.cardImageFull {
	transition: transform 0.5s ease;
	position: relative;
	overflow: hidden;
	}

/* Content box */
.cardContent {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 66%;
  background: #ffffff;
  padding: 4rem 1.5rem 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Slanted + lightly organic top edge */
  clip-path: polygon(
     100% 100%,
  0 100%,
  0 26px,
  8% 24px,
  18% 28px,
  30% 26px,
  40% 30px,
  50% 28px,
  58% 32px,
  66% 30px,
  74% 34px,
  82% 32px,
  88% 36px,
  94% 34px,
  100% 38px
);
}

.cardContentFull {
  width: 86%;
  background: #ffffff;
  padding: 2rem 7%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cardImageFull::before {
  content: "";
  position: absolute;
  bottom:-1px;
  left: -1px;
  width: 103%;
  height: 60px; /* height of jagged area */
  background: #fff;
  /* Slanted + lightly organic top edge */
  clip-path: polygon(
     100% 100%,
  0 100%,
  0 26px,
  8% 24px,
  18% 28px,
  30% 26px,
  40% 30px,
  50% 28px,
  58% 32px,
  66% 30px,
  74% 34px,
  82% 32px,
  88% 36px,
  94% 34px,
  100% 38px
);
  z-index: 2;
}

.cardContentWine {
	background: #8c182d;
	color:#fff;
	background-blend-mode: multiply;
	}

/* Hover / focus state */
.pillarCard:hover .cardImage, .pillarCard:hover .cardImageFull img {
  transform: scale(1.05);
}

/* Typography */
.pillarGrid .cardContentWine h2 {
	color:#fff;
	}

.pillarGrid p {
  padding: 0 0 1rem 0;
}

.cardContent a, .cardContentFull a {
  display: inline-flex;
  align-items: center;
}

.pillarGrid a.wineBtn, .pillarGrid a.blueBtn, .pillarGrid a.greenFarmBtn, .pillarGrid a.greenHopBtn, .pillarGrid a.orangeBtn, .pillarGrid a.blackBtn, .pillarGrid a.whiteBtn {
    margin:0 0 0 0;
	font-size:1.25em;
	}

:root {
  --navy: #0f1f2d;
  --cream: #e6dccb;
  --transition: cubic-bezier(.4,.0,.2,1);
}

/* ================= GRID ================= */

.articleGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 0 auto;
  padding: 2rem;
	background:#8c182d;
}

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

.gridItem {
  position: relative;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition:
    transform 400ms var(--transition),
    box-shadow 400ms var(--transition);
}

/* Subtle Lift */
.gridItem:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

/* ================= IMAGE ================= */

.imageWrap {
  overflow: hidden;
}

.imageWrap img {
  width: 100%;
  display: block;
  transition: transform 600ms var(--transition);
}

.gridItem:hover img {
  transform: scale(1.05);
}

/* ================= CONTENT PANEL ================= */

.contentDetail {
  position: absolute;
  bottom: 0;
  left: -1px; /* anti-gap buffer */
  width: calc(100% + 2px);
  background: #fff;
  padding: 6em 2em 2em 2em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 15%;
  transition: height 600ms var(--transition);

  /* Jagged Top Edge */
  clip-path: polygon(
    -1px 38px,
    6% 34px,
    12% 36px,
    18% 32px,
    26% 34px,
    34% 30px,
    42% 32px,
    50% 28px,
    60% 30px,
    70% 26px,
    82% 28px,
    92% 24px,
    calc(100% + 1px) 26px,
    calc(100% + 1px) 100%,
    -1px 100%
  );
}

.gridItem:hover .contentDetail {
  height: 90%;
  padding: 5% 2em 5% 2em;
  /* Jagged Top Edge */
  clip-path: none;
}

/* ================= TEXT ================= */

.description {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms ease, transform 400ms ease;
  transition-delay: 150ms;
  margin-bottom: 1.5rem;
	width:90%;
}

.gridItem:hover .description {
  opacity: 1;
  transform: translateY(0);
}

/* ================= BUTTON ================= */

.btnGrid {
  align-self: flex-start;
  padding: 0.7rem 1.2rem;
  border: none;
  background: var(--cream);
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.btnGrid:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
}

/* ================= SCROLL REVEAL (CSS ONLY) ================= */

/* Progressive enhancement:
   If unsupported, cards simply appear normally */

@supports (animation-timeline: view()) {

  .reveal {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp linear forwards;
    animation-timeline: view();
    animation-range: entry 15% cover 30%;
  }

  .gridItem:nth-child(1) { animation-delay: 0ms; }
  .gridItem:nth-child(2) { animation-delay: 120ms; }
  .gridItem:nth-child(3) { animation-delay: 240ms; }
  .gridItem:nth-child(4) { animation-delay: 360ms; }
  .gridItem:nth-child(5) { animation-delay: 480ms; }
  .gridItem:nth-child(6) { animation-delay: 600ms; }

  @keyframes fadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

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

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

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

  .contentDetail {
    height: auto;
    position: relative;
    clip-path: none;
  }

  .description {
    opacity: 1;
    transform: none;
  }
}

/* ================= ACCESSIBILITY ================= */

@media (prefers-reduced-motion: reduce) {
  .gridItem,
  .imageWrap img,
  .contentDetail,
  .description,
  .reveal {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


@media all and (max-width: 1775px) {
	
.firstPillar {
    margin:-30px 0 0 0;
    z-index:6000;
    }
	
}
	
@media all and (max-width: 1350px) {
	

	
}

@media all and (max-width: 1250px) {

.videoGraphic {
	padding:10em 0 11em 0;    
	}
	
.pillarGridFourUp {
	grid-template-columns: repeat(2, 1fr);
	}
	
  .cardContent {
    width: 70%;
  }
	
}

@media (max-width: 1024px) {
	

}

@media screen and (max-width: 900px) {	

.videoGraphic {
	padding:6em 0 7em 0;    
	}
	
}
	
@media all and (max-width: 875px) {
	

}

@media all and (max-width: 750px) {

ul.pillarSubNav { 
    grid-template-columns: 1fr 1fr;    
    grid-gap:1rem;
	}
    
.pillarSubNavPhoto {
    margin:0 0 0 0
    }
	
.pillarGridThreeUp {
	grid-template-columns: repeat(2, 1fr);
	}

}

@media all and (max-width: 675px) {
	
.videoGraphic {
	padding:3em 0 3.5em 0; 
    width:95%;
	}
    
.pillarFeatures {
    grid-template-columns: 1fr;
    }
    
.pillarFeatures div:first-of-type {
    background:none;
    }
	
}

@media (max-width: 640px) {

.pillarGridTwoUp, .pillarGridThreeUp, .pillarGridFourUp {
	grid-template-columns: 1fr;
	}

  .pillarCard {
    min-height: 420px;
  }

  .cardContent {
    width: 90%;
	padding: 4rem 5% 5%;
  }
}