/* The homepage (src/pages/index.astro; GAMEPLAN-STRUCTURE.md 4.2). Nine
   blocks, top to bottom: This week, the lead and Latest, Live music, the
   season band, Find your way, This weekend, the City Hall desk with Look it
   up, the list, and the footer (the shell's). The photograph components (.photo-box,
   .photo-credit, .btn-photo, .render-tag, .thumb) are monocle.css's. */

.hp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.hp-head h2 { font: 700 24px/1.2 var(--serif); letter-spacing: -.01em; }
.hp-block { padding-top: 44px; }
.hp-rule { border-top: 1px solid var(--gallery-border); margin-top: 20px; }
a.hp-title { color: var(--press-black); text-decoration: none; }
a.hp-title:hover,
a:hover .hp-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--blue-slate);
}
.hp-media { position: relative; display: block; }

/* 1. This week: four cells, each over its own photograph */
.hp-week { padding-top: 20px; }
.hp-week-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.hp-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 150px;
  padding: 16px 18px;
  border-radius: var(--radius-cards);
  text-decoration: none;
  font: inherit;
  text-align: left;
  border: 0;
  cursor: pointer;
}
.hp-cell::before { background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.82) 100%); }
.hp-cell:has(.render-tag) { padding-top: 38px; }
.hp-cell-value { font: 700 20px/1.2 var(--serif); }
.hp-cell-sub { font: 400 13px/1.4 var(--sans); color: var(--text-inverse-soft); }
.hp-cell:hover .hp-cell-value { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hp-cell:focus-visible { outline: 2px solid var(--blue-slate); outline-offset: 2px; }

/* 2. The lead (full size) and Latest (thumbnails) */
.hp-top {
  display: grid;
  grid-template-columns: minmax(0, 7.2fr) minmax(0, 4.8fr);
  padding-top: 32px;
}
.hp-lead { padding-right: 36px; border-right: 1px solid var(--gallery-border); }
.hp-lead h1 { font: 700 40px/1.125 var(--serif); letter-spacing: -.01em; margin-top: 8px; text-wrap: balance; }
.hp-lead .dek { margin-top: 12px; font-size: 18px; }
.hp-lead .btn-primary { margin-top: 20px; }
.hp-lead .hp-media { margin-top: 24px; }
.hp-lead .hp-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-cards);
}
.hp-latest { padding-left: 32px; }
.hp-latest-list { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--gallery-border); }
.hp-latest-list li > * {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  column-gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gallery-border);
  text-decoration: none;
  color: var(--press-black);
}
.hp-latest-list .hp-title { display: block; font: 700 18px/1.25 var(--serif); margin-top: 4px; }
.hp-latest .text-link { display: inline-block; margin-top: 16px; }

/* 3. Live music: the search and the tracker's doors over a photograph,
   beside the shows for tonight, tomorrow and the weekend */
.hp-music {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 32px;
  align-items: start;
}
.hp-music-head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  padding: 28px;
  border-radius: var(--radius-cards);
}
.hp-music-head::before { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.86) 100%); }
.hp-music-head h2 { font: 700 40px/1.1 var(--serif); letter-spacing: -.01em; margin-top: 6px; }
.hp-music-dek { font: 400 16px/1.5 var(--serif); color: var(--text-inverse-soft); margin-top: 10px; }
.hp-music-search { display: flex; gap: 8px; margin-top: 18px; }
.hp-music-search input {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 15px var(--sans);
  color: var(--press-black);
  background: var(--editorial-white);
  border: 0;
  border-radius: var(--radius-buttons);
  padding: 12px 18px;
}
.hp-music-search input:focus-visible,
.hp-music-search button:focus-visible { outline: 2px solid var(--editorial-white); outline-offset: 2px; }
.hp-music-search button { border: 0; cursor: pointer; }
.hp-music-links { list-style: none; margin: 18px 0 0; padding: 0; }
.hp-music-links li { border-top: 1px solid var(--rule-inverse); }
.hp-music-links a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  font: 700 14px/1.35 var(--sans);
  color: var(--editorial-white);
  text-decoration: none;
}
.hp-music-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-music-head .photo-credit { margin-top: 12px; }
.hp-music-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-music-tabs[hidden] { display: none; }
.hp-music-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--gallery-border); }
.hp-music-tabs[hidden] + .hp-music-list { margin-top: 0; }
.hp-music-list li:not(.hp-weekend-empty) {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 4px 18px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gallery-border);
}
/* A show with no artwork and a room with no photograph run without one. */
.hp-music-list li > .hp-music-body:first-child { grid-column: 1 / 3; }
.hp-music-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp-music-body .hp-what { font-size: 19px; overflow-wrap: anywhere; }
.hp-music-where { font: 400 13px/1.4 var(--sans); color: var(--dispatch-grey); }
.hp-music-where a { color: inherit; }
.hp-music-list .chip-outline { margin-top: 0; white-space: nowrap; }
.hp-music-shows > .text-link { display: inline-block; margin-top: 14px; }

