/* ============================================================================
   Conrad Legal Office — newconradlegaloffice.com
   File: assets/css/about.css
   Purpose: About Us page — all section styles
   Depends on: tokens.css (imported below), components.css (loaded via HTML)
   Breakpoints: 1024px | 768px | 480px
   ============================================================================ */

@import url('./tokens.css');


/* ============================================================================
   SHARED SECTION SPACING
   Applied to every full-width section on the about page.
   padding-block: clamp(5rem → 9rem) driven by 8vw
   padding-inline: clamp(1.5rem → 8rem) driven by 6vw
   ============================================================================ */

.about-hero,
.about-intro,
.about-attorney,
.about-philosophy,
.about-cta {
  padding-block:  clamp(5rem, 8vw, 9rem);
  padding-inline: clamp(1.5rem, 6vw, 8rem);
  position: relative;
}


/* ============================================================================
   ANIMATION SYSTEM
   Pattern: .js-animate.anim-ready [data-anim] starts invisible.
   JS toggles .in-view → elements transition in.
   Stagger is applied via nth-child delay rules below.
   ============================================================================ */

/* Base: element is visible by default (before JS class is applied) */
.js-animate { /* intentionally empty — just a hook */ }

/* When JS is ready: hide elements and prepare transition */
.js-animate.anim-ready [data-anim] {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When section enters viewport: reveal elements */
.js-animate.in-view [data-anim] {
  opacity:   1;
  transform: none;
}

/* Stagger delays — applies to direct children with [data-anim] */
.js-animate.anim-ready [data-anim]:nth-child(1) { transition-delay: 0s;    }
.js-animate.anim-ready [data-anim]:nth-child(2) { transition-delay: 0.1s;  }
.js-animate.anim-ready [data-anim]:nth-child(3) { transition-delay: 0.2s;  }
.js-animate.anim-ready [data-anim]:nth-child(4) { transition-delay: 0.3s;  }
.js-animate.anim-ready [data-anim]:nth-child(5) { transition-delay: 0.4s;  }

/* Respect user motion preference: skip all animation */
@media (prefers-reduced-motion: reduce) {
  .js-animate.anim-ready [data-anim] {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}


/* ============================================================================
   NAVBAR SPACER
   Reserves space at the top of the hero for the fixed navbar (~5rem / 80px).
   Adjust this value if the navbar height changes.
   ============================================================================ */

.about-nav-spacer {
  height: clamp(4rem, 6vw, 5rem);
}


/* ============================================================================
   SECTION 1 — HERO
   Dark background, CSS @keyframes animations on load (no JS).
   ============================================================================ */

.about-hero {
  background-color: var(--color-blue-darkest);
  /* Remove equal block padding — we add top via the spacer and control bottom */
  padding-block-start: 0;
  padding-block-end:   clamp(5rem, 8vw, 9rem);
  overflow: hidden;
}

/* Inner container — max width + centered */
.about-hero__inner {
  position:   relative;
  z-index:    1;
  max-width:  800px;
  /* Left-aligned for a premium editorial feel */
}

/* ── CSS @keyframes — defined here, applied below ────────────────────────── */

@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hero-slide-up {
  from {
    opacity:   0;
    transform: translateY(32px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Eyebrow label: fades in at 0s */
.about-hero__eyebrow {
  display:        block;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--color-red);
  margin-bottom:  clamp(1rem, 2vw, 1.5rem);

  /* Animation */
  animation: hero-fade-in 0.6s ease both;
  animation-delay: 0s;
}

/* H1: slides up, 0.3s delay */
.about-hero__heading {
  font-family:   var(--font-serif);
  font-weight:   var(--fw-light);
  font-size:     var(--text-h1);
  line-height:   1.05;
  color:         var(--color-white);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);

  /* Animation */
  animation: hero-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.3s;
}

/* Paragraph: slides up, 0.5s delay */
.about-hero__body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: 1.7;
  color:       var(--color-white);
  opacity:     0.75;
  max-width:   640px;

  /* Animation */
  animation: hero-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.5s;
}

/* Decorative gradient fade at the bottom of the hero, blending into next section */
.about-hero__fade {
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  height:           6rem;
  background:       linear-gradient(
    to bottom,
    transparent,
    rgba(13, 13, 29, 0.35)
  );
  pointer-events:   none;
  z-index:          0;
}

/* Honor reduced-motion: disable CSS @keyframes too */
@media (prefers-reduced-motion: reduce) {
  .about-hero__eyebrow,
  .about-hero__heading,
  .about-hero__body {
    animation: none;
  }
}


/* ============================================================================
   SECTION 2 — INTRO STATEMENT
   Light beige background, centered content, red rule accent.
   ============================================================================ */

.about-intro {
  background-color: var(--color-beige);
  text-align:       center;
}

/* Inner container — narrower max-width for centered editorial text */
.about-intro__inner {
  max-width: 900px;
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  align-items:    center;
}

/* Red 2px horizontal rule accent */
.about-intro__rule {
  display:          block;
  width:            3rem;
  height:           2px;
  background-color: var(--color-red);
  margin-bottom:    clamp(1rem, 2vw, 1.5rem);
  flex-shrink:      0;
}

/* Section heading */
.about-intro__heading {
  font-family:   var(--font-serif);
  font-weight:   var(--fw-regular);
  font-size:     var(--text-h2);
  line-height:   1.1;
  color:         var(--color-blue-darkest);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Body paragraph */
.about-intro__body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: 1.75;
  color:       var(--color-blue);
  max-width:   72ch;
}


/* ============================================================================
   SECTION 3 — ATTORNEY BIO
   Dark navy background, 2-column layout: photo | content.
   Mobile: stacked, photo first.
   ============================================================================ */

.about-attorney {
  background-color: var(--color-blue-dark);
}

/* 2-column grid with a gap */
.about-attorney__inner {
  max-width:   1200px;
  margin:      0 auto;
  display:     grid;
  grid-template-columns: 1fr 1.55fr;
  gap:         clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* ── Photo column ─────────────────────────────────────────────────────────── */

.about-attorney__photo-col {
  position: relative;
}

/* Styled placeholder: navy bg, 3:4 portrait ratio */
.about-attorney__photo-placeholder {
  aspect-ratio:     3 / 4;
  background-color: var(--color-blue-electric);
  border-radius:    4px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            100%;
  overflow:         hidden;
}

.about-attorney__photo {
  display:       block;
  width:         100%;
  aspect-ratio:  3 / 4;
  object-fit:    cover;
  object-position: center top;
  border-radius: 4px;
}

.about-attorney__photo-label {
  font-family:    var(--font-sans);
  font-size:      var(--text-sm);
  color:          var(--color-gray-mid);
  letter-spacing: 0.06em;
  user-select:    none;
}

/* ── Bio content column ───────────────────────────────────────────────────── */

/* Attorney name (H2) */
.about-attorney__name {
  font-family:   var(--font-serif);
  font-weight:   var(--fw-regular);
  font-size:     var(--text-h2);
  line-height:   1.05;
  color:         var(--color-white);
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

/* Role / title */
.about-attorney__role {
  font-family:    var(--font-sans);
  font-size:      var(--text-sm);
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--color-red-light);
  margin-bottom:  clamp(0.75rem, 1.5vw, 1rem);
}

/* Red 2px accent rule below role */
.about-attorney__rule {
  display:          block;
  width:            3rem;
  height:           2px;
  background-color: var(--color-red);
  margin-bottom:    clamp(1.25rem, 2.5vw, 2rem);
}

/* Primary bio paragraph */
.about-attorney__bio {
  font-family:   var(--font-sans);
  font-size:     var(--text-base);
  line-height:   1.75;
  color:         var(--color-white);
  opacity:       0.85;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Sub-section wrapper (icon + heading + paragraph) */
.about-attorney__sub {
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

.about-attorney__sub:last-of-type {
  margin-bottom: clamp(2rem, 3.5vw, 2.5rem);
}

/* Icon + heading side by side */
.about-attorney__sub-header {
  display:     flex;
  align-items: center;
  gap:         0.625rem;
  margin-bottom: 0.625rem;
}

/* Lucide icon in sub-header */
.about-attorney__sub-icon {
  width:        var(--icon-size-lg);
  height:       var(--icon-size-lg);
  stroke-width: var(--icon-stroke);
  color:        var(--color-red-light);
  flex-shrink:  0;
}

/* Sub-heading (H4) */
.about-attorney__sub-heading {
  font-family:  var(--font-serif);
  font-weight:  var(--fw-regular);
  font-size:    var(--text-h4);
  line-height:  1.2;
  color:        var(--color-white);
  margin:       0;
}

/* Sub-section body paragraph */
.about-attorney__sub-body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: 1.7;
  color:       var(--color-white);
  opacity:     0.75;
  /* Indent slightly to align with heading text (past icon width + gap) */
  padding-left: calc(var(--icon-size-lg) + 0.625rem);
}


/* ============================================================================
   SECTION 4 — PHILOSOPHY / WHY CHOOSE US
   Beige background, 3-column card grid, stagger animation.
   ============================================================================ */

.about-philosophy {
  background-color: var(--color-beige);
}

.about-philosophy__inner {
  max-width: 1200px;
  margin:    0 auto;
}

/* Eyebrow label */
.about-philosophy__eyebrow {
  display:        block;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--color-red);
  margin-bottom:  clamp(0.75rem, 1.5vw, 1rem);
}

/* Section heading */
.about-philosophy__heading {
  font-family:   var(--font-serif);
  font-weight:   var(--fw-regular);
  font-size:     var(--text-h2);
  line-height:   1.1;
  color:         var(--color-blue-darkest);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* 3-column card grid */
.about-philosophy__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(1.25rem, 2.5vw, 2rem);
  list-style:            none;
}

/* ── Individual card ─────────────────────────────────────────────────────── */

.about-philosophy__card {
  background-color: var(--color-white);
  border-radius:    4px;
  padding:          clamp(1.5rem, 3vw, 2.25rem);
  /* Subtle left border accent */
  border-left:      3px solid var(--color-red-dark);
  /* Soft shadow for depth on beige bg */
  box-shadow:       0 2px 12px rgba(13, 13, 29, 0.07),
                    0 1px  3px rgba(13, 13, 29, 0.05);
  transition:       transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-philosophy__card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 8px 28px rgba(13, 13, 29, 0.12),
              0 2px  6px rgba(13, 13, 29, 0.08);
}

/* Icon box: 48px navy square with white icon */
.about-philosophy__icon-box {
  width:            48px;
  height:           48px;
  background-color: var(--color-blue-electric);
  border-radius:    8px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  margin-bottom:    clamp(1rem, 2vw, 1.25rem);
  flex-shrink:      0;
}

.about-philosophy__icon {
  width:        var(--icon-size-md);
  height:       var(--icon-size-md);
  stroke-width: var(--icon-stroke);
  color:        var(--color-white);
}

/* Card title */
.about-philosophy__card-title {
  font-family:   var(--font-serif);
  font-weight:   var(--fw-regular);
  font-size:     var(--text-h5);
  line-height:   1.2;
  color:         var(--color-blue-darkest);
  margin-bottom: 0.625rem;
}

/* Card body */
.about-philosophy__card-body {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  line-height: 1.7;
  color:       var(--color-blue);
  margin:      0;
}

/*
   Card stagger animation — the philosophy grid uses its own stagger
   because cards are inside a nested grid, not direct children of .js-animate.
   We target .about-philosophy__card directly with nth-child delay overrides.
*/
.about-philosophy.anim-ready .about-philosophy__card[data-anim]:nth-child(1) {
  transition-delay: 0.1s;
}
.about-philosophy.anim-ready .about-philosophy__card[data-anim]:nth-child(2) {
  transition-delay: 0.2s;
}
.about-philosophy.anim-ready .about-philosophy__card[data-anim]:nth-child(3) {
  transition-delay: 0.3s;
}


/* ============================================================================
   SECTION 5 — FINAL CTA
   Dark background, centered content, two buttons side by side.
   ============================================================================ */

.about-cta {
  background-color: var(--color-blue-darkest);
  text-align:       center;
}

.about-cta__inner {
  max-width: 720px;
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  align-items:    center;
}

/* H3 heading */
.about-cta__heading {
  font-family:   var(--font-serif);
  font-weight:   var(--fw-light);
  font-size:     var(--text-h3);
  line-height:   1.1;
  color:         var(--color-white);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Body paragraph */
.about-cta__body {
  font-family:   var(--font-sans);
  font-size:     var(--text-base);
  line-height:   1.7;
  color:         var(--color-white);
  opacity:       0.75;
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
  max-width:     55ch;
}

/* Button group: side by side with gap, wrap on small screens */
.about-cta__buttons {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             clamp(0.75rem, 2vw, 1.25rem);
}


/* ============================================================================
   RESPONSIVE BREAKPOINTS
   1024px → tighten grid gaps
   768px  → collapse 2-col attorney layout; reduce heading sizes
   480px  → single-column cards, tighten spacing
   ============================================================================ */

/* ── 1024px ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  .about-attorney__inner {
    grid-template-columns: 1fr 1.75fr;
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .about-philosophy__grid {
    gap: 1.25rem;
  }

}

/* ── 768px ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Attorney: stack vertically, photo on top */
  .about-attorney__inner {
    grid-template-columns: 1fr;
  }

  /* Photo column order: comes first on mobile (default DOM order already handles this) */
  .about-attorney__photo-col {
    order: -1;
  }

  /* Limit photo placeholder height on mobile so it doesn't dominate */
  .about-attorney__photo-placeholder {
    aspect-ratio: 4 / 3;
    max-height:   340px;
  }

  /* Remove sub-body indent on narrow screens — it squeezes badly */
  .about-attorney__sub-body {
    padding-left: 0;
  }

  /* Philosophy: 2-column cards on tablet */
  .about-philosophy__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CTA buttons: stack vertically on tablet and below */
  .about-cta__buttons {
    flex-direction: column;
    align-items:    stretch;
  }

  .about-cta__buttons .btn {
    justify-content: center;
    width:           100%;
  }

}

/* ── 480px ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Philosophy: single column on small phones */
  .about-philosophy__grid {
    grid-template-columns: 1fr;
  }

  /* Tighten card stagger — feels sluggish on mobile with too much delay */
  .about-philosophy.anim-ready .about-philosophy__card[data-anim]:nth-child(1),
  .about-philosophy.anim-ready .about-philosophy__card[data-anim]:nth-child(2),
  .about-philosophy.anim-ready .about-philosophy__card[data-anim]:nth-child(3) {
    transition-delay: 0.1s;
  }

  /* Photo placeholder: fixed height on small phones */
  .about-attorney__photo-placeholder {
    aspect-ratio: unset;
    height: 260px;
  }

}