/* =====================================================================
   ABHIMANYU VOLLEYBALL TOURNAMENT – LANDING PAGE
   ---------------------------------------------------------------------
   SCALE SYSTEM
   The reference design is 2559px wide. Every size below is written as
   calc(var(--u) * N) where N is the pixel value measured on that
   2559px reference. --u is the "reference pixel" and changes per
   breakpoint, so the desktop composition stays identical at any width:
     >= 1200px  desktop : --u = viewport / 2559 (content = 1440 ref-px)
     768-1199   tablet  : --u = 92vw / 1440     (content = 92vw)
     <= 767     mobile  : --u fixed ~0.56px, layouts stack
   Some components override --u locally to stay readable when stacked.
   ===================================================================== */

/* ---------- BASE ---------- */
:root {
  --u: max(calc(min(100vw, 2559px) / 2559), .5px);
  --cw: calc(1678 * var(--u));            /* content width */
  --dark: #181717;
  --yellow: #f9b308;
  --yellow-bright: #ffcb0f;
  --orange: #f69804;
  --amber: #f6af04;
}
@media (max-width: 1199.98px) { :root { --u: calc(92vw / 1440); --cw: 92vw; } }
@media (max-width: 767.98px)  { :root { --u: max(calc(100vw / 760), .56px); --cw: calc(100vw - 32px); } }