/* 4. The season band: a full-bleed photograph, the words over its darker side */
.hp-season { margin-top: 48px; }
.hp-season[hidden] { display: none; }
.hp-season::before { background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.52) 45%, rgba(0,0,0,.06) 85%); }
.hp-season-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  padding-top: 48px;
  padding-bottom: 40px;
}
.hp-season-copy { max-width: 580px; }
.hp-season h2 { font: 700 40px/1.1 var(--serif); letter-spacing: -.01em; margin-top: 8px; text-wrap: balance; }
.hp-season .dek { color: var(--text-inverse-soft); margin-top: 12px; font-size: 18px; }
.hp-season .btn-photo { margin-top: 22px; }
.hp-season .photo-credit { margin-top: 18px; }

/* 5. Find your way: five doors, in masthead order */
.hp-doors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 -20px;
}
.hp-door { padding: 20px 20px 4px; border-left: 1px solid var(--gallery-border); }
.hp-door:first-child { border-left: 0; }
.hp-door h3 { font: 700 22px/1.2 var(--serif); margin-top: 14px; }
.hp-door h3 a { color: var(--press-black); text-decoration: none; }
.hp-door-dek { font: 400 14px/1.45 var(--serif); color: var(--ink-charcoal); margin-top: 6px; }
.hp-door ul { list-style: none; margin: 12px 0 0; padding: 0; }
.hp-door li { border-top: 1px solid var(--gallery-border); }
.hp-door li a,
.hp-door li span {
  display: block;
  padding: 8px 0;
  font: 400 14px/1.35 var(--sans);
  color: var(--press-black);
  text-decoration: none;
}
.hp-door li a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-slate); }
.hp-door li span { color: var(--dispatch-grey); }
.hp-door .text-link { display: inline-block; margin: 10px 0 16px; }
/* A stand-in's credit is the door's last line (DESIGN.md, "Stand-ins from Unsplash"). */
.hp-door .card-credit { margin: -8px 0 16px; }

/* 6. This weekend: a list block, a thumbnail per row */
.hp-weekend-list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--gallery-border); }
.hp-weekend-list li {
  display: grid;
  grid-template-columns: 112px 150px minmax(0, 1fr) minmax(0, 300px);
  gap: 4px 24px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--gallery-border);
}
/* A row whose place has no photograph runs without one, never a grey box. */
.hp-weekend-list li > .hp-when:first-child { grid-column: 2; }
.hp-when { font: 700 11px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.hp-what { font: 700 20px/1.3 var(--serif); }
.hp-where { font: 400 13px/1.4 var(--sans); color: var(--dispatch-grey); text-align: right; }
.hp-where a { color: inherit; }
.hp-weekend-empty { padding: 16px 0; border-bottom: 1px solid var(--gallery-border); font: 400 16px/1.5 var(--serif); }
.hp-weekend-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; }

