/* ============================================================
   pages/club-info.css — Club Info page specific styles
   ============================================================ */

/* ---- Hero Header (grey background) ---- */
.club-hero {
  background-color: #B2B3B5B2;
  padding:20px 0;
}

.club-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-8);
}

.club-hero__tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-black);
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: var(--space-4);
}
.btn-blue{
  border:2px solid black;
  box-shadow: 4px 3px 0px black;
  color:black;
  font-weight: 900;
}
.btn-out{
  background-color: white;
  border:2px solid black;
  box-shadow: 4px 3px 0px black;
  color:black;
  font-weight: 900;
}

.club-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl));
  font-weight: 900;
  text-transform: uppercase;
  color: black;
  line-height: 0.95;
  margin-bottom: var(--space-5);
}

.club-hero__title span {
  color: var(--color-blue);
}

.club-hero__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-grey-700);
  line-height: 1.7;
  max-width: 500px;
  margin-bottom: var(--space-6);
}

.club-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---- Hero Media (video column) ---- */
.club-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(380px, 36vw, 560px);
}

/* .club-hero__video {
  width: 100%;
  height: 5000px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
} */


/* Academy Standard Section */
.academy-standard{padding:110px 0;background:#fff}
.academy-standard__header{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:50px}
.academy-standard__heading{display:flex;flex-direction:column}
.academy-standard__title{position:relative;padding-left:26px;margin:0;font-family:var(--font-heading,Bebas Neue,sans-serif);font-size:40px;line-height:.9;text-transform:uppercase;color:#171717}
.academy-standard__title:before{content:"";position:absolute;left:0;top:4px;width:8px;height:88%;background:#ffd400}
.academy-standard__subtitle{margin-top:10px;font-size:20px;color:#555}
.academy-standard__year{color:#1f6fff;letter-spacing:.2em;text-transform:uppercase}
.training-grid{display:grid;grid-template-columns:2.2fr 1fr;gap:34px}
.training-card{position:relative;background:#fafafa;border:3px solid #111;padding:25px 20px 20px 20px}
.training-card__corner{position:absolute;top:-3px;right:-3px;width:82px;height:82px;background:#1976f3;border-left:3px solid #111;border-bottom:3px solid #111}
.training-card__title{margin:0 0 22px;font-family:var(--font-heading,Bebas Neue,sans-serif);font-size:30px;text-transform:uppercase}
.training-card__desc{font-size:15px;line-height:1.8;color:#333}
.training-card__badges{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0}
.training-badge{background:#111;color:#fff;padding:8px 16px;text-transform:uppercase;font-size:.8rem;letter-spacing:.12em}
.training-card__img{border:3px solid #111;box-shadow:8px 8px 0 #111;overflow:hidden}
.training-card__img img{width:100%;height:430px;display:block;object-fit:cover}
.training-info-stack{display:flex;flex-direction:column;gap:30px}
.info-card{background:#1976f3;color:#fff;border:3px solid #111;box-shadow:8px 8px 0 #111;padding:34px}
.info-card__title{margin:0 0 18px;font-family:var(--font-heading,Bebas Neue,sans-serif);font-size:25px;text-transform:uppercase;color:#fff}
.info-card__desc{font-size:15px;line-height:1.8}
.info-card__meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.35);margin-top:24px;padding-top:20px;text-transform:uppercase;font-size:10px;letter-spacing:.15em}
.info-card-ma{
  font-size: 10px;
}
.info-card__icon{font-size:2rem}.info-card__meta-val{font-family:var(--font-heading,Bebas Neue,sans-serif);font-size:2.5rem}
@media(max-width:1100px){.training-grid{grid-template-columns:1fr}}
@media(max-width:768px){.academy-standard{padding:70px 0}.academy-standard__header{flex-direction:column;align-items:flex-start}.academy-standard__title{font-size:3rem}.training-card{padding:28px}.training-card__title,.info-card__title{font-size:2rem}.training-card__desc,.info-card__desc{font-size:1rem}.training-card__img img{height:260px}}

/* ---- Stats Bar (dark) ---- */
.stats-bar {
  background-color: var(--color-grey-900);
  padding: var(--space-10) 0;
}

.stats-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.stat-block__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-red);
  margin-bottom: var(--space-2);
}

.stat-block__number {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 900;
  color: var(--color-white);
  line-height: 1;
  border-left: 2px solid var(--color-red);
  padding-left: var(--space-3);
  text-align: left;
}

.stat-block__sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-1);
  text-align: left;
  padding-left: var(--space-3);
}

/* ---- Data Driven Section ---- */
.data-driven {
  padding: var(--space-12) 0;
}

.data-driven__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.data-driven__img {
  position: relative;
  height: 420px;
  background: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=700&q=80') center/cover no-repeat;
  filter: grayscale(80%);
  overflow: hidden;
}

.data-driven__lab-badge {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  background-color: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
}

.data-driven__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-black);
  line-height: 1.0;
  margin-bottom: var(--space-6);
}

.data-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.data-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.data-item__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.data-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: var(--space-1);
}

.data-item__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-grey-500);
  line-height: 1.6;
}

/* ---- Hero: media column override (radial gradient mask effect) ---- */
.club-hero__media {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(300px, 24vw, 340px);
}

.club-hero__video {
    width: 100%;
    height: clamp(330px, 30vw, 430px);
    object-fit: contain;
    display: block;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,1) 68%,
            rgba(0,0,0,.95) 78%,
            rgba(0,0,0,.75) 86%,
            rgba(0,0,0,.35) 94%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,1) 68%,
            rgba(0,0,0,.95) 78%,
            rgba(0,0,0,.75) 86%,
            rgba(0,0,0,.35) 94%,
            transparent 100%
        );

    filter: brightness(1.02) contrast(1.02);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}


