/*
 * The home page (index.html). Palette and fonts come from css/app.css, the
 * page parts (header, sections, cards, steps, notes, footer) from css/ui.css.
 * This file adds the event search, the event cards that
 * js/home-latest-events.js renders, the Friendscamp block and the link list.
 */

/* ---------- header and search ---------- */
.home-find { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.home-search { display: flex; gap: 8px; flex: 1 1 300px; max-width: 560px; }
.home-search input {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--panel-2); color: var(--ink);
  font: inherit; font-size: 16px;
}
.home-search input::placeholder { color: var(--muted); opacity: 1; }
.home-search .button { min-height: 46px; flex: none; }

/* ---------- event cards ---------- */
.section-title + .home-events { margin-top: 12px; }
.home-events { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.home-events:empty { display: none; }
.home-event { gap: 0; padding: 0; overflow: hidden; min-width: 0; overflow-wrap: anywhere; }
/* 1px in from the edge, so the card's ring stays visible around the artwork. */
.home-event-media {
  position: relative; display: block; overflow: hidden;
  margin: 1px 1px 0; aspect-ratio: 1200 / 630; border-radius: 13px 13px 0 0;
  background: var(--chip); color: var(--muted); text-decoration: none;
}
.home-event-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-event-fallback {
  position: absolute; inset: 0; display: none; place-items: center; padding: 16px;
  font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05;
  text-align: center; text-transform: uppercase; overflow: hidden;
}
.home-event-media.is-fallback .home-event-image { display: none; }
.home-event-media.is-fallback .home-event-fallback { display: grid; }
.home-event-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 0; min-width: 0; }
.home-event-body h3 { margin-top: 2px; }
.home-event .home-event-meta span + span::before { content: " \00B7  "; }
.home-event .home-event-note { font-size: 12px; }
.home-event-actions { margin-top: auto; padding: 12px 14px 14px; }
/* Long ticket labels wrap inside their button instead of running out of it. */
.home-event-actions .button { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: 6px; }
.home-event-actions [aria-disabled="true"] { opacity: .55; cursor: default; }
.home-empty { padding: 16px 18px; font-size: 13.5px; }
.home-more { margin-top: 14px; }

/* Phones: a smaller picture beside the text keeps six events from becoming a very long scroll. */
@media (max-width: 559px) {
  .home-event { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; padding: 12px; }
  .home-event-media { margin: 0; aspect-ratio: 1; border-radius: 10px; align-self: start; }
  .home-event-fallback { padding: 6px; font-size: 13px; }
  .home-event-body { padding: 0; }
  .home-event-actions { grid-column: 1 / -1; padding: 12px 0 0; }
}

/* ---------- Friendscamp ---------- */
.process-panel { margin-top: 34px; }
.home-split { display: grid; gap: 16px; align-items: start; }
.home-split .group { margin-bottom: 0; }
@media (min-width: 860px) {
  .home-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; }
}

/* ---------- how it works: three steps in one row, or one under the other ---------- */
.home-steps { grid-template-columns: minmax(0, 1fr); }
.section-title + .home-steps { margin-top: 12px; }
@media (min-width: 900px) {
  .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- featured planners ---------- */
#seo-event-links .page-h { margin-top: 0; }
.home-links {
  margin: 0; padding: 0; list-style: none;
  columns: 3 240px; column-gap: 24px;
  font-size: 13.5px; line-height: 1.4;
}
.home-links li { break-inside: avoid; padding: 4px 0; }
.home-links a { color: var(--accent); font-weight: 600; text-decoration: none; }
.home-links a:hover { text-decoration: underline; }