/*
  Community: the hub, the calendar and an event's own page.
  Page rules only. The windows, the party frames, the tablets and the lit cells are the Hall's
  (hall.css and gump.css).
*/

/* ------------------------------------------------------------------ layout */

.square { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 1fr); gap: 2rem; align-items: start; padding-top: 2.2rem; padding-bottom: 1rem; }
.square-main, .square-side { min-width: 0; }
.square-wide { padding-top: 2.2rem; padding-bottom: 1rem; }
.event-wrap { padding-top: 1.6rem; padding-bottom: 1rem; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; align-items: start; }

/* ------------------------------------------------------------------ an event */

.event-name { margin: 0 0 .9rem; line-height: 1; }
.event-name a { text-decoration: none; }
.event-title { margin: 0 0 1.1rem; }
.blurb { margin: .9rem 0 0; font: 400 .9375rem/1.65 var(--read); color: var(--ink-dim); }
.event-text { margin-top: 1.2rem; max-width: 46rem; }
.event-text p { margin: 0 0 1em; font: 400 1rem/1.75 var(--read); color: var(--ink); overflow-wrap: break-word; }
.agenda-past .row-title { color: var(--ink-dim); }
.agenda .when { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ people */

.party-tight .member { grid-template-columns: auto minmax(0, 1fr) auto; }
.state-on { display: inline-flex; align-items: center; gap: .4rem; font: 400 16px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--tube); }

/* ------------------------------------------------------------------ the activity bars */

.census { margin: 0; }
.census-bars { display: block; width: 100%; height: auto; max-height: 12rem; }
.bars { shape-rendering: crispEdges; }
.bars .bar { fill: var(--heat-3); }
.bars .peak { fill: var(--heat-4); }
.bars .none { fill: #2a241b; }
.census-axis { display: flex; justify-content: space-between; margin-top: .4rem; font: 400 16px/1.2 var(--pixel); color: var(--ink-faint); }
.census figcaption { margin-top: .6rem; font: 400 16px/1.4 var(--pixel); color: var(--ink-dim); }
.census figcaption b { font-weight: 400; color: var(--heat-4); }

/* ------------------------------------------------------------------ the month */

.cal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; margin: 0 0 1rem; }
.cal-step { display: flex; flex-wrap: wrap; gap: .5rem; }
.feed-link { display: inline-block; padding-block: .25rem; font: 400 16px/1.4 var(--pixel); }
.cal { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; }
.cal th { padding: .4rem .5rem; font: 400 16px/1.2 var(--pixel); letter-spacing: .06em; text-align: left; text-transform: uppercase; color: var(--brass); text-shadow: 2px 2px 0 #000; background: linear-gradient(var(--plate-a) 0 50%, var(--plate-b) 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo); }
.cal th small { display: block; font: 400 .75rem/1.3 var(--read); letter-spacing: .02em; color: var(--ink-dim); text-shadow: none; text-transform: none; }
.cal td { position: relative; height: 5.6rem; padding: .35rem .4rem .45rem; vertical-align: top; background: #0b0a09; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi); }
.cal-day.is-out { background: #0f0e0d; }
.cal-day.is-out .cal-n { color: #85806f; }
.cal-n { font: 400 16px/1 var(--pixel); color: var(--ink-dim); }
.cal-m { margin-left: .4rem; color: var(--ink-faint); }
.cal-day.is-today { background: #1f140a; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-3), inset -2px -2px 0 2px var(--heat-1); }
.cal-day.is-today .cal-n { color: var(--heat-4); }
.cal-day.is-today::after { content: "TODAY"; position: absolute; right: .5rem; top: .4rem; font: 400 16px/1 var(--pixel); letter-spacing: .08em; color: var(--heat-2); }
.cal-ev { display: block; margin-top: .3rem; padding: .15rem .45rem .2rem; font: 400 16px/1.25 var(--pixel); color: var(--heat-ink); text-decoration: none; background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-5), inset -2px -2px 0 2px #b0561a; overflow-wrap: anywhere; }
.cal-ev:hover { background: linear-gradient(var(--heat-5) 0 50%, var(--heat-4) 50% 100%); color: var(--heat-ink); }
.cal-ev.is-past { color: var(--ink-dim); background: linear-gradient(#35302a 0 50%, #2b2722 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #6c624f, inset -2px -2px 0 2px #1a1713; }
.cal-ev time { display: block; opacity: .8; }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 1000px) {
  .square { grid-template-columns: minmax(0, 1fr); }
  .duo { grid-template-columns: minmax(0, 1fr); }
  /* One column: the two stacks are dissolved so the windows can be put in the order a person
     wants them: the next event, who is here, then the rest. */
  .square-main, .square-side { display: contents; }
  .g-next { order: 1; }
  .g-online { order: 2; }
  .g-soon { order: 3; }
  .g-mentors { order: 4; }
  .g-seal { order: 5; }
  .g-kudos { order: 6; }
  .g-news { order: 7; }
  .g-census { order: 8; }
}
.cal-w { display: none; }
.cal-empty { margin-top: 1rem; }

@media (max-width: 760px) {
  .cal td { height: 4.2rem; padding: .25rem .25rem .3rem; }
  .cal th small { display: none; }
  .cal th { padding: .35rem .3rem; letter-spacing: 0; }
  .cal-ev { padding: .05rem .25rem .1rem; }
  .cal-ev time { display: none; }
  .cal-day.is-today::after { content: none; }
}

@media (max-width: 640px) {
  /* A month of seven narrow columns cannot hold an event's name, so on a phone it is a list of the
     days that have something on, and today. */
  .cal, .cal tbody, .cal tr, .cal td { display: block; width: auto; }
  .cal thead, .cal caption { display: none; }
  .cal { border-spacing: 0; }
  .cal td { height: auto; margin-bottom: .5rem; padding: .7rem .9rem .8rem; }
  .cal td:not(.has-events):not(.is-today) { display: none; }
  .cal-n { display: inline; font-size: 32px; color: var(--heat-4); }
  .cal-w { display: inline-block; margin-left: .7rem; font: 400 16px/1 var(--pixel); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
  .cal-m { margin-left: .6rem; }
  .cal-ev { padding: .35rem .6rem; }
  .cal-ev time { display: inline; margin-right: .6rem; }
  .cal-day.is-today::after { content: "TODAY"; position: static; display: inline-block; margin-left: .7rem; vertical-align: middle; }
}