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

.about-hero { background: var(--bora-color-primary); }
.about-hero::before { content: "CESAR"; right: -1rem; }
.about-hero h1 { max-width: 12ch; }
.about-portrait { position: relative; margin: 0; padding: 0 0 1rem; }
.about-portrait__frame { overflow: hidden; border: 3px solid #111; border-radius: 1.6rem; background: var(--bora-color-accent); box-shadow: 9px 9px 0 #111; transform: rotate(1deg); }
.about-portrait__frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; object-position: center bottom; }
.about-portrait figcaption { position: relative; width: calc(100% - 1.25rem); margin: -.9rem auto 0; padding: .8rem 1rem; border: 3px solid #111; border-radius: .85rem; background: #fff; color: #111; box-shadow: 4px 4px 0 #111; transform: rotate(-1deg); }
.about-portrait figcaption strong, .about-portrait figcaption span { display: block; }
.about-portrait figcaption strong { font-family: var(--bora-font-display); font-size: 1.5rem; text-transform: uppercase; }
.about-portrait figcaption span { margin-top: .15rem; font-size: .78rem; font-weight: 850; }

.about-intro-grid { display: grid; gap: 1.25rem; align-items: center; }
.about-quote { margin: 0; padding: 1.25rem; border: 3px solid #111; border-radius: 1.25rem; background: var(--bora-color-accent); font-family: var(--bora-font-display); font-size: clamp(1.55rem, 7vw, 2.5rem); line-height: 1.05; box-shadow: 7px 7px 0 #111; transform: rotate(-1deg); }
.about-quote cite { display: block; margin-top: 1rem; font: 900 .78rem/1.3 var(--bora-font-body); text-transform: uppercase; }
.about-values-grid { display: grid; gap: .9rem; }
.about-value { padding: 1.1rem; border: 3px solid #111; border-radius: 1rem; background: #fff; box-shadow: 5px 5px 0 #111; }
.about-value:nth-child(2) { background: var(--bora-color-positive); }
.about-value:nth-child(3) { background: var(--bora-color-secondary); }
.about-value:nth-child(4) { background: var(--bora-color-accent); }
.about-value > span { display: inline-grid; width: 2.55rem; aspect-ratio: 1; place-items: center; border: 2px solid #111; border-radius: 50%; background: #111; color: #fff; font-weight: 950; }
.about-value h3 { margin: .8rem 0 .45rem; font-size: 1.45rem; text-transform: uppercase; }
.about-value p { color: #333; font-size: .86rem; font-weight: 650; }

.about-process { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.about-process li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; padding: 1rem; border: 3px solid #fff; border-radius: 1rem; background: rgb(255 255 255 / .07); }
.about-process li > span { display: grid; width: 2.8rem; aspect-ratio: 1; place-items: center; border: 2px solid #111; border-radius: .8rem; background: var(--bora-color-accent); color: #111; font-family: var(--bora-font-display); font-size: 1.2rem; box-shadow: 3px 3px 0 #fff; }
.about-process h3 { margin: 0 0 .35rem; color: var(--bora-color-accent); font-size: 1.25rem; text-transform: uppercase; }
.about-process p { margin: 0; color: rgb(255 255 255 / .76); font-size: .86rem; font-weight: 650; }

.about-boundaries { display: grid; gap: 1rem; }
.about-boundaries article { padding: 1.2rem; border: 3px solid #111; border-radius: 1.25rem; background: #fff; box-shadow: 7px 7px 0 #111; }
.about-boundaries article:last-child { background: var(--bora-color-secondary); }
.about-boundaries h3 { margin: 0 0 1rem; font-size: 1.7rem; text-transform: uppercase; }
.about-boundaries ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.about-boundaries li { position: relative; padding-left: 1.65rem; font-size: .88rem; font-weight: 750; }
.about-boundaries li::before { content: "✓"; position: absolute; left: 0; font-weight: 950; }
.about-boundaries article:last-child li::before { content: "×"; }

.about-after-grid { display: grid; gap: 1.5rem; align-items: end; }
.about-after-grid h2 { max-width: 12ch; margin: .9rem 0; text-transform: uppercase; }
.about-after-grid > div:first-child > p { max-width: 45rem; color: var(--bora-color-muted); font-weight: 650; }
.about-after-list { display: grid; gap: .7rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.about-after-list li { display: grid; gap: .12rem; padding: .8rem 1rem; border: 3px solid #111; border-radius: .8rem; background: var(--bora-color-background); box-shadow: 4px 4px 0 #111; }
.about-after-list strong { font-size: .92rem; text-transform: uppercase; }
.about-after-list span { color: var(--bora-color-muted); font-size: .78rem; font-weight: 650; }
.about-after-visual { position: relative; min-height: 28rem; padding: 1rem 1rem 0; border: 3px solid #111; border-radius: 1.5rem; background: var(--bora-color-positive); box-shadow: 8px 8px 0 #111; }
.about-after-visual img { display: block; width: min(100%, 22rem); max-height: 30rem; margin: 3.5rem auto 0; object-fit: contain; object-position: bottom; }
.about-after-visual .bora-speech { position: absolute; z-index: 1; top: 1rem; right: 1rem; left: 1rem; margin: 0; background: #fff; color: #111; }
.about-contact .bora-actions { max-width: 62rem; margin-inline: auto; }

@media (min-width: 42rem) {
  .about-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .72fr); }
  .about-intro-grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, .8fr); }
  .about-values-grid, .about-boundaries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-process li:last-child { grid-column: 1 / -1; }
  .about-after-grid { grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .65fr); }
}

@media (min-width: 64rem) {
  .about-values-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .about-process { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .about-process li { grid-template-columns: 1fr; }
  .about-process li:last-child { grid-column: auto; }
}