/* =========================================================
   Landing Page Styles — shared by start-a-fundraiser.html and
   wholesale-partner.html. Class names are generic (.lp-*) so both
   pages reuse this single stylesheet on top of styles.css.
   ========================================================= */

/* ---------- Hero (split: message + form card) ---------- */
.lp-hero {
  position: relative;
  min-height: 100vh;
  background: var(--dark) center top/cover no-repeat;
  background-image: url('../images/fundraising-hero.jpg');
}

@media (max-width: 900px) {
  .lp-hero { background-image: url('../images/fundraising-hero-mobile.jpg'); min-height: auto; }
}

/* Wholesale page uses a different hero photo — same responsive swap pattern */
.lp-hero--wholesale { background-image: url('../images/wholesale-hero.jpg'); }
@media (max-width: 900px) {
  .lp-hero--wholesale { background-image: url('../images/wholesale-hero-mobile.jpg'); }
}

.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20,20,20,0.88) 0%, rgba(20,20,20,0.72) 45%, rgba(20,20,20,0.4) 75%, rgba(20,20,20,0.25) 100%);
}

@media (max-width: 900px) {
  .lp-hero::before { background: linear-gradient(180deg, rgba(20,20,20,0.55) 0%, rgba(20,20,20,0.75) 55%, rgba(20,20,20,0.92) 100%); }
}

.lp-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 150px 24px 70px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

/* Desktop: headline + subtext grouped as one column, form as the other — no row-spanning gaps */
.lp-hero-text-col { display: flex; flex-direction: column; gap: 24px; }

/* Mobile: dissolve the wrapper so headline / form / subtext can be reordered independently,
   putting the form immediately after the headline with zero scrolling */
@media (max-width: 900px) {
  .lp-hero-inner {
    grid-template-columns: 1fr;
    padding: 108px 20px 32px;
    gap: 20px;
  }
  .lp-hero-text-col { display: contents; }
  .lp-hero-headline { order: 1; }
  .lp-form-card { order: 2; }
  .lp-hero-subtext { order: 3; }
  .header-logo img { height: 64px; }
}

.lp-hero-headline .section-label { color: #ffd27a; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }

.lp-hero-headline h1 {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 10px 0 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}

.lp-hero-subtext p {
  color: rgba(255,255,255,0.92);
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 26px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

@media (max-width: 900px) {
  .lp-hero-headline h1 { font-size: 1.7rem; margin-top: 6px; }
  .lp-hero-subtext p { font-size: 1rem; margin-bottom: 18px; }
}

.lp-hero-value {
  color: rgba(255,255,255,0.92);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-top: 14px;
  max-width: 480px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

@media (max-width: 900px) {
  .lp-hero-value { font-size: 0.95rem; margin-top: 10px; }
}

.lp-trust-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-bottom: 8px;
}

.lp-trust-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.lp-trust-list svg {
  width: 20px;
  height: 20px;
  fill: #7CD08A;
  flex-shrink: 0;
}

/* ---------- Form card ---------- */
.lp-form-card {
  background: var(--white);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}

.lp-form-card h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--dark);
  margin-bottom: 4px;
}

.lp-form-card .lp-form-sub {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.lp-form-urgency {
  background: #fff6e5;
  border: 1px solid #ffe2a8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #7a5a00;
  margin-bottom: 20px;
}

.lp-form-card .form-group { margin-bottom: 16px; }
/* Re-point the rhythm rather than re-declaring margins — and zero the field
   margin inside a row here too, because this file loads after styles.css at
   equal specificity and would otherwise reinstate it. */
.lp-form-card .form-row { --field-gap: 16px; }
.lp-form-card .form-row > .form-group { margin-bottom: 0; }

/* Force 16px minimum on inputs so mobile Safari doesn't auto-zoom on focus */
.lp-form-card .form-group input,
.lp-form-card .form-group select,
.lp-form-card .form-group textarea {
  font-size: 16px;
}

.lp-form-note {
  text-align: center;
  font-size: 0.85rem;
  color: #6b6b6b;
  margin-top: 14px;
}

.lp-form-or {
  text-align: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eee;
  font-size: 0.95rem;
  color: #666;
}
.lp-form-or a { color: var(--green); font-weight: 700; }

/* ---------- Trust bar ---------- */
.lp-trust-bar {
  background: var(--white);
  padding: 36px 0;
  border-bottom: 1px solid #eee;
}

.lp-trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

@media (max-width: 900px) {
  .lp-trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
}

.lp-trust-bar-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--green);
  margin-bottom: 4px;
}

