/* ==========================================================
   Kipper Cup — shared stylesheet
   Palette matches the Kipper Cup business card:
   navy #1E2A38 | cream #F4DCC0 | rust #C1502E | green #0F4C35
   ========================================================== */

:root{
  --navy:#1E2A38;
  --cream:#F4DCC0;
  --rust:#C1502E;
  --green:#0F4C35;
  --green-light:#1B6B45;
  --gray:#5B6472;
  --paper:#FBF7EF;
  --white:#ffffff;
  --shadow: 0 8px 24px rgba(15,76,53,0.12);
  --radius: 14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--navy);
  background:var(--paper);
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Playfair Display', Georgia, serif;
  color:var(--green);
  margin:0 0 .4em;
}
a{color:var(--rust); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
.container{
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- top bars (match business card) ---------- */
.top-bar, .bottom-bar{
  height:8px;
  background:var(--green);
  border-bottom:2px solid var(--rust);
}
.bottom-bar{border-bottom:none; border-top:2px solid var(--rust); margin-top:60px;}

/* ---------- nav ---------- */
header.site-header{
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 2px 10px rgba(30,42,56,0.06);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  max-width:1080px;
  margin:0 auto;
  flex-wrap:wrap;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:1.15rem;
  color:var(--green);
}
.brand svg{width:46px; height:46px; flex-shrink:0;}
.brand .sub{
  display:block;
  font-family:'Poppins', sans-serif;
  font-size:.62rem;
  letter-spacing:.18em;
  font-weight:600;
  color:var(--navy);
}
nav.main-nav{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:center;
}
nav.main-nav a{
  color:var(--navy);
  font-weight:600;
  font-size:.92rem;
  padding:6px 2px;
  border-bottom:2px solid transparent;
}
nav.main-nav a.active,
nav.main-nav a:hover{
  color:var(--rust);
  border-bottom:2px solid var(--rust);
  text-decoration:none;
}
.btn{
  display:inline-block;
  background:var(--rust);
  color:var(--white)!important;
  padding:12px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  box-shadow:var(--shadow);
  border:none;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{background:#a83f21; text-decoration:none; transform:translateY(-2px);}
.btn.btn-outline{
  background:transparent;
  color:var(--green)!important;
  border:2px solid var(--green);
  box-shadow:none;
}
.btn.btn-outline:hover{background:var(--green); color:var(--white)!important;}
.btn.small{padding:8px 18px; font-size:.82rem;}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(circle at 15% 20%, rgba(15,76,53,0.10), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(193,80,46,0.10), transparent 45%),
    var(--paper);
  padding:64px 0 56px;
  text-align:center;
}
/* Photo hero — full-bleed image behind the title */
.hero.hero-photo{
  position:relative;
  background:
    linear-gradient(180deg,
      rgba(8,18,14,.74) 0%,
      rgba(8,18,14,.40) 45%,
      rgba(8,18,14,.72) 100%),
    url('photos/hero-banner.jpg') center 42% / cover no-repeat;
  padding:96px 0 88px;
}
/* Per-page photo ribbons. Each sets its own image + focal point;
   the overlay, type colours and padding come from .hero-photo. */
.hero.hero-about{
  background:
    linear-gradient(180deg, rgba(8,18,14,.70) 0%, rgba(8,18,14,.46) 45%, rgba(8,18,14,.70) 100%),
    url('photos/about-banner.jpg') center 40% / cover no-repeat;
  padding:88px 0 76px;
}
.hero.hero-rules{
  background:
    linear-gradient(180deg, rgba(8,18,14,.66) 0%, rgba(8,18,14,.38) 45%, rgba(8,18,14,.66) 100%),
    url('photos/rules-banner.jpg') center 50% / cover no-repeat;
  padding:88px 0 76px;
}
.hero.hero-sponsors{
  background:
    linear-gradient(180deg, rgba(8,18,14,.68) 0%, rgba(8,18,14,.42) 45%, rgba(8,18,14,.70) 100%),
    url('photos/sponsors-banner.jpg') center 55% / cover no-repeat;
  padding:88px 0 76px;
}
/* Sponsors hero carries a paragraph of body copy too */
.hero.hero-photo p{
  color:#f2ece2;
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}

/* Past Champions ribbon — the 2026 awards table */
.hero.hero-champions{
  background:
    linear-gradient(180deg,
      rgba(8,18,14,.70) 0%,
      rgba(8,18,14,.42) 45%,
      rgba(8,18,14,.68) 100%),
    url('photos/champions-banner.jpg') center 58% / cover no-repeat;
  padding:88px 0 76px;
}

.hero.hero-photo .eyebrow{
  color:var(--cream);
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.hero.hero-photo h1{
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.55), 0 4px 24px rgba(0,0,0,.6);
}
.hero.hero-photo .tagline{
  color:var(--cream);
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.hero.hero-photo .fact-pill{
  background:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.35);
}
/* Outline button is green by default — unreadable on the dark photo */
.hero.hero-photo .btn.btn-outline{
  color:#fff !important;
  border-color:#fff;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(2px);
}
.hero.hero-photo .btn.btn-outline:hover{
  background:#fff;
  color:var(--green) !important;
  border-color:#fff;
}
@media(max-width:700px){
  .hero.hero-photo{padding:64px 0 56px;}
}

.hero .eyebrow{
  color:var(--rust);
  font-weight:700;
  letter-spacing:.18em;
  font-size:.78rem;
  text-transform:uppercase;
  margin-bottom:10px;
}
.hero h1{
  font-size:clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom:.2em;
}
.hero .tagline{
  font-family:'Playfair Display', serif;
  font-style:italic;
  color:var(--rust);
  font-size:1.15rem;
  margin-bottom:1.4em;
}
.hero-facts{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:26px 0 34px;
}
.fact-pill{
  background:var(--white);
  border:1px solid rgba(30,42,56,0.08);
  box-shadow:var(--shadow);
  border-radius:999px;
  padding:10px 20px;
  font-weight:600;
  font-size:.88rem;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:8px;
}
.fact-pill svg{width:16px;height:16px;}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- sections ---------- */
section{padding:56px 0;}
section.alt{background:var(--white);}
.section-head{text-align:center; max-width:640px; margin:0 auto 40px;}
.section-head .eyebrow{
  color:var(--rust); font-weight:700; letter-spacing:.16em;
  font-size:.75rem; text-transform:uppercase; margin-bottom:8px;
}
.divider{
  width:70px; height:3px; background:var(--rust); margin:14px auto 0; border-radius:3px;
}

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

.card{
  background:var(--white);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  border-top:4px solid var(--green);
}
.card h3{font-size:1.15rem;}
.card.rust-top{border-top-color:var(--rust);}

/* ---------- flag bullet list ---------- */
ul.flag-list{list-style:none; margin:0; padding:0;}
ul.flag-list li{
  display:flex; gap:12px; align-items:flex-start;
  margin-bottom:14px; font-size:.98rem;
}
ul.flag-list svg{width:18px; height:18px; margin-top:3px; flex-shrink:0;}

/* ---------- placeholder photo blocks ---------- */
.photo-placeholder{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  background:repeating-linear-gradient(135deg, #eadfca, #eadfca 10px, #f2e8d6 10px, #f2e8d6 20px);
  border:2px dashed rgba(15,76,53,0.35);
  display:flex; align-items:center; justify-content:center;
  color:var(--green); font-weight:600; font-size:.85rem; text-align:center;
  padding:10px;
}
.photo-placeholder.portrait{aspect-ratio:2/3; max-width:320px; margin:0 auto;}
.photo-placeholder.wide{aspect-ratio:16/7;}
.photo-placeholder.champ-photo{margin-bottom:16px; font-size:.8rem;}

/* ---------- featured trophy section ---------- */
.trophy-feature{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border-top:4px solid var(--rust);
  padding:32px;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:32px;
  align-items:center;
  margin-bottom:40px;
}
@media (max-width:700px){
  .trophy-feature{grid-template-columns:1fr; text-align:center;}
  .photo-placeholder.portrait{margin:0 auto;}
}
.trophy-feature .tier-badge{margin-bottom:10px;}
.trophy-photo-img{
  width:100%; max-width:220px; border-radius:var(--radius);
  box-shadow:var(--shadow); object-fit:cover;
}
.champ-photo-img{
  width:100%; border-radius:10px; margin-bottom:2px; display:block;
}
.story-photo-img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius); box-shadow:var(--shadow);
}

/* ---------- wide container (full-bleed sections) ----------
   No max-width: spans the viewport with a ~1in (96px) margin each side. */
.container-wide{
  max-width:none;
  margin:0 auto;
  padding:0 96px;
}
@media(max-width:1100px){ .container-wide{padding:0 48px;} }
@media(max-width:800px){  .container-wide{padding:0 24px;} }

/* ---------- video ---------- */
.video-wrap{
  max-width:900px;
  margin:0 auto;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#000;
  line-height:0;
}
.video-wrap video{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/9;
}

/* ---------- photo gallery (masonry) ---------- */
.photo-grid{
  column-count:4;
  column-gap:18px;
}
.photo-grid img{
  width:100%; display:block;
  margin:0 0 18px;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  border-radius:12px; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.photo-grid img:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}
/* Wide collage strip that closes the gallery.
   Capped at its native 1216px so it never upscales and softens. */
.gallery-banner{margin-top:4px;}
.gallery-banner img{
  width:100%;
  max-width:2400px;
  margin:0 auto;
  display:block;
  border-radius:12px;
  box-shadow:var(--shadow);
}

@media(min-width:2100px){ .photo-grid{column-count:6;} }
@media(min-width:1700px) and (max-width:2099px){ .photo-grid{column-count:5;} }
@media(max-width:1280px){ .photo-grid{column-count:3;} }
@media(max-width:800px){  .photo-grid{column-count:2; column-gap:12px;}
                          .photo-grid img{margin-bottom:12px;} }
@media(max-width:430px){  .photo-grid{column-count:1;}
                          .container-wide{padding:0 16px;} }

/* ---------- sponsor logos ---------- */
.sponsor-logos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}
.sponsor-logo{
  flex:0 0 260px;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  aspect-ratio:640/280;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.sponsor-logo img{width:100%; height:100%; object-fit:contain; display:block;}
@media(max-width:640px){ .sponsor-logo{flex:0 0 220px;} }

/* ---------- sponsor tiers ---------- */
.tier-badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:999px;
  margin-bottom:12px;
}
.tier-eagle{background:var(--navy); color:var(--cream);}
.tier-birdie{background:var(--green); color:var(--cream);}
.tier-par{background:var(--rust); color:var(--white);}
.tier-friend{background:var(--cream); color:var(--navy);}
.price{font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--navy); margin:8px 0;}

