/* ============================================================================
   Conrad Legal Office — newconradlegaloffice.com
   File: assets/css/results.css
   Purpose: Case Results page — all section styles
   Depends on: tokens.css (imported below), components.css (loaded via HTML)
   BEM blocks: .res-hero, .res-contingency, .res-cases, .res-cta
   Breakpoints: 1024px | 768px | 480px
   ============================================================================ */

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


/* ============================================================================
   SHARED SECTION SPACING
   Consistent padding applied across all results page sections.
   ============================================================================ */

.res-hero,
.res-contingency,
.res-cases,
.res-cta {
  position: relative;
  padding-inline: clamp(1.5rem, 6vw, 8rem);
}


/* ============================================================================
   ANIMATION SYSTEM
   Pattern: .js-animate.anim-ready [data-anim] starts invisible.
   JS toggles .in-view → elements transition in via CSS.
   ============================================================================ */

/* Base hook — intentionally empty, JS reads this class */
.js-animate { /* empty hook */ }

/* When JS is active: hide elements and set up 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 is in viewport: reveal elements */
.js-animate.in-view [data-anim] {
  opacity:   1;
  transform: none;
}

/* Stagger delays for sequential child reveal */
.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 reduced-motion preference — skip all transforms/transitions */
@media (prefers-reduced-motion: reduce) {
  .js-animate.anim-ready [data-anim] {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}


/* ============================================================================
   SECTION 1 — CONTINGENCY HERO
   Beige-themed hero with background image. Contingency messaging + feature cards.
   Entrance animation: content slides up + fades on load.
   ============================================================================ */

.res-hero {
  position:         relative;
  background-color: var(--color-beige);
  color:            var(--color-blue-darkest);
  padding-top:      clamp(7rem, 10vw, 12rem);
  padding-bottom:   clamp(10rem, 14vw, 16rem);
  overflow:         hidden;
}

/* ── Hero background image + beige overlay ── */

.res-hero__bg {
  position:       absolute;
  inset:          0;
  z-index:        0;
  pointer-events: none;
}

.res-hero__bg-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
}

/* Beige-toned overlay */
.res-hero__bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background:
    radial-gradient(
      ellipse 80% 60% at 20% 30%,
      rgba(253, 247, 239, 0.4) 0%,
      transparent 70%
    ),
    linear-gradient(
      to top,
      rgba(253, 247, 239, 0.97) 0%,
      rgba(253, 247, 239, 0.8) 40%,
      rgba(253, 247, 239, 0.6) 100%
    );
}

/* ── Content container ── */

.res-hero__content {
  position:       relative;
  z-index:        1;
  max-width:      800px;
  margin-inline:  auto;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            clamp(1rem, 2vw, 1.5rem);
}

/* ── Eyebrow ── */

.res-hero__eyebrow {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.75rem;
  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-dark);
}

.res-hero__eyebrow-bar {
  display:          block;
  width:            2rem;
  height:           2px;
  background-color: var(--color-red);
  flex-shrink:      0;
}

/* ── Heading ── */

.res-hero__title {
  font-family: var(--font-serif);
  font-size:   var(--text-h1);
  font-weight: var(--fw-light);
  line-height: 1.05;
  color:       var(--color-blue-darkest);
  margin:      0;
}

/* ── Intro paragraph ── */

.res-hero__intro {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  color:       var(--color-blue);
  opacity:     0.8;
  margin:      0;
}

/* ── Disclaimer ── */

.res-hero__disclaimer {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  color:       var(--color-blue);
  opacity:     0.4;
  line-height: 1.5;
  margin:      0;
  font-style:  italic;
}

/* ── Feature cards — 3-column strip at hero bottom ── */

.res-hero__features {
  position:              relative;
  z-index:               1;
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(1rem, 2vw, 1.5rem);
  max-width:             1100px;
  margin-inline:         auto;
  margin-top:            clamp(3rem, 5vw, 4.5rem);
}

.res-hero__feature {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  text-align:       center;
  gap:              0.75rem;
  padding:          clamp(1.5rem, 2.5vw, 2rem);
  background-color: var(--color-white);
  border:           1px solid rgba(12, 13, 86, 0.06);
  border-radius:    10px;
  box-shadow:       0 2px 12px rgba(13, 13, 29, 0.06);
  transition:       box-shadow 0.25s ease,
                    border-color 0.25s ease,
                    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.res-hero__feature:hover {
  border-color: rgba(221, 68, 68, 0.3);
  box-shadow:   0 8px 30px rgba(13, 13, 29, 0.1),
                0 0 0 1px rgba(221, 68, 68, 0.15);
  transform:    translateY(-6px);
}

/* ── Icon with pulse ring on hover ── */

.res-hero__feature-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            3.25rem;
  height:           3.25rem;
  border-radius:    50%;
  background-color: rgba(221, 68, 68, 0.08);
  border:           1px solid rgba(221, 68, 68, 0.2);
  color:            var(--color-red-dark);
  position:         relative;
  transition:       background-color 0.3s ease, transform 0.3s ease;
}

