/* =========================================================================
   AARUNYA — INNER PAGE SPACING
   Loaded last on music-for-happiness.html.

   The legacy inner-page sheet was written for long-form chapters: 90px of
   padding on every band, and fixed minimum heights on the card grids. This
   page's blocks are two or three lines each, so those numbers left large
   empty wells between and inside them. Everything below tightens the rhythm
   to the amount of copy actually present; nothing changes colour or layout.
   ========================================================================= */

/* ---- Band rhythm -------------------------------------------------------
   90px top + 90px bottom stacked to ~180px of nothing between the hero's
   two lines and the paragraph beneath it. */
.inner-page .page-hero{
  padding-top:clamp(56px,7vh,84px);
  padding-bottom:clamp(20px,3vh,34px);
}

.inner-page .section-i{
  padding:clamp(44px,5.5vw,68px) 0;
}

/* The hero's own lead already carries the opening thought, so the paragraph
   that repeats it sits closer rather than a full band away. */
.inner-page .page-hero .lead{
  margin-top:clamp(14px,2vh,22px);
}

.inner-page .copy p:last-child{
  margin-bottom:0;
}


/* ---- SING. LISTEN. PERFORM. CONNECT. -----------------------------------
   space-between pushed the four words to the edges, so at anything under a
   wide desktop the last one dropped to a line of its own with a gap either
   side of it. A flow with a real gap keeps them together and wraps evenly. */
.inner-page .music-words{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  column-gap:clamp(18px,2.6vw,44px);
  row-gap:clamp(4px,1vw,12px);

  margin:clamp(30px,4vw,44px) 0 0;
}

/* Sized so all four fit one row at desktop rather than stranding the last
   word on a line of its own. */
.inner-page .music-word{
  font-size:clamp(1.5rem,3.3vw,3.4rem);
  line-height:1.1;
}

/* The flex flow above wraps on its own; no column overrides needed. */


/* ---- Card grids --------------------------------------------------------
   min-height:330px for a number, a word and four words of copy. The cards
   now take their height from their contents. */
.inner-page .belief,
.inner-page .initiative,
.inner-page .choice,
.inner-page .six,
.inner-page .join-card,
.inner-page .action-card{
  min-height:0;
}

.inner-page .belief{
  padding:clamp(24px,2.6vw,32px);
}

.inner-page .belief h3{
  margin:16px 0 8px;
}

.inner-page .belief .lead-small,
.inner-page .belief p{
  margin:0;
}

.inner-page .initiative{
  display:flex;
  flex-direction:column;
  gap:12px;

  padding:clamp(26px,2.8vw,34px);
}

.inner-page .initiative p{
  margin:0;
}

/* The button was pinned to the bottom of an over-tall card. */
.inner-page .initiative .btn-i{
  align-self:flex-start;
  margin-top:6px;
}


/* ---- Two-column blocks -------------------------------------------------
   A 70px gutter with centred alignment left the shorter column floating in
   the middle of the taller one. */
.inner-page .split-i{
  gap:clamp(28px,4.5vw,60px);
  align-items:start;
}

.inner-page .split-i .section-title{
  margin-bottom:0;
}


/* ---- The closing band --------------------------------------------------
   110px top and bottom around three short lines. */
.inner-page .final{
  padding:clamp(64px,8vw,96px) 0;
}

.inner-page .final h2{
  margin:18px 0;
}


@media (max-width:900px){
  .inner-page .section-i{padding:clamp(36px,7vw,52px) 0;}
  .inner-page .split-i{grid-template-columns:1fr;}
}