/* One library card per day (library-day.js, October 2026).
   Styled like the homepage event cards: white, 12px corners, Inter, the
   site ink. The left edge is the Stories & Learning colour from the
   homepage's category map (.cat-learning, #7ea36b). Phone first; nothing
   depends on hover, and every tap target is at least 44px tall. */
.lday{box-sizing:border-box;display:block;grid-column:1/-1;margin:0;background:#fff;border:1px solid #e3e8e4;border-left:4px solid #7ea36b;border-radius:12px;padding:16px 16px 10px;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:#22312b;text-align:left;list-style:none}
.lday *,.lday *::before,.lday *::after{box-sizing:border-box}
.lday[hidden]{display:none}
.lday-head{display:flex;gap:12px;align-items:center}
.lday-icon{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:#e6eef3;border:1px solid #cfdbe3;color:#356382;display:grid;place-items:center}
.lday-icon svg{display:block}
.lday-heading{min-width:0}
.lday-title{margin:0;font-family:inherit;font-size:17px;line-height:1.3;font-weight:700;color:#22312b;letter-spacing:0}
.lday-sum{margin:2px 0 0;font-size:14px;line-height:1.4;color:#55635c}

.lday-list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid #e3e8e4}
.lday-row[hidden]{display:none}
.lday-row{display:flex;align-items:center;gap:4px;margin:0;padding:0;border-bottom:1px solid #e3e8e4;min-height:44px}
.lday-link{flex:1 1 auto;min-width:0;min-height:44px;display:grid;grid-template-columns:4.9em minmax(0,1fr) auto;column-gap:10px;row-gap:4px;align-items:baseline;padding:10px 0;color:inherit;text-decoration:none}
.lday-time{font-size:14px;font-weight:600;color:#356382;font-variant-numeric:tabular-nums;white-space:nowrap}
.lday-name{font-size:15px;font-weight:600;line-height:1.35;color:#22312b;overflow-wrap:break-word}
.lday-town{max-width:9em;font-size:13px;line-height:1.35;color:#55635c;text-align:right}
.lday-tag{grid-column:2;justify-self:start;display:inline-block;padding:2px 7px;border-radius:6px;font-size:12px;line-height:1.4;font-weight:600;background:#ebf0ec;color:#34603d;border:1px solid #d5dcd7}
.lday-tag.is-signup{background:#e6eef3;color:#35576b;border-color:#cfdbe3}
.lday-save{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:#55635c;cursor:pointer}
.lday-save[aria-pressed="true"]{color:#356382}
.lday-save[aria-pressed="true"] svg path{fill:currentColor}
.lday-save:focus-visible,.lday-link:focus-visible,.lday-toggle:focus-visible,.lday-more:focus-visible{outline:3px solid #356382;outline-offset:2px}

/* Collapsed: the first three programs, each a time, a name and a town. */
.lday:not(.is-open) .lday-extra,
.lday:not(.is-open) .lday-tag,
.lday:not(.is-open) .lday-save,
.lday:not(.is-open) .lday-more{display:none}

.lday-toggle{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:12px 0 0;padding:10px 14px;border:1px solid #cfdbe3;border-radius:10px;background:#fff;color:#356382;font:600 15px/1.2 'Inter',system-ui,sans-serif;cursor:pointer}
.lday-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px;min-height:44px}
.lday-label{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#55635c}
.lday-more{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:#356382;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){
  .lday-link:hover .lday-name,.lday-toggle:hover{text-decoration:underline;text-underline-offset:3px}
}

/* Wider screens: a row is one line, time, name, town and label. */
@media (min-width:701px){
  .lday{padding:18px 20px 10px}
  .lday-link{grid-template-columns:5.2em minmax(0,1fr) auto auto;align-items:center}
  .lday-tag{grid-column:auto;justify-self:end}
}

/* A card one column wide (on /weekend from 601px): when the list is narrow
   the town and the label go under the name, so the name keeps its width. */
.lday-list{container-type:inline-size}
@container (max-width:300px){
  .lday-link{grid-template-columns:4.6em minmax(0,1fr)}
  .lday-town{grid-column:2;max-width:none;text-align:left}
  .lday-tag{grid-column:2;justify-self:start}
}