/* ==========================================================================
   Giving page overrides
   Loaded only by giving.html, after the Webflow stylesheet, so plain
   same-specificity rules here win — including over Webflow's own breakpoint
   rules. That is why the sizes below are clamp()s rather than a new set of
   media queries: one rule has to hold from 320px to 1920px.

   Three things are going on:
     1. The background-video hero (.section-31) is gone from the markup, so
        .section-32 — which used to ride up over the video on a -36% margin —
        now has to start the page itself and carry its blue up behind the
        transparent nav.
     2. Everything that followed is pulled up into the space that freed.
     3. The whole page is scaled down so more of it fits on a screen: the
        option cards were 935px and 516px tall, the headline 212px.
   ========================================================================== */

/* --- 1. the page now opens on content ------------------------------------ */

/* The nav is transparent and sits in normal flow above .section-32; without
   the video behind it the bar needs the blue of its own. */
.div-block-75{ background-color: #194BF5; }

.section-32{
  height: auto;
  min-height: 0;
  margin-top: 0;
  padding-top: clamp(6px, 1.6vh, 24px);
  padding-bottom: clamp(26px, 4vh, 52px);
  background-image: none;          /* was a fade-in-from-transparent gradient */
  background-color: #194BF5;
}
.container-81{
  margin-top: 0;
  margin-bottom: clamp(20px, 3.2vh, 42px);
}

/* --- 2. intro type ------------------------------------------------------- */
.heading-62{                       /* "GIVING" — was 212px/250px */
  font-size: clamp(54px, 8.4vw, 130px);
  line-height: .94;
}
.heading-63{                       /* thank-you line — was 39px/52px, 1058px */
  width: min(92%, 840px);
  font-size: clamp(17px, 1.75vw, 27px);
  line-height: 1.32;
}

/* the $50k / $1k impact row */
.grid-13{
  width: min(96%, 1200px);
  margin-bottom: clamp(18px, 2.8vh, 38px);
  padding-left: clamp(0px, 3vw, 48px);
  padding-right: clamp(0px, 3vw, 48px);
}
.heading-64{ font-size: clamp(44px, 5.6vw, 78px); line-height: 1.05; }
.heading-65{ font-size: clamp(17px, 1.9vw, 28px); line-height: 1.18; }
.div-block-51{ width: auto; max-width: 270px; }
.div-block-49{ width: auto; max-width: 267px; }
.image-35{ height: clamp(68px, 7.6vw, 112px); }

.text-block-5{ font-size: clamp(13px, 1.15vw, 18px); line-height: 1.45; }

/* --- 3. the giving-options grid ------------------------------------------ */

/* min-height rather than height, so a card whose copy runs long grows and
   takes its whole grid row with it instead of spilling over the edge. */
.grid1x1, .grid1x2, .grid1x3{          /* photo cards — were 935px/1000px */
  height: auto;
  min-height: clamp(380px, 42vw, 600px);
  padding-bottom: clamp(28px, 3.4vw, 52px);
}
.div-block-27{ height: clamp(150px, 19vw, 250px); }

.grid2x1, .grid2x2, .grid2x3,
.grid3x1, .grid3x2, .grid3x3,
.grid4x1, .grid4x2, .grid4x3{          /* colour cards — were 516px */
  height: auto;
  min-height: clamp(300px, 29vw, 400px);
  padding: clamp(26px, 2.6vw, 38px) clamp(20px, 3vw, 44px) clamp(24px, 2.4vw, 34px);
}

.heading-66{ font-size: clamp(24px, 2.5vw, 36px); line-height: 1.12; }
.button-8{
  width: clamp(190px, 20vw, 250px);
  height: clamp(46px, 4vw, 56px);
  max-height: none;
  font-size: clamp(15px, 1.35vw, 19px);
}

/* The card innards leaned on big fixed margins to fill 516px. */
.cardtxtnfo{
  margin-top: clamp(8px, 1.2vw, 16px);
  margin-bottom: clamp(6px, .9vw, 12px);
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.42;
}
.cardtxtnfo.paddingbot{ margin-bottom: clamp(4px, .6vw, 8px); }
.text-block-7{
  margin-top: clamp(8px, 1.2vw, 16px);
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.42;
}
.heading-67{
  margin-bottom: clamp(8px, 1.2vw, 16px);
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.22;
}
.heading-68{ font-size: clamp(17px, 1.7vw, 24px); line-height: 1.22; }
/* The e-mail headings carry their size on the <a> inside, not on the heading
   (.link-12 alone is 44px at desktop), so both have to come down together or
   info@guitarsoverguns.org runs out past the edge of its card. */
.heading-69, .mm{ font-size: clamp(18px, 1.85vw, 30px); line-height: 1.35; }
.link-9, .link-10, .link-11, .link-12{
  font-size: clamp(16px, 1.6vw, 25px);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.div-block-28{ height: auto; }
.div-block-74._334{ height: auto; }
.div-block-50{ margin-top: 0; padding-bottom: 0; }   /* was margin-top:-240px */

/* --- 4. closing panel ---------------------------------------------------- */
.section-34{
  height: auto;
  padding-top: clamp(32px, 5vh, 64px);
}
.heading-70{ font-size: clamp(36px, 5.4vw, 78px); line-height: 1.1; }
.text-block-8{ font-size: clamp(14px, 1.3vw, 20px); line-height: 1.45; }
.div-block-30{ margin-bottom: clamp(20px, 3vh, 40px); }

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 767px){
  .grid1x1, .grid1x2, .grid1x3{ min-height: clamp(340px, 56vw, 440px); }
  .grid2x1, .grid2x2, .grid2x3,
  .grid3x1, .grid3x2, .grid3x3,
  .grid4x1, .grid4x2, .grid4x3{
    min-height: 260px;
    padding: 32px 24px 30px;
  }
  .heading-66{ font-size: clamp(22px, 6.4vw, 30px); }
  .cardtxtnfo, .text-block-7{ font-size: 14px; }
  .heading-69, .mm{ font-size: 20px; }
}