/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   LawPracticeResponseTimeSection - "Right now vs With Smith.ai"

   Final Figma: TTiWFetCaKBJ5FBYu5Cktx, desktop node 80:7287 and
   mobile chart node 247:4327. The shared section/header classes
   own the shell; this file owns the chart and its responsive form.
   ============================================================ */

.law-practice-response-time {
  background: var(--background);
}

/* The container constrains width only. This wrapper owns the vertical rhythm. */
.law-practice-response-time__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;
}

/* ---- Desktop chart --------------------------------------- */

.law-practice-response-time__table {
  position:      relative;
  width:         100%;
  padding:       2rem 1.75rem;
  overflow:      hidden;
  background:    var(--secondary);
  border:        0;
  border-radius: var(--radius-lg);
  box-shadow:    inset 0 0 0 0.5px var(--border);
  box-sizing:    border-box;
}

.law-practice-response-time__solution-panel {
  position:      absolute;
  z-index:       0;
  top:           var(--spacing-4);
  right:         var(--spacing-4);
  bottom:        var(--spacing-4);
  left:          50%;
  background:    var(--card);
  border:        0;
  border-radius: var(--radius-md);
  box-shadow:    inset 0 0 0 0.5px var(--border);
}

.law-practice-response-time__head {
  position:              relative;
  z-index:               1;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  height:                3.5625rem;
}

.law-practice-response-time__label {
  display:     flex;
  align-items: center;
  padding-left: 0.25rem;
  color:       var(--muted-foreground);
  font-size:   var(--font-size-xl);
  line-height: var(--line-height-xl);
}

.law-practice-response-time__label--solution {
  padding-left: var(--spacing-7);
  color:        var(--popover-foreground);
  font-weight:  var(--font-weight-bold);
}

.law-practice-response-time__rows {
  position: relative;
  z-index:  1;
}

.law-practice-response-time__rows--mobile {
  display: none;
}

.law-practice-response-time__row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
}

.law-practice-response-time__cell {
  display:     flex;
  align-items: flex-start;
  gap:         var(--spacing-2);
  min-height:  4rem;
  padding:     var(--spacing-4) var(--spacing-2) var(--spacing-4) 0;
  box-sizing:  border-box;
}

.law-practice-response-time__cell--solution {
  padding: var(--spacing-4) 0 var(--spacing-4) var(--spacing-6);
}

.law-practice-response-time__rows--desktop
.law-practice-response-time__row:not(:last-child)
.law-practice-response-time__cell {
  box-shadow: inset 0 -0.5px 0 var(--opacity-neutral-20);
}

.law-practice-response-time__text {
  margin:       0;
  padding-left: 0.25rem;
  color:        var(--popover-foreground);
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
}

/* ---- Row icon circles ------------------------------------ */

.law-practice-response-time__circle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 auto;
  width:           var(--spacing-6);
  height:          var(--spacing-6);
  border-radius:   var(--radius-full);
}

.law-practice-response-time__circle svg {
  width:  var(--spacing-3);
  height: var(--spacing-3);
}

.law-practice-response-time__circle--problem {
  background: var(--opacity-primary-20);
  color:      var(--primary);
}

.law-practice-response-time__circle--solution {
  background: var(--info);
  color:      var(--card);
}

/* ---- Mobile cards ---------------------------------------- */

@media (max-width: 767px) {
  .law-practice-response-time__table {
    width:         calc(100% + 2rem);
    margin-inline: -1rem;
    padding:       0;
    overflow:      visible;
    background:    transparent;
    border:        0;
    border-radius: 0;
    box-shadow:    none;
  }

  .law-practice-response-time__solution-panel,
  .law-practice-response-time__head,
  .law-practice-response-time__rows--desktop {
    display: none;
  }

  .law-practice-response-time__rows--mobile {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-3);
  }

  .law-practice-response-time__row {
    display:        flex;
    flex-direction: column;
    padding:        var(--spacing-3);
    overflow:       hidden;
    background:     var(--secondary);
    border:         0;
    border-radius:  var(--radius-lg);
    box-shadow:     inset 0 0 0 0.5px var(--border);
  }

  .law-practice-response-time__cell {
    align-items: flex-start;
    gap:         var(--spacing-2);
    min-height:  0;
    padding:     var(--spacing-3);
    border:      0;
  }

  .law-practice-response-time__cell--solution {
    /* Preserve the Figma text measure while keeping the inset hairline out of
       the card's content-driven height. */
    padding-right: calc(var(--spacing-3) + 4px);
    background:    var(--card);
    border:        0;
    border-radius: var(--spacing-3);
    box-shadow:    inset 0 0 0 0.5px var(--opacity-neutral-20);
  }

  .law-practice-response-time__text {
    padding-top:  1px;
    padding-left: 0.25rem;
    font-size:    var(--font-size-sm);
    line-height:  var(--line-height-sm);
  }

  .law-practice-response-time__circle--solution svg {
    width:  0.875rem;
    height: 0.875rem;
  }
}