body { font-family: "Poppins", system-ui, sans-serif; color: var(--dark); background: #fff; overflow-x: clip; }
img { max-width: 100%; }
h2, h3, p, ul { margin: 0; padding: 0; list-style: none; }
.container.page-container { width: var(--cw); max-width: none; padding-inline: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Asset slots: images keep their aspect ratio and never stretch */
.ico { object-fit: contain; flex: none; }
.ico--info  { width: calc(72 * var(--u));  height: calc(94 * var(--u)); }
.ico--prize { width: calc(80 * var(--u));  height: calc(80 * var(--u)); }
.ico--award { width: calc(100 * var(--u)); height: calc(90 * var(--u)); }
.ico--fac   { width: calc(72 * var(--u));  height: calc(66 * var(--u)); }

/* ---------- HERO ---------- */
.hero__stage { position: relative; container-type: inline-size; --hp: max(calc(100cqw / 2559), .45px); }
.hero__stage {
  position: relative;
  container-type: inline-size;
  --hp: max(calc(100cqw / 2559), .45px);
}

/* Hero background image */
.hero__img {
  display: block;
  width: 100%;
  height: clamp(500px, 31.8vw, 814px);
  object-fit: cover;
  object-position: center center;
  max-width: none;
}

/* SVG title layer */
/* .hero__title {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
} */

/* SVG title layer (decoration only, so it must never catch clicks) */
.hero__title {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* Register Now button */
.hero__register-btn {
    position: absolute;
    left: calc(21.9% + 361 * var(--hp) + 18px);
    top: 4.2%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 42px;
    padding: 0 24px;
    background: #0b2964;
    color: #fff;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    z-index: 20;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero__register-btn:hover {
  background: #162c9c;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .hero__register-btn {
    top: 73px;
    left: 50%;
    transform: translateX(-50%);
    width: 167px;
    
  }
}

/* SVG text */
.ht {
  font-family: "Poppins", sans-serif;
}

.ht--white {
  fill: #fff;
}

.ht--navy {
  fill: #0b2964;
}

.ht--shadow {
  filter: url(#hero-shadow);
}

/* ABHIMANYU is now an SVG image, so no text styling is required */
.ht--abhimanyu {
  display: block;
  box-shadow: 10px 10px #000;
}

/* Top pill */
.hero__pill {
  /* position: absolute; */
  /* left: 21.9%; */
  /* top: 4.2%; */
  display: flex;
  align-items: center;
  gap: calc(16 * var(--hp));
  width: calc(361 * var(--hp));
  height: calc(85 * var(--hp));
  padding-left: calc(22 * var(--hp));
  background: #e4e2e0;
  border-radius: calc(14 * var(--hp));
  text-decoration: none;


   position: absolute;
  z-index: 20;            /* add this */
  left: 21.9%;
  top: 4.2%;
}

.hero__pill img {
  height: calc(63 * var(--hp));
  width: auto;
}

.hero__pill-divider {
  height: calc(50 * var(--hp));
  border-left: max(1px, calc(2 * var(--hp))) dashed #162c9c;
}

.hero__pill-text {
  font-size: calc(27 * var(--hp));
  font-weight: 500;
  color: #162c9c;
  white-space: nowrap;
}

/* Mobile panel */
.hero__panel {
  display: none;
  background: linear-gradient(135deg, #f9d10c, #fca10a);
  padding: 20px 16px 28px;
}

.hero__panel svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
}

/* Tablet / Mobile */
@media (max-width: 991.98px) {

  .hero__title {
    display: none;
  }

  .hero__panel {
    display: block;
  }

  .hero__pill {
    left: 3%;
    top: 6%;
  }

  .hero__img {
    height: auto;
    object-fit: contain;
  }
}
@media (max-width: 767px) {

  /* Remove the hero image on mobile */
  .hero__img {
    display: none !important;
  }

  /* Mobile hero stage */
  .hero__stage {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Move HOME PAGE pill above the title */
  .hero__pill {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;
  }

  /* Mobile title panel */
  .hero__panel {
    position: relative;
    width: 100%;
    min-height: 450px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 141px;
    box-sizing: border-box;

    overflow: hidden;
  }

  .hero__panel svg {
    display: block;
    width: 100%;
    height: auto;
  }

}

/* ---------- TOURNAMENT INFO ---------- */
.info-strip { background: linear-gradient(90deg, #000 50%, #212121 50%); }
.info-strip__list { display: grid; grid-template-columns: repeat(4, 1fr); }
.info-item { display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(134 * var(--u)); padding-left: calc(38 * var(--u)); min-width: 0; }
.info-item:first-child { padding-left: calc(6 * var(--u)); }
.info-item:nth-child(odd)  { background: #000; }
.info-item:nth-child(even) { background: #212121; }
.info-item p { line-height: 1.15; color: #fff; }
.info-item span { display: block; font-size: calc(29 * var(--u)); font-weight: 500; }
.info-item strong { display: block; font-size: calc(28 * var(--u)); font-weight: 600; }
@media (max-width: 991.98px) {

  .info-strip__list.container {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .info-item,
  .info-item:first-child {
    width: 100%;
    min-height: 72px;

    display: grid;
    grid-template-columns: 42px 170px;
    justify-content: center;
    align-items: center;

    column-gap: 10px;

    padding: 10px 12px;
    box-sizing: border-box;
  }

  /* Larger icons */
  .info-item .ico--info {
    width: 40px;
    height: 40px;
    object-fit: contain;
    justify-self: center;
  }

  /* Larger text block */
  .info-item p {
    width: 170px;
    margin: 0;
    text-align: center;
    line-height: 1.15;
  }

  .info-item p span {
    display: block;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 500;
  }

  .info-item p strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
  }

}

/* ---------- PRIZE POOL ---------- */
.prize-pool { background: var(--dark); padding: calc(70 * var(--u)) 0 calc(54 * var(--u)); }
.prize-pool__title { font-size: min(calc(138 * var(--u)), 13vw); font-weight: 800; line-height: 1.05; color: var(--yellow); }
.prize-pool__sub { margin: calc(-14 * var(--u)) 0 calc(80 * var(--u)); font-size: max(calc(26 * var(--u)), 12px); letter-spacing: .06em; color: #9b9b9b; }
.prize-row { --bs-gutter-x: calc(25 * var(--u)); --bs-gutter-y: calc(25 * var(--u)); }
.prize-card { display: flex; align-items: center; gap: calc(18 * var(--u)); height: 100%; min-height: calc(121 * var(--u)); padding: 0 calc(24 * var(--u));
  border: max(1px, calc(2 * var(--u))) dashed #4a4a49; border-radius: calc(14 * var(--u)); text-align: left; }
.prize-card p { line-height: 1.15; }
.prize-card span { display: block; font-size: calc(22 * var(--u)); font-weight: 500; color: #d2d2d2; }
.prize-card strong { display: block; font-size: calc(40 * var(--u)); font-weight: 600; color: var(--yellow); white-space: nowrap; }
@media (max-width: 767.98px) {
  .prize-card { flex-direction: column; justify-content: center; gap: 6px; padding: 14px 6px; text-align: center; }
  .prize-card span { font-size: 13px; } .prize-card strong { font-size: 20px; }
}

/* ---------- MEDIA / VIDEO ---------- */
.media-band { background: linear-gradient(var(--dark) 60.4%, #fff 0); }  /* dark/white split = 302 of 500 ref-px */
.media-box { width: 100%; aspect-ratio: 1440 / 500; background: #4f4e4e; border-radius: calc(40 * var(--u)); overflow: hidden; }
.media-box video, .media-box img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- INDIVIDUAL AWARDS ---------- */
.awards { padding-top: calc(52 * var(--u)); }
.awards__ribbon { display: flex; align-items: center; justify-content: center; width: min(calc(995 * var(--u)), 100%); min-height: calc(74 * var(--u)); margin: 0 auto;
  padding: 6px 8%; background: var(--amber); clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  font-size: max(calc(30 * var(--u)), 13px); font-weight: 500; text-align: center; }
.awards__ribbon b { font-weight: 700; margin: 0 .25em; }
.awards__band { background: var(--orange); padding: calc(46 * var(--u)) 0 calc(43 * var(--u)); }
.awards__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(17.6 * var(--u)); width: min(calc(1395 * var(--u)), calc(100vw - 32px)); margin: 0 auto; }
.award-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(24 * var(--u)); min-height: calc(205 * var(--u));
  padding: calc(12 * var(--u)) calc(8 * var(--u)); background: #2e2e2e; border-radius: calc(16 * var(--u)); color: #fff; font-size: calc(24 * var(--u)); font-weight: 500; text-align: center; }
.awards__tab { width: min(calc(1253 * var(--u)), 80%); height: calc(21 * var(--u)); margin: 0 auto; background: var(--amber); }
@media (max-width: 767.98px) {
  .awards__grid { --u: .7px; grid-template-columns: repeat(2, 1fr); }
  .award-card:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .media-band{
    display: none;
  }
}

/* ---------- TEAM FACILITIES ---------- */
.facilities { padding-top: calc(105 * var(--u)); }
.facilities__media img { display: block; width: 100%; height: auto; border-radius: calc(20 * var(--u)); }
.facilities__body { padding-left: calc(48 * var(--u)); }
.facilities__title { margin-bottom: calc(40 * var(--u)); font-size: calc(58 * var(--u)); font-weight: 700; line-height: 1.2; }
.facility-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(30 * var(--u)) calc(22 * var(--u)); align-items: start; }
.facility-card { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); min-height: calc(165 * var(--u));
  padding: calc(24 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)); border: max(1px, calc(2 * var(--u))) dotted #9a9a9a; border-radius: calc(18 * var(--u));
  color: #717171; font-size: calc(23 * var(--u)); font-weight: 600; line-height: 1.12; text-align: center; text-wrap: balance; }
.facility-card--promo { font-size: calc(19 * var(--u)); font-weight: 500; }
@media (max-width: 1199.98px) {
  .facilities__body { padding: calc(40 * var(--u)) 0 0; }
  .facilities__media img { max-width: 560px; margin: 0 auto; }
  .facility-grid { --u: .62px; align-items: stretch; }
}
@media (max-width: 575.98px) { .facility-grid { --u: .8px; grid-template-columns: repeat(2, 1fr); } }

/* ---------- REGISTRATION ---------- */
.registration { padding-top: calc(144 * var(--u)); }
.registration__title { font-size: calc(46 * var(--u)); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.registration__sub { margin: calc(6 * var(--u)) auto calc(55 * var(--u)); font-size: max(calc(22 * var(--u)), 13px); }
.pricing { --bs-gutter-x: calc(16 * var(--u)); --bs-gutter-y: calc(16 * var(--u)); text-align: left; }
.price-card { display: flex; flex-direction: column; height: 100%; background: #faf5ee; }
.price-card--featured { background: linear-gradient(180deg, #ffe60f, #fea90f); }
.price-card__head, .price-card__price, .price-card__date { display: flex; flex-direction: column; justify-content: center; padding-inline: calc(58 * var(--u)); }
.price-card__head  { min-height: calc(140 * var(--u)); border-bottom: max(1px, calc(2 * var(--u))) solid rgba(24, 23, 23, .14); font-size: calc(40 * var(--u)); font-weight: 700; line-height: 1.05; }
.price-card__head span { font-size: calc(32 * var(--u)); font-weight: 600; }
.price-card__price { min-height: calc(141 * var(--u)); border-bottom: max(1px, calc(2 * var(--u))) solid rgba(24, 23, 23, .14); font-size: calc(78 * var(--u)); font-weight: 800; }
.price-card__date  { min-height: calc(100 * var(--u)); font-size: calc(29 * var(--u)); font-weight: 600; }
.price-card__cta { display: flex; align-items: center; gap: calc(24 * var(--u)); min-height: calc(77 * var(--u)); margin-top: auto; padding-inline: calc(58 * var(--u));
  background: #000; color: var(--yellow-bright); font-size: calc(24 * var(--u)); font-weight: 600; text-decoration: none; }
.price-card__cta img { width: calc(50 * var(--u)); height: calc(24 * var(--u)); object-fit: contain; }
.price-card__cta:hover, .price-card__cta:focus-visible { color: #fff; }
@media (max-width: 1199.98px) { .pricing { --u: .85px; --bs-gutter-x: 0; --bs-gutter-y: 16px; max-width: 560px; margin-inline: auto; } .price-card__cta { min-height: 56px; } }
@media (max-width: 988px){
    .price-card__cta{
    font-size: calc(18 * var(--u));
  }
  .facilities__title{
    text-align: center;
  }
  .price-card__price{
    font-size: calc(43 * var(--u));
  }
}
/* ---------- FOOTER ---------- */
.site-footer { position: relative; margin-top: calc(51 * var(--u)); }
.site-footer__bg { display: block; width: 100%; height: auto; max-width: none; }     /* curve is baked into the supplied PNG */
.site-footer__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(109 * var(--u)); color: #fff; }
.site-footer__logo { width: calc(293 * var(--u)); height: auto; }
.site-footer__contact { display: flex; align-items: flex-start; gap: calc(20 * var(--u)); width: 68%; margin-top: calc(86 * var(--u));
  font-size: max(calc(42 * var(--u)), 16px); font-weight: 500; line-height: 1.1; text-align: center; }
.site-footer__contact i { flex: 1; min-width: 8px; margin-top: .55em; border-top: max(1px, calc(2 * var(--u))) dotted #cfcfcf; }
.site-footer__phone { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(40 * var(--u)); color: var(--yellow-bright);
  font-size: min(calc(56 * var(--u)), 7.4vw); font-weight: 600; text-decoration: none; }
.site-footer__phone img { width: calc(50 * var(--u)); height: calc(50 * var(--u)); min-width: 24px; object-fit: contain; }
@media (max-width: 1199.98px) {
  .site-footer { --u: .62px; min-height: 460px; margin-top: 40px; overflow: hidden; }
  .site-footer__bg { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center top; }
  .site-footer__content { padding-top: 120px; }
}
@media (max-width: 767.98px) { .site-footer { --u: .55px; min-height: 440px; } .site-footer__contact { width: 92%; } }


.booking-modal .modal-content { border: 0; border-radius: 16px; overflow: hidden; font-family: "Poppins", system-ui, sans-serif; color: var(--dark); }
.booking-modal .modal-header { padding: 18px 24px; background: var(--dark); border: 0; }
.booking-modal .modal-title { font-size: 1.25rem; font-weight: 700; color: var(--yellow); }
.booking-modal .btn-close { filter: invert(1) brightness(2); opacity: .85; }
.booking-modal .modal-body { padding: 24px; }
.booking-modal__event { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 10px 14px; background: #fff6dc; border-left: 4px solid var(--amber); border-radius: 8px; font-size: .9rem; font-weight: 600; }
.booking-modal__event i { color: var(--orange); }
.booking-modal__note { margin: 0; font-size: .8rem; color: #6b6b6b; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
.field--full { grid-column: 1 / -1; }
.field__label { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 600; }
.field__input { width: 100%; padding: 10px 12px; font: inherit; font-size: .95rem; background: #fff; border: 1.5px solid #d4d4d4; border-radius: 10px; }
.field__input:focus { outline: 0; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(246, 175, 4, .25); }
.field__input:disabled { background: #f3f3f3; color: #8a8a8a; }
.field input[type="checkbox"] { margin-right: 8px; accent-color: #0b2964; }
.field__error { display: none; margin: 6px 0 0; font-size: .78rem; color: #c62828; }
.has-error .field__error { display: block; }
.has-error .field__input { border-color: #c62828; }
.zone-status { margin-top: 6px; font-size: .8rem; }
.player-fieldset { padding: 16px; border: 1px solid #e5e5e5; border-radius: 12px; }
.player-fieldset legend { float: none; width: auto; margin: 0; padding: 0 8px; }
.btn-primary-navy { padding: 12px 18px; background: #0b2964; border: 0; border-radius: 10px; color: #fff; font-weight: 600; }
.btn-primary-navy:hover, .btn-primary-navy:focus-visible { background: #0d3585; color: #fff; }
.form-status { margin: 12px 0 0; }
.form-status:empty { display: none; }
.form-status--error { padding: 10px 14px; background: #fdecea; border-radius: 8px; color: #c62828; font-size: .9rem; }
@media (max-width: 575.98px) { .form-grid { grid-template-columns: 1fr; } .booking-modal .modal-body { padding: 18px; } }