/* ============== GLOBAL TIGHT MODE ============== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #f4f4f4; color: #333; font-family: Arial, sans-serif; text-align: center; }

:root{
  --section-pad: 18px;     /* global section padding (reduce/increase overall spacing) */
  --block-gap: 8px;        /* gap between headings & paragraphs */
}

/* Kill big default margins on headings/paragraphs */
h1, h2, h3 { margin: 0 0 var(--block-gap); line-height: 1.2; }
p { margin: 0 0 calc(var(--block-gap) - 2px); line-height: 1.4; }

/* Compact sections */
section { padding-block: var(--section-pad); }
section + section { padding-top: calc(var(--section-pad) / 2); } /* smaller top padding for following sections */


/* ============== HERO ============== */
.coming-soon {
  /* remove fixed vh height to avoid huge empty bands on tall screens */
  /* height: 30vh;  <-- remove the fixed height */
  padding-block: 28px;      /* compact but roomy enough */
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: #222; color: #fff;
}
.coming-soon h1 { font-size: 2.4rem; margin-bottom: 6px; } /* slightly smaller & tighter */
.coming-soon p  { font-size: 1.05rem; }

/* ============== MARKETING ============== */
.marketing { padding: 24px 16px; background: #fff; }
.marketing h2 { margin-bottom: 10px; font-size: 1.6rem; color: #444; }
.contact { margin-top: 10px; font-size: 1.05rem; }
.contact p { margin: 4px 0; }
.contact a { color: #0066cc; text-decoration: none; font-weight: bold; }

/* ============== SPONSORS ============== */
.sponsors { background: #fff; text-align: center; padding: 12px 8px; }
.sponsors h3 { font-weight: 700; letter-spacing: .4px; margin-bottom: 8px; color: #222; }

/* Full-width row, minimal vertical bulk */
.sponsor-logos{
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 equal cells across */
  align-items: center;
  width: 100%;
  gap: 6px;                               /* reduce spacing between logos */
}

/* Base image style */
.sponsor{
  justify-self: center;    /* center inside each cell */
  object-fit: contain;
  display: block;
  /* remove max-width cap so your per-logo sizes can take effect, but keep it safe inside its cell */
  max-width: 100%;
}

/* ============== INDIVIDUAL LOGO SIZES ============== */
/* Tip: control HEIGHT first to keep everything aligned; adjust width only if needed. */
.sponsor1 { width: 160px; height: 90px; }   /* fixed typo: 500x -> 500px (and sized to fit grid) */
.sponsor2 { width: 160px; height: 90px; }
.sponsor3 { width: 140px; height: 80px; }
.sponsor4 { width: 180px; height: 90px; }
.sponsor5 { width: 140px; height: 80px; }
.sponsor6 { width: 140px; height: 80px; }
.sponsor7 { width: 160px; height: 90px; }

/* Optional: tighten the very bottom of the page */
.sponsors:last-of-type { padding-bottom: 10px; }


/* ===== OVERRIDES: bigger hero + clearer first sections ===== */

/* Hero = half the page */
.coming-soon{
  min-height: 50vh;          /* occupy half the viewport height */
  padding-block: 48px;       /* comfy padding, still compact */
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}

/* Larger, responsive type in hero */
.coming-soon h1{
  font-size: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: 12px;
}
.coming-soon p{
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  opacity: 0.95;
}

/* Marketing section bigger & easier to read */
.marketing{
  padding: 36px 18px;        /* bigger than before but not bulky */
  background: #fff;
}
.marketing h2{
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  margin-bottom: 12px;
  color: #444;
}
.marketing p{
  max-width: 980px;          /* keeps line length readable */
  margin: 0 auto 6px auto;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.5;
}
.contact{
  margin-top: 14px;
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
}
.contact a{
  font-weight: 700;
}

/* Keep sections tight overall (still applies to everything) */
section{ padding-block: 16px; }
section:first-of-type{ padding-top: 0; }   /* remove top slack on first section */
section + section{ padding-top: 10px; }    /* modest gap between sections */

/* (Optional) if the sponsors row feels tight vertically, control its strip height */
.slot{ min-height: 92px; }                  /* adjust 80–110px to taste */
/* === Make the first two logos twice as wide === */
.sponsor-logos{
  /* 1st & 2nd columns = 2fr each, the rest = 1fr */
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr 1fr 1fr;
}

/* Let logo 1 & 2 fill their wider columns by width only */
.sponsor1,
.sponsor2{
  width: 150%;      /* occupy the full (wider) column */
  height: auto;     /* keep proportions – width drives the change */
  max-width: none;  /* avoid being capped by earlier rules */
}

/* (Optional) cap strip height so it doesn’t get too tall) */
.sponsor-logos { align-items: center; }
.sponsor { max-height: 190px; }  /* adjust to taste */