/*====================================
SUCCESS STORIES
====================================*/

.success-section{

    padding:110px 0;

    background:#ffffff;

}

.success-heading{

    margin-bottom:60px;

}

.section-tag{

    display:inline-block;

    margin-bottom:16px;

    color:#f5c400;

    font-size:14px;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.success-heading h2{

    font-size:40px;

    line-height:1;

    font-weight:900;

    text-transform:uppercase;

    color:#151515;

    margin-bottom:18px;

}

.success-heading p{

    max-width:900px;

    color:#e11d22;

    font-size:15px;

    font-weight:500;

    line-height:1;

}

/*========================*/

.success-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

/*========================*/

.success-card{

    background:#fff;

    border:2px solid #111;

    box-shadow:8px 8px 0 #111;

    transition:.35s ease;

}

.success-card:hover{

    transform:translate(-6px,-6px);

    box-shadow:14px 14px 0 #111;

}

.success-card__image{

    padding:5px;

}

.success-card__image img{

    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

}
.hero-button {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-button:hover {
    background-color: red;
    border: 2px solid black;
    transform: translateY(-10px);
    box-shadow: 2px 6px 0px black;
}
.success-card__content{

    padding:20px;

}

.success-card__content h3{

    font-size:25px;

    font-weight:900;

    text-transform:uppercase;

    color:#1b1b1b;

    margin-bottom:18px;

    line-height:1;

}

.success-card__content p{

    color:#333;

    font-size:15px;

    line-height:1.8;

}

/*========================*/

@media(max-width:1200px){

.success-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.success-section{

padding:70px 0;

}

.success-heading h2{

font-size:46px;

}

.success-heading p{

font-size:16px;

}

.success-grid{

grid-template-columns:1fr;

gap:25px;

}

.success-card__image img{

height:220px;

}

.success-card__content h3{

font-size:24px;

}

.success-card__content p{

font-size:16px;

}

}

/* ============================================================
   pages/club-info.css — Section Responsive Media Queries
   ============================================================ */

/* ---- Tablet: ≤ 900px ---- */
@media (max-width: 900px) {

  /* Club hero: stack text above video */
  .club-hero { padding: 10px 0; }
  .club-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .club-hero__title { font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); }

  /* Video: full-width, centred, height constrained */
  .club-hero__media {
    width: 100%;
    max-width: 600px;
    height: clamp(280px, 52vw, 340px);
    margin: 0 auto;
  }
  .club-hero__video {
    width: 100%;
    height: clamp(320px, 58vw, 400px);
    border-radius: 10px;
    object-fit: contain;
  }

  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .stat-block__number { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }

  .data-driven__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .data-driven__img { height: 280px; }
  .data-driven__title { font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); }

  .training-grid { grid-template-columns: 1fr; gap: 24px; }
  .training-card__img img { height: 300px; }
}

