/* =========================
   HOME PAGE
   ✅ FIX: remove the “void/gap” above hero image caused by main/header offsets
========================= */

/* Prevent horizontal scroll issues + remove default gaps */
html, body{
  width:100%;
  overflow-x:hidden;
  margin:0;
  padding:0;
}

/* ✅ If your theme uses a fixed/sticky header, the main often has padding-top.
   On HOME we do NOT want extra space above the hero background image. */
body.home .vd-main{
  padding-top:0 !important;
}

/* ✅ Some themes add top padding/margin to the first section inside main */
body.home .vd-main > :first-child{
  margin-top:0 !important;
}

/* ✅ If there’s any “admin bar” offset logic adding spacing, this keeps hero tight */
body.home .home-hero{
  margin-top:0 !important;
}

/* ✅ Ensure the hero starts exactly at the top of the main area */
body.home .vd-main .home-hero{
  padding-top: calc(72px + env(safe-area-inset-top)) !important; /* header height */
}

/* ✅ If your header is fixed on mobile (you do this in header.css),
   don’t let any inherited offset create a blank band */
@media (max-width:820px){
  body.home .vd-main .home-hero{
    padding-top: calc(64px + env(safe-area-inset-top)) !important; /* mobile header height */
  }
}

/* =========================
   HERO SECTION
========================= */

.home-hero{
  min-height: calc(100svh - 72px);
  position:relative;
  display:grid;

  /* ✅ UPDATED: desktop now matches mobile */
  align-items:center;        /* was: end */
  justify-items:center;      /* ensure inner centers horizontally */

  padding: 0 0 calc(34px + env(safe-area-inset-bottom)); /* ✅ top padding handled above */
  overflow:hidden;
}

@supports (height: 100dvh){
  .home-hero{
    min-height: calc(100dvh - 72px);
  }
}

/* Background image */
.home-hero__bg{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.02);
  z-index:0;
}

/* Remove old overlay element */
.home-hero__overlay{
  display:none;
}

/* =========================
   HERO LAYER SYSTEM
========================= */

/* HERO OVERLAY — seamless fade (no harsh slab at bottom) */
.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    /* gentle darkening for readability, fades out before the section ends */
    linear-gradient(
      180deg,
      rgba(0,0,0,0.38) 0%,
      rgba(0,0,0,0.22) 36%,
      rgba(0,0,0,0.10) 56%,
      rgba(0,0,0,0.00) 76%,
      rgba(0,0,0,0.00) 100%
    ),
    /* soft atmospheric glow in the mid area */
    radial-gradient(
      820px 560px at 50% 58%,
      rgba(64,224,208,0.12) 0%,
      rgba(64,224,208,0.06) 42%,
      rgba(64,224,208,0.02) 66%,
      transparent 80%
    );
  filter: blur(10px);
}

/* keep ::after unused so nothing creates a hard edge */
.home-hero::after{display:none;}

/* =========================
   HERO CONTENT
========================= */

.home-hero .vd-wrap,
.home-hero__inner{
  position:relative;
  z-index:3;
}

.home-hero__inner{
  max-width:900px;
  margin:0 auto;
  padding:0;

  /* ✅ UPDATED: desktop now matches mobile */
  text-align:center;
}

.home-hero__title{
  margin:0 0 14px;
  font-size:clamp(34px, 6vw, 64px);
  line-height:1.02;
  letter-spacing:-0.02em;
  font-weight:1000;
  color:#ffffff;
  text-shadow:0 18px 70px rgba(0,0,0,.95);
}

.home-hero__sub{
  margin:0 0 18px;
  max-width:52ch;

  /* ✅ UPDATED: centers the paragraph on desktop */
  margin-left:auto;
  margin-right:auto;

  font-size:16px;
  line-height:1.7;
  color:rgba(255,255,255,.92);
  text-shadow:0 12px 50px rgba(0,0,0,.85);
}

/* =========================
   HOME COLLECTION
========================= */

.home-collection{
  position:relative;
  padding:30px 0 64px;
}

/* NOTE: section glow removed — handled globally on body for seamless transitions */
.home-collection .vd-wrap{
  position:relative;
  z-index:1;
}

.home-collection__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.home-collection__title{
  margin:0;
  font-size:22px;
  font-weight:1000;
}

.home-collection__sub{
  margin:0;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.5;
  max-width:56ch;
}

/* =========================
   SHOPIFY MOBILE GRID FIX
========================= */

