/* =========================================================
   ROBOOSH — Robot Calendar
   Loaded only on /robot-calendar. Inherits every colour, font
   and spacing token from styles.css; adds nothing global.
   ========================================================= */

/* ---------- hero ----------
   Two planes: the copy sits on the page ground, the calendar sits on a
   lifted one. The page was a single flat field of navy before, which is
   what made it read as heavy rather than dark. */
.cal-hero { padding-block: clamp(40px, 6vw, 76px) clamp(28px, 4vw, 48px); }
.cal-hero-inner {
  display: grid;
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
}
.cal-h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.7rem);
  line-height: 1.03;
  max-width: 13ch;
  margin-bottom: 20px;
}
.cal-hero .lede { max-width: 40ch; margin-bottom: 0; }
.cal-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(24px, 3.2vw, 34px);
}

@media (min-width: 960px) {
  .cal-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    gap: clamp(40px, 5vw, 76px);
  }
}

/* ---------- the month grid ---------- */
.cal-widget {
  border: 1px solid var(--hairline-dk);
  background:
    linear-gradient(180deg, rgba(150, 195, 255, .085), rgba(150, 195, 255, .025));
  padding: 18px 20px 16px;
}
.cw-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.cw-title {
  margin: 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  font-variation-settings: "wdth" 104;
  color: var(--ink);
}
.cw-nav {
  font: inherit; font-size: 1.1rem; line-height: 1;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink-80);
  background: transparent;
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.cw-nav:hover:not(:disabled) { color: var(--ink); border-color: var(--silver-2); }
.cw-nav:disabled { opacity: .3; cursor: default; }

.cw-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 12px;
}
.cw-grid th {
  padding: 6px 0 8px;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.cw-grid th abbr { text-decoration: none; }
.cw-d {
  padding: 0;
  text-align: center;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-60);
  height: 34px;
}
.cw-pad { height: 34px; }
.cw-d--on { padding: 2px; }
.cw-d--on a {
  display: grid; place-items: center;
  height: 100%; min-height: 30px;
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: background .2s var(--ease);
}
.cw-d--on a:hover { background: var(--accent-soft); }

.cw-agenda {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 2px;
}
.cw-agenda a {
  display: block;
  padding: 5px 0;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--ink-80);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.cw-agenda a:hover { color: var(--accent-soft); }
.cw-ag-date {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cw-foot {
  margin: 12px 0 0;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 500;
  color: var(--ink-60);
}

/* A day link lands on a card well down the page. Mark where it landed,
   otherwise the jump looks like nothing happened. */
.ev:target {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
  box-shadow: 0 0 26px -10px var(--accent-glow);
}

/* ---------- filter chips ---------- */
.cal-filters {
  position: sticky; top: var(--header-h); z-index: 30;
  padding-block: 16px 14px;
  background: rgba(14, 27, 60, .88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-block: 1px solid var(--hairline);
}
.cal-empty {
  margin-top: 14px;
  font-size: .9rem;
  color: var(--ink-60);
}

/* ---------- sections ---------- */
.cal-section { padding-block: clamp(48px, 7vw, 96px); }
.cal-h2 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  margin-bottom: clamp(22px, 3vw, 34px);
}
.cal-section .lede { margin-bottom: clamp(26px, 3.4vw, 40px); }
.cal-none { color: var(--ink-60); }
.cal-none a { color: var(--accent); }

.cal-month { margin-bottom: clamp(34px, 4.4vw, 58px); }
.cal-month:last-child { margin-bottom: 0; }
.cal-month-name {
  font-size: .715rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-weight: 600;
  font-variation-settings: "wdth" 108;
  color: var(--ink-60);
  padding-bottom: 12px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--hairline);
}

/* ---------- event cards ---------- */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