/* Pulse ring */
.res-hero__feature-icon::after {
  content:       '';
  position:      absolute;
  inset:         -4px;
  border-radius: 50%;
  border:        2px solid rgba(221, 68, 68, 0.25);
  opacity:       0;
  transform:     scale(0.85);
  transition:    opacity 0.4s ease, transform 0.4s ease;
}

.res-hero__feature:hover .res-hero__feature-icon {
  background-color: rgba(221, 68, 68, 0.15);
  transform:        scale(1.08);
}

.res-hero__feature:hover .res-hero__feature-icon::after {
  opacity:   1;
  transform: scale(1);
}

.res-hero__feature-icon [data-lucide] {
  width:  1.25rem;
  height: 1.25rem;
}

.res-hero__feature-title {
  font-family: var(--font-serif);
  font-size:   var(--text-h5);
  font-weight: var(--fw-regular);
  color:       var(--color-blue-darkest);
  line-height: 1.3;
  transition:  color 0.3s ease;
}

.res-hero__feature:hover .res-hero__feature-title {
  color: var(--color-red-dark);
}

.res-hero__feature-desc {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  font-weight: var(--fw-regular);
  color:       var(--color-blue);
  opacity:     0.6;
  line-height: 1.55;
}

/* ── Staggered entrance for feature cards ── */

/* Hidden state — cards start below and invisible */
.res-hero__features.anim-ready .res-hero__feature {
  opacity:   0;
  transform: translateY(60px);
}