/* ---- Small Tablet / Large Phone: ≤ 768px ---- */
@media (max-width: 768px) {

  .club-hero { padding: 10px 0; }
  .club-hero__title { font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl)); margin-bottom: var(--space-4); }
  .club-hero__desc { font-size: var(--text-sm); max-width: 100%; margin-bottom: var(--space-4); }
  .club-hero__actions { flex-direction: column; gap: var(--space-3); }
  .club-hero__actions .btn { width: 100%; justify-content: center; }

  /* Video: use the available screen width while retaining a generous height */
  .club-hero__media {
    max-width: 520px;
    height: clamp(250px, 62vw, 310px);
  }
  .club-hero__video {
    height: clamp(290px, 70vw, 360px);
    object-fit: contain;
  }

  .stats-bar { padding: var(--space-8) 0; }
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); padding: 0 var(--space-4); }
  .stat-block__number { font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl)); }
  .stat-block__label { font-size: 10px; }

  .data-driven { padding: var(--space-8) 0; }
  .data-driven__img { height: 240px; }
  .data-driven__title { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
  .data-item__title { font-size: var(--text-base); }
  .data-item__desc { font-size: var(--text-xs); }

  .academy-standard { padding: 70px 0; }
  .academy-standard__header { flex-direction: column; align-items: flex-start; }
  .academy-standard__title { font-size: 3rem; }
  .training-card { padding: 22px; }
  .training-card__title { font-size: 2rem; }
  .training-card__img img { height: 260px; }
  .info-card { padding: 24px; }
  .info-card__title { font-size: 2rem; }
}

/* ---- Mobile: ≤ 600px ---- */
@media (max-width: 600px) {

  .club-hero { padding: 10px 0; }
  .club-hero__title { font-size: clamp(1.75rem, 9vw, var(--text-3xl)); }
  .club-hero__tag { font-size: 10px; padding: 3px 8px; }

  /* Video: tall enough to remain a focal point on phones */
  .club-hero__media {
    max-width: 440px;
    height: clamp(230px, 70vw, 290px);
  }
  .club-hero__video {
    height: clamp(260px, 78vw, 330px);
    border-radius: 8px;
    object-fit: contain;
  }

  .stats-bar__inner { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .stat-block__number { font-size: var(--text-2xl); }

  .data-driven__img { height: 200px; }
  .data-driven__title { font-size: var(--text-xl); }
  .data-items { gap: var(--space-4); }
  .data-item { gap: var(--space-3); }
  .data-item__num { width: 28px; height: 28px; font-size: 10px; }

  .academy-standard { padding: 50px 0; }
  .academy-standard__title { font-size: 2.5rem; }
  .training-card { padding: 18px; }
  .training-card__title { font-size: 1.6rem; }
  .training-card__desc { font-size: 14px; }
  .training-card__img img { height: 220px; }
  .training-card__corner { width: 60px; height: 60px; }
  .training-badge { padding: 6px 12px; font-size: 0.7rem; }
  .info-card { padding: 20px; }
  .info-card__title { font-size: 1.6rem; margin-bottom: 12px; }
  .info-card__desc { font-size: 14px; }
  .info-card__meta-val { font-size: 2rem; }
}

/* ---- Small Phone: ≤ 480px ---- */
@media (max-width: 480px) {

  .club-hero__title { font-size: clamp(1.5rem, 10vw, var(--text-2xl)); line-height: 1; }

  /* Video: retain presence on the smallest screens without overflowing */
  .club-hero__media {
    max-width: 100%;
    height: min(68vw, 260px);
  }
  .club-hero__video {
    height: min(82vw, 300px);
    border-radius: 6px;
    object-fit: contain;
  }

  .stats-bar__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .stat-block__number { font-size: var(--text-xl); }

  .data-driven__img { height: 170px; }
  .data-driven__title { font-size: var(--text-lg); }

  .academy-standard__title { font-size: 2rem; }
  .training-card__title { font-size: 1.4rem; }
  .info-card__title { font-size: 1.4rem; }
  .info-card__meta { flex-direction: column; gap: var(--space-2); align-items: flex-start; }
  .info-card__meta-val { font-size: 1.5rem; }
}

/* ==========================================
            WHAT WE DO
========================================== */

.what-we-do{
    padding:100px 0;
    background:#fff;
}

.what-we-do .container{
    max-width:1200px;
    width:92%;
    margin:0 auto;
}

/* ================= HEADER ================= */

.what-we-do__header{
    text-align:center;
    margin-bottom:60px;
}

.section-tag{
    display:inline-block;
    padding:8px 18px;
    background:var(--blue);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    border-radius:4px;
    margin-bottom:18px;
}

.what-we-do__title{
    
    font-size:50px;
    line-height:1;
    margin-bottom:18px;
    color:#111;
    letter-spacing:1px;
}

.what-we-do__subtitle{
    max-width:760px;
    margin:0 auto;
    font-size:17px;
    line-height:1.9;
    color:#666;
}

/* ================= TABS ================= */

.what-we-do__tabs{

    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:50px;

    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;

    padding:24px 0;
    margin-bottom:60px;

}

.tab-btn{

    background:none;
    border:none;

    cursor:pointer;

    font-size:22px;
    font-weight:600;

    color:#a5a5a5;

    transition:.3s;

    position:relative;

}

.tab-btn:hover{
    color:#111;
}

.tab-btn.active{
    color:#111;
}

.tab-btn.active::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-25px;

    width:100%;
    height:3px;

    background:var(--blue);

}

