/**
 * Home page layout. Colors, fonts and card basics come from the theme's
 * frontpage.css (.mia-front variables, .card, .cg, .cbody, .cat, .ctitle);
 * show-card details (dates, place, flyers) from miasma_eventdb/eventdb.
 */

/* Featured show on the left, a column of shows on the right. */
.mia-home .home-lead { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1.1rem; margin-bottom:1.6rem; }
.mia-home .home-lead--solo { grid-template-columns:1fr; }
.mia-home .home-hero, .mia-home .home-side > * { display:flex; }
.mia-home .home-side { display:flex; flex-direction:column; gap:1.1rem; }

/* The hero's picture grows to fill whatever height the side column sets. */
.mia-home .ev-hero .cg { aspect-ratio:auto; flex:1 1 auto; min-height:18rem; }
.mia-home .ev-hero .cbody { padding:1.2rem 1.35rem 1.4rem; gap:.5rem; }
.mia-home .ev-hero .ctitle { font-size:clamp(1.6rem, 3vw, 2.2rem); }

/* Side cards: small stacked cards (picture on top). */
.mia-home .ev-side { flex:0 0 auto; }
.mia-home .ev-side .cg { flex:none; aspect-ratio:16/9; }
.mia-home .ev-side .cbody { padding:.75rem .9rem; gap:.3rem; }
.mia-home .ev-side .ctitle { font-size:1.02rem; }

/* Two callouts. */
.mia-home .home-callouts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; margin-bottom:2.2rem; }
.mia-home .callout { position:relative; background:var(--panel); border:1px solid var(--hair); border-left:3px solid var(--acc);
  border-radius:4px; padding:1.1rem 1.25rem; color:var(--soft); }
.mia-home .callout h2, .mia-home .callout h3 { font-family:var(--disp); font-weight:700; font-size:1.25rem; color:var(--ink); margin:0 0 .4rem; }
.mia-home .callout p:last-child { margin-bottom:0; }
.mia-home .callout a { color:var(--acc-ink); }
.mia-home .callout-edit { position:absolute; top:.5rem; right:.7rem; font-family:var(--mono); font-size:.65rem;
  letter-spacing:.1em; text-transform:uppercase; }

/* City picker: busiest cities as chips, the rest under "More cities". */
.mia-home .home-cities { display:flex; align-items:baseline; gap:.4rem 1rem; flex-wrap:wrap; margin:0 0 1.6rem; }
.mia-home .home-cities-label { font-family:var(--mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); }
.mia-home .home-cities ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.mia-home .home-cities a, .mia-home .home-cities summary { display:inline-flex; align-items:baseline; gap:.4rem;
  padding:.32rem .75rem; border:1px solid var(--hair); border-radius:999px; background:var(--panel);
  font-size:.9rem; color:var(--ink); text-decoration:none; cursor:pointer; white-space:nowrap; }
.mia-home .home-cities a span { font-family:var(--mono); font-size:.68rem; color:var(--mut); }
.mia-home .home-cities a:hover, .mia-home .home-cities summary:hover { border-color:var(--acc); }
.mia-home .home-cities a[aria-current] { background:var(--acc); border-color:var(--acc); color:#fff; }
.mia-home .home-cities a[aria-current] span { color:rgba(255,255,255,.8); }
.mia-home .home-cities-more { position:relative; }
/* The base theme borders every <details>; this one is just a menu. */
.mia-home .home-cities-more details { border:0; margin:0; padding:0; background:none; }
.mia-home .home-cities-more details > summary { padding:.32rem .75rem; }
.mia-home .home-cities-more summary { list-style:none; color:var(--soft); }
.mia-home .home-cities-more summary::-webkit-details-marker { display:none; }
.mia-home .home-cities-more summary::after { content:"▾"; font-size:.7rem; }
.mia-home .home-cities-more[open] ul { position:absolute; z-index:5; top:calc(100% + .4rem); left:0; width:max-content; max-width:min(36rem, 90vw);
  padding:.7rem; background:var(--paper); border:1px solid var(--hair); border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.25); }

.mia-home .home-city { font-family:var(--disp); font-weight:700; font-size:clamp(2rem, 4vw, 2.8rem);
  letter-spacing:-.015em; margin:0 0 1.2rem; color:var(--ink); }

/* Section heading counts and the "pick a city" note. */
.mia-home .home-more { margin-bottom:2.2rem; }
.mia-home .home-h-count { margin-left:.4rem; color:var(--acc-ink); }
.mia-home .home-more-note { margin:.8rem 0 0; font-family:var(--mono); font-size:.72rem; color:var(--mut); }

/* More shows. */
.mia-home .home-h { font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mut); margin:0 0 .9rem; padding-bottom:.5rem; border-bottom:1px solid var(--hair); font-weight:400; }
.mia-home .home-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.mia-home .home-grid > * { display:flex; }
.mia-home .home-empty { font-family:var(--disp); font-style:italic; color:var(--soft); }

@media (max-width:820px) {
  .mia-home .home-lead { grid-template-columns:1fr; }
  .mia-home .home-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .mia-home .home-callouts, .mia-home .home-grid { grid-template-columns:1fr; }
}