/* ==========================================================================
   Likoma Airlines — Likoma Club account
   --------------------------------------------------------------------------
   Sign in, join, and the member area. Mobile-first: the base rules describe a
   phone, and the min-width blocks at the foot add what a larger screen allows.
   ========================================================================== */

/* --- Auth pages -------------------------------------------------------------
   A single centred column. Nothing competes with the form.
   ------------------------------------------------------------------------ */

.lk-auth {
  display: grid;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--section-y-tight);
}

.lk-auth__panel {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background-color: var(--color-surface);
}

.lk-auth__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.lk-auth__lead {
  margin-block-start: var(--space-2);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.lk-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.lk-auth__foot {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-divider);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* The reassurance column beside the form */
.lk-auth__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.lk-auth__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lk-auth__point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.lk-auth__point svg {
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* --- Membership card ---------------------------------------------------------
   Deliberately card-shaped: it is the one place the brand gets to be a physical
   object rather than a web page.
   ------------------------------------------------------------------------ */

.lk-club-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--gradient-dawn);
  color: #fff;
  /* The tier colour is supplied inline from the database. */
  border-block-start: 3px solid var(--tier-colour, var(--blue-500));
}

.lk-club-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.lk-club-card__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}

.lk-club-card__name {
  margin-block-start: var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

.lk-club-card__tier {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--tier-colour, var(--blue-500));
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.lk-club-card__number {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wider);
  color: rgb(255 255 255 / 0.9);
}

.lk-club-card__miles {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.lk-club-card__balance {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
}

.lk-club-card__unit {
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.66);
}

/* Progress to the next tier */
.lk-club-card__progress {
  block-size: 4px;
  border-radius: var(--radius-full);
  background-color: rgb(255 255 255 / 0.18);
  overflow: hidden;
}

.lk-club-card__progress span {
  display: block;
  block-size: 100%;
  inline-size: var(--progress, 0%);
  background-color: var(--tier-colour, var(--blue-500));
}

.lk-club-card__note {
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.66);
}

/* --- Trip list ---------------------------------------------------------------- */

.lk-trip {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition: border-color var(--duration-base) var(--ease-soft);
}

.lk-trip:hover { border-color: var(--color-border-strong); }

.lk-trip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.lk-trip__route {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.lk-trip__route svg {
  inline-size: 17px;
  block-size: 17px;
  color: var(--color-text-muted);
}

.lk-trip__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.lk-trip__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.lk-trip__meta svg {
  inline-size: 15px;
  block-size: 15px;
  color: var(--color-text-muted);
}

.lk-trip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-divider);
}

.lk-trip--past { opacity: 0.72; }

/* --- Larger screens ------------------------------------------------------------ */

@media (min-width: 768px) {
  .lk-auth__panel { padding: var(--space-8); }
  .lk-club-card { padding: var(--space-7); }
  .lk-trip { padding: var(--space-6); }
}

@media (min-width: 1024px) {
  /* Form leads, reassurance sits beside it. */
  .lk-auth {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(var(--space-10), 5vw, var(--space-16));
  }

  .lk-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: clamp(var(--space-8), 4vw, var(--space-12));
    align-items: start;
  }

  .lk-account-grid__aside {
    position: sticky;
    inset-block-start: var(--space-8);
  }
}