/* BLOG HERO SECTION */
/* =========================
   NEWS HERO (CURVED PNG)
   ========================= */

/* =========================
   NEWS HERO + INTRO (FINAL)
   ========================= */

:root{
  --cream: #f4efe7;
  --title: #BA654F;
  --body:  #534438;
}

/* Allow decorative elements to overflow without being clipped */
html, body { overflow-x: hidden; }

/* HERO WRAPPER */
.blog-hero{
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  height: 640px;

  overflow: visible;              /* let badge overlap */
  z-index: 2;                     /* hero base layer */

  background-color: var(--cream);
  background-image: url('/wp-content/uploads/2026/02/Group-2341.png');
  background-repeat: repeat;
  background-position: center top;
}

/* MEDIA CLIP (only the photo is clipped) */
.blog-hero-media{
  position: absolute;
  inset: 0;
  overflow: hidden;               /* crop the photo */
  z-index: 1;
}

.blog-hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* keep curve visible on wide screens */
  object-position: center bottom;

  display: block;
  pointer-events: none;
}

/* INTRO SECTION */
.blog-hero-intro{
  position: relative;
  z-index: 3;                     /* IMPORTANT: above hero so badge can overlap upward */

  background-color: var(--cream);
  background-image: url('/wp-content/uploads/2026/02/Group-2341.png');
  background-repeat: repeat;
  background-position: center top;

  padding: 120px 20px 70px;       /* room for badge above text */
  overflow: visible;
  padding-bottom:300px;
}

/* CONTENT */
.blog-hero-overlay{
  width: min(1060px, calc(100% - 40px));
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 10;                    /* above wheat art */
  overflow: visible;
}

/* BADGE: anchored to overlay but allowed to sit ON the curve */
.blog-hero-overlay::before{
  content:"";
  position: absolute;
  left: 50%;
  top: -162px;                     /* tune: -80 to -110 */
  width: 72px;
  height: 72px;
  transform: translateX(-50%);
  background: url('/wp-content/uploads/2026/02/Wildrye-Icon-Badge.png') no-repeat center;
  background-size: contain;
  pointer-events: none;
  z-index: 9999;
}

/* BLUE WHEAT: attach to INTRO (not overlay), and lift it above clipping contexts */
.blog-hero-intro::before{
  content:"";
  position: absolute;
  left: -320px;
  top: -220px;                    /* move higher so it’s not “cut” */
  width: 680px;
  height: 680px;
  background: url('/wp-content/uploads/2026/02/wheat-illustration-blue.png') no-repeat;
  background-size: contain;
  transform: rotate(-10deg);
  pointer-events: none;
  z-index: 2;                     /* behind text, above background */
}

/* Typography */
.blog-hero-overlay h1{
  font-family: "the-seasons", serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.15;
  color: var(--title);
  margin: 0 0 18px;
}

.blog-hero-overlay p{
  max-width: 960px;
  margin: 0 auto;
  font-family: "proxima-nova-wide", sans-serif;
  color: var(--body);
  font-size: 20px;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 720px){
  .blog-hero{ height: 460px; }
  .blog-hero-img{ object-position: center 35%; }

  .blog-hero-intro{
    padding: 110px 18px 60px;
    padding-bottom:200px;
    }

  .blog-hero-overlay::before{
    top: -148px;
    width: 64px;
    height: 64px;
  }

  .blog-hero-intro::before{
    left: -360px;
    top: -260px;
    width: 620px;
    height: 620px;
  }
}

/* If any smooth-scroll wrapper is clipping, force visible (safe targeted set) */
#smooth-wrapper,
#smooth-content{
  overflow: visible !important;
}

/* BLOG GRID */

/* =========================
   BLOG GRID (OVERLAP + RESPONSIVE)
   ========================= */

.blog-grid-wrapper{
  /* red background */
  background: #c6523c;
  background-image:url('/wp-content/uploads/2026/03/red-wheat-pattern-bg.jpg');
  background-repeat: repeat;
  background-position: center top;

  /* overlap into the beige area above */
  margin-top: -140px;          /* how much it “sticks up” */
  padding: 220px 20px 80px;    /* top padding creates space so cards sit nicely */

  position: relative;
  z-index: 20;                 /* ensures it sits above the beige section at overlap */
}

