/* ulrick.tech · W10 Talks (/talks/). Design: SlideMaster. Depends on tokens.css, base.css, layout.css, forms.css
   and the .button rule (home.css). Mobile first; breakpoints match the site (720 / 1024). No new colours: every value
   is an existing token. */

/* (EN | ES switch rules moved to layout.css: the switch is on every page, W14) */

/* Hero: ink band with the tezontle edge stripe (existing .section--ink) */
.talks-hero h1{margin-top:22px}
.talks-hero .lede{margin-top:24px;color:var(--bone)}
@media (max-width:719.98px){.talks-hero .mono:first-child{font-size:.6875rem}}

/* Event cards: 1 column until 1024, then 2 */
.talks__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;list-style:none;margin:0;padding:0}
@media (min-width:720px){.talks__grid{gap:24px}}
@media (min-width:1024px){.talks__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.talk{background:var(--card);border:1px solid var(--hairline);border-top:2px solid var(--ink);padding:24px;
  display:flex;flex-direction:column;min-width:0}
@media (min-width:720px){.talk{padding:32px}}
.talk__meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.75rem}
.talk__meta time{color:var(--ink)}
.talk__event{margin-top:14px;font-size:clamp(1.5rem,1.2vw + 1.1rem,2rem);overflow-wrap:anywhere}
.talk__title{margin-top:8px;color:var(--slate)}
.talk__body{margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline)}

/* Unlock form: reuses .form/.field/.form--inline; tighter for a card */
.talk .form{gap:10px}
.talk .field label{font-size:.75rem}
.talk .field input{padding:12px 14px}
.talk .form--inline .button{padding:14px 20px}
.talk .form--inline .form__row{gap:8px}   /* room for the 3px focus ring so it never sits on the button */
.talk .field-error{min-height:0;font-size:.9375rem}
.talk .field-error:empty{display:none}

/* Rate limited: inline notice, field stays usable (no lockout drama) */
.talk__notice{margin:0 0 12px;padding:12px 14px;border-left:4px solid var(--tezontle);background:var(--bone);font-size:.9375rem}

/* Unlocked: ledger green status, the download is the one tezontle line on the card */
.talk--unlocked{border-top-color:var(--ledger)}
.talk__status{display:flex;align-items:center;gap:10px;color:var(--ledger)}
.talk__status::before{content:"";width:10px;height:10px;background:var(--ledger);flex:none}
.talk__hint{margin-top:10px;color:var(--slate);font-size:.9375rem}
.talk__download{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.button--download{background:var(--tezontle);color:var(--bone);border-bottom:3px double var(--ink);justify-content:center}
.button--download:hover{background:var(--ink);color:var(--bone)}
.talk__size{font-family:var(--font-mono);font-weight:600;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
@media (max-width:519.98px){.button--download{width:100%}}

/* Archived: quieter card, no form */
.talk--archived{background:transparent;border-style:dashed;border-top:2px solid var(--slate)}
.talk--archived .talk__event{color:var(--slate)}
.talk__archived-tag{color:var(--slate)}
.talk--archived .talk__hint{margin-top:8px}

/* W14: zero events -> one quiet line in place of the grid ("Slides are posted here after each talk.") */
.talks__empty{margin:0;max-width:40ch;padding:20px 24px;border:1px dashed var(--slate);color:var(--slate);font-size:1.0625rem}