/*
 * Homepage "Events" ("What's next"), index.php. Every class is hm-* and scoped under .hm-home; tokens (--hm-navy, --hm-gold,
 * --hm-ease ...) and the shared head / button classes come from css/home.css. The plain grid of recent events (no event ahead)
 * is still styled by home.css; this file is the "next" layout: a navy ticket for the soonest event with its live countdown, and a
 * side column listing the other upcoming events and the ones hosted lately.
 * Motion is transform / opacity only and is off for prefers-reduced-motion.
 */

.hm-home .hm-next {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  align-items: stretch;
}
.hm-home .hm-next--solo { grid-template-columns: minmax(0, 1fr); }

/* ---- the lead: a ticket, poster on the left, details on the right, notches where it tears ---- */

.hm-home .hm-ticket {
  --ticket-media: 40%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--ticket-media)) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(28rem 16rem at 100% 0, rgba(201, 164, 107, 0.22), transparent 70%),
    linear-gradient(160deg, #0f2f58 0%, #081f3d 100%);
  color: #fff;
  text-align: left;
  box-shadow: 0 2px 4px rgba(10, 35, 66, 0.12), 0 30px 50px -28px rgba(10, 35, 66, 0.6);
}
.hm-home .hm-next--solo .hm-ticket { --ticket-media: 34%; }
.hm-home .hm-ticket::before,
.hm-home .hm-ticket::after {            /* the two notches of the tear line */
  content: "";
  position: absolute;
  left: var(--ticket-media);
  z-index: 2;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--hm-cream);
  transform: translateX(-50%);
  pointer-events: none;
}
.hm-home .hm-ticket::before { top: -0.8rem; }
.hm-home .hm-ticket::after { bottom: -0.8rem; }

.hm-home .hm-ticket__media {
  position: relative;
  display: block;
  min-height: 19rem;
  background: #12345f;
}
.hm-home .hm-ticket__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--hm-ease);
}
@media (hover: hover) {
  .hm-home .hm-ticket:hover .hm-ticket__media img { transform: scale(1.04); }
}
.hm-home .hm-ticket__media::after {     /* the tear line */
  content: "";
  position: absolute;
  top: 0.9rem;
  right: 0;
  bottom: 0.9rem;
  border-right: 2px dashed rgba(236, 217, 176, 0.65);
}

.hm-home .hm-ticket__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  min-width: 0;
}

.hm-home .hm-ticket__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font: 700 0.76rem / 1 var(--hm-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hm-gold-soft);
}
.hm-home .hm-ticket__pulse {
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--hm-gold);
}
.hm-home .hm-ticket__pulse::after {     /* rings out three times, then rests (WCAG 2.2.2) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--hm-gold);
  animation: hm-ticket-ping 1.8s var(--hm-ease) 3;
}
@keyframes hm-ticket-ping {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(3.2); opacity: 0; }
}

.hm-home .hm-ticket__head { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.hm-home .hm-ticket__date {
  flex: none;
  min-width: 3.6rem;
  padding: 0.6rem 0.7rem 0.65rem;
  border-radius: 14px;
  background: #fff;
  color: var(--hm-navy);
  text-align: center;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(2, 10, 24, 0.35);
}
.hm-home .hm-ticket__date .day { display: block; font: 700 1.9rem / 1 var(--hm-serif); font-variant-numeric: lining-nums; }
.hm-home .hm-ticket__date .month { display: block; margin-top: 0.3rem; font: 700 0.7rem / 1 var(--hm-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hm-gold-ink); }
.hm-home .hm-ticket__title {
  margin: 0;
  font: 700 clamp(1.35rem, 1.05rem + 0.9vw, 1.85rem) / 1.18 var(--hm-serif);
  color: #fff;
  overflow-wrap: anywhere;
}
.hm-home .hm-ticket__title a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(var(--hm-gold), var(--hm-gold)) 0 100% / 0 2px no-repeat;
  transition: background-size 0.35s var(--hm-ease);
}
.hm-home .hm-ticket__title a:hover,
.hm-home .hm-ticket__title a:focus-visible { background-size: 100% 2px; color: #fff; }
.hm-home .hm-ticket a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.hm-home .hm-ticket__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  font-size: 0.95rem;
  color: #dbe5ef;
}
.hm-home .hm-ticket__meta i { margin-right: 0.5rem; color: var(--hm-gold-soft); }
.hm-home .hm-ticket__excerpt { margin: 0; max-width: 46ch; font-size: 0.98rem; line-height: 1.6; color: #c3d0dc; }

.hm-home .hm-ticket .event-countdown {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  width: 100%;
  max-width: 24rem;
  margin-top: 0.15rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1rem;
}
.hm-home .hm-ticket .countdown-part {
  padding: 0.7rem 0.25rem 0.6rem;
  border: 1px solid rgba(236, 217, 176, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f6ecd2;
}
.hm-home .hm-ticket .countdown-part span {
  display: block;
  margin-bottom: 0.35rem;
  font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.9rem) / 1 var(--hm-serif);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums lining-nums;
  color: #fff;
  opacity: 1;
}
.hm-home .hm-ticket .event-countdown.is-over { opacity: 0.55; }

.hm-home .hm-ticket__cta { margin-top: 0.4rem; }

/* ---- the side column: "Also coming up" / "Recently hosted" ---- */

.hm-home .hm-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--hm-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 35, 66, 0.05), 0 18px 36px -26px rgba(10, 35, 66, 0.35);
  text-align: left;
}
.hm-home .hm-side__h {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.35rem;
  font: 700 0.76rem / 1 var(--hm-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hm-gold-ink);
}
.hm-home .hm-side__h::after { content: ""; flex: 1; height: 1px; background: var(--hm-line); }
.hm-home .hm-side__h:not(:first-child) { margin-top: 1.25rem; }
.hm-home .hm-rows { margin: 0; padding: 0; list-style: none; }
.hm-home .hm-rows li + li { border-top: 1px solid var(--hm-line); }

