/* ===========================
   POST PAGE LAYOUT — v2
   - Title sits beside a medium image (left column)
   - Blocks are fully visible (no reduced opacity)
   =========================== */

:root{
  --page-max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --left-col: minmax(340px, 44%);        /* room for image + title row */
  --fg: #1b1b1b;                         /* darker text for visibility */
  --muted: #6a6f76;
  --radius: 14px;
}
.tools{
  align-items: center;
  position: relative;
  top: 20%;
  right:50%

}
/* Outer two-column shell */
.post-layout{
  display:grid;
  grid-template-columns: var(--left-col) 1fr;
  gap: 65px;
  width:min(var(--page-max), 92vw);
  margin: 2rem auto 4rem;
  color: var(--fg);
}

/* ---------------- Left column ---------------- */
.post-left{
  display:grid;
  grid-template-columns: auto 1fr;  /* image | title */
  grid-auto-rows: auto;
  align-items:center;
  gap: 1rem 1.25rem;
  text-align: justify;
}

/* Medium image, fixed track width but responsive */
.post-media{
  grid-column:1;
  grid-row:1;
  margin:0;
}
.post-image{
  display:block;
  width: clamp(100px, 10vw, 150px);  /* medium */
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

/* Title sits to the right of the image */
.post-title{
  grid-column:2;
  grid-row:1;
  margin:0;
  font-weight: 800;
  line-height:1.15;
  font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem);
  color: var(--fg);
  word-break: break-word;
}

/* Blocks 1 & 2 stack under the title, spanning full left width */
.left-extra{
  grid-column: 1 / -1;
  display:grid;
  gap: .85rem;
  margin-top:2.5%;
}

/* ---------------- Right column ---------------- */
.post-right{
  display:grid;
  gap: 1.04rem;
  text-align: justify;
}
.right-content{ display:grid; gap: 1rem; min-width:0; }
.right-cta{ margin-top: .25rem; }

/* Rhythm & strong visibility */
.post-left p,
.post-right p{
  margin:0;
  line-height:1.7;
  color: var(--fg);
  opacity: 1;              /* force full visibility */
}

/* Optional: headings inside blocks */
.left-extra h1,
.right-content h1{
  margin: .2rem 0 .35rem;
  font-size: clamp(1.1rem, .9rem + .6vw, 1.5rem);
  line-height:1.25;
}

/* CTA button */

/* ======================
   NEON GLOW CTA BUTTON
   ====================== */

.btn-join {
  position: relative;
  display: inline-block;
  padding: 0.85rem 1.8rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: #bf14a5;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s ease;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  left:35%;
  bottom: 6rem;
}

.post-right-3{
  position:relative;
  top:66%
}

.post-cta-4 { margin-top: 7rem; }

/* Button text */
.btn-text {
  position: relative;
  z-index: 2;
}

/* Neon glowing layer */
.neon-glow {
  position: absolute;
  inset: 0;
  background: #e091e4;
  border-radius: 9999px;
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.9);
  transition: all 0.4s ease;
}
.h4{
  text-align: center;
  font-family: Bobby Jones;
  font-size: 25px;
  margin-bottom: 15%;
}
.h41{
  text-align: center;
  margin:0;
  align-items: center;
  font-family: Bobby Jones;
  justify-content: center;
  top:12%;
  
  font-size: 25px;
  margin-bottom: 1%;
}
.h412{
  text-align: center;

  align-items: center;
  font-family: Bobby Jones;
  justify-content: center;
  position: relative;
  top:15%;
  left:35%;
  
  font-size: 25px;
  margin-bottom: 1%;
}

/* Hover animation */
.btn-join:hover {
  background: transparent;
  color: #000000;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(111, 111, 111, 0);
}

.btn-join:hover .neon-glow {
  opacity: 1;
  transform: scale(1.15);
  animation: pulseGlow 1.5s infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}


/* Keep long right-side content readable width */
.right-content > *{ max-width: 70ch; }

/* -------------- Mobile -------------- */
@media (max-width: 960px){
  .post-layout{
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 1rem auto 3rem;
  }

  /* Stack: image over title for small screens */
  .post-left{
    grid-template-columns: 1fr;
    align-items:start;
  }
  .post-media{ grid-column:1; grid-row:1; }
  .post-title{ grid-column:1; grid-row:2; }
  .left-extra{ grid-column:1; }

  .right-content > *{ max-width: 100%; }
  .post-cta-wrap{ place-items: stretch; }
  .ps-button,.post-cta-button{ width:100%; }
}
/* ---- Compact mobile view (fix extra whitespace) ---- */
@media (max-width: 600px) {
  .post-layout{
    margin: 0.5rem auto 1.5rem;
    gap: 12px;
    padding-left: 4%;
    padding: 8%;
  }
  
  /* stack compactly */
  .post-left{ gap: 10px; }
  .left-extra,
  .right-content{ gap: 10px; }

  /* remove the push-down on mobile */
  .post-right-3{
    position: static;     /* or keep relative and set top:0 */
    top: 0;
    margin-top: 6px;
  }

  /* pull CTA closer */
  .post-cta-4{
    margin-top: 5rem;    /* was 7rem */
  }

  /* center the button and remove offsets */
  .btn-join{
    
    bottom: 0;
    display: inline-flex;
    left: 22%;
    margin: 10px auto 1;  /* centers it */
    align-items: center;
    text-align: center;
    position: relative;
   
  }

  /* slightly smaller heading inside block 4 */
  .h4{
    margin: 8px 0 10px;
    font-size: 13px;
    align-items: center;
  }

  /* optional: smaller image to reduce vertical stretch */
  .post-image{
    width: clamp(90px, 22vw, 120px);
  }
  .tools{
  align-items: center;
  position: relative;
  top: 2%;
  left:0.5%;
}
.h412{
  text-align: center;
   font-size: 20px;
  align-items: center;
  font-family: Bobby Jones;
  justify-content: center;
  position: relative;
  top:15%;
  left:28%;
  
  /* font-size: 25px; */
  margin-bottom: 1%;
}
.h41{font-size: 13px;}

  
}