/* glass card: a lit edge and a faint lift off the navy, no hard box */
.ev {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(158deg, rgba(150,195,255,.09), rgba(150,195,255,.03) 55%, rgba(150,195,255,0));
  border: 1px solid var(--hairline);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.ev:hover {
  border-color: var(--silver-2);
  background: linear-gradient(158deg, rgba(150,195,255,.14), rgba(150,195,255,.05) 55%, rgba(150,195,255,0));
  transform: translateY(-2px);
}
.ev-date {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  font-variation-settings: "wdth" 106;
  color: var(--accent);
  margin-bottom: 12px;
}
.ev-name {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.16;
  font-weight: 600;
  font-variation-settings: "wdth" 96;
  letter-spacing: -.022em;
  margin-bottom: 8px;
  text-wrap: balance;
}
.ev-place { font-size: .88rem; color: var(--ink-60); margin-bottom: 10px; }
.ev-tags {
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-weight: 600;
  color: var(--ink-40);
  margin-bottom: 14px;
}
.ev-desc { font-size: .92rem; line-height: 1.55; color: var(--ink-80); margin-bottom: 14px; }
.ev-why {
  font-size: .88rem; line-height: 1.55; color: var(--ink-60);
  padding-left: 14px; border-left: 2px solid var(--accent);
  margin-bottom: 18px;
}
.ev-why span {
  display: block;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .17em;
  font-weight: 600; color: var(--ink); margin-bottom: 4px;
}
.ev-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.ev-status {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; padding: 4px 8px;
  border: 1px solid currentColor;
}
.ev-status--confirmed { color: #6BE3A8; }
.ev-status--expected  { color: #7FC0FF; }
.ev-status--tba       { color: var(--ink-40); }
.ev-status--delayed   { color: #FFC46B; }
.ev-status--passed    { color: var(--ink-40); }
.ev-link {
  font-size: .655rem; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 600; color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
a.ev-link:hover { border-bottom-color: var(--accent); }
.ev-link--none { color: var(--ink-40); }

.ev.is-passed { opacity: .55; }
.ev.is-passed .ev-date { color: var(--ink-40); }
.ev[hidden] { display: none !important; }

.ev--tba .ev-date, .ev--launch .ev-date { color: var(--ink-40); }
.ev-grid--tight .ev { padding: clamp(16px, 2vw, 22px); }

/* ---------- email capture ---------- */
.cal-capture { padding-block: clamp(56px, 8vw, 110px); }
.cal-capture .cal-h2 { max-width: 18ch; }
.cal-capture .lede { margin-bottom: clamp(24px, 3vw, 34px); }

/* ---------- past events ---------- */
.cal-past { border-top: 1px solid var(--hairline); padding-top: 22px; }
.cal-past > summary {
  display: flex; align-items: baseline; gap: 14px;
  cursor: pointer; list-style: none;
  padding-bottom: 18px;
}
.cal-past > summary::-webkit-details-marker { display: none; }
.cal-past-title {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 600;
  font-variation-settings: "wdth" 96;
  letter-spacing: -.02em;
}
.cal-past-count {
  font-size: .655rem; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 600; color: var(--ink-60);
}
.cal-past > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.2rem; line-height: 1; color: var(--accent);
}
.cal-past[open] > summary::after { content: "–"; }

@media (max-width: 720px) {
  .cal-filters { position: static; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .chip-row::-webkit-scrollbar { display: none; }
  .ev-grid { grid-template-columns: 1fr; }
  .cal-actions .btn { width: 100%; }
}

/* ---------- subscribe by feed ----------
   Two ways to keep up sit in one section, so they need to read as a choice
   rather than as one long form. The feed comes first: it is the one that
   keeps working without any further action from the reader. */
.cal-subscribe {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}
.cal-subscribe-note {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--on-dark-70);
}
.cal-or {
  margin: clamp(30px, 4vw, 44px) 0 14px;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--on-dark-line);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-weight: 600;
  color: var(--on-dark-45);
}

/* ---------- hero art ----------
   Three columns on wide screens: copy, robot, month grid. The image is the
   first thing to go as the viewport narrows, because the copy and the grid
   both do work the picture does not. */
.cal-hero-art { margin: 0; }
.cal-hero-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (min-width: 960px) and (max-width: 1179px) {
  .cal-hero-art { display: none; }
}
@media (min-width: 1180px) {
  .cal-hero-inner {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(340px, 380px);
    gap: clamp(28px, 3vw, 44px);
  }
  .cal-hero-art { align-self: stretch; max-height: 460px; }
}
@media (max-width: 959px) {
  /* Below the fold on a phone the picture is scenery, and the reader came
     for dates. It stays, but after the buttons and before the grid. */
  .cal-hero-art { order: 2; }
  .cal-widget { order: 3; }
}

/* ---------- On the horizon ---------- */
.ev-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.ev-cover a {
  display: grid;
  gap: 14px;
  height: 100%;
  align-content: start;
  text-decoration: none;
  color: inherit;
}
.ev-cover-plate {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  aspect-ratio: 12 / 5;          /* the 2.4:1 the covers are drawn at */
  background: var(--silver-1);
}
.ev-cover-plate img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ev-cover a:hover .ev-cover-plate img { transform: scale(1.035); }
.ev-cover a:hover .ev-cover-plate { border-color: var(--silver-2); }
.ev-cover-body { display: grid; gap: 5px; }
.ev-cover-cat {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--ink-60);
}
.ev-cover-name {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.16;
  font-weight: 600;
  font-variation-settings: "wdth" 96;
  letter-spacing: -.022em;
}
.ev-cover a:hover .ev-cover-name { color: var(--accent-soft); }
.ev-cover-where { font-size: .88rem; color: var(--ink-60); }
.ev-cover-when {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 600;
  color: var(--accent);
}
/* Says what the pictures are, once, under the grid. They carry no lettering,
   but a reader should not have to work out that they are drawn. */
.ev-cover-note {
  margin-top: clamp(18px, 2.4vw, 26px);
  font-size: .78rem;
  color: var(--ink-40);
}
.ev-cover.is-passed { display: none; }

/* ---------- the subscribe band's artwork ----------
   The picture is a robot hand on the left with open navy on the right, drawn
   to the same blue as the page, so it is laid in behind the band rather than
   framed beside it. The copy keeps the right half, where the image is empty
   anyway, and a gradient carries one into the other. */
.cal-capture--art { position: relative; overflow: hidden; }
.cal-capture-art {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}
.cal-capture-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left center;
}
.cal-capture-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(10, 20, 48, .35) 0%,
    rgba(10, 20, 48, .70) 34%,
    rgba(10, 20, 48, .92) 52%,
    var(--paper-2) 72%);
}
@media (min-width: 900px) {
  .cal-capture--art .shell { max-width: calc(var(--shell)); }
  .cal-capture--art .shell > * { max-width: 620px; margin-left: auto; }
}
@media (max-width: 899px) {
  /* On a phone the hand would sit behind the form and fight the text for
     contrast, so the band goes back to a plain ground. */
  .cal-capture-art { display: none; }
}