body {
  display: grid;
  height: 100vh;
  grid-template-areas:
    "header"
    "wrapper"
    "footer";
  gap: 1em;
  /* grid-template-columns: 0.309fr 0.309fr 0.382fr; */
  grid-template-rows: auto 1fr auto;
}

@media screen and (min-width: 60em) {
  body {
    display: grid;
    height: 100vh;

    grid-template-areas:
      "header"
      "wrapper"
      "footer";
  }
}
/* this wraps main and aside */
.wrapper__collections-aside {
  grid-area: wrapper;
  display: grid;
  gap: 1em;
  grid-template-areas:
    "main"
    "aside";
  /* grid-template-columns: 1.618fr 0.382fr; */
  /* grid-template-columns: 3.09fr 3.09fr 3.82fr; */
  grid-template-rows: 1fr auto;
}
@media screen and (min-width: 60em) {
  .wrapper__collections-aside {
    grid-area: wrapper;
    display: grid;
    gap: 1em;
    grid-template-areas: "main main main aside";
    /* grid-template-columns: 1.618fr 0.382fr; */
    grid-template-columns: 3.82fr 2.36fr 1.46fr 2.36fr;
    /* grid-template-rows: 1fr auto; */
    /* grid-template-rows: 3.82fr 2.36fr 1.46fr 2.36fr; */
  }
}

header {
  grid-area: header;
}

main {
  grid-area: main;
  display: grid;
  --gap-top-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
  margin-block-start: var(
    --gap-top-600,
    clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem)
  );
  gap: 0;
}

aside {
  grid-area: aside;
  display: grid;
  grid-auto-flow: row;
  /* grid-template-rows: repeat(12, 0.09017256fr); */
}

@media screen and (min-width: 60em) {
  aside {
    grid-area: aside;
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: repeat(12, 0.09017256fr);
  }
}

sidebar-component {
  grid-row: 2;
}

recipeinfo-component {
  grid-row: 3;
}

footer {
  grid-area: footer;
}

/* * typography */
h1.recipe-hero__title.display-small.mdc-theme--primary {
  text-align: start;
}
/* * section - hero */

.recipe-hero__wrapper__content > * {
  padding: 0.5rem 1rem;
}

.recipe-social {
  column-gap: 1rem;
}

@media screen and (min-width: 40em) {
  .recipe-hero__wrapper,
  .recipe-description {
    grid-auto-flow: column;
    /* place-items: center; */
    /* grid-template-columns: auto; */
    gap: 2em;
  }
  .recipe-description > * {
    height: max-content;
    border: 0;
    border-inline-end: 2px solid var(--mdc-theme-primary);
    border-style: dashed;
    padding: 0.5rem 1rem;
  }

  .recipe-content {
    padding: 0.5rem 1rem;
  }
  .recipe-content p {
    padding: 0.5rem 1rem;
  }
}

.recipe-hero__wrapper__content {
  font-size: var(--body-small);
}
.recipe-hero__wrapper__content ::first-line {
  font-weight: bold;
}

/* ! for demo only */
.recipe-hero picture > * {
  /* min-width: -webkit-fill-available; */
  grid-column: span(4);
  height: auto;
  max-height: 100vh;
  object-fit: cover;
}

ul[data-state="list"].ingredients__list li {
  text-transform: uppercase;
  font-weight: 600;
  /* line-height: 1.8; */
}
:is(.ingredients__list, .method__list) li {
  /* text-transform: uppercase; */
  /* font-weight: 600; */
  line-height: 1.4;
  margin-block-end: 0.5rem;
}

.recipe-details {
  grid-row-gap: 20px;
}
summary.recipe-info__heading {
  /* font-weight: bold; */
  /* font-size: var(--body-small); */
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 1em;
}
.recipe-info {
  display: grid;
  /* gap: 0.5em; */
}

@media screen and (min-width: 40em) {
  .recipe-details {
    grid-auto-flow: column;
    grid-template-columns: repeat(12, 1fr);
    /* gap: 1em; */
    /* column-gap: 1em; */
  }

  /* * */

  /* @media screen and (max-width: 40em) {
    .recipe-details {
      grid-template-columns: 1fr 1fr;
    }

    .recipe-details .ingredients {
      order: 2;
    }

    .recipe-details .method {
      order: 1;
    }
  } */

  @media screen and (min-width: 40em) {
    .ingredients {
      /* grid-column: 7 / 10; */
      grid-column: 8 / 13;
    }

    .method {
      grid-column: 1 / 6;
    }
  }
  @media screen and (min-width: 60em) {
    .ingredients {
      /* grid-column: 7 / 10; */
      grid-column: 8 / 13;
    }

    .method {
      grid-column: 1 / 6;
    }
  }

  .recipe-info {
    display: grid;
    /* grid-template-columns: repeat(4, 1fr); */
    /* grid-template-rows: repeat(auto-fill, 1fr); */
    /* max-height: 100vh; */
  }

  /* .recipe-tips {
    grid-column: 2 / 5;
    grid-row: 1 / 3;
  } */

  /* .fun-fact {
    grid-column: 2 / 5;
  } */
}

/* **** */
/* * 04 - exception — cube css */
/* **** */

@media screen and (min-width: 40em) {
  .nav__heading[data-state="recipe"] {
    /* font-size: clamp(1em, 0.9rem + 14.3472vw, 14.7125rem); */ /* 221px - homepage */
    /* font-size: clamp(1em, 0.9rem + 14.3472vw, 10.7125rem); */
    font-size: clamp(1em, 0.9rem + 11vw, 11rem);
  }
}

span:is(.recipe-details__tips__sub-heading__body, .recipe-details__fun-fact) {
  font-size: var(--body-small);
}

.recipe-details__tips__body {
  font-size: var(--body-small);
}

h4 {
  text-transform: uppercase;
  color: var(--mdc-theme-primary, #9c413d);
  font-weight: 900;
}

h3:is(.recipe-details__fun-fact, .recipe-details__tips__heading) {
  color: var(--mdc-theme-primary, #9c413d);
  /* font-weight: 400;  */
  font-family: var(--ff-cursive);
}

.fun-fact,
.recipe-tips {
  /* padding: 1em; */
  /* border: 1px solid var(--mdc-theme-primary, #9c413d); */
  /* border-style: dashed; */
  border: 0;
  border-radius: 40px;
}

.fun-fact {
  /* border-bottom-right-radius: 40px; */
  color: var(--mdc-theme-on-background, #2c2c2c);
  /* background-color: var(--mdc-theme-inverse-primary, #fafafa); */
  /* grid-row: none; */
}

.recipe-details__fun-fact__fact-title {
  font-weight: 900;
  color: var(--mdc-theme-primary, #9c413d);
  text-transform: uppercase;
}

ol.method__list > li {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* selects and aligns the input checkbox */
ol.method__list li > input {
  /* flex: 1; */
  /* padding-inline-start: 20px; */
  /* * do this to place the checkbox rectangle down at the baseline */
}

input[type="checkbox"] {
  /* removes system-level styling, prefix means work in progress with the browser */
  -webkit-appearance: none;
  appearance: none;
  /* width: 1em; */
  /* height: 1em; */

  /* vertical-align: -1em; */ /* already set as `baseline` in reset */
  /* place-self: flex-end; */

  max-height: 2ch;
  min-width: 2ch;
  /* ! uncheck background color later */
  background: var(--mdc-theme-neutral-300, #e0e0e0);
  border-radius: 100px;
  /* border: 1px solid grey; */
  /* adjust the position of the checkboxes on the text baseline */
  vertical-align: text-bottom;
  /* Set here so that Windows' High-Contrast Mode can override */
  /* color: green; */
  color: var(--mdc-theme-background, #fff);
}

input[type="checkbox"]::before {
  content: "✔";
  position: absolute;
  font-size: 0.8em;
  right: 0.3em;
  top: 0.05em;
  /* usually this is hidden */
  /* visibility: hidden; */
}

input[type="checkbox"]:checked {
  /* Use `visibility` instead of `display` to avoid recalculating layout */
  background: var(--mdc-theme-success, #0b4b1d);
  /* font-size: 0.618em; */
  /* right: 0.3em; */
  visibility: visible;
  /* min-width: fit-content; */
  /* max-height: fit-content; */
  /* vertical-align: -1em; */
  border-radius: 100%;
  /* padding: 0.618em; */
}

input[type="checkbox"]:disabled {
  border-color: black;
  background: #ddd;
  color: gray;
}

/* create custom ::marker with counter */

ol.method__list {
  display: block;
  max-inline-size: fit-content;
  /* width: 30em; */
  counter-reset: counterName;
  list-style: none;
  padding: 0;
}

ol.method__list li {
  /* padding-left: 2em; */
  padding-inline-start: 2.5rem;
  padding-block-end: 0.618em;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1em;
  position: relative;
  counter-increment: counterName;
}

ol.method__list li::before {
  content: counter(counterName) ".";
  position: absolute;
  left: 0;
  top: 0;
}

/* * */
/* * */
/* * */
/* * */
/* * */
/* * */

@media screen and (min-width: 600px) {
  .boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .boxes button:nth-of-type(1) {
    order: 4;
  }

  .boxes button:nth-of-type(2) {
    order: 3;
  }

  .boxes button:nth-of-type(3) {
    order: 2;
  }

  .boxes button:nth-of-type(4) {
    order: 1;
  }
}