/* Keyframe — smooth fade-up from bottom */
@keyframes resFeatureFadeUp {
  from {
    opacity:   0;
    transform: translateY(60px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Revealed state — staggered keyframe animation */
.res-hero__features.in-view .res-hero__feature:nth-child(1) {
  animation: resFeatureFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.res-hero__features.in-view .res-hero__feature:nth-child(2) {
  animation: resFeatureFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
.res-hero__features.in-view .res-hero__feature:nth-child(3) {
  animation: resFeatureFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}


/* ============================================================================
   SECTION 3 — CASE ACCORDION
   Beige background. Section header + accordion list.
   Premium hover states, smooth max-height transitions, accessible markup.
   ============================================================================ */

.res-cases {
  background-color: var(--color-beige);
  padding-block:    clamp(5rem, 8vw, 9rem);
}

/* ── Container ── */

.res-cases__container {
  max-width:     1100px;
  margin-inline: auto;
  display:       flex;
  flex-direction: column;
  gap:           clamp(3rem, 5vw, 5rem);
}

/* ── Section header ── */

.res-cases__header {
  display:        flex;
  flex-direction: column;
  gap:            clamp(0.75rem, 1.5vw, 1.25rem);
  max-width:      680px;
}

/* ── Section eyebrow ── */

.res-cases__eyebrow {
  display:        flex;
  align-items:    center;
  gap:            0.75rem;
  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);
}

.res-cases__eyebrow-bar {
  display:          block;
  width:            2rem;
  height:           1px;
  background-color: var(--color-red);
  flex-shrink:      0;
}

/* ── Section heading ── */

.res-cases__heading {
  font-family: var(--font-serif);
  font-size:   var(--text-h2);
  font-weight: var(--fw-regular);
  color:       var(--color-blue-darkest);
  line-height: 1.1;
  margin:      0;
}

/* ── Section sub-text ── */

.res-cases__subtext {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  color:       var(--color-blue-darkest);
  opacity:     0.65;
  line-height: 1.65;
  margin:      0;
}

/* ── Case grid ── */

.res-cases__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   clamp(1.25rem, 2.5vw, 2rem);
}

/* ── Case card ── */

.res-cases__card {
  background:      var(--color-white);
  border-radius:   8px;
  padding:         clamp(1.5rem, 3vw, 2.25rem);
  display:         flex;
  flex-direction:  column;
  gap:             1rem;
  transition:      box-shadow 0.3s ease, transform 0.3s ease;
}

.res-cases__card:hover {
  box-shadow: 0 8px 30px rgba(12, 13, 86, 0.08);
  transform:  translateY(-2px);
}

/* ── Card meta row (tag + date) ── */

.res-cases__card-meta {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  flex-wrap:   wrap;
}

/* ── Card title ── */

.res-cases__card-title {
  font-family: var(--font-serif);
  font-size:   var(--text-h5);
  font-weight: var(--fw-regular);
  color:       var(--color-blue-darkest);
  line-height: 1.25;
  margin:      0;
}

/* ── Card body text ── */

.res-cases__card-text {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--color-blue-darkest);
  opacity:     0.7;
  line-height: 1.65;
  margin:      0;
}

/* ── Category tag pills ── */

.res-cases__tag {
  display:        inline-flex;
  align-items:    center;
  font-family:    var(--font-sans);
  font-size:      0.625rem;
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding:        0.25em 0.625em;
  border-radius:  3px;
  white-space:    nowrap;
}

/* Tenant Defense — deep navy pill */
.res-cases__tag--defense {
  background-color: var(--color-blue-electric);
  color:            var(--color-white);
}

/* Personal Injury — red-tinted pill */
.res-cases__tag--injury {
  background-color: rgba(221, 68, 68, 0.1);
  color:            var(--color-red-dark);
  outline:          1px solid rgba(187, 50, 50, 0.2);
}

/* Habitability — blue with slight tint */
.res-cases__tag--habitability {
  background-color: rgba(31, 32, 74, 0.1);
  color:            var(--color-blue);
  outline:          1px solid rgba(31, 32, 74, 0.2);
}

/* Wrongful Death — dark, authoritative */
.res-cases__tag--wrongful-death {
  background-color: var(--color-blue-darkest);
  color:            var(--color-white);
}

/* Criminal Defense — bold red pill */
.res-cases__tag--criminal {
  background-color: var(--color-red);
  color:            var(--color-white);
}

/* ── Date ── */

.res-cases__date {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  font-weight: var(--fw-regular);
  color:       var(--color-blue-light);
  letter-spacing: 0.04em;
}

/* ── Outcome highlight box ── */

.res-cases__outcome {
  background-color: rgba(12, 13, 86, 0.04);
  border-left:      3px solid var(--color-blue-electric);
  padding:          1rem 1.25rem;
  border-radius:    0 4px 4px 0;
  display:          flex;
  flex-direction:   column;
  gap:              0.4rem;
  margin-top:       auto;
}

.res-cases__outcome-label {
  font-family:    var(--font-sans);
  font-size:      0.625rem;
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--color-blue-electric);
}

.res-cases__outcome-text {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: var(--fw-bold);
  color:       var(--color-blue-darkest);
  line-height: 1.6;
  margin:      0;
}


/* ============================================================================
   SECTION 4 — DISCLAIMER + CTA
   Dark background. Centered layout. Disclaimer, H2, body, two buttons.
   ============================================================================ */

.res-cta {
  background-color: var(--color-blue-darkest);
  color:            var(--color-white);
  padding-block:    clamp(5rem, 8vw, 9rem);
  /* Subtle top border accent */
  border-top:       1px solid rgba(255, 255, 255, 0.06);
}

/* ── Inner centered container ── */

.res-cta__inner {
  max-width:      700px;
  margin-inline:  auto;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            clamp(1rem, 2vw, 1.75rem);
}

/* ── Disclaimer (italic, low opacity) ── */

.res-cta__disclaimer {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  font-style:  italic;
  color:       var(--color-white);
  opacity:     0.4;
  line-height: 1.6;
  margin:      0;
}

/* ── H2 heading ── */

.res-cta__heading {
  font-family: var(--font-serif);
  font-size:   var(--text-h2);
  font-weight: var(--fw-regular);
  color:       var(--color-white);
  line-height: 1.1;
  margin:      0;
}

/* ── Body paragraph ── */

.res-cta__body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  color:       var(--color-white);
  opacity:     0.7;
  line-height: 1.65;
  margin:      0;
}

/* ── Button row ── */

.res-cta__actions {
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-wrap:      wrap;
  gap:            clamp(0.75rem, 1.5vw, 1.25rem);
  padding-top:    clamp(0.5rem, 1vw, 1rem);
}


/* ============================================================================
   RESPONSIVE — 1024px
   Accordion trigger switches to a slightly more compact layout.
   ============================================================================ */

@media (max-width: 1024px) {
  .res-hero__features {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
}


/* ============================================================================
   RESPONSIVE — 768px
   Stats stack vertically; divider becomes horizontal.
   Accordion trigger meta row wraps more gracefully.
   ============================================================================ */

@media (max-width: 768px) {
  /* Cases grid: single column on tablet */
  .res-cases__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   RESPONSIVE — 480px
   Hero title line breaks adjusted. CTA buttons stack vertically.
   ============================================================================ */

@media (max-width: 480px) {
  /* Hero: remove explicit line break on small screens */
  .res-hero__title br {
    display: none;
  }

  /* CTA buttons: stack on narrow screens */
  .res-cta__actions {
    flex-direction: column;
    align-items:    stretch;
  }

  .res-cta__actions .btn {
    width:           100%;
    justify-content: center;
  }

}