/* ==========================================================================
   Front page sections: stats, feature images, events, teasers,
   partners, social. Also used by the calendar page.
   ========================================================================== */

/* Stats ----------------------------------------------------------------- */
.stats__list {
  display: grid;
  gap: var(--space-6);
}

.stats__item {
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-line);
}

.stats__item--main {
  border-top-color: var(--color-red);
}

.stats__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.stats__badge {
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  padding: 2px 8px;
  background: var(--color-red);
  color: var(--color-white);
  border-radius: var(--radius-sm);
}

.stats__value {
  font-family: var(--font-display);
  font-size: var(--font-size-stat);
  font-weight: var(--font-weight-extrabold);
  line-height: 0.9;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.stats__unit {
  font-size: 0.4em;
  font-weight: var(--font-weight-semibold);
  color: var(--color-red-ink);
  margin-left: 0.15em;
}

.stats__note {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-subtle);
}

.stats--compact .stats__value {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 640px) {
  .stats__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
  }
}

/* Feature images -------------------------------------------------------- */
.feature__row {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-9);
}

.feature__row:last-child {
  margin-bottom: 0;
}

.feature__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.feature__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out-expo);
}

.feature__media:hover .feature__img {
  transform: scale(1.03);
}

.feature__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
}

.feature__index {
  font-size: 1.125rem;
  margin-bottom: 0;
}

.feature__title {
  margin-bottom: var(--space-2);
}

@media (min-width: 1024px) {
  .feature__row {
    grid-template-columns: 62fr 38fr;
    gap: var(--space-8);
    align-items: end;
  }
  .feature__row--reverse .feature__media {
    order: 2;
  }
  .feature__img {
    aspect-ratio: 3 / 2;
  }
  .feature__text {
    padding-bottom: var(--space-6);
  }
}

/* Event list ------------------------------------------------------------ */
.event-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-line);
}

.event-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-line);
}

.event-row__date time {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.event-row__day {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
}

.event-row__month {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red-ink);
}

.event-row__until {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-caption);
  color: var(--color-text-subtle);
}

.event-row__title {
  margin-bottom: var(--space-2);
}

.event-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.event-row__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.event-row__desc {
  margin-top: var(--space-2);
  font-size: var(--font-size-body-sm);
  max-width: var(--measure-narrow);
}

.event-row__aside {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.event-row__countdown {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-red-ink);
}

.event-row__result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  padding: 6px 12px;
  border: 1px solid var(--color-red);
  border-radius: var(--radius-sm);
}

.event-row__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.event-row__link:hover {
  color: var(--color-red-ink);
}

.calendar__month {
  margin: var(--space-7) 0 var(--space-3);
}

.calendar__month:first-of-type {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .event-row {
    grid-template-columns: 96px 1fr auto;
    align-items: center;
  }
  .event-row__aside {
    grid-column: 3;
    justify-content: flex-end;
    text-align: right;
  }
  .event-row__day {
    font-size: 3.25rem;
  }
}

/* Album grid ------------------------------------------------------------ */
.album-grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .album-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .album-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(240px, auto);
  }
  .album-card--lead {
    grid-column: span 2;
    grid-row: span 2;
  }
  .album-card--lead .media-card__media {
    aspect-ratio: auto;
    height: 100%;
  }
  .album-card--lead .media-card__title {
    font-size: clamp(2rem, 3vw, 3rem);
  }
  .album-grid .media-card {
    height: 100%;
  }
  .album-grid .media-card__media {
    height: 100%;
    aspect-ratio: auto;
    min-height: 240px;
  }
}

/* Partners (light section) --------------------------------------------- */
.partners__main {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.partners__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}

.partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-line-on-light);
  border-radius: var(--radius-md);
  color: var(--color-ink-on-light);
  transition: border-color var(--transition-default), transform var(--transition-default), box-shadow var(--transition-default);
}

.partners__item--lg {
  min-height: 180px;
}

a.partners__item:hover {
  border-color: var(--color-red);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  color: var(--color-ink-on-light);
}

.partners__logo {
  max-height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.partners__item--lg .partners__logo {
  max-height: 88px;
}

.partners__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.partners__item--lg .partners__name {
  font-size: 2.25rem;
}

@media (min-width: 640px) {
  .partners__main {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .partners__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .partners__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Social ---------------------------------------------------------------- */
.social__follow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.social__grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(2, 1fr);
}

.social-tile {
  position: relative;
}

.social-tile__platform {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.7);
  color: var(--color-white);
}

.social-tile:hover .social-tile__platform {
  background: var(--color-red);
}

.social-tile__title {
  font-size: 1.25rem;
}

@media (min-width: 640px) {
  .social__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .social__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Blog overview (front page) -------------------------------------------- */
.blog-overview__grid {
  display: grid;
  gap: var(--space-7);
}

.blog-overview__lead {
  display: grid;
  gap: var(--space-5);
}

.blog-overview__lead-media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  aspect-ratio: 16 / 9;
}

.blog-overview__lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms var(--ease-out-expo);
}

.blog-overview__lead-media:hover img {
  transform: scale(1.03);
}

.blog-overview__lead-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.blog-overview__lead-title {
  margin: 0;
}

.blog-overview__lead-title a:hover {
  color: var(--color-red-ink);
}

.blog-overview__excerpt {
  margin-bottom: var(--space-2);
}

.blog-overview__list {
  display: grid;
  gap: var(--grid-gutter);
}

.blog-overview__list:empty {
  display: none;
}

@media (min-width: 640px) {
  .blog-overview__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-overview__lead {
    grid-template-columns: 60fr 40fr;
    align-items: end;
    gap: var(--space-7);
  }
  .blog-overview__lead-body {
    padding-bottom: var(--space-4);
  }
}