/* Home page. Builds on /base.css. */

/* The hero photo is a portrait, so it never sits under the text: on wide screens it takes
   the right side and the words sit on noche; on phones it sits above them. */
@media (min-width: 861px) {
  .home-hero > img { left: 46%; width: 54%; object-position: center 40%; opacity: 1; }
  .home-hero::after { background: linear-gradient(90deg, var(--noche) 0%, var(--noche) 46%, rgba(21,25,27,.55) 52%, rgba(21,25,27,0) 66%), linear-gradient(180deg, rgba(21,25,27,.5) 0%, rgba(21,25,27,0) 22%); }
  .home-hero .hero-text .wrap > * { max-width: 520px; }
}
.home-hero h1 { max-width: 9ch; }
.hero-sub { margin-top: 18px; max-width: 46ch; font-size: 19px; color: #fff; }
.search.solo { grid-template-columns: minmax(0, 1fr) auto; max-width: 640px; }
.hero-link { margin-top: 12px; font-family: var(--cond); font-weight: 600; font-size: 19px; }
.hero-link a { color: var(--barro-claro); }

/* Six tiles, one row on wide screens; no counts, since this page is static */
.home-tiles { grid-auto-rows: 220px; }
.home-tiles .tile span { font-size: 25px; }
.more-link { margin-top: 16px; font-family: var(--cond); font-weight: 600; font-size: 20px; }
.more-link a { text-decoration-color: var(--barro); text-decoration-thickness: 2px; }

/* What is coming: editorial rows, each asking riders to help decide */
.next { padding: 64px 0 80px; scroll-margin-top: 12px; }
.next-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; border-bottom: 3px solid var(--noche); padding-bottom: 12px; }
.next-head h2 { font-family: var(--cond); font-weight: 800; font-size: 44px; line-height: 1; }
.next-head p { max-width: 52ch; color: var(--gris); }
.next-rows > li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--linea); scroll-margin-top: 12px; }
.next-rows img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); }
.soon { font-family: var(--cond); font-weight: 600; font-size: 18px; color: var(--barro-oscuro); }
.next-rows h3 { margin-top: 2px; font-family: var(--cond); font-weight: 800; font-size: 40px; line-height: .95; }
.next-rows h3 a { text-decoration: none; }
.next-rows h3 a:hover { color: var(--barro-oscuro); }
.next-rows h3 + p { margin-top: 12px; max-width: 60ch; }
.ask { margin-top: 14px; font-family: var(--cond); font-weight: 600; font-size: 20px; }
.ask a { text-decoration-color: var(--barro); text-decoration-thickness: 2px; }
.ask a:hover { color: var(--barro-oscuro); }
.survey { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.survey p { color: var(--gris); }

@media (max-width: 860px) {
  .home-hero { min-height: 0; display: block; }
  .home-hero > img { position: relative; height: 62vh; min-height: 380px; max-height: 560px; object-position: center 35%; opacity: 1; }
  .home-hero::after { bottom: auto; height: max(380px, min(62vh, 560px)); background: linear-gradient(180deg, rgba(21,25,27,.55) 0%, rgba(21,25,27,0) 24%, rgba(21,25,27,0) 70%, var(--noche) 100%); }
  .home-hero .mast { position: absolute; top: 0; left: 0; right: 0; }
  .home-hero .hero-text { margin-top: -64px; padding-bottom: 40px; }
  .home-hero .credit { top: calc(max(380px, min(62vh, 560px)) - 100px); bottom: auto; }
  .hero-sub { font-size: 17px; }
  .next-rows > li { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .next-rows h3 { font-size: 34px; }
}
@media (max-width: 600px) {
  .home-tiles { grid-auto-rows: 150px; }
  .home-tiles .tile span { font-size: 19px; }
}

/* Next events: three date-led cards, filled from /eventos/eventos.json */
.soon-events { padding: 64px 0 0; }
.head-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--cond); font-weight: 600; font-size: 20px; }
.head-links a { color: var(--noche); text-decoration-color: var(--barro); text-decoration-thickness: 2px; }
.evs-mini { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ev-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; height: 100%; padding: 18px 20px; border-radius: var(--radius-md); background: var(--noche); color: #fff; text-decoration: none; }
.ev-card:hover { background: var(--noche-2); }
/* The organiser's image across the top of the card, whole on black */
.ev-card.has-img { grid-template-rows: auto 1fr; }
.ev-card .ev-pic { grid-column: 1 / -1; width: calc(100% + 40px); margin: -18px -20px 4px; height: 170px; object-fit: contain; background: #000; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.ev-card .ev-date { display: flex; flex-direction: column; font-family: var(--cond); line-height: .9; color: var(--barro-claro); }
.ev-card .ev-d { font-weight: 800; font-size: 56px; }
.ev-card .ev-to { font-weight: 800; font-size: 20px; }
.ev-card .ev-m { margin-top: 6px; font-weight: 600; font-size: 17px; color: var(--niebla); }
.ev-card .ev-type { font-family: var(--cond); font-weight: 600; font-size: 17px; color: var(--barro-claro); }
.ev-card h3 { margin-top: 2px; font-family: var(--cond); font-weight: 800; font-size: 28px; line-height: 1; }
.ev-card .ev-where { margin-top: 6px; font-size: 15px; color: var(--niebla); }
@media (max-width: 860px) { .evs-mini { grid-template-columns: minmax(0, 1fr); } }