/* Your Tournaments (V3-60) */
.hm-mine          { display: flex; flex-direction: column; gap: var(--space-4); }
.hm-mine__head    { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.hm-mine__title   { margin: 0; }
.hm-mine__group   { display: flex; flex-direction: column; gap: var(--space-3); }
.hm-mine__label   { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Home page only (hm-*). Tokens only. */

/* ================= STRIP (component: ui-pillstrip) ================= */
.hm-strip        { padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); }
.hm-strip__error { align-items: center; }
.hm-strip__error .ui-btn { margin-left: auto; }

/* ================= HERO ================= */
.hm-hero {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-5) var(--space-7);
  text-align: center;
}
.hm-hero__text  { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.hm-hero__lead  { margin: 0; max-width: 46ch; color: var(--color-text-muted); font-size: var(--font-size-lg); }
.hm-hero .ui-btn-row { justify-content: center; }
.hm-nowrap      { white-space: nowrap; }   /* keeps "IPL-Style" on one line (no break after the hyphen) */

/* Stats: three equal columns, so all three stay on one row on phones (number above label when narrow) */
.hm-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
  max-width: calc(var(--space-7) * 9);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.hm-hero__stats .ui-stat { justify-content: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); text-align: center; }
@media (max-width: 575.98px) {
  .hm-hero__stats .ui-stat { flex-direction: column; }
  .hm-hero__stats .ui-stat span { font-size: var(--font-size-xs); }
}

/* Marketing art: flat on every screen size and not interactive (no hover effect: hover means "clickable" in this app) */
.hm-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), var(--glow);
}

/* Signed-in users: compact hero (no lead, no art), left-aligned on every screen size */
.hm-hero--compact            { padding-block: var(--space-4) var(--space-6); text-align: left; }
.hm-hero--compact .hm-hero__text { align-items: flex-start; }
.hm-hero--compact .ui-btn-row,
.hm-hero--compact .hm-hero__stats { justify-content: flex-start; }
.hm-hero--compact .hm-hero__stats .ui-stat { justify-content: flex-start; text-align: left; }
@media (max-width: 575.98px) {
  .hm-hero--compact .hm-hero__stats .ui-stat { align-items: flex-start; }
}
.hm-hero__title--compact     { margin: 0; font-size: var(--font-size-xxl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }

/* ================= SECTIONS ================= */
.hm-section    { border-top: var(--border-width) solid var(--color-border); }
.hm-section .ui-section__title { margin-bottom: var(--space-5); }
.hm-feature__icon { font-size: var(--font-size-xl); color: var(--color-accent); }
.hm-features   { grid-template-columns: 1fr; }

/* How It Works: 2 × 2 on phones (shorter scroll), auto columns from md */
.hm-steps      { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 767.98px) {
  .hm-steps .ui-card { gap: var(--space-2); padding: var(--space-4); }
  .hm-steps .ui-card__title { font-size: var(--font-size-md); }
  .hm-steps .ui-card__text  { font-size: var(--font-size-sm); }
}

.hm-cta        { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; border-top: var(--border-width) solid var(--color-border); }
.hm-cta .ui-section__title { margin: 0; }
.hm-cta__link  { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

@media (min-width: 576px) {
  .hm-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Wider screens: each stat on one line, columns as wide as their content */
  .hm-hero__stats { grid-template-columns: repeat(3, auto); justify-content: center; gap: var(--space-3) var(--space-5); max-width: none; width: auto; }
  .hm-hero__stats .ui-stat { flex-wrap: nowrap; white-space: nowrap; }
  .hm-hero--compact .hm-hero__stats { justify-content: start; }
}
@media (min-width: 768px) {
  .hm-steps    { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (min-width: 992px) {
  .hm-hero        { grid-template-columns: 1fr 1fr; text-align: left; }
  .hm-hero--compact { grid-template-columns: 1fr; }
  .hm-hero__text  { align-items: flex-start; }
  .hm-hero__stats .ui-stat { justify-content: flex-start; text-align: left; }
  .hm-hero .ui-btn-row { justify-content: flex-start; }
  .hm-features    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}