.wp-block-cover {
	height: 100vh;
	width: 100vw;
}

/*==========================
  iPad breakpoint: force header to behave like mobile 
  =========================*/

@media (min-width: 768px) and (max-width: 1481px) {
  header.wp-block-group.alignwide.wp-block-group-is-layout-flex {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  header.wp-block-group.alignwide.wp-block-group-is-layout-flex > .wp-block-group {
    width: 100% !important;
    justify-content: center !important;
  }
	
	


  /* 
============================= Let nav fill line like mobile =============================
	*/
	
  header .wp-block-navigation {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 
============================= If anything is forcing nowrap =============================
 */
	
  header .is-nowrap {
    flex-wrap: wrap !important;
  }
}

/* ===============================
   Small Ensemble Card Height Control
   =============================== */

#bBlocksTestPurpose-3 {
  --fancy-card-height: 600px; 
/* ← change this */
}

/* Lock the card height */
#bBlocksTestPurpose-3 .fancy-card {
  height: var(--fancy-card-height);
  overflow: hidden;          /* keeps image + overlay clipped */
  position: relative;        /* preserves overlay stacking */
}

/* 
===============================Force internal image layers to respect card height 
==============================
*/

#bBlocksTestPurpose-3 .fancy-card-imgWrapper,
#bBlocksTestPurpose-3 .fancy-card-figure {
  height: 100%;
}

/*
=============================== Ensure background images scale correctly 
===============================
*/

#bBlocksTestPurpose-3 .fancy-card-figure {
  background-size: cover;
  background-position: center;
}

/* 
===============================
Keep overlay intact 
===============================
*/

#bBlocksTestPurpose-3 .fancy-card-overlay {
  inset: 0;
}

/* 
===============================Content stays anchored visually 
===============================
*/

#bBlocksTestPurpose-3 .fancy-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@media (max-width: 1024px) {
  #bBlocksTestPurpose-3 {
    --fancy-card-height: 360px;
  }
}

@media (max-width: 640px) {
  #bBlocksTestPurpose-3 {
    --fancy-card-height: 280px;
  }
}

/* ===============================
   Keep overlay locked to card on hover
   ===============================*/

#bBlocksTestPurpose-3 .fancy-card {
  position: relative; 
  overflow: hidden;  
}

/* Explicitly bind overlay to card bounds */

#bBlocksTestPurpose-3 .fancy-card-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none !important;   
	
/* prevent inherited transforms */
	
  transition: opacity 0.3s ease;
}

/* Prevent hover transforms from affecting overlay */

#bBlocksTestPurpose-3 .fancy-card:hover .fancy-card-overlay {
  transform: none !important;
}

/* ===============================
   Mobile Stack: 1 card per row
   ===============================*/

@media (max-width: 640px) {

  /* Ensure grid allows wrapping */
	
  #bBlocksTestPurpose-3 .fancy-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Stack cards vertically */
	
  #bBlocksTestPurpose-3 .fancy-card {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

}

/* ===============================
   Responsive layout (desktop / tablet / phone)
   ===============================*/

/* Force the card container to behave like a grid */

#bBlocksTestPurpose-3 .fancy-grid{
  display: grid ;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* desktop default */
  gap: 16px !important;
}

/* Override the builder max-width on cards */

#bBlocksTestPurpose-3 .fancy-card{
  max-width: none !important;
  width: 100% !important;
  min-height: 0 !important;
}

/* Tablet: 2 columns */

@media (max-width: 1024px){
  #bBlocksTestPurpose-3 .fancy-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone: stack (1 column) + shrink text */

@media (max-width: 640px){
  #bBlocksTestPurpose-3 .fancy-grid{
    grid-template-columns: 1fr;
  }

  #bBlocksTestPurpose-3 .fancy-card-title{
    font-size: 20px !important;   
		/* adjust as needed */
		
    line-height: 1.15 !important;
  }

  #bBlocksTestPurpose-3 .fancy-card-tag{
    font-size: 12px !important;  
		/* adjust as needed */
  }
}

/* button hover*/

.wp-block-button__link {
	background-color: #303eae;
}
.wp-block-button__link:hover {
  background-color: #4554cc;
  color: #ffffff;
}
 
/* button radius ease*/

.wp-block-button__link {
  transition: background-color 	 0.3s ease,
	color 0.3s ease,
	border-radius 0.2s ease;
}

/* Jetpack Subscribe button specifically */

button.wp-block-button__link.no-border-radius {
  border-radius: 3px !important;
}
.wp-block-button__link {
  border-radius: 3px !important;
}

