@media (max-width: 480px) {
    .hide img {
        display: none;
    }
	.small {
		font-size: 48px !important;
	}
	.phone-heading-1 {
		font-size: 28px !important;
	}

}


/* Desktop ≥ 768 px */
@media (min-width: 768px) {
  .hero-padding {
    margin-top: 50px !important;
		margin-bottom: 20px !important;
		padding-left: 100px !important;
		padding-right: 100px !important;
  }
}




/* Below for landing page */










/* ===== Base (desktop/tablet) ===== */
.responsive-gallery {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 24px;                 
  max-width: 1000px;         
  width: 100%;
  margin: 0 auto;            
  align-items: start;        
}

.responsive-gallery .wp-block-image {
  margin: 0;                 
  align-self: start;         
}

.responsive-gallery .wp-block-image img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  vertical-align: top;       
}

/* If a Columns block is inside, keep its children centered */
.responsive-gallery .wp-block-columns.is-layout-flex {
  justify-content: center;
}
.responsive-gallery .wp-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== Mobile: full-bleed, 1 column ===== */
@media (max-width: 768px) {

  /* Let the gallery break out of Astra/Gutenberg container and fill the viewport */
  .entry-content > .responsive-gallery,
  .responsive-gallery.alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Kill side padding added by Astra’s container on pages with this block */
  .site-content .ast-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Stack images edge-to-edge */
  .responsive-gallery {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
		padding-top: 40px !important;
  }

  .responsive-gallery .wp-block-image,
  .responsive-gallery .wp-block-image img {
    width: 100% !important;     
    max-width: 100% !important;
    margin: 0 !important;
    display: block;
  }

  /* Prevent tiny white sliver caused by 100vw scrollbar math */
  html, body {
    overflow-x: hidden;
  }
}

/* ===== Safety reset when returning to ≥769px ===== */
@media (min-width: 769px) {
  .entry-content > .responsive-gallery,
  .responsive-gallery.alignfull {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 1000px !important;
  }
}













/* Larger font size on desktop */
@media (min-width: 768px) {
  .landing-page-desktop-hook-text {
    font-size: 4.5rem !important;
  }
	  .landing-page-desktop-callout-text {
    font-size: 1.5rem !important;
			padding-bottom: 15px
  }
	.landing-page-desktop-question-text {
    font-size: 1.2rem !important;
  }
	.landing-page-desktop-below-image-text {
    padding-bottom: 15px !important;
  }
	.landing-page-desktop-thumbnail-image img {
		width: 600px !important;
		height: auto !important;

	}
}

/* For the blur on open of popup for longevity recipes */
.pum-overlay {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


/* For the bar in the popup for longevity recipes */
/* Base bar */
.gz-anim-bar{
  position: relative;
  width: 85%;
	margin: 0 auto;
  height: 12px;
  border-radius: 999px;
  background: #2a9d8f;
  overflow: hidden;      /* clip corners nicely */
}
/* Stripes overlay (vertical → skewed to diagonal) */
.gz-anim-bar::before{
  content: "";
  position: absolute;
  inset: 0;
  /* make it wider so skew doesn't leave gaps */
  width: 200%;
  left: -50%;
  /* vertical stripes: 8px light, 8px gap */
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.22) 0 8px,
    transparent 8px 16px
  );
  transform: skewX(-45deg);
  transform-origin: center;
  animation: gz-slide 0.5s linear infinite;
}
/* Slide the overlay left → right smoothly */
@keyframes gz-slide{
  from { transform: skewX(-45deg) translateX(0); }
  to   { transform: skewX(-45deg) translateX(16px); } /* one stripe cycle */
}



/* For the arrow pointing on the coaching page to get free longevity meals */
.wp-block-button__link.arrow-btn,
.arrow-btn .wp-block-button__link {
  position: relative;
  padding-right: 2.55rem;
  --arrow-dur: 1.8s;   /* a touch longer feels silkier */
  --arrow-dist: 12px;   /* travel distance */
  --arrow-phase: 0.50; /* offset for trailing arrow (0–1) */
}

/* Lead arrow */
.wp-block-button__link.arrow-btn::after,
.arrow-btn .wp-block-button__link::after {
  content: "\203A"; /* › (or "\2192") */
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translate3d(calc(-1 * var(--arrow-dist)), -50%, 0);
  font-size: 1.5em;
  line-height: 1;
  font-weight: 600;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;

  animation:
    arrow-slide var(--arrow-dur) linear infinite,
    arrow-fade-sine var(--arrow-dur) linear infinite; /* smooth opacity */
}

/* Trailing arrow (phase-shifted) */
.wp-block-button__link.arrow-btn::before,
.arrow-btn .wp-block-button__link::before {
  content: "\203A";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translate3d(calc(-1 * var(--arrow-dist)), -50%, 0);
  font-size: 1.5em;
  line-height: 1;
  font-weight: 600;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;

  animation:
    arrow-slide var(--arrow-dur) linear infinite,
    arrow-fade-sine var(--arrow-dur) linear infinite;

  animation-delay:
    calc(-1 * var(--arrow-dur) * var(--arrow-phase)),
    calc(-1 * var(--arrow-dur) * var(--arrow-phase));
}

/* Linear glide */
@keyframes arrow-slide {
  from { transform: translate3d(calc(-1 * var(--arrow-dist)), -50%, 0); }
  to   { transform: translate3d(var(--arrow-dist), -50%, 0); }
}

/* Smooth sine-like fade: 0 → 1 → 0 with no plateaus */
@keyframes arrow-fade-sine {
   0%   { opacity: 0; }
  12.5% { opacity: 0.146; }
  25%   { opacity: 0.5; }
  37.5% { opacity: 0.854; }
  55%   { opacity: 1; }     
  62.5% { opacity: 0.854; }
  75%   { opacity: 0.5; }
  87.5% { opacity: 0.146; }
 100%   { opacity: 0; }
}

/* End for landing page */