/* ==========================================================================
   Home. design.md 4.1 (desktop 1440) and 4.4 (mobile 390).
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------
   580 tall. Left to right dark overlay so the copy column stays legible
   over the photograph while the right side keeps the picture open.        */

.hero {
  position: relative;
  min-block-size: 580px;
  display: flex;
  align-items: center;
  background: var(--ink-900) center / cover no-repeat;
  overflow: hidden;
  color: #fff;             /* the H1 sits on the photograph */
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgb(5 23 15 / 0.94) 0%,
    rgb(5 23 15 / 0.62) 55%,
    rgb(5 23 15 / 0.18) 100%);
}
/* The overlay is directional, so it flips with the document. */
:root[dir='rtl'] .hero::after { transform: scaleX(-1); }

.hero__inner {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}
.hero__col {
  max-inline-size: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.eyebrow {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgb(13 138 72 / 0.9);
  color: #fff;
}
.hero__lede { color: #dce5ec; font-size: 18px; line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.facts { display: flex; flex-wrap: wrap; gap: 48px; margin-block-start: 6px; }
.fact__value { font-size: 22px; font-weight: 700; color: #fff; }
.fact__label { margin-block-start: 4px; font-size: 13px; color: #afc0ce; }

/* --- Section shell -------------------------------------------------------- */

.section { padding-block: var(--section-pad); }
.section--white { background: var(--surface); }
.section--muted { background: var(--muted); }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-block-end: 36px;
}
.section__lede { margin-block-start: 14px; max-inline-size: 520px; color: var(--ink-500); font-size: 16px; line-height: 1.5; }
.section__link { font-size: 15px; color: var(--green-500); white-space: nowrap; }
.section__link:hover { color: var(--green-600); text-decoration: underline; }

/* --- Court cards ----------------------------------------------------------
   Stacked card: a 236 image band above the body, three across.            */

.courts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.ccard { display: flex; flex-direction: column; }
.ccard__img {
  block-size: 236px;
  background: var(--blue-100) center / cover no-repeat;
  flex: none;
}
.ccard__body { padding: 20px 22px 22px; }
.ccard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.ccard__price { font-size: 15px; color: var(--blue-700); white-space: nowrap; }
.ccard__desc { display: block; margin-block: 10px 12px; font-size: 14px; color: var(--ink-500); }

/* 4.1 and 4.4 word the court line differently: the desktop card splits the
   description from the price, the mobile card runs them together. */
.m-only { display: none; }

/* Inline card: image on the leading edge. Row two of 4.1, and every card
   on mobile. This row is described in 4.1 but was never drawn in Figma. */

.courts--inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--grid-gap);
}
.ccard--inline {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  background: var(--muted);
}
.ccard--inline .ccard__img { block-size: 100%; min-block-size: 148px; }
.ccard--inline .ccard__body { padding: 22px; }
.ccard__note { display: block; margin-block-start: 4px; font-size: 13px; color: var(--ink-300); }

/* The mobile note in 4.4 duplicates the cancellation band, so only one of
   the two is shown at any width. */
.mobile-note { display: none; }

/* --- How booking works ----------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.step { padding: 30px 28px; }
.badge {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--green-50);
  color: var(--green-600);
  font-size: 13px;
  font-weight: 500;
}
.step__title { margin-block: 20px 12px; font-size: 21px; font-weight: 600; }
.step__body  { font-size: 15px; line-height: 1.5; color: var(--ink-500); }

/* --- Cancellation band ----------------------------------------------------- */

.band { background: var(--blue-700); padding-block: 64px; color: #fff; }
.band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.band__title { font-size: 32px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.band__body  { margin-block-start: 14px; max-inline-size: 1043px; font-size: 17px; line-height: 1.45; color: #c7daec; }
.band__stat  { text-align: end; flex: none; }
.band__value { font-size: 56px; font-weight: 700; line-height: 1.1; }
.band__label { margin-block-start: 6px; font-size: 15px; color: #c7daec; }

/* --- The club -------------------------------------------------------------- */

.club {
  display: grid;
  grid-template-columns: minmax(0, 656px) minmax(0, 600px);
  gap: 120px;
  align-items: start;
}
.club__lede { margin-block: 20px 32px; font-size: 17px; line-height: 1.5; color: var(--ink-500); }
.club__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
  border-block-end: var(--stroke) solid var(--border);
  font-size: 15px;
}
.club__row dt { color: var(--ink-300); }
.club__row dd { margin: 0; color: var(--ink-900); text-align: end; }
.club__img {
  block-size: 420px;
  border-radius: var(--radius-lg);
  background: var(--blue-100) center / cover no-repeat;
}

/* --- Footer ---------------------------------------------------------------- */

.foot { background: var(--ink-900); color: #fff; padding-block: 56px 0; }
.foot__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-block-end: 40px;
}
.foot__name { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
.foot__meta { margin-block-start: 12px; font-size: 15px; line-height: 1.55; color: #8da0b2; }
.foot__cols { display: flex; gap: 48px; }
.foot__head { font-size: 13px; font-weight: 500; margin-block-end: 12px; }
.foot__cols li { margin-block-start: 12px; }
.foot__cols a { font-size: 15px; color: #8da0b2; }
.foot__cols a:hover { color: #fff; }

.foot__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 28px;
  border-block-start: var(--stroke) solid var(--footer-divider);
  font-size: 14px;
  color: #5f7386;
}

/* --- Mobile home, 4.4 ------------------------------------------------------- */

.tonight { display: none; }

@media (max-width: 1180px) {
  .courts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club   { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .steps  { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .courts, .courts--inline { grid-template-columns: minmax(0, 1fr); }
  .band__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .band__stat  { text-align: start; }
}

@media (max-width: 767px) {
  /* 4.4: hero is 420 tall, bottom aligned, with a vertical overlay. */
  .hero { min-block-size: 420px; align-items: flex-end; padding-block-end: 28px; }
  .hero::after {
    background: linear-gradient(to bottom, rgb(5 23 15 / 0.15), rgb(5 23 15 / 0.94));
  }
  :root[dir='rtl'] .hero::after { transform: none; }
  .hero__col { gap: 18px; inline-size: 100%; }
  .hero__lede { font-size: 15px; }
  .hero__actions { inline-size: 100%; }
  .hero__actions .btn { inline-size: 100%; }

  /* The eyebrow, the secondary action and the fact strip are not part of
     the drawn mobile hero. */
  .hero .eyebrow, .hero .facts, .hero__actions .btn--ghost { display: none; }

  .section { padding-block: 36px; }
  .section--courts { padding-block-start: 28px; }
  .section__head { display: none; }
  .courts--inline { margin-block-start: 12px; }
  .courts, .courts--inline { gap: 12px; }

  /* Every card takes the inline shape at 104px, per 3.2 and 4.4. */
  .ccard { display: grid; grid-template-columns: 104px minmax(0, 1fr); background: var(--surface); }
  .ccard__img { block-size: 100%; min-block-size: 106px; }
  .ccard__body { padding: 16px; }
  .ccard__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ccard__price { display: none; }
  .ccard__desc { margin-block: 6px 8px; font-size: 13px; }
  .ccard__note { display: none; }

  .m-only { display: block; }
  .d-only { display: none; }
  .mobile-note { display: block; margin-block-start: 16px; }
  .band { display: none; }

  /* "Tonight" against the date, which replaces the desktop section head. */
  .tonight {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 16px;
  }
  .tonight__title { font-size: 22px; font-weight: 700; }
  .tonight__date  { font-size: 14px; color: var(--ink-300); }

  .band { padding-block: 40px; }
  .band__title { font-size: 24px; }
  .band__body  { font-size: 15px; }
  .band__value { font-size: 42px; }

  .club__img { block-size: 220px; }
  .foot { padding-block-start: 36px; }
  .foot__cols { gap: 32px; }
}