/* Finished/Inactive page specific layout adjustments */

/* Sticky footer: keep footer at bottom for short pages */
.contest {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
footer { margin-top: auto; }

/* Header alignment: push header-right to the right side */
.winners-header {
  display: flex;
  align-items: flex-start;
}
.winners-header .header-right {
  margin-left: auto;
  text-align: right;
}

/* Layout: Grid to control ordering across title, banner, and list */
.winners-content-section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "title"
    "banner"
    "list";
  gap: 24px;
  padding-top: 45px;
}

/* Optional wrapper: treat children as direct grid items for flexible ordering */
.winners-left {
  display: contents;
}

.winners-title { grid-area: title; }
.banner-container { grid-area: banner; }
.winners-list-container { grid-area: list; }

.banner-container .banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Mobile adjustments: 620px and below */
@media (max-width: 620px) {
  /* Keep grid content padded and within viewport */
  .winners-content-section {
    padding: 16px 16px 24px;
    box-sizing: border-box;
  }

  /* Prevent grid children from overflowing the grid track on small screens */
  .winners-content-section > .winners-title,
  .winners-content-section > .banner-container,
  .winners-content-section > .winners-list-container {
    width: 100%;
    max-width: 100%;
    min-width: 0; /* allow shrink inside grid */
    box-sizing: border-box;
    overflow: hidden; /* avoid accidental horizontal scroll */
  }

  /* Keep long texts from pushing layout */
  .winners-title,
  .winners-list-container,
  .prize-title,
  .prize-title h2,
  .winners-title h1 {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Ensure header content never overflows horizontally */
  .winners-header {
    width: 100%;
    flex-wrap: wrap;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .winners-header .header-right {
    margin-left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    text-align: right;
  }
  .winners-header .header-right .logo-box img,
  .winners-header .header-right img.logo {
    max-width: 100%;
    height: auto;
  }

  /* Banner should scale to container width */
  .banner-container {
    width: 100%;
    overflow: hidden;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .banner-container .banner-img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  /* Winners list: stack name above receipt; add bottom spacing for separation */
  .winners-list-container {
    padding: 0 16px;
    box-sizing: border-box;
  }
  .winners-list .winner-item {
    display: flex;
    flex-direction: column;
  }
  .winners-list .winner-name,
  .winners-list .winner-receipt {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .winners-list .winner-receipt {
    padding-bottom: 8px; /* small separation between winners */
  }
}

/* Desktop/tablet: left column (title above list), right column (banner) */
@media (min-width: 1024px) {
  .winners-content-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title banner"
      "list  banner";
    gap: 40px;
    align-items: start;
    margin-bottom: 70px;
  }
}