@media (max-width:600px){

  .home-collection .shopify-buy__collection-products,
  .home-collection .shopify-buy__product-list{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:14px !important;
    margin-left:0 !important;
    padding-left:0 !important;
  }

  .home-collection .shopify-buy__product{
    flex:0 0 calc(50% - 7px) !important;
    max-width:calc(50% - 7px) !important;
    width:calc(50% - 7px) !important;
    margin:0 !important;
  }
}

/* =========================
   MOBILE HERO IMPROVEMENTS
========================= */

@media (max-width:820px){

  .home-hero{
    min-height: calc(100svh - 64px);
    padding: 0 0 calc(28px + env(safe-area-inset-bottom)); /* ✅ top padding handled above */
    align-items:center;
  }

  @supports (height: 100dvh){
    .home-hero{
      min-height: calc(100dvh - 64px);
    }
  }

  .home-hero__inner{
    text-align:center;
    padding:0 12px;
  }

  .home-hero__title{
    font-size:clamp(30px, 9vw, 44px);
  }

  .home-hero__sub{
    margin-left:auto;
    margin-right:auto;
  }

  .home-hero::after{
    background:
      radial-gradient(
        420px 320px at 50% 55%,
        rgba(64,224,208,0.14) 0%,
        rgba(64,224,208,0.07) 48%,
        rgba(64,224,208,0.025) 68%,
        transparent 82%
      );
  }

  /* Force mobile background image */
  .home-hero__bg{
    background-image:url('/wp-content/themes/voluntary-custom/assets/img/patches-hero-mobile.webp') !important;
  }

  .home-collection{
    padding:24px 0 52px;
  }

  .home-collection__head{
    flex-direction:column;
  }
}

/* =========================
   HOME — ABOUT SECTION
========================= */

.home-about{
  padding:64px 0;
  position:relative;
}

.home-about::before{display:none;}

.home-about__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:32px;
  align-items:center;
}

.home-about__copy{
  border-radius:20px;
  border:1px solid rgba(245,247,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:28px;
}

.home-about__title{
  margin:0 0 14px;
  font-size:clamp(28px, 3.5vw, 42px);
  font-weight:1000;
}

.home-about__sub{
  margin:0;
  font-size:15.5px;
  line-height:1.75;
  color:rgba(245,247,255,.72);
  max-width:60ch;
}

.home-about__media{
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(245,247,255,.10);
  background:rgba(255,255,255,.04);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}

.home-about__img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:4/3;
  object-fit:cover;
}

@media (max-width:900px){
  .home-about__grid{
    grid-template-columns:1fr;
    gap:24px;
  }
}

.home-hero__title,
.allpatches-hero__title,
.home-about__title{
  font-family: "Bebas Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .03em;
}

/* =========================
   HOME — CTA SECTION (FIXED: stops full-width card)
   - Your screenshot shows .vd-wrap is being forced full width by global CSS.
   - So we hard-enforce a "container width" and add gutters.
   - NO HTML changes required.
========================= */

.vd-home-cta{
  position:relative;
  padding: 54px 0 72px;
  overflow:hidden;
}

/* Kill any background layer if you had it elsewhere */
.vd-home-cta::before{display:none;}

/* ✅ HARD FIX:
   Force the wrapper itself to behave like a contained card even if a global
   .vd-wrap rule is trying to make it full width. */
.vd-home-cta .vd-wrap{
  position:relative !important;
  z-index:1 !important;

  /* container + gutters */
  width: min(980px, calc(100% - 32px)) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* card */
  border-radius: 22px !important;
  border: 1px solid rgba(245,247,255,.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.45) !important;

  padding: 28px 30px !important;

  display:flex !important;
  flex-direction:column !important;
  gap: 12px !important;

  align-items:flex-start !important;
  text-align:left !important;

  box-sizing:border-box !important;
}

/* heading */
.vd-home-cta h2{
  margin:0 !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.02 !important;
  letter-spacing: .02em !important;
}

/* sub text */
.vd-home-cta p{
  margin:0 !important;
  max-width: 58ch !important;
  color: rgba(245,247,255,.78) !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
}

/* button polish */
.vd-home-cta .vd-btn{
  margin-top: 6px !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
}

/* =========================
   MOBILE TUNING
========================= */

@media (max-width: 820px){

  .vd-home-cta{
    padding: 36px 0 44px;
  }

  /* keep contained with gutters on mobile too */
  .vd-home-cta .vd-wrap{
    width: min(980px, calc(100% - 28px)) !important;
    padding: 22px 18px !important;
    border-radius: 20px !important;

    align-items:center !important;
    text-align:center !important;
  }

  .vd-home-cta p{
    font-size: 15px !important;
  }

  .vd-home-cta .vd-btn{
    width: 100% !important;
    max-width: 340px !important;
    justify-content:center !important;
  }
}