/* WBT hub sites (projects + resources) — page structure, copied from tools.wbt.coach so the two sites match.
   Colors, fonts and shapes come from theme.css (the same file tools uses). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}
a { color: inherit; }
[hidden] { display: none !important; }

/* The logo is one SVG used as a mask, so it takes the color of the text around it. */
.logo {
  display: block;
  aspect-ratio: 1000 / 409.21;
  background: currentColor;
  -webkit-mask: url("brand/logo.svg") center / contain no-repeat;
          mask: url("brand/logo.svg") center / contain no-repeat;
}

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--nav-bg); color: var(--nav-ink);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 24px 14px;
}
.nav-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: 20px; }
.nav-logo { display: flex; align-items: center; height: var(--nav-logo-height); color: var(--nav-ink); text-decoration: none; }
.nav-logo .logo { height: 100%; }
.nav-title {
  font-family: var(--label-font); font-weight: var(--label-weight);
  text-transform: var(--label-transform); letter-spacing: var(--label-tracking);
  font-size: 12px; padding-left: 20px; border-left: 1px solid var(--nav-divider);
}
.nav-user { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; opacity: 0.85; min-width: 0; }
.nav-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user a {
  border: 1px solid var(--nav-divider); color: inherit; text-decoration: none;
  font-family: var(--cta-font); font-size: 11px; text-transform: var(--cta-transform);
  letter-spacing: var(--cta-tracking); padding: 6px 10px; border-radius: var(--radius-button);
}

/* ── HEADER ── */
.page { max-width: var(--max-width); margin: 0 auto; padding: 48px 24px 80px; }
.eyebrow {
  font-family: var(--label-font); font-weight: var(--label-weight);
  text-transform: var(--label-transform); letter-spacing: var(--eyebrow-tracking);
  font-size: 13px; color: var(--eyebrow); margin: 0 0 14px;
}
.page-title {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(34px, 5vw, 52px); line-height: 1.02; letter-spacing: var(--display-tracking);
  color: var(--heading); margin: 0 0 14px;
}
.page-intro { font-family: var(--deck-font); font-size: clamp(17px, 2vw, 20px); line-height: 1.45; max-width: 640px; margin: 0 0 36px; }

/* Section heading: styled like the tools tab bar, one per engagement. */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--border); margin: 0 0 20px; padding: 12px 0;
  font-family: var(--label-font); font-weight: var(--label-weight);
  text-transform: var(--label-transform); letter-spacing: var(--label-tracking);
  font-size: 13px; color: var(--heading);
}
.section-head .count { color: var(--muted); font-size: 11px; }
.section + .section { margin-top: 44px; }

/* ── GRID + CARDS ── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--grid-gap); }
/* Tiles always share the row evenly: auto-fit stretches however many cards there are to fill
   the width, and footers stay on one line so every card's footer sits at the same height. */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 160ms cubic-bezier(.2,0,0,1), box-shadow 160ms cubic-bezier(.2,0,0,1);
}
a.card:hover { transform: var(--card-hover-transform); box-shadow: var(--card-hover-shadow); z-index: 1; }
a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-body { padding: 24px 24px 16px; flex: 1; display: flex; flex-direction: column; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-icon {
  width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-icon); background: var(--icon-bg); color: var(--accent);
}
.card-icon svg { width: 22px; height: 22px; }
/* Category cards on resources.wbt.coach use the website's service images instead of an icon. */
.card-thumb { display: block; height: 120px; width: auto; }
.card-updated { font-size: 11px; color: var(--muted); white-space: nowrap; margin: 0; text-align: right; }
.card-title {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--title-tracking);
  font-size: 21px; line-height: 1.15; color: var(--heading); margin: 0 0 8px;
}
.card-desc { font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; }
/* When cards sit side by side, titles reserve two lines so every card's description starts at the
   same height, whether its title wraps or not. Stacked cards on phones don't need it. */
@media (min-width: 600px) { .card-title { min-height: calc(2 * 1.15em); } }
.card-footer {
  padding: 14px 24px; border-top: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap;
}
.card-link {
  font-family: var(--cta-font); font-weight: var(--cta-weight); text-transform: var(--cta-transform);
  letter-spacing: var(--cta-tracking); font-size: 12px; color: var(--accent); white-space: nowrap;
}
.card-tags { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.card-tag { white-space: nowrap; }
.card-tag {
  font-family: var(--label-font); font-weight: var(--label-weight);
  text-transform: var(--label-transform); letter-spacing: var(--label-tracking);
  font-size: 10px; padding: 3px 8px; border-radius: var(--radius-tag); background: var(--chip-bg); color: var(--muted);
}
.empty {
  grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: var(--radius-card);
  padding: 32px 24px; margin: 0; color: var(--muted); font-size: 14.5px;
}

/* ── SIGN-IN SCREEN (rendered by the sign-in gate) ── */
.login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--login-bg); color: var(--login-ink); padding: 24px;
}
.login-box { text-align: center; max-width: 380px; }
.login-logo { height: var(--login-logo-height); margin: 0 auto 22px; }
.login-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 24px; margin: 0 0 24px; }
.login-btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--accent); color: var(--accent-ink); padding: 13px 22px; min-height: 44px;
  border-radius: var(--radius-button); font-family: var(--cta-font); font-weight: var(--cta-weight);
  text-transform: var(--cta-transform); letter-spacing: var(--cta-tracking); font-size: 13px;
}
.login-btn:focus-visible { outline: 2px solid var(--login-ink); outline-offset: 3px; }
.login-note { font-size: 12.5px; opacity: 0.7; margin: 16px 0 0; }
.login-text { font-size: 15px; line-height: 1.6; margin: 0 0 8px; }

/* Email sign-in form */
.login-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.login-label {
  font-family: var(--label-font); font-weight: var(--label-weight);
  text-transform: var(--label-transform); letter-spacing: var(--label-tracking); font-size: 11px;
}
.login-input {
  font: inherit; font-size: 16px; min-height: 44px; padding: 10px 12px; width: 100%;
  border: 1px solid var(--login-ink); border-radius: var(--radius-tag);
  background: var(--bg); color: var(--ink);
}
.login-input:focus-visible { outline: 2px solid var(--login-ink); outline-offset: 2px; }
.login-form .login-btn { justify-content: center; border: 0; cursor: pointer; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 12.5px; opacity: 0.7; }
.login-or::before, .login-or::after { content: ''; flex: 1; border-top: 1px solid var(--nav-divider); }
.login-btn-secondary { background: transparent; border: 1px solid var(--login-ink); color: var(--login-ink); }
.login-note a { color: inherit; }

.footer { max-width: var(--max-width); margin: 0 auto; padding: 0 24px 40px; font-size: 12px; color: var(--muted); }

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .page { padding-top: 32px; }
  .nav-title { display: none; }
  .nav-user span { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Newsletter signup (resources.wbt.coach) ── */
.login-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; margin: 6px 0 4px; cursor: pointer; }
.login-check input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--accent); }
.login-error { background: var(--status-bg); color: var(--status-ink); font-size: 13.5px; padding: 10px 12px; margin: 0 0 16px; text-align: left; }
.login-box .login-text { margin-bottom: 24px; }

/* Sample resource pages */
.resource-body { max-width: 680px; font-size: 16px; line-height: 1.75; }
.resource-body p + p { margin-top: 14px; }
.sample-note { background: var(--howto-bg); border-left: 3px solid var(--accent); padding: 14px 18px; margin: 0 0 28px; font-size: 14.5px; }