@import url("./content-page.css");

.first-home-hero::before { content: "CHAVE"; }
.first-hero-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 24rem;
  align-items: end;
  overflow: hidden;
  padding: 1rem 1rem 0;
  border: 3px solid #111;
  border-radius: 46% 54% 1.5rem 1.5rem;
  background: var(--bora-color-positive);
  box-shadow: 9px 9px 0 #111;
}
.first-hero-visual img { position: relative; z-index: 1; width: min(100%, 20rem); max-height: 26rem; margin: 0 auto; object-fit: contain; object-position: bottom; }
.first-hero-visual .bora-speech { position: absolute; z-index: 10; top: .8rem; right: .7rem; width: min(16rem, 72%); padding: .85rem; font-size: .84rem; }

.first-equation { display: grid; gap: .75rem; margin: 1.5rem 0; }
.first-equation__item { display: grid; min-height: 7.5rem; align-content: center; padding: 1rem; border: 3px solid #111; border-radius: 1rem; background: #fff; box-shadow: 5px 5px 0 #111; }
.first-equation__item:nth-child(3) { background: var(--bora-color-positive); }
.first-equation__item:nth-child(5) { background: var(--bora-color-accent); }
.first-equation__item strong { font: 900 1.45rem/1 var(--bora-font-display); letter-spacing: -.03em; }
.first-equation__item span { margin-top: .35rem; color: var(--bora-color-muted); font-size: .78rem; font-weight: 700; }
.first-equation__operator { display: grid; width: 2.3rem; aspect-ratio: 1; place-items: center; justify-self: center; border: 3px solid #111; border-radius: 50%; background: var(--bora-color-secondary); font: 900 1.3rem/1 var(--bora-font-display); box-shadow: 3px 3px 0 #111; }
.first-equation__result { padding: 1rem; border: 3px dashed #111; border-radius: 1rem; background: rgb(255 255 255 / .45); font-size: .82rem; font-weight: 800; text-align: center; }

.first-pillars { display: grid; gap: 1rem; }
.first-pillar { display: grid; min-height: 17rem; align-content: start; padding: 1.2rem; border: 3px solid #111; border-radius: 1.25rem; background: var(--pillar-color, #fff); box-shadow: 6px 6px 0 #111; }
.first-pillar:nth-child(1) { --pillar-color: var(--bora-color-accent); }
.first-pillar:nth-child(2) { --pillar-color: var(--bora-color-positive); }
.first-pillar:nth-child(3) { --pillar-color: var(--bora-color-secondary); }
.first-pillar__number { display: grid; width: 3rem; aspect-ratio: 1; place-items: center; margin-bottom: auto; border: 3px solid #111; border-radius: .8rem; background: #fff; font: 900 1.1rem/1 var(--bora-font-display); }
.first-pillar h3 { margin: 2rem 0 .65rem; font-size: 1.9rem; text-transform: uppercase; }
.first-pillar p { margin: 0; font-size: .86rem; font-weight: 700; }

.purchase-timeline { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; counter-reset: purchase; }
.purchase-step { counter-increment: purchase; position: relative; display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; padding: 1rem; border: 3px solid #111; border-radius: 1rem; background: #fff; color: #111; box-shadow: 5px 5px 0 var(--step-color, var(--bora-color-accent)); }
.purchase-step:nth-child(3n+2) { --step-color: var(--bora-color-positive); }
.purchase-step:nth-child(3n+3) { --step-color: var(--bora-color-secondary); }
.purchase-step::before { content: counter(purchase, decimal-leading-zero); display: grid; width: 3.1rem; aspect-ratio: 1; place-items: center; border: 3px solid #111; border-radius: .8rem; background: var(--step-color, var(--bora-color-accent)); font: 900 1rem/1 var(--bora-font-display); }
.purchase-step h3 { margin: .15rem 0 .45rem; font-size: 1.25rem; }
.purchase-step p { margin: 0; color: var(--bora-color-muted); font-size: .78rem; font-weight: 650; }

.first-checkpoint { display: grid; gap: 1rem; margin-top: 1.5rem; padding: 1.2rem; border: 3px solid #111; border-radius: 1.25rem; background: var(--bora-color-primary); color: #fff; box-shadow: 7px 7px 0 #111; }
.first-checkpoint h3 { margin: 0; font-size: 1.7rem; text-transform: uppercase; }
.first-checkpoint p { margin: 0; color: rgb(255 255 255 / .82); font-size: .85rem; font-weight: 700; }

.first-source { margin-top: 1rem; padding: 1rem; border: 3px solid #111; border-radius: 1rem; background: var(--bora-color-background); font-size: .78rem; line-height: 1.5; }
.first-source strong { display: block; margin-bottom: .3rem; }

.glossary-grid { display: grid; gap: .75rem; }
.glossary-card { padding: 1rem; border: 3px solid #111; border-radius: 1rem; background: #fff; box-shadow: 4px 4px 0 #111; }
.glossary-card:nth-child(2n) { background: var(--bora-color-accent); }
.glossary-card strong { display: block; margin-bottom: .4rem; font: 900 1.1rem/1 var(--bora-font-display); }
.glossary-card p { margin: 0; color: var(--bora-color-muted); font-size: .78rem; font-weight: 650; }

.first-guide { display: grid; overflow: hidden; border: 3px solid #111; border-radius: 1.5rem; background: #fff; box-shadow: 9px 9px 0 #111; }
.first-guide__copy { padding: 1.25rem; }
.first-guide__copy h2 { margin: .8rem 0; text-transform: uppercase; }
.first-guide__copy p { color: var(--bora-color-muted); font-weight: 650; }
.first-guide__image { display: grid; min-height: 22rem; align-items: end; padding: 1rem 1rem 0; background: var(--bora-color-positive); }
.first-guide__image img { width: min(100%, 20rem); max-height: 25rem; margin: 0 auto; object-fit: contain; object-position: bottom; }

.related-grid { display: grid; gap: .8rem; }
.related-card { display: grid; min-height: 11rem; align-content: space-between; padding: 1rem; border: 3px solid #111; border-radius: 1rem; background: #fff; color: #111; text-decoration: none; box-shadow: 5px 5px 0 #111; }
.related-card:nth-child(2) { background: var(--bora-color-positive); }
.related-card:nth-child(3) { background: var(--bora-color-accent); }
.related-card strong { font: 900 1.35rem/1 var(--bora-font-display); }
.related-card span { font-size: .78rem; font-weight: 800; text-decoration: underline; }

.first-final-grid { display: grid; gap: 1.25rem; align-items: center; text-align: left; }
.first-final-grid h2 { margin-right: 0; margin-left: 0; }
.first-final-grid p { margin-right: 0; margin-left: 0; }
.first-final-grid .bora-actions { justify-content: flex-start; }
.first-final__image { display: grid; min-height: 18rem; align-items: end; overflow: hidden; border: 3px solid #fff; border-radius: 1.25rem; background: var(--bora-color-accent); }
.first-final__image img { width: min(100%, 16rem); max-height: 20rem; margin: 0 auto; object-fit: contain; object-position: bottom; }

@media (min-width: 42rem) {
  .first-equation { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
  .first-equation__operator { justify-self: auto; }
  .first-equation__result { grid-column: 1 / -1; }
  .first-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .purchase-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .first-checkpoint { grid-template-columns: 1fr auto; align-items: center; }
  .glossary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .first-guide { grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr); }
  .first-guide__copy { align-self: center; padding: 2rem; }
  .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .first-final-grid { grid-template-columns: minmax(0, 1.2fr) minmax(15rem, .8fr); }
}

@media (min-width: 64rem) {
  .first-hero-visual { min-height: 30rem; }
  .first-hero-visual img { max-height: 33rem; }
  .purchase-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .purchase-step { grid-template-columns: 1fr; min-height: 14rem; }
  .glossary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}