.hm-home a.hm-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.25rem;
  color: var(--hm-navy);
  text-decoration: none;
  transition: transform 0.3s var(--hm-ease);
}
.hm-home .hm-row__date {
  flex: none;
  width: 3.1rem;
  padding: 0.45rem 0 0.5rem;
  border-radius: 10px;
  background: var(--hm-navy);
  color: #fff;
  text-align: center;
  line-height: 1;
}
.hm-home .hm-row__date b { display: block; font: 700 1.15rem / 1 var(--hm-serif); font-variant-numeric: lining-nums; }
.hm-home .hm-row__date i { display: block; margin-top: 0.22rem; font: 700 0.6rem / 1 var(--hm-sans); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hm-gold-soft); }
.hm-home .hm-row__text { display: grid; gap: 0.25rem; min-width: 0; flex: 1; }
.hm-home .hm-row__text strong { font: 700 1.02rem / 1.25 var(--hm-serif); overflow-wrap: anywhere; }
.hm-home .hm-row__text span { font-size: 0.84rem; line-height: 1.35; color: var(--hm-muted); }
.hm-home .hm-row__text em { font-style: normal; font-weight: 700; color: var(--hm-gold-ink); }
.hm-home .hm-row__go { flex: none; font-size: 0.8rem; color: var(--hm-gold-ink); transition: transform 0.25s var(--hm-ease); }
@media (hover: hover) {
  .hm-home a.hm-row:hover { transform: translateX(3px); }
  .hm-home a.hm-row:hover .hm-row__go { transform: translateX(3px); }
  .hm-home a.hm-row:hover strong { color: var(--hm-gold-ink); }
}
.hm-home a.hm-row:focus-visible { outline: 3px solid var(--hm-gold-ink); outline-offset: 2px; border-radius: 8px; }

.hm-home a.hm-side__all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.25rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--hm-navy);
  text-decoration: none;
}
.hm-home a.hm-side__all i { font-size: 0.8em; color: var(--hm-gold-ink); transition: transform 0.25s var(--hm-ease); }
.hm-home a.hm-side__all:hover { color: var(--hm-gold-ink); }
.hm-home a.hm-side__all:hover i { transform: translateX(4px); }

/* ---- narrower screens ---- */

@media (max-width: 960px) {
  .hm-home .hm-next { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hm-home .hm-ticket,
  .hm-home .hm-next--solo .hm-ticket { grid-template-columns: minmax(0, 1fr); }
  .hm-home .hm-ticket::before,
  .hm-home .hm-ticket::after { display: none; }
  .hm-home .hm-ticket__media { min-height: 0; aspect-ratio: 16 / 10; }
  .hm-home .hm-ticket__media::after { display: none; }
  .hm-home .hm-ticket .event-countdown { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-home .hm-ticket__media img,
  .hm-home .hm-ticket__title a,
  .hm-home a.hm-row,
  .hm-home .hm-row__go,
  .hm-home a.hm-side__all i { transition: none; }
  .hm-home .hm-ticket__pulse::after { animation: none; opacity: 0; }
  .hm-home .hm-ticket:hover .hm-ticket__media img,
  .hm-home a.hm-row:hover,
  .hm-home a.hm-row:hover .hm-row__go { transform: none; }
}

@media print {
  .hm-home .hm-ticket { color: #000; background: #fff; border: 1px solid #000; box-shadow: none; }
  .hm-home .hm-ticket__title, .hm-home .hm-ticket__meta, .hm-home .hm-ticket__excerpt, .hm-home .hm-ticket__kicker { color: #000; }
  .hm-home .hm-ticket::before, .hm-home .hm-ticket::after { display: none; }
}