/* Grid layout */
.blog-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: stretch;
  margin-top:-300px;
}

/* Card */
.blog-card{
  background: #f4efe7;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card-image img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  display:block;
}

.blog-card-content{
  padding: 30px;
  text-align: center;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-card-content h3{
  font-family: 'the-seasons', serif;
  font-size: 28px;
  margin-bottom: 10px;
  color:#5B685F;
}

.blog-date{
  font-size: 16px;
  margin-bottom: 18px;
  font-weight:600;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform:uppercase;
  color:#83989C;
  letter-spacing:1px;
}

.blog-btn { display: inline-block; padding: 10px 20px; color: #fff; text-decoration: none; }

.blog-btn:hover { transform: translateY(-1px); }

.blog-btn-img{ display:block; width: 200px; /* adjust */ height: auto; }

/* Button pinned to bottom */
.blog-card-content .blog-btn{
  margin-top: auto;
}

/* =========================
   PAGINATION (arrows + active circle)
   ========================= */

.blog-pagination{
  margin-top: 44px;
  display: flex;
  justify-content: center;
}

.blog-pagination .nav-links{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* Base page numbers */
.blog-pagination .page-numbers{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;

  color: rgba(255,255,255,0.9);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
}

/* Active page gets a round "pill/circle" */
.blog-pagination .page-numbers.current{
  color: #fff;
  /*background: #8CA6AA;*/   /* teal circle/pill */
  border-radius: 999px;
  padding: 10px 14px;
  font-weight:800;
}

/* NEXT / PREV become icon buttons */
.blog-pagination .page-numbers.next,
.blog-pagination .page-numbers.prev{
  position: relative;
  font-size: 0;          /* hide the text NEXT / PREVIOUS */
  width: 30px;
  height: 30px;
}

/* Draw arrow glyphs */
.blog-pagination .page-numbers.prev::before{
  content: "←";
  font-size: 22px;
  line-height: 30px;
  color: rgba(255,255,255,0.9);
  display: block;
  text-align: center;
}

.blog-pagination .page-numbers.next::before{
  content: "→";
  font-size: 22px;
  line-height: 30px;
  color: rgba(255,255,255,0.9);
  display: block;
  text-align: center;
}

/* Hover */
.blog-pagination .page-numbers:hover{
  color: #fff;
}

.blog-pagination .page-numbers.prev:hover::before,
.blog-pagination .page-numbers.next:hover::before{
  color: #fff;
}

/* Tablet -> 2 columns */
@media (max-width: 1024px){
  .blog-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Mobile -> 1 column */
@media (max-width: 720px){
  .blog-grid-wrapper{
    margin-top: -110px;
    padding: 190px 18px 60px;
  }

  .blog-grid{
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-top:-250px;
  }
}

/* =========================
   SINGLE POST (NEWS) STYLING
   ========================= */

.single-news{
  background-color: #f4efe7;
  background-image: url('/wp-content/themes/wildrye/images/bg-dot-texture-03.jpg');
  background-repeat: repeat;
  background-position: left top;
}

/* HERO */
.single-news-hero{
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  height: 640px;
  overflow: visible;
  background: transparent;
}

.single-news-hero-media{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.single-news-hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

/* Red patterned band across hero (matches mock) */
.single-news-hero-band{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                 /* KEY: anchored to the bottom */
  height: 70px;             /* band thickness */
  background-image: url('/wp-content/uploads/2026/03/red-wheat-pattern-bg.jpg');
  background-repeat: repeat;
  background-position: center;
  z-index: 3;
  pointer-events: none;
}

/* Badge on right */
.single-news-hero-badge{
  position: absolute;
  right: 90px;               /* adjust */
  bottom: 45px;              /* centers it vertically on a 110px band */
  transform: translateY(50%);/* perfect center */
  width: 160px;
  height: 160px;
  background: url('/wp-content/uploads/2026/03/wildrye-waller-tx-badge.png') no-repeat center;
  background-size: contain;
  z-index: 4;
  pointer-events: none;
}

/* BODY */
.single-news-body{
  position: relative;
  z-index: 2;
  padding: 60px 20px 80px;
}

/* Blue wheat on left */
.single-news-body::before{
  content:"";
  position: absolute;
  left: -240px;
  top: -280px;
  width: 600px;
  height: 600px;
  background: url('/wp-content/uploads/2026/03/wheat-blue.png') no-repeat;
  background-size: contain;
  transform: rotate(-1deg);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

.single-news-inner{
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-left: 0;
  padding-right: 0;
}

.single-news-title{
  font-family: "the-seasons", serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.15;
  color: #BA654F;
  margin: 0 0 14px;
  text-align:left;
}

.single-news-meta{
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #83989C;
  margin-top:22px;
  margin-bottom: 22px;
  text-align:left;
}

.single-news-content{
  font-family: "proxima-nova-wide", sans-serif;
  color: #534438;
  font-size: 18px;
  line-height: 1.8;
  text-align:left;
}

/* =========================
   SINGLE POST - BOTTOM CTA (SVG)
   ========================= */

.single-news-cta{
  display: flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  margin-top: 36px;
}

/* SVG button */
.single-news-cta-btn{
  display: inline-block;
  width: 520px;   /* tune to match the SVG’s natural size */
  height: 60px;   /* tune to match the SVG’s natural size */
  background: url('/wp-content/uploads/2026/03/Discover-More-From-Wildrye-Button.svg') no-repeat center;
  background-size: contain;
  text-decoration: none;
  border: 0;
  display: inline-block;
  margin-left:-38px !important;
}

.single-news-cta-btn:hover{ transform: translateY(-1px); }

.single-news-cta-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 4px;
}

/* screen reader helper */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* SINGLE POST - BOTTOM BAND */
.single-news-body{
  position: relative;
  padding-bottom: 140px; /* room for band */
  overflow: visible;
}

/* cream + green strips */
.single-news-body::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75px;
  pointer-events: none;
  z-index: 5;

  background-image:
    linear-gradient(#E6D6B6, #E6D6B6),  /* cream */
    linear-gradient(#5B685F, #5B685F);  /* green */

  background-repeat: no-repeat, no-repeat;
  background-position: left 0 top 0, left 0 bottom 0;
  background-size: 100% 15px, 100% 60px;
}

/* wheat ABOVE the pattern + band */
.single-news-bottom-wheat{
  position: absolute;
  right: -400px;
  bottom: -150px;
  width: 720px;
  height: 720px;
  background: url('/wp-content/uploads/2026/03/wheat-illustration-cream-scaled.png') no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 50; /* higher than everything */
}

/* mobile */
@media (max-width: 720px){
  .single-news-body{ padding-bottom: 120px; }

  .single-news-body::after{
    height: 50px;
    background-size: 100% 8px, 100% 42px;
  }

  .single-news-bottom-wheat{
    right: -170px;
    bottom: -14px;
    width: 300px;
    height: 300px;
  }
}
/* Mobile: full width and centered */
@media (max-width: 720px){
  .single-news-cta-btn{
    width: 100%;
    max-width: 520px;
    height: 56px;
    margin-left:-54px !important;
  }
}
@media (max-width: 400px){
  .single-news-cta-btn{
      margin-left:-20px !important;
  }

}

/* Mobile */
@media (max-width: 720px){
  .single-news-hero{ height: 460px; }

  .single-news-hero-band{ height: 50px; }
  .single-news-hero-badge{
    right: 18px;
    width: 92px;
    height: 92px;
    bottom: 28px;            /* centers on 90px band */
  }
  .single-news-body{ padding: 44px 18px 60px; }
  .single-news-title{ font-size: 34px; }
  .single-news-body::before{
    left: -180px;
    top: -160px;
    width: 360px;
    height: 360px;
  }
}