/* Make logos bigger in sponsor cards */

.sponsor-grid .sponsor-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/*Sponsor logo size */

.sponsor-grid .sponsor-card img {
  width: auto !important;
  height: 80px !important;       
	/* <-- change this number */
	
  max-height: 100% !important;
  max-width: 90% !important;     
	/* keeps it from overflowing horizontally */
	
  object-fit: contain;
  display: block;
}

/* =====================================
   Dropdown hover / focus highlight
   ===================================== */

/* Target submenu links */
.wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 8px 12px; /* improves hover hit area */
}

/* Hover + keyboard focus */
.wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:focus {
  background-color: rgba(69, 84, 204, 1); /* change color here */
  color: #ffffff;
  border-radius: 0px;
}
/* Zoom hover effect for CoBlocks feature images */
.wp-block-coblocks-feature .wp-block-image {
  overflow: hidden; /* prevents zoom spill */
}

.wp-block-coblocks-feature .wp-block-image img {
  transition: transform 0.4s ease;
  transform: scale(1);
}

.wp-block-coblocks-feature .wp-block-image:hover img {
  transform: scale(1.08);
}
/* Jetpack Tiled Gallery: make left/right padding match */
.wp-block-jetpack-tiled-gallery {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Apply equal gutters to the actual tiled gallery layout */
.wp-block-jetpack-tiled-gallery .tiled-gallery__gallery {
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* If tiles still touch an edge, force rows to respect the padding */
.wp-block-jetpack-tiled-gallery .tiled-gallery__row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* ===============================
   #bBlocksTestPurpose-3: CLEAN dramatic wave (ease-in), CSS-only, viewport-triggered
   Starts when card TOP reaches bottom third of viewport
   =============================== */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #bBlocksTestPurpose-3 .fancy-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Fallback: keep cards visible if view() isn't supported */
#bBlocksTestPurpose-3 .fancy-card {
  opacity: 1;
  transform: none;
}

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

  #bBlocksTestPurpose-3 .fancy-card {
    /* Trigger threshold: top hits bottom-third line */
    view-timeline-inset: 0px 0px 50vh 0px;

    /* start state */
    opacity: 0;
    transform: translate3d(var(--wave-x, 0px), 70px, 0);

    /* smooth ease-in + ease-out */
    animation-name: bthWaveInClean;
    animation-duration: 1.00s; /* slower */
    animation-timing-function: cubic-bezier(.22, 0, .3, .5); /* clean ease-in-out */
    animation-fill-mode: forwards;

    /* viewport-driven */
    animation-timeline: view();
    animation-range: entry 1% entry 100%;

    will-change: transform, opacity;
  }

  /* Bigger stagger = clearer wave */
  #bBlocksTestPurpose-3 .fancy-card:nth-child(1) { --wave-x: -60px; animation-delay: 0.25s; }
  #bBlocksTestPurpose-3 .fancy-card:nth-child(2) { --wave-x: -36px; animation-delay: 0.50s; }
  #bBlocksTestPurpose-3 .fancy-card:nth-child(3) { --wave-x: -12px; animation-delay: 0.75s; }
  #bBlocksTestPurpose-3 .fancy-card:nth-child(4) { --wave-x:  12px; animation-delay: 1.00s; }
  #bBlocksTestPurpose-3 .fancy-card:nth-child(5) { --wave-x:  36px; animation-delay: 1.25s; }
  #bBlocksTestPurpose-3 .fancy-card:nth-child(6) { --wave-x:  60px; animation-delay: 1.50s; }

  @keyframes bthWaveInClean {
    from {
      opacity: 0;
      transform: translate3d(var(--wave-x, 0px), 80px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}

/* ===============================
   FIX: stop horizontal scroll caused by #bBlocksTestPurpose-3 animations (mobile)
   Drop at VERY BOTTOM of CSS
   =============================== */

@media (max-width: 768px) {

  /* 1) Prevent the section from creating horizontal overflow */
  #bBlocksTestPurpose-3,
  #bBlocksTestPurpose-3 .container,
  #bBlocksTestPurpose-3 .fancy-grid {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* 2) Kill horizontal drift on mobile (keeps bottom-to-top animation) */
  #bBlocksTestPurpose-3 .fancy-card {
    --wave-x: 0px !important;
  }

  /* 3) As an extra guard, ensure cards never exceed viewport width */
  #bBlocksTestPurpose-3 .fancy-card,
  #bBlocksTestPurpose-3 .fancy-card * {
    max-width: 100% !important;
  }
}