/* ================= CONTENT ================= */

.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
}

.what-we-do__content{

    display:grid;
    grid-template-columns:480px 1fr;
    gap:70px;
    align-items:center;

}

/* ================= IMAGE ================= */

.what-we-do__image{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    border:2px solid #111;

    box-shadow:8px 8px 0 #111;

}

.what-we-do__image img{

    width:100%;
    height:520px;

    object-fit:cover;

    transition:.5s;

}

.what-we-do__image:hover img{

    transform:scale(1.05);

}

/* ================= TEXT ================= */

.content-tag{

    display:inline-block;

    background:var(--yellow);

    color:#111;

    /* padding:7px 14px; */

    border-radius:4px;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

.what-we-do__text h3{

    

    font-size:35px;

    line-height:1.1;

    margin-bottom:22px;
    font-weight:750;
    color:red;

}

.what-we-do__text p{

    font-size:15px;

    line-height:1.9;

    color:#555;
    text-align:justify;
    margin-bottom:24px;

}

/* ================= FEATURE LIST ================= */

.feature-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px 30px;

    margin-top:30px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:16px;

    font-weight:600;

    color:#222;

}

/* ================= STATS ================= */

.programme-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:45px;

}

.programme-stat{

    background:#f8f8f8;

    border:2px solid #111;

    border-radius:12px;

    padding:24px;

    text-align:center;

    transition:.3s;

}

.programme-stat:hover{

    transform:translateY(-5px);

    box-shadow:5px 5px 0 #111;

}

.programme-stat h4{

    font-family:Impact,sans-serif;

    font-size:34px;

    color:var(--blue);

    margin-bottom:8px;

}

.programme-stat span{

    font-size:14px;

    color:#666;

}

/* ================= RESPONSIVE ================= */

@media(max-width:992px){

.what-we-do{

    padding:80px 0;

}

.what-we-do__content{

    grid-template-columns:1fr;

    gap:40px;

}

.what-we-do__image{

    max-width:650px;

    margin:0 auto;

}

.what-we-do__text{

    text-align:center;

}

.feature-list{

    grid-template-columns:1fr 1fr;

}

.programme-stats{

    grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:768px){

.what-we-do__title{

    font-size:42px;

}

.what-we-do__subtitle{

    font-size:15px;

}

.what-we-do__tabs{

    gap:20px;

    padding:18px 0;

}

.tab-btn{

    font-size:17px;

}

.what-we-do__image img{

    height:360px;

}

.what-we-do__text h3{

    font-size:32px;

}

.what-we-do__text p{

    font-size:15px;

}

.feature-list{

    grid-template-columns:1fr;

}

.programme-stats{

    grid-template-columns:1fr;

}

}

@media(max-width:480px){

.what-we-do{

    padding:60px 0;

}

.what-we-do__title{

    font-size:34px;

}

.what-we-do__tabs{

    flex-direction:column;

    gap:18px;

}

.tab-btn.active::after{

    bottom:-18px;

}

.what-we-do__image{

    border-radius:12px;

}

.what-we-do__image img{

    height:260px;

}

.what-we-do__text h3{

    font-size:26px;

}

.what-we-do__text p{

    font-size:14px;

    line-height:1.8;

}

.feature-item{

    font-size:14px;

}

.programme-stat{

    padding:18px;

}

.programme-stat h4{

    font-size:28px;

}

}