/* Shared "restricted area" login shell for Staff and Admin: same page structure as the customer
   login (customer-start.css), but the hero is a full-bleed café photo instead of the cup, with a
   bold wordmark over it. Used by both accounts/staff_login.html and accounts/admin_login.html. */

.cs-hero--gated {
  background: #081a12 url("../image/staff-login-bg.jpg") center 42% / cover no-repeat;
  /* lets the wordmark size itself to the photo column (cqi units below) */
  container-type: inline-size;
}

.cs-hero--gated::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,18,12, 0.75) 0%, rgba(4,18,12, 0.2) 45%, rgba(4,18,12, 0.82) 100%);
  pointer-events: none;
}

.gate-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 4px;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.gate-brand:hover { color: #fff; opacity: 0.85; }

.gate-brand img {
  width: 30px;
  height: auto;
  /* the mark is drawn in black on a transparent background; flip it white for the dark photo */
  filter: brightness(0) invert(1);
}

.gate-title {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  font-size: clamp(2.2rem, 12vw, 3.4rem);
  /* never wider than the photo column, so it cannot run under the form on narrow split cards */
  font-size: min(clamp(2.2rem, 12vw, 3.4rem), max(1.1rem, 13cqi));
  font-weight: 800;
  letter-spacing: 3px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.gate-title i { font-size: 0.85em; }

/* split card: the form panel overlaps the photo's right edge by 24px, so centre
   the wordmark in the part that is actually visible */
@media (min-width: 480px) {
  .gate-title { padding-right: 24px; }
}

.gate-notice {
  /* break out of the form panel's own side padding, so the sentence has the full card width to
     wrap in rather than the narrower area the inputs above it use */
  margin: 20px calc(-1 * clamp(20px, 8vw, 40px)) 0;
  padding: 0 10px;
  text-align: center;
  /* shrinks on narrow phones so each sentence stays on its own line instead of wrapping again --
     calibrated for the longer "administrator" wording, not just the shorter "staff" one */
  font-size: clamp(0.62rem, 2.9vw, 0.82rem);
  line-height: 1.5;
  color: #0f2a1f;
}

.gate-notice i { margin-right: 4px; }

/* ---------- intro: same choreography as the customer login (customer-start.css) ---------- */
.cs-card--intro .gate-brand { animation: cs-fade-down 0.6s ease both; }
.cs-card--intro .gate-title { animation: cs-rise 0.7s ease 0.15s both; }

@media (prefers-reduced-motion: reduce) {
  .cs-card--intro .gate-brand,
  .cs-card--intro .gate-title {
    animation: none;
  }
}

/* "back to home": small on the Staff and Admin pages, with room under it, so it never sits on
   the "Staff Login" / "Admin Login" title */
.cs-card .cs-back {
  padding: 5px 12px;
  font-size: 0.8rem;
  border-radius: 999px;
}

@media (max-width: 479px) {
  .cs-card--sheet .cs-back { top: 12px; left: 16px; }
  .cs-card--sheet:not(.cs-card--tall) .cs-form-panel { padding-top: 54px; }
}