/* ---------- champions ---------- */
.champ-year{
  font-family:'Playfair Display', serif;
  font-size:2rem;
  color:var(--rust);
  line-height:1;
}
.champ-team{font-weight:700; font-size:1.05rem; margin:6px 0 4px;}
.champ-names{color:var(--gray); font-size:.9rem;}

/* ---------- callout ---------- */
.callout{
  background:var(--cream);
  border-left:5px solid var(--rust);
  border-radius:10px;
  padding:16px 20px;
  font-size:.92rem;
  margin-bottom:34px;
}
.callout strong{color:var(--navy);}

/* ---------- footer ---------- */
footer.site-footer{
  background:var(--navy);
  color:var(--cream);
  padding:44px 0 8px;
}
footer.site-footer .grid{margin-bottom:28px;}
footer.site-footer h4{color:var(--cream); font-family:'Poppins',sans-serif; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px;}
footer.site-footer a{color:var(--cream);}
footer.site-footer a:hover{color:var(--rust);}
footer.site-footer p{margin:4px 0; font-size:.88rem; color:#cdd6dd;}
.footer-bottom{
  border-top:1px solid rgba(244,220,192,0.15);
  margin-top:20px;
  padding:16px 0;
  text-align:center;
  font-size:.78rem;
  color:#9aa7b2;
}
.social-row{display:flex; gap:14px; margin-top:10px;}
.social-row a{
  width:34px;height:34px;border-radius:50%;
  background:rgba(244,220,192,0.12);
  display:flex;align-items:center;justify-content:center;
}
.social-row a:hover{background:var(--rust);}
.social-row svg{width:16px;height:16px;fill:var(--cream);}

/* ---------- misc ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.note{font-size:.85rem; color:var(--gray);}
table.rules-table{width:100%; border-collapse:collapse; margin:18px 0;}
table.rules-table th, table.rules-table td{
  text-align:left; padding:10px 14px; border-bottom:1px solid rgba(30,42,56,0.1); font-size:.92rem;
}
table.rules-table th{color:var(--green); font-family:'Playfair Display', serif;}