/* css/style.css - Philpoly FC website styles */
:root{
  --primary:#081c3a;
  --accent:#c59a2d;
  --muted:#f4f4f6;
  --white:#ffffff;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:#222; background:var(--muted);}
a{color:var(--accent); text-decoration:none}
.header{
  background:linear-gradient(180deg, var(--primary) 0%, #0b2348 100%);
  color:var(--white);
  padding:18px 0;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 2px 8px rgba(5,10,20,0.2);
}
.container{width:95%; max-width:1200px; margin:0 auto;}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:56px; width:56px; object-fit:contain; border-radius:8px; background:#fff;}
.brand h1{font-size:18px; margin:0; letter-spacing:1px;}
.navlinks{display:flex; gap:16px; align-items:center;}
.navlinks a{color:var(--white); padding:8px 10px; border-radius:6px; font-weight:600;}
.cta{background:var(--accent); color:var(--primary); padding:8px 12px; border-radius:6px; font-weight:700;}

/* hero */
.hero{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:24px;
  align-items:center;
  padding:40px 0;
}
.hero .left h2{font-size:36px; margin:0 0 12px; color:var(--black);}
.hero .left p{color:#04001b; margin:0 0 18px; max-width:640px;}
.hero .actions{display:flex; gap:12px;}
.hero .card{background:var(--white); padding:18px; border-radius:12px; box-shadow:0 6px 18px rgba(3,9,28,0.08);}

/* grid sections */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px;}
.card h3{margin:0 0 8px;}
.card p{margin:0; color:#333;}

/* news list */
.news-list{display:grid; gap:12px;}
.news-item{display:flex; gap:12px; align-items:flex-start; background:var(--white); padding:12px; border-radius:8px;}

/* footer */
.footer{background:#07162b; color:#cbd6e9; padding:28px 0; margin-top:36px;}
.footer .columns{display:flex; gap:24px; justify-content:space-between; align-items:flex-start;}
.small{font-size:13px; color:#9fb0d6;}

/* responsive */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .navlinks{display:none}
  .grid{grid-template-columns:1fr;}
  .brand h1{display:none}
}