/* layout.css — page frame: header, navigation, footer, sections, grids. */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--s-8); }
.section-alt {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg-alt) 62%, var(--bg) 100%);
  border-top: 1px solid var(--border);
}
.section-band { background: var(--band-bg); color: var(--band-ink); }

/* --- The horizon --------------------------------------------------- */
/* Every change of ground on the page is marked by the same hairline wave
   the logo is built from. Three or four per page, never more: it reads as
   a recurring horizon rather than as decoration. */
.hero-raffle, .hero-home, .section-band, .site-foot { position: relative; }
.hero-raffle::before,
.hero-home::before,
.section-band::before,
.site-foot::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 8px;
  background: var(--rule-wave-light) repeat-x 0 0 / 24px 8px;
  opacity: 0.5;
  pointer-events: none;
}

/* Grain gives a large navy field some tooth instead of leaving it plastic. */
.hero-raffle::after,
.hero-home::after,
.section-band::after,
.site-foot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain) repeat 0 0 / 120px 120px;
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-raffle > *, .hero-home > *, .section-band > *, .site-foot > * { position: relative; z-index: 1; }
.section-band h1, .section-band h2, .section-band h3, .section-band h4 { color: var(--band-ink); }
.section-band .text-muted { color: var(--band-muted); }
.section-band a { color: #BFE2F5; }
.section-band a:hover { color: #FFFFFF; }

.section-head { margin-bottom: var(--s-6); max-width: 46rem; }
.section-head p { color: var(--ink-muted); font-size: var(--fs-md); }
.section-band .section-head p { color: var(--band-muted); }

/* Each eyebrow sits on a short gold rule — the same accent as the CTA and
   the jackpot, used once per section and never anywhere else. */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-bottom: var(--s-3);
  background: var(--gold-500);
}
.section-band .eyebrow { color: #8FD7E2; }
h1 + .eyebrow, .eyebrow:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */
.site-head {
  position: relative;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  min-height: var(--tap);
}
.brand-mark { width: 44px; height: 44px; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: var(--fs-md); color: var(--lake-800); letter-spacing: -0.01em; }
.brand-text span { font-size: var(--fs-xs); color: var(--ink-muted); }

.head-util {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  overflow: hidden;
}
.lang-switch a, .lang-switch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  color: var(--lake-700);
  background: var(--surface);
}
.lang-switch [aria-current="true"] { background: var(--btn-bg); color: var(--btn-ink); }

.account-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding-inline: var(--s-3);
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--lake-700);
  text-decoration: none;
  border: 1px solid transparent;
}
.account-link:hover { border-color: var(--border-strong); }

.head-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.head-cta .cta-note { font-size: var(--fs-xs); color: var(--ink-muted); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--s-3);
  background: var(--surface);
  color: var(--lake-800);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle .bars { width: 20px; height: 2px; background: currentColor; position: relative; }
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }

.site-nav { flex: 1 0 100%; border-top: 1px solid var(--border); padding-top: var(--s-2); }
.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-1);
  margin: 0;
  padding: 0;
}
.site-nav li { margin: 0; max-width: none; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-3);
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:hover { background: var(--lake-100); color: var(--lake-800); }
.site-nav a[aria-current="page"] { color: var(--lake-800); box-shadow: inset 0 -3px 0 var(--gold-500); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { width: 100%; border-radius: 0; border-bottom: 1px solid var(--border); }
  .head-cta { order: 5; flex: 1 0 100%; align-items: stretch; }
  .head-cta .btn { width: 100%; }
  .head-cta .cta-note { text-align: center; }
}

/* ------------------------------------------------------------------ */
/* Main + breadcrumbs                                                  */
/* ------------------------------------------------------------------ */
main { display: block; }

.breadcrumbs { background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3) 0;
  font-size: var(--fs-xs);
}
.breadcrumbs li { margin: 0; max-width: none; color: var(--ink-muted); }
.breadcrumbs li + li::before { content: "›"; margin-right: var(--s-2); color: var(--ink-muted); }

/* ------------------------------------------------------------------ */
/* Grids                                                               */
/* ------------------------------------------------------------------ */
/* min(<track>, 100%) lets a track shrink below its comfortable minimum on
   a very narrow screen instead of pushing the page sideways. */
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr)); }
.split {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Grid items default to min-width:auto, which lets their min-content
   push a track wider than the page on a very narrow screen. */
.grid > *, .split > *, .hero-inner > *, .foot-grid > *,
.packs > *, .steps > *, .badges > *, .countdowns > *,
.calendar > *, .draw-card-list > *, .profile-grid > *,
.admin-grid > *, .admin-row > * { min-width: 0; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.site-foot {
  background: var(--band-bg);
  color: var(--band-ink);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--fs-sm);
}
.site-foot a { color: #CFE7F6; }
.site-foot a:hover { color: #FFFFFF; }
.site-foot p { max-width: none; }

/* 15rem, not 17rem: at the 74rem wrap four tracks of 17rem no longer fit
   and the fourth column drops to a second row on its own. */
.foot-grid {
  display: grid;
  gap: var(--s-6) var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.foot-grid h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #9FC9E2;
  margin-bottom: var(--s-3);
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 0; max-width: none; }
.foot-grid li a, .foot-tools button { display: inline-flex; align-items: center; min-height: var(--tap); }
.foot-org { color: var(--band-muted); }
.foot-legal {
  padding-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}
.foot-legal p { color: var(--band-muted); }
/* The licence line is the one piece of the footer that is a compliance
   artefact, so it is set apart as a plate rather than run in with the rest. */
.foot-licence {
  font-weight: 700;
  color: var(--band-ink) !important;
  padding: var(--s-3) var(--s-4);
  border: 1px solid rgba(233, 166, 59, 0.45);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--r-2);
  background: rgba(255, 255, 255, 0.04);
  letter-spacing: 0.01em;
}
.foot-tools { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.foot-tools button {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-2);
  color: #CFE7F6;
  padding: 0 var(--s-4);
  min-height: var(--tap);
  cursor: pointer;
  font-size: var(--fs-sm);
  /* inline-flex turns the label and the state <span> into separate flex
     items and trims the space between them, so put it back as a gap. */
  gap: 0.35ch;
  transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}
.foot-tools button:hover { background: rgba(255, 255, 255, 0.08); }
.foot-tools button:hover { border-color: #FFFFFF; color: #FFFFFF; }