/* ---------- tokens ---------- */
:root{
    --ink:#0e2431;
    --ink-2:#3a5060;
    --muted:#6b7e8a;
    --line:#e7edf1;
    --paper:#fff;
    --brand:#12b2e8;
    --brand-2:#0ed3a5;
    --shadow:0 14px 30px rgba(0,0,0,.12);
    --radius:14px;
    --max:1150px;
  }
  
  *{ box-sizing:border-box; }
  html,body{ margin:0; }
  body{ font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif; color:var(--ink); background:#fff; }
  
  /* ---------- hero ---------- */
  .fb-hero{
    position:relative;
    min-height: 54vh;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .fb-hero__bg{
    position:absolute; inset:0;
    background-image: var(--src);
    background-size: cover;
    background-position: center;
    filter: brightness(.8);
  }
  .fb-hero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
  }
  .fb-hero__overlay{
    position:relative; z-index:2; text-align:center; color:#fff; padding:16px;
    text-shadow:0 6px 22px rgba(0,0,0,.45);
  }
  .fb-hero__overlay h1{
    margin:0 0 8px; font-weight:900; letter-spacing:.3px; text-transform:uppercase;
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  }
  .fb-hero__overlay p{
    margin:0; opacity:.95; font-size: clamp(.95rem, 1.4vw, 1.05rem);
  }
  
  /* ---------- section head ---------- */
  .fb-events{ background:#fff; padding:28px 0 44px; }
  .wrap{ width:min(100%, var(--max)); margin-inline:auto; padding:0 16px; }
  .fb-head h2{
    margin:0 0 4px; font:900 1.4rem/1 system-ui,Segoe UI,Inter,Arial; letter-spacing:.2px; text-transform:uppercase;
  }
  .fb-head p{ margin:0 0 16px; color:var(--muted); }
  
  /* ---------- grid ---------- */
  .fb-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap:20px;
  }
  
  /* ---------- card ---------- */
  .fb-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
    display:flex; flex-direction:column;
  }
  
  .fb-card__media img{
    display:block; width:100%;
    aspect-ratio: 16 / 9; object-fit:cover;
  }
  
  .fb-card__body{
    padding:14px 14px 16px;
    display:flex; flex-direction:column; gap:10px;
  }
  .fb-card__icon{
    color:#1f6aa6; font-size:14px; line-height:1;
  }
  .fb-card h3{
    margin:0; font:900 1rem/1.2 system-ui,Segoe UI,Inter,Arial; text-transform:uppercase; letter-spacing:.2px;
  }
  .fb-card p{
    margin:0; color:var(--ink-2); font-size:.95rem; line-height:1.45;
  }
  
  /* ---------- buttons ---------- */
  .btn{
    align-self:flex-start;
    text-decoration:none;
    border:none; cursor:pointer;
    padding:.55rem .9rem; border-radius:999px; font-weight:800;
    color:#052734; background:linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow:0 8px 18px rgba(0,0,0,.1);
  }
  .btn:hover{ filter:brightness(1.05); }
  
  .btn-outline{
    background:#fff; color:var(--ink); border:1.5px solid var(--line);
  }
  .btn-outline:hover{ background:#f7fbff; }
  
  .btn-disabled{
    background:#e7edf1; color:#8295a3; cursor:not-allowed; box-shadow:none;
  }
/* ===== Media Highlights (football) — redesigned to match mock ===== */
.fb-media{
  padding: 56px 0 64px;
  background:#fff;
}

/* Narrower content like the design */
.fb-media .container{
  max-width: 1150px;      /* tweak 1000–1200 to taste */
  margin-inline:auto;
}

/* Header */
.fb-media-header{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:22px;
}
.fb-media-title{
  margin:0;
  font-size:clamp(24px,3.4vw,40px);
  font-weight:900;
  letter-spacing:.02em;
  color:#0e2431;
  text-transform:uppercase;
}
.fb-media-sub{
  margin:6px 0 0;
  color:#6b7e8a;
  font-size:.95rem;
}
.fb-media-btn{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:10px 16px;
  border-radius:999px;
  border:2px solid #0e2431;
  color:#0e2431;
  text-decoration:none;
  font-weight:800;
  font-size:.9rem;
  white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.fb-media-btn:hover{ background:#0e2431; color:#fff; transform:translateY(-1px); }

/* Grid — 3 columns with thin white gutters */
.fb-media-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;                              /* thinner gutter like the mock */
}

/* Tiles — fixed visual ratio (wider/shorter like the design) */
.fb-shot{
  margin:0;
  background:#fff;
  border:1px solid #e7edf1;              /* subtle divider */
  border-radius:8px;
  overflow:hidden;
  aspect-ratio: 16 / 11;                 /* ~1.45 : matches mock proportions */
  /* Optional inner padding to make photos a bit smaller in frame */
  padding:8px;                           /* was `10` (invalid). keep small. */
}
.fb-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:6px;                      /* small rounding inside the frame */
  transition:transform .25s ease;
}
.fb-shot:hover img{ transform:scale(1.015); }


/* Responsive */
@media (max-width: 1024px) {
  .fb-media-grid { grid-template-columns: repeat(2, 1fr); }
  .fb-media-btn { height: 38px; padding: 8px 14px; }
}

@media (max-width: 600px) {
  .fb-media-header { flex-direction: column; align-items: flex-start; }
  .fb-media-btn { margin-left: 0; }
  .fb-media-grid { grid-template-columns: 1fr; }
}

  
  /* ---------- responsive ---------- */
  @media (max-width: 900px){
    .fb-grid{ grid-template-columns: 1fr; }
    .fb-hero{ min-height: 44vh; }
  }