/* 7. The City Hall desk, under a photographed head, and Look it up */
.hp-desk-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  min-height: 240px;
  padding: 28px 32px;
  border-radius: var(--radius-cards);
}
.hp-desk-head h2 { font: 700 40px/1.1 var(--serif); letter-spacing: -.01em; margin-top: 6px; }
.hp-desk-head .photo-credit { margin-top: 8px; }
.hp-civic {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 32px;
  margin-top: 24px;
}
.hp-desk dl { margin: 0; border-top: 1px solid var(--gallery-border); }
.hp-desk-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gallery-border);
}
.hp-desk dt { font: 700 10px/1.6 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dispatch-grey); }
.hp-desk dd { margin: 0; font: 400 16px/1.45 var(--serif); }
.hp-desk dd ul { list-style: none; margin: 0; padding: 0; }
.hp-lookup { padding: 24px; border-radius: var(--radius-cards); }
.hp-lookup::before { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.8) 100%); }
.hp-lookup h3 { font: 700 24px/1.2 var(--serif); }
.hp-lookup ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}
.hp-lookup li { border-top: 1px solid var(--rule-inverse); }
.hp-lookup li.hp-lookup-all { grid-column: 1 / -1; }
.hp-lookup a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 0;
  font: 700 14px/1.35 var(--sans);
  color: var(--editorial-white);
  text-decoration: none;
}
.hp-lookup a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 8. The list: a photograph behind the band, the form on a cream card */
.hp-list { margin-top: 64px; }
.hp-list::before { background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.72) 100%); }
.hp-list-inner { padding-top: 64px; padding-bottom: 64px; }
.hp-list-card {
  max-width: 620px;
  background: var(--newsprint-cream);
  color: var(--press-black);
  border-radius: var(--radius-cards);
  padding: 32px;
}
.photo-box .hp-list-card .kicker { color: var(--dispatch-grey); }
.photo-box .hp-list-card h2 { color: var(--press-black); font: 700 32px/1.15 var(--serif); letter-spacing: -.01em; margin-top: 8px; }
.hp-list-card .band-dek { font: 400 16px/1.5 var(--serif); color: var(--ink-charcoal); margin-top: 10px; }
.hp-list-card .capture-form { margin-top: 18px; }
.hp-list .photo-credit { margin-top: 12px; }
main:has(> .hp-list:last-child) + footer { margin-top: 0; }

/* The seven days, opened from the forecast cell. */
.hp-wx-dialog {
  border: 0;
  padding: 0;
  border-radius: var(--radius-cards);
  width: min(560px, calc(100vw - 32px));
  box-shadow: var(--shadow-popover);
}
.hp-wx-dialog::backdrop { background: rgba(0,0,0,.45); }
.hp-wx-dialog .wx-card { border: 0; }
.hp-wx-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  font: 700 22px/1 var(--sans);
  cursor: pointer;
  padding: 6px 10px;
}

