/*
  pages/schedule.css
  Schedule of events page: hero, schedule layout, food images.
*/


/* ─── Dining hole (legacy section) ──────────────────────────────────────── */

.dining-hole {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--linen);
  text-shadow: 0 0.04em 0 rgba(0, 0, 0, 0.15);

  & h1 {
    font-weight: 400;
    font-size: 68px;
    line-height: 60px;
    font-family: var(--unical);
  }
}


/* ─── Schedule heading overrides ─────────────────────────────────────────── */

.schedule-container h3 {
  font-weight: 300;
}

.schedule-container h3 + p {
  font-size: 24px;
  font-weight: 700;
}


/* ─── Schedule layout ────────────────────────────────────────────────────── */

.schedule-content {
  display: flex;
  position: relative;

  @media screen and (max-width: 600px) {
    flex-direction: column;
  }

  @media screen and (min-width: 601px) and (max-width: 1023px) {
    gap: 20px;
    width: calc(100% - 100px);
    max-width: 960px;
  }

  @media screen and (min-width: 601px) {
    margin: 0 auto;
    padding-top: 50px;
  }

  @media screen and (min-width: 1024px) {
    column-gap: 20px;
    width: 100%;
    max-width: 800px;
  }

  & .images-container {
    display: flex;

    @media screen and (max-width: 600px) {
      flex-wrap: wrap;
      align-items: start;
      row-gap: 20px;
      column-gap: 5%;
      order: 2;
      padding: 20px;
    }

    @media screen and (min-width: 601px) {
      flex-direction: column;
    }

    @media screen and (min-width: 601px) and (max-width: 1023px) {
      width: 180px;
    }

    @media screen and (min-width: 1024px) {
      max-width: 180px;
    }
  }

  & .food-img {
    @media screen and (max-width: 600px) {
      max-width: 30%;
    }
  }

  & .food-img--4,
  & .food-img--5 {
    @media screen and (max-width: 600px) {
      max-width: calc(50% - 2.5%);
    }
  }

  & .food-img--4 {
    @media screen and (min-width: 601px) {
      order: 5;
    }
  }

  & .food-img--5 {
    @media screen and (min-width: 601px) {
      order: 4;
    }
  }

  & .schedule-container {
    @media screen and (max-width: 600px) {
      order: 1;
      padding: 20px;
    }

    @media screen and (min-width: 601px) {
      width: calc(100% - 200px);
    }

    & h3 {
      margin-top: 40px;
      margin-bottom: 0;
      color: var(--emerald);

      &:first-of-type {
        margin-top: 0;
      }
    }

    & ul {
      padding-inline-start: 20px;
    }
  }
}