/* ==========================================================
   AX Category Post Slider — refined styling (FULL SHEET)
   - Soft tile shadows
   - Title max 30px
   - Button max 24px
   - Small round dots
   - Custom prev/next arrow images
   - Nav arrows OUTSIDE tiles (no overlay)
   - Ensures tiles are consistent height + width
   ========================================================== */

.gsd-cps{
  position: relative;
  width: 100%;

  /* OUTSIDE NAV LAYOUT */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto; /* row 1 slider, row 2 dots */
  align-items: center;
  column-gap: 5px;


  /* Set your arrow image URLs here */
  --gsd-cps-arrow-prev: url("http://test.grainsystemsdistribution.com/wp-content/uploads/2026/01/gold-grain-left.png");
  --gsd-cps-arrow-next: url("http://test.grainsystemsdistribution.com/wp-content/uploads/2026/01/gold-grain-right.png");
	margin-bottom:20px;
}

.gsd-cps__viewport{
  grid-column: 2;
  grid-row: 1;

  overflow: hidden;
  width: 100%;
  outline: none;
}

.gsd-cps__track{
  display: flex;
  gap: clamp(10px, 1vw, 15px);
  scroll-behavior: smooth;
  will-change: transform;

  /* Ensure slides align consistently */
  align-items: stretch;
	padding:15px 0;
}

/* ==========================================================
   TILE CONSISTENCY
   - width: use a consistent calc based on the same gap
   - height: set a single fixed responsive height so every slide matches
   ========================================================== */

.gsd-cps__slide{
  position: relative;

  /* IMPORTANT: keep the flex-basis deterministic using the SAME gap used above.
     Because gap is clamp(), exact calc() isn't possible, so we use a stable basis
     and rely on flex + overflow hidden to keep alignment clean. */
  flex: 0 0 calc(50% - 7.5px); /* approx half gap for 2-up */
  max-width: calc(50% - 7.5px);

  border-radius: 18px;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
	position: relative;
  z-index: 2;
  width: min(300px, 100%);
  text-align: center;
  padding: 15px;
  border-radius: 15px;
  background: rgba(184, 22, 22, 0.92);
    background-image: none;
  color: #fff;
  background-image: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
  height: clamp(150px, 30vh, 280px);
  align-content: center;
  align-items: center;
}
.gsd-cps__slide a{
	color:#fff;
}
/* Ensure the clickable area always fills the tile height */
.gsd-cps__slideLink{

}

/* Optional: if you want the dark photo overlay back, uncomment:
.gsd-cps__slideLink::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.25);
}
*/

/* Mobile: full width tile + same consistent height */
@media (max-width: 860px){
  .gsd-cps__slide{
    flex: 0 0 100%;
    max-width: 100%;
    height: clamp(240px, 60vw, 360px);
  }
}

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

.gsd-cps__panel{
  
	


}

.gsd-cps__title{
  margin: 0 0 10px 0;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.05;
  text-transform: none;
	color:#fff;
  /* Max 30px */
  font-size: clamp(20px, 1.5vw, 30px);
}

.gsd-cps__meta{
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.2;
}

.gsd-cps__meta--date{ margin-bottom: 5px; }
.gsd-cps__meta--loc{ margin-bottom: 10px; }

.gsd-cps__btn{
	display:block !important;
	margin:8px auto 0 auto !important;
	background-color: var(--wp--preset--color--safety-yellow) !important;
	color: var(--wp--preset--color--graphite) !important;
}

/* ==========================================================
   NAV ARROWS — OUTSIDE tiles (no overlay)
   ========================================================== */

button.gsd-cps__nav{
  position: static;
  transform: none;
  z-index: auto;

  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;

  display: grid;
  place-items: center;
  align-self: center;
	margin:0 !important;
	padding:0 !important;
}

.gsd-cps__nav:hover{ opacity: .8; }

.gsd-cps__nav--prev{
  grid-column: 1;
  grid-row: 1;
}

.gsd-cps__nav--next{
  grid-column: 3;
  grid-row: 1;
}

/* Use YOUR custom arrow images */
.gsd-cps__navIcon{
  width: 40px;
  height: 40px;
  display: block;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
	background-color: transparent !important;
}

.gsd-cps__nav--prev .gsd-cps__navIcon{
  background-image: var(--gsd-cps-arrow-prev);
}

.gsd-cps__nav--next .gsd-cps__navIcon{
  background-image: var(--gsd-cps-arrow-next);
}

/* ==========================================================
   DOTS — small + round
   ========================================================== */

.gsd-cps__dots{
  grid-column: 2;
  grid-row: 2;

  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.gsd-cps__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: none;

  background: rgba(255,255,255,.55);
  cursor: pointer;
  padding: 0 !important;
}

.gsd-cps__dot.is-active{
  background: #f2b500;
}

/* ==========================================================
   MOBILE BEHAVIOR
   - Stack layout
   - Hide arrows (optional)
   ========================================================== */

@media (max-width: 860px){
  .gsd-cps{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .gsd-cps__viewport{
    grid-column: 1;
    grid-row: 1;
  }

  .gsd-cps__dots{
    grid-column: 1;
    grid-row: 2;
  }

  .gsd-cps__nav{
    display: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .gsd-cps__track{ scroll-behavior: auto; }
}