.lp-trust-bar-item span {
  font-size: 0.9rem;
  color: #555;
}

/* Reserve two lines for the heading so an item whose heading wraps ("You Set
   the Price") does not sit its description a line below its neighbour's. */
@media (max-width: 900px) {
  .lp-trust-bar-item strong { min-height: 2.4em; }
}

/* ---------- Quote block ---------- */
.lp-quote {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-style: italic;
  color: var(--dark);
  line-height: 1.6;
}

.lp-quote-cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--green);
}

/* ---------- Sticky mobile CTA bar ---------- */
.lp-sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  .lp-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  }
  .lp-sticky-cta a {
    flex: 1;
    text-align: center;
    padding: 16px 8px;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
  }
  .lp-sticky-cta a.lp-sticky-call { background: var(--dark); color: #fff; }
  .lp-sticky-cta a.lp-sticky-inquire { background: var(--green); color: #fff; }
  body { padding-bottom: 58px; }
}

/* ---------- 5-item product grid: centered 2-up row, then a full 3-up row,
   instead of a lopsided 3-then-2 row with an empty trailing gap ---------- */
.lp-product-grid-2-3 {
  grid-template-columns: repeat(6, 1fr);
}
.lp-product-grid-2-3 > div:nth-child(1) { grid-column: 2 / 4; }
.lp-product-grid-2-3 > div:nth-child(2) { grid-column: 4 / 6; }
.lp-product-grid-2-3 > div:nth-child(3) { grid-column: 1 / 3; }
.lp-product-grid-2-3 > div:nth-child(4) { grid-column: 3 / 5; }
.lp-product-grid-2-3 > div:nth-child(5) { grid-column: 5 / 7; }

@media (max-width: 900px) {
  .lp-product-grid-2-3 { grid-template-columns: repeat(2, 1fr); }
  .lp-product-grid-2-3 > div:nth-child(n) { grid-column: auto; }
}
@media (max-width: 540px) {
  .lp-product-grid-2-3 { grid-template-columns: 1fr; }
}

/* ---------- Local/family trust photo ---------- */
.lp-family-photo {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #111;
}
.lp-family-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* ---------- Footer 2-column override for landing page ---------- */
.lp-footer-inner { grid-template-columns: 1.3fr 1fr !important; }
@media (max-width: 900px) {
  .lp-footer-inner { grid-template-columns: 1fr !important; }
}

/* ---------- Fundraiser landing hero photo ----------
   With the form card inside it this hero runs past 900px tall, and
   fundraising-hero.jpg is a 1940x674 panorama: cover-fitting it to that
   height upscales it ~1.5x and it goes soft. hero.jpg is 16:9 and was
   composed with a dark gutter down the middle — which is where the text
   column and the form card sit — so the subs and the pizza show at the
   edges instead of hiding behind the card. The photo carries most of the
   contrast itself, so the scrim is lighter than the base one. Phones keep
   the portrait photo and the base gradient. */
.lp-hero--fundraiser { background-image: url('../images/hero.jpg'); background-position: center center; }
.lp-hero--fundraiser::before {
  background: linear-gradient(100deg, rgba(20,20,20,0.72) 0%, rgba(20,20,20,0.5) 42%, rgba(20,20,20,0.18) 70%, rgba(20,20,20,0.1) 100%);
}
@media (max-width: 900px) {
  .lp-hero--fundraiser { background-image: url('../images/fundraising-hero-mobile.jpg'); background-position: center top; }
  .lp-hero--fundraiser::before { background: linear-gradient(180deg, rgba(20,20,20,0.55) 0%, rgba(20,20,20,0.75) 55%, rgba(20,20,20,0.92) 100%); }
}