@media (max-width: 1080px) {
  .hp-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-door:nth-child(3n+1) { border-left: 0; }
  .hp-door:nth-child(n+4) { border-top: 1px solid var(--gallery-border); }
}
@media (max-width: 900px) {
  .hp-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-cell { min-height: 132px; padding: 14px; }
  .hp-cell::before,
  .hp-desk-head::before { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.62) 40%, rgba(0,0,0,.85) 100%); }
  .hp-cell-value { font-size: 18px; }
  .hp-top { grid-template-columns: 1fr; }
  .hp-lead { padding-right: 0; border-right: 0; }
  .hp-lead h1 { font-size: 32px; }
  .hp-latest { padding-left: 0; margin-top: 32px; }
  .hp-music { grid-template-columns: 1fr; }
  .hp-music-head { min-height: 380px; padding: 20px; }
  .hp-music-head::before { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.66) 40%, rgba(0,0,0,.86) 100%); }
  .hp-music-head h2 { font-size: 30px; }
  .hp-music-shows { margin-top: 24px; }
  .hp-season-inner { min-height: 380px; }
  .hp-season::before { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.58) 40%, rgba(0,0,0,.84) 100%); }
  .hp-season h2 { font-size: 30px; }
  .hp-doors { grid-template-columns: 1fr; margin: 0; }
  .hp-door,
  .hp-door:nth-child(n) {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    column-gap: 20px;
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--gallery-border);
  }
  .hp-door:first-child { border-top: 0; }
  .hp-door h3 { margin-top: 0; }
  .hp-door ul { margin-top: 8px; }
  .hp-door li { border-top: 0; }
  .hp-door li a, .hp-door li span { padding: 4px 0; }
  .hp-door .text-link { margin: 8px 0 0; }
  .hp-door .card-credit { margin: 6px 0 0; }
  .hp-weekend-list li { grid-template-columns: 96px minmax(0, 1fr); align-items: start; column-gap: 16px; }
  .hp-weekend-list li > :not(.thumb) { grid-column: 2; }
  .hp-weekend-list .thumb { grid-row: span 3; }
  .hp-where { text-align: left; }
  .hp-desk-head { min-height: 200px; padding: 20px; }
  .hp-desk-head h2 { font-size: 30px; }
  .hp-civic { grid-template-columns: 1fr; }
  .hp-lookup { margin-top: 32px; }
  .hp-list-inner { padding-top: 40px; padding-bottom: 40px; }
}
@media (max-width: 480px) {
  .hp-latest-list li > * { grid-template-columns: 104px minmax(0, 1fr); }
  .hp-door .render-tag { top: 4px; right: 4px; font-size: 8px; padding: 3px 5px; }
  .hp-door,
  .hp-door:nth-child(n) { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; }
  .hp-door-dek { display: none; }
  .hp-desk-row { grid-template-columns: 1fr; gap: 4px; }
  .hp-desk-head { flex-direction: column; align-items: flex-start; }
  .hp-lookup ul { grid-template-columns: 1fr; }
  .hp-music-tabs { gap: 6px; }
  .hp-music-tabs .filter-chip { padding: 7px 10px; }
  .hp-music-search { flex-wrap: wrap; }
  .hp-music-search .btn-photo { flex: 1 1 100%; }
  .hp-music-list li:not(.hp-weekend-empty) { grid-template-columns: 80px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .hp-music-list li > .hp-music-body:first-child { grid-column: 1 / -1; }
  .hp-music-list .thumb { grid-row: span 2; align-self: start; }
  .hp-music-list .chip-outline { grid-column: 2; justify-self: start; }
  .hp-music-list li > .hp-music-body:first-child + .chip-outline { grid-column: 1; }
  .hp-head { flex-direction: column; gap: 6px; }
  .hp-list-card { padding: 22px; }
  .photo-box .hp-list-card h2 { font-size: 26px; }
}

/* ---------- The phone homepage, shorter (NAVIGATION-AUDIT.md 3.9) ----------
   Under 640px the live music list stops at four rows (the link under it has
   the rest) and each door is its name, its line and "All of": the sub-links
   are already in the menu and the footer, so the doors stop being a third
   copy of them. */
@media (max-width: 640px) {
  .hp-music-list li:not(.hp-weekend-empty):nth-child(n+5) { display: none; }
  .hp-door ul { display: none; }
  .hp-door .text-link { margin-top: 10px; }
}

/* ---------- The first-screen email field (NAVIGATION-AUDIT.md 3.8) ----------
   .hp-capture is the third child of .hp-top: on a desktop it heads the
   Latest column, in the first screen; under 900px the grid puts it above
   the lead, as one row, with the lead and the list after it. */
.hp-top {
  grid-template-areas: "lead capture" "lead latest";
  grid-template-rows: auto 1fr;
}
.hp-lead { grid-area: lead; }
.hp-latest { grid-area: latest; }
.hp-capture { grid-area: capture; padding-left: 32px; padding-bottom: 22px; }
.hp-capture .capture-form { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.hp-capture label.kicker { display: block; }
.hp-capture-row { display: flex; gap: 8px; }
.hp-capture-row input[type="email"] { flex: 1 1 auto; min-width: 0; }
.hp-capture-row button { flex: none; white-space: nowrap; }
.hp-capture .capture-fine { margin-top: 8px; }
.hp-capture .capture-fine a { color: inherit; }
.hp-capture.submitted .capture-form,
.hp-capture.submitted .capture-fine { display: none; }
.hp-capture.submitted .capture-thanks { display: block; margin-top: 10px; }
.hp-capture + .hp-latest { padding-top: 22px; border-top: 1px solid var(--gallery-border); }
@media (max-width: 900px) {
  .hp-top { grid-template-areas: "capture" "lead" "latest"; grid-template-rows: auto; }
  .hp-capture { padding-left: 0; padding-bottom: 20px; border-bottom: 1px solid var(--gallery-border); }
  .hp-lead { padding-top: 24px; }
  .hp-capture + .hp-latest { border-top: 0; padding-top: 0; }
}
@media (max-width: 480px) {
  .hp-capture-row { flex-direction: column; }
  .hp-capture-row button { width: 100%; }
}