/* Ingredients (option 1, "Classic") — the home page's composition carried over:
   hero (title, the question and the answer | the oils photograph), then one component for the whole page:
   the base oils, the essential oils and the experience as golden rows (picture 38.2 | text 61.8), two
   columns on desktop, one on phones. Ingredients sit beside their text, so they never read as product
   cards (stone square + name + price = something to buy). Closing. */

/* ---------- hero: text 38.2 | photo 61.8 ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s-4) var(--split-gap);
  align-items: center; padding-top: var(--s-5);
}
.hero h1 { line-height: 1.08; margin: 0 0 var(--s-4); } /* size: the one h1 size (style.css --h1) */
.hero .lede { margin-bottom: var(--s-3); }
.answer { font-size: var(--t-0h); line-height: 1.618; margin-bottom: var(--s-5); max-width: 28em; }
.hero-media { aspect-ratio: 1.272 / 1; }

/* ---------- golden rows: two columns of picture 38.2 | text 61.8, hairline above each row ---------- */
.media-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--split-gap); }
.media-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s-3); align-items: start;
  padding-block: var(--s-4); border-top: 1px solid var(--rule);
}
.media-row:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.media-row .tile { aspect-ratio: 1 / 1; }
.media-text h3 { margin-bottom: var(--s-2); }
.media-text p { font-size: var(--t-0h); line-height: 1.618; }
.media-text p:last-child { margin-bottom: 0; }

/* ---------- the red palm credit: the page's last footnote, even space above and below it ---------- */
.closing { padding-bottom: var(--s-5); }
.page-credit { margin-top: 0; }

/* ---------- tablet ---------- */
@media (max-width: 999px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--s-4); }
  .hero-text { max-width: 34em; }
  .media-rows { grid-template-columns: minmax(0, 1fr); }
  .media-row:nth-child(2) { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
}

/* ---------- mobile ---------- */
@media (max-width: 759px) {
  .closing-aside .btn { width: 100%; } /* the last action, full width like the first */
  .hero h1 { margin-bottom: var(--s-3); }
  .answer { margin-bottom: var(--s-4); }
  .hero .actions .btn { flex: 1 1 auto; }
  .media-row { padding-block: var(--s-3); }
  .media-row:nth-child(2) { padding-top: var(--s-3); }
  .media-text h3 { margin-bottom: var(--s-1); }
  .media-text p { font-size: var(--t-0); }
  .closing { padding-bottom: var(--s-4); }
}