/* Ulern for Teams — page-specific sections. */

/* Hero (shared 2-col shape with Home). */
.pub-hero { padding-block: 4rem 3rem; }
.pub-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 3rem; align-items: center; }
.pub-hero__left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.pub-hero__sub { margin: 0; max-width: 34rem; color: var(--semantic-text-text-secondary); font-size: 1.1rem; line-height: 1.6; }
.pub-hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Team-progress preview card. */
.pub-teamcard { background: var(--semantic-background-bg-surface); border: 1px solid var(--semantic-border-border-subtle); border-radius: 1.25rem; box-shadow: 0 20px 50px -24px rgba(20,20,40,.25); padding: 1.25rem 1.4rem; }
.pub-teamcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pub-teamcard__title { font-weight: 600; font-size: 0.95rem; }
.pub-teamcard__sub { font-size: 0.8rem; color: var(--semantic-text-text-tertiary); margin-top: 0.15rem; }
.pub-teamcard__pill { flex: none; font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: var(--pub-radius-pill); background: var(--semantic-background-bg-success); color: var(--semantic-text-text-success); }
.pub-teamcard__divider { height: 1px; background: var(--semantic-border-border-subtle); margin: 0.9rem 0; }
.pub-person { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0; }
.pub-person__avatar { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 600; background: var(--base-primary-primary-50); color: var(--base-primary-primary-700); }
.dark .pub-person__avatar { background: color-mix(in srgb, var(--base-primary-primary-500) 22%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-200); }
.pub-person__name { font-size: 0.85rem; width: 4.5rem; flex: none; }
.pub-person__bar { flex: 1; height: 0.375rem; border-radius: var(--pub-radius-pill); background: var(--semantic-border-border-subtle); overflow: hidden; }
.pub-person__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--base-primary-primary-500); }
.pub-person__status { flex: none; width: 3rem; text-align: right; font-size: 0.78rem; color: var(--semantic-text-text-secondary); }
.pub-person__status--ready { color: var(--semantic-text-text-success); font-weight: 600; }
.pub-teamcard__next { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--semantic-text-text-secondary); }
.pub-teamcard__next::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--base-accent-accent-500); }

/* Scramble — quote cards. */
.pub-quote__title { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 600; }
.pub-quote__text { margin: 0; color: var(--semantic-text-text-secondary); font-size: 0.95rem; line-height: 1.55; }

/* What-you-get tags. */
.pub-tag { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; padding: 0.18rem 0.5rem; border-radius: var(--pub-radius-pill); background: var(--base-primary-primary-50); color: var(--base-primary-primary-700); margin-bottom: 0.9rem; }
.dark .pub-tag { background: color-mix(in srgb, var(--base-primary-primary-500) 18%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-300); }
.pub-tags-row { display: inline-flex; gap: 0.4rem; }

/* Studio split. */
.pub-studio__grid { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 3rem; align-items: center; }
.pub-studio__left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.pub-studio__checklist { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.pub-check { display: flex; gap: 0.75rem; }
.pub-check__icon { flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--pub-radius-sm); display: grid; place-items: center; background: var(--base-primary-primary-50); color: var(--base-primary-primary-600); }
.dark .pub-check__icon { background: color-mix(in srgb, var(--base-primary-primary-500) 18%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-300); }
.pub-check__icon .pub-icon { width: 0.9rem; height: 0.9rem; }
.pub-check__title { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 600; }
.pub-check__text { margin: 0; font-size: 0.88rem; color: var(--semantic-text-text-secondary); line-height: 1.5; }

/* Studio mock window. */
.pub-mock { border: 1px solid var(--semantic-border-border-default); border-radius: var(--pub-radius); overflow: hidden; background: var(--semantic-background-bg-surface); box-shadow: 0 24px 60px -30px rgba(20,20,40,.3); }
.pub-mock__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--semantic-border-border-subtle); background: var(--semantic-background-bg-page); }
.pub-mock__bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--semantic-border-border-strong); display: inline-block; }
.pub-mock__bar span { margin-left: 0.5rem; font-size: 0.78rem; color: var(--semantic-text-text-tertiary); }
.pub-mock__body { display: grid; grid-template-columns: 9.5rem 1fr; }
.pub-mock__rail { border-right: 1px solid var(--semantic-border-border-subtle); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; }
.pub-mock__rail a { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.5rem; border-radius: var(--pub-radius-sm); font-size: 0.82rem; color: var(--semantic-text-text-secondary); }
.pub-mock__rail a.is-active { background: var(--base-primary-primary-50); color: var(--base-primary-primary-700); font-weight: 600; }
.dark .pub-mock__rail a.is-active { background: color-mix(in srgb, var(--base-primary-primary-500) 18%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-200); }
.pub-mock__rail .pub-icon { width: 0.95rem; height: 0.95rem; }
.pub-mock__main { padding: 1.1rem; }
.pub-mock__h { margin: 0 0 0.9rem; font-size: 1.05rem; font-weight: 600; }
.pub-mock__stats { display: flex; gap: 1.75rem; margin-bottom: 1.1rem; }
.pub-mock__stat b { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; }
.pub-mock__stat span { font-size: 0.75rem; color: var(--semantic-text-text-tertiary); }
.pub-mock__progs { display: flex; flex-direction: column; gap: 0.5rem; }
.pub-mock__prog { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.8rem; border: 1px solid var(--semantic-border-border-subtle); border-radius: var(--pub-radius-sm); font-size: 0.85rem; }
.pub-status { font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: var(--pub-radius-pill); }
.pub-status--published { background: var(--semantic-background-bg-success); color: var(--semantic-text-text-success); }
.pub-status--review { background: var(--base-primary-primary-50); color: var(--base-primary-primary-700); }
.dark .pub-status--review { background: color-mix(in srgb, var(--base-primary-primary-500) 18%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-300); }

/* Who it's for — chips + scale note. */
.pub-bigchips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 2.5rem; }
.pub-bigchip { padding: 0.55rem 1.1rem; border-radius: var(--pub-radius-pill); border: 1px solid var(--semantic-border-border-default); background: var(--semantic-background-bg-surface); font-size: 0.92rem; font-weight: 500; }
.pub-scale-note { max-width: 46rem; margin: 2.25rem auto 0; text-align: center; color: var(--semantic-text-text-secondary); font-size: 1rem; line-height: 1.65; }

/* CTA band with two actions handled by shared .pub-cta-band. */

@media (max-width: 60rem) {
  .pub-hero__grid, .pub-studio__grid { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .pub-mock__body { grid-template-columns: 1fr; }
  .pub-mock__rail { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--semantic-border-border-subtle); }
}