/* ============================================================
   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;
  }
}


/* ============================================================
   LawPracticeIntegrationsSection — header + full-bleed logo reel

   Figma file VX9tmGCEcVnJ7Fo9Fk8gee, node 6298:4410.
   See LawPracticeIntegrationsSection.figma.md.

   The frame is `.hp-section` + `.container` + the shared section
   header, and the reel is `LogoReel`. There is no `__content`
   wrapper here (unlike the other sections on this page): the reel is
   a direct child of `.hp-section` — it has to escape the container
   to run full-bleed — so `.hp-section`'s own 64px gap already
   separates it from the header, which is the Figma value.
   ============================================================ */

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


/* ---- Logo reel ---------------------------------------------
   `LogoReel` is entirely custom-property driven; these are the
   Figma values, following the same scoping pattern
   PartnerIntegrationsSection uses. Without them the reel falls back
   to its 4rem default logo height, which is ~3× the design.

   Geometry from the final reel frame, node 2007:6173 (1701 x 64): eight
   logos, each on a 40px-tall canvas at y=12, with a uniform 96px between
   canvases, then the "+7,000 other integrations" tail.

   Every asset is exported on that same 40px canvas with its mark centred, so
   one fixed 40px logo height reproduces the design's varied optical sizes
   (Lawmatics' art is 16px, Law Ruler's 27px, and so on). That replaces the
   earlier revision's 24px cap + 196px fixed slots — with per-asset canvases
   there is nothing left for a slot to normalise.

   HEIGHT — the part the custom properties alone cannot express. The primitive
   models the 64px track (`--logo-reel-track-height`) but also wraps it in
   `padding: var(--spacing-6) 0` for its other consumers, which would lay the
   reel out at 24 + 64 + 24 = 112px. Scoped fix, this section only (LogoReel is
   shared with PartnerIntegrationsSection and must not change): drop the
   padding and pin the box to the frame's 64px. The primitive's own
   `overflow: hidden` still does the clipping. */
.law-practice-integrations .logo-reel {
  --logo-reel-edge-fade-width:  clamp(80px, calc((100vw - 1024px) / 2), 244px);
  --logo-reel-gap:              96px;
  --logo-reel-logo-height:      40px;
  --logo-reel-logo-max-height:  none;
  --logo-reel-logo-max-width:   none;
  --logo-reel-logo-slot-width:  auto;
  --logo-reel-track-height:     64px;
  --logo-reel-track-min-height: 64px;

  /* Overrides the primitive's `padding: var(--spacing-6) 0`. */
  padding:     0;
  height:      64px;
  display:     flex;
  align-items: center;
  width:       100%;
}

/* The "+7,000 other integrations" tail — 16/24 muted, per the frame. */
.law-practice-integrations .logo-reel__trailing {
  font-size:   var(--font-size-base);     /* 16px */
  line-height: var(--line-height-base);   /* 24px */
  color:       var(--muted-foreground);
}

/* The scroller is a flex item now. It must keep its `width: max-content`
   intact — if it shrank to the section width the marquee's -25% keyframe
   would no longer land flush on track 2 and the loop would visibly jump.
   The edge fades are `position: absolute`, so they stay out of flow and
   still span the full 64px (top: 0 / bottom: 0). */
.law-practice-integrations .logo-reel__scroller {
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .law-practice-integrations .logo-reel {
    --logo-reel-edge-fade-width: 60px;
  }
}

@media (max-width: 767px) {
  .law-practice-integrations .logo-reel {
    --logo-reel-edge-fade-width: 2rem;
    --logo-reel-gap:             56px;
    --logo-reel-logo-height:     32px;
  }
}

/* Matches the primitive's own reduced-motion handling in its other
   consumers: a static track sizes to its content instead of being
   pinned to the marquee's fixed height. The 64px frame above only makes
   sense for the clipped marquee — here the track wraps onto as many
   rows as it needs, so the fixed height and the zeroed padding have to
   be handed back or the extra rows would be clipped. */
@media (prefers-reduced-motion: reduce) {
  .law-practice-integrations .logo-reel {
    --logo-reel-track-height: auto;

    display: block;
    height:  auto;
    padding: var(--spacing-6) 0;
  }
}

/* ============================================================
   LogoReel — infinite-scroll logo carousel with edge fades.
   Relies on --background from the parent context for fade colour.
   Design tokens from src/styles/tokens.css.
   ============================================================ */

.logo-reel {
  --logo-reel-edge-fade-width: 200px;
  --logo-reel-gap: 3.5rem;
  --logo-reel-logo-height: 4rem;
  --logo-reel-logo-max-height: none;
  --logo-reel-logo-max-width: none;
  --logo-reel-logo-slot-width: auto;
  --logo-reel-track-height: auto;
  --logo-reel-track-min-height: 0;
  --logo-reel-pad-y: var(--spacing-6);   /* 24px above + below the logo row */
  /* Room above the row for group-label pills. 0 unless a logo carries a
     `label`, in which case the component sets `data-has-labels`. */
  --logo-reel-label-space: 0px;

  position: relative;
  width:    100%;
  padding:  calc(var(--logo-reel-pad-y) + var(--logo-reel-label-space)) 0 var(--logo-reel-pad-y);
  overflow: hidden;
}

/* Pill height (24px) + the 10px it clears the logo row by. */
.logo-reel[data-has-labels] {
  --logo-reel-label-space: 34px;
}

/* ---- Edge fades ----
   Two mechanisms, picked by `edgeFade` (see LogoReel.tsx):

   `wash` — an opaque gradient in `--background` painted OVER the logos. The
   default, and what every consumer on a flat surface uses.

   `mask` — the reel itself is masked, so the logos fade to transparent and the
   backdrop shows through unchanged. Required over a textured backdrop: a wash
   there is a flat patch of colour sitting on top of the texture, visible as a
   smooth rectangle the width of the fade. */

/* Left and right wash fades — colour inherits from parent section */
.logo-reel[data-edge-fade="wash"]::before,
.logo-reel[data-edge-fade="wash"]::after {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  width:          var(--logo-reel-edge-fade-width);
  pointer-events: none;
  z-index:        1;
}

.logo-reel[data-edge-fade="wash"]::before {
  left:       0;
  background: linear-gradient(to right, var(--background) 30%, transparent);
}

.logo-reel[data-edge-fade="wash"]::after {
  right:      0;
  background: linear-gradient(to left, var(--background) 30%, transparent);
}

/* Masked edges. The reel's own box is masked rather than the scroller, which
   translates — a mask on a moving element would travel with it. */
.logo-reel[data-edge-fade="mask"] {
  -webkit-mask-image: linear-gradient(to right,
                        transparent,
                        #000 var(--logo-reel-edge-fade-width),
                        #000 calc(100% - var(--logo-reel-edge-fade-width)),
                        transparent);
          mask-image: linear-gradient(to right,
                        transparent,
                        #000 var(--logo-reel-edge-fade-width),
                        #000 calc(100% - var(--logo-reel-edge-fade-width)),
                        transparent);
}

/* Scroller — flex row of 4 identical tracks; animates to exactly -25% (= 1 track width). */
.logo-reel__scroller {
  display:   flex;
  width:     max-content;
  animation: logo-reel-scroll var(--logo-reel-duration) linear infinite;
}

/* Each track holds all logos once. padding-right = gap so the trailing space is baked in,
   making each track's width identical to (logos + n gaps). -25% lands flush on track 2. */
.logo-reel__track {
  display:       flex;
  align-items:   center;
  gap:           var(--logo-reel-gap);
  height:        var(--logo-reel-track-height);
  min-height:    var(--logo-reel-track-min-height);
  padding-right: var(--logo-reel-gap);
  flex-shrink:   0;
}

@keyframes logo-reel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .logo-reel {
    --logo-reel-track-height: auto;
  }

  .logo-reel::before,
  .logo-reel::after {
    display: none;
  }

  .logo-reel[data-edge-fade="mask"] {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .logo-reel__scroller {
    animation: none;
    width: 100%;
  }

  .logo-reel__track[aria-hidden="true"] {
    display: none;
  }

  .logo-reel__track:not([aria-hidden="true"]) {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }

  /* The wrapped fallback has no single row for a hanging pill or a group rule
     to sit against, so both are dropped and the extra top padding with them. */
  .logo-reel[data-has-labels] {
    --logo-reel-label-space: 0px;
  }

  .logo-reel__label,
  .logo-reel__divider {
    display: none;
  }
}

.logo-reel__wrap {
  position:    relative;
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       var(--logo-reel-logo-slot-width);
  flex-shrink: 0;
}

/* Group label — a pill hung above the logo that opens the group, left-aligned
   with it. Absolute so it never widens the slot or shifts the row's rhythm. */
.logo-reel__label {
  position:      absolute;
  left:          0;
  bottom:        calc(100% + 10px);
  padding:       var(--spacing-1) 0.875rem;   /* 4px 14px — 14 is off the spacing scale */
  background:    var(--card);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);     /* 12px */
  line-height:   var(--line-height-xs);   /* 16px */
  font-weight:   var(--font-weight-medium);
  color:         var(--muted-foreground);
  white-space:   nowrap;
}

/* Hairline between two labelled groups. Zero-width, so it inherits a full gap
   on each side; it spans the logo row plus the label space above it. */
.logo-reel__divider {
  align-self:  flex-start;
  flex:        0 0 auto;
  width:       0;
  height:      calc(var(--logo-reel-logo-height) + var(--logo-reel-label-space));
  margin-top:  calc(-1 * var(--logo-reel-label-space));
  border-left: 0.75px solid var(--border);
}

/* Optional text item after the last logo. It is not a logo, so it opts out of
   the fixed slot width and sizes to its own copy; everything visual (font,
   colour) is the consumer's call. */
.logo-reel__trailing {
  width:       auto;
  white-space: nowrap;
}

/* Images are @2x — display at half their natural size.
   64px = half of 128px native height. width: auto preserves aspect ratio. */
.logo-reel__img {
  display:    block;
  height:     var(--logo-reel-logo-height);
  max-width:  var(--logo-reel-logo-max-width);
  max-height: var(--logo-reel-logo-max-height);
  width:      auto;
  object-fit: contain;
}

/* Dark scheme — invert monochrome logos */
.logo-reel[data-scheme="dark"] .logo-reel__img {
  filter: invert(1) brightness(0.85);
}


/* ============================================================
   Mobile landscape (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .logo-reel {
    --logo-reel-edge-fade-width: 80px;
    --logo-reel-gap: 2rem;
    --logo-reel-logo-height: 2rem;
    --logo-reel-pad-y: var(--spacing-7);
  }
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:      center;
  border:           1px solid transparent;
  box-sizing:       border-box;
  cursor:           pointer;
  display:          inline-flex;
  flex-shrink:      0;
  justify-content:  center;
  overflow:         hidden;
  text-decoration:  none;
  user-select:      none;
  white-space:      nowrap;
  background-clip:  padding-box;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
  --btn-gap:   0.25rem;
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
  --btn-gap:   0.375rem;
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1rem;              /* 8px 16px → height 36px */
  --btn-gap:   0.375rem;
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
  --btn-gap:   0.5rem;
}

.btn[data-icon-only="true"] {
  padding: 0;
}

.btn[data-size="xs"][data-icon-only="true"] {
  width:  1.625rem; /* 26px */
  height: 1.625rem;
}

.btn[data-size="sm"][data-icon-only="true"] {
  width:  2rem; /* 32px */
  height: 2rem;
}

.btn[data-size="md"][data-icon-only="true"] {
  width:  2.25rem; /* 36px */
  height: 2.25rem;
}

.btn[data-size="lg"][data-icon-only="true"] {
  width:  2.5rem; /* 40px */
  height: 2.5rem;
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"][data-tone="default"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"][data-tone="default"] {
  background-color: transparent;
  border-color:     var(--primary);
  color:            var(--primary);
}

.btn[data-variant="primary"][data-tone="accent"] {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--foreground);
}

.btn[data-variant="secondary"][data-tone="accent"] {
  background-color: transparent;
  border-color:     var(--accent);
  color:            var(--accent);
}


.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:          1;
}

.btn[data-variant="primary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--accent) 80%, transparent);
  border-color:     color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:          1;
}

/* Secondary hover — darker primary border + text, no fill */
.btn[data-variant="secondary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:      1;
}

.btn[data-variant="secondary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  color:        color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:      1;
}

.btn[data-variant="info"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--info) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--info) 80%, #282825 20%);
  color:            var(--info-foreground);
  opacity:          1;
}

.btn[data-variant="success"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--success) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--success) 80%, #282825 20%);
  color:            var(--success-foreground);
  opacity:          1;
}

.btn[data-variant="warning"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--warning) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--warning) 80%, #282825 20%);
  color:            var(--warning-foreground);
  opacity:          1;
}

.btn[data-variant="destructive"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  color:            var(--destructive-foreground);
  opacity:          1;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon:not(.btn__icon--hover-only) { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="md"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="lg"] .btn__icon:not(.btn__icon--hover-only) { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Hover-only icon — hidden by default, slides/fades in on :hover.
   Negative margin-right cancels the flex gap when collapsed so
   the label stays flush with the padding edge.
   ============================================================ */

/* Must come after the .btn[data-size] .btn__icon rules to win specificity tie */
.btn .btn__icon--hover-only {
  min-width:    0;        /* override flex min-width: auto so item can truly collapse */
  width:        0;
  overflow:     hidden;
  opacity:      0;
  margin-right: calc(-1 * var(--btn-gap, 0.5rem));
  transition:   width 0.2s ease, opacity 0.15s ease, margin-right 0.2s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:        1rem; /* sm / md / lg */
  height:       1rem;
  opacity:      1;
  margin-right: 0;
}

.btn[data-size="xs"]:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:  0.75rem;
  height: 0.75rem;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}