/* ==============================================
   Rocky O'Sullivans — About page styles
   Sits on top of main styles.css
   ============================================== */

.about-main { background: var(--surface-down); }

/* ---- Hero ---- */
.about-hero {
  position: relative;
  height: 70svh;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.about-hero-media { position: absolute; inset: 0; }

.about-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.about-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--surface-down) 0%,
    oklch(0.07 0.004 152 / 0.86) 35%,
    oklch(0.07 0.004 152 / 0.42) 65%,
    oklch(0.07 0.004 152 / 0.15) 100%);
  z-index: 1;
}

.about-hero-inner {
  position: relative;
  z-index: 2;
  padding: 0 clamp(28px, 6vw, 80px) clamp(48px, 7vh, 88px);
  max-width: 960px;
}

.about-hero-inner .kicker { margin-bottom: 18px; }

.about-h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(3rem, 10vw, 7.5rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.about-lead {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--text-1);
  max-width: 50ch;
  font-style: italic;
  text-shadow: 0 1px 12px oklch(0.07 0.004 152 / 0.6);
}

/* ---- Sections ---- */
.about-section {
  padding: clamp(72px, 12vh, 140px) clamp(28px, 5vw, 80px);
  position: relative;
}

.about-section:nth-of-type(even) {
  background: var(--surface);
}

.about-block {
  max-width: 760px;
  margin: 0 auto;
}

.about-block > .kicker { margin-bottom: 18px; }

.about-h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: clamp(32px, 4vh, 48px);
}

.about-prose {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.8;
  color: var(--text-2);
}

.about-prose p {
  margin-bottom: 22px;
  max-width: 64ch;
}

.about-prose strong { color: var(--text-1); font-weight: 600; }

.about-prose em {
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  font-size: 0.96em;
}

/* ---- Figure / image break ---- */
.about-figure {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.about-figure img {
  width: 100%;
  height: clamp(280px, 45vh, 540px);
  object-fit: cover;
  display: block;
}

.about-figure figcaption {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-align: center;
  padding: 18px clamp(28px, 5vw, 80px);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* ---- Stats grid ---- */
.about-stats-section { background: var(--surface); }

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 12px;
}

.about-stat {
  background: oklch(0.10 0.005 152 / 0.85);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-stat-num {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
}

.about-stat-label {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 10px;
}

.about-stat p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 36ch;
}

/* ---- Final CTA ---- */
.about-cta {
  padding: clamp(80px, 14vh, 160px) clamp(28px, 5vw, 80px);
  background:
    radial-gradient(ellipse at top, oklch(0.40 0.14 90 / 0.10), transparent 60%),
    var(--surface-down);
  text-align: center;
}

.about-cta .about-block { max-width: 640px; }
.about-cta .kicker { display: block; margin-bottom: 18px; }
.about-cta .about-h2 { text-align: center; }

.about-cta-text {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 36px;
}

.about-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Reveal default state ---- */
.about-main .reveal {
  opacity: 1;
  transform: none;
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .about-stats { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .about-h1 { font-size: clamp(2.4rem, 12vw, 4.5rem); }
  .about-h2 { font-size: clamp(1.8rem, 9vw, 3rem); }
}