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


/* ============================================================
   LegalHubIntegrationsSection — Figma Z4nd44TYu5d8ttn7Y73Djs, node 865:7065.
   Spec: LegalHubIntegrationsSection.figma.md.

   Deliberately NOT `.hp-section`: Figma gives this block 64px of vertical
   padding rather than 128, and a 24px heading rather than `.hp-heading`'s 36.
   ============================================================ */

.legal-hub-integrations {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          100%;
  padding:        4rem 0;   /* 64px */
  font-family:    var(--font-family-default);
  background:     var(--background);
  box-sizing:     border-box;
}

/* Figma: copy → logos → CTA at 48px each. The header's own badge→text gap is
   `.section-header`'s 24px, and heading→body is 12px (below). */
.legal-hub-integrations__content {
  display:        flex;
  flex-direction: column;
  gap:            3rem;   /* 48px — the spacing scale stops at --spacing-9 (36px) */
  align-items:    flex-start;
  width:          100%;
  padding-right:  var(--spacing-8);   /* Figma pr-32 on the intro column */
  box-sizing:     border-box;
}

/* Overrides `.section-header__text`'s 36px — this block's heading and body sit
   12px apart in Figma, matching its smaller 24px heading. */
.legal-hub-integrations__text {
  gap: var(--spacing-3);   /* 12px */
}

.legal-hub-integrations__heading {
  margin:      0;
  font-size:   var(--font-size-2xl);     /* 24px */
  line-height: var(--line-height-2xl);   /* 32px */
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}

/* Figma: eight 180x40 cells with 48px gaps inside 1024 — four per row, wrapping
   to two rows. A grid rather than a wrapping flex row so the second row's
   columns line up with the first. */
.legal-hub-integrations__logos {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 180px));
  column-gap:            3rem;      /* 48px — puts the four columns on Figma's x 244/472/700/928 */
  /* Figma's two logo rows are 88px centre-to-centre. The box below is 60px
     (tall enough for Clio's 59px canvas), so the row gap makes up the rest. */
  row-gap:               1.75rem;   /* 28px */
  margin:                0;
  padding:               0;
  list-style:            none;
}

/* Left-aligned, not centred: in Figma every logo's ink starts at its column's
   left edge (244 / 472 / 700 / 928 at 1512), so both rows share four hard
   column rules that also line up with the heading, body and CTA. Centring in a
   180px cell pushes each brand in by a different amount and the columns read as
   ragged. Vertically the ink still centres in the 40px cell. */
.legal-hub-integrations__logo {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  height:          60px;   /* fits Clio's 59px scaled canvas; ink stays centred */
}

/* No `width`/`height: auto` here. An author stylesheet outranks the HTML
   width/height presentational hints, so `auto` made every logo fall back to its
   SVG's intrinsic size and silently ignore the per-logo attributes — which is
   why the four marks rendered a third smaller than Figma. Letting the
   attributes drive keeps each brand at its measured Figma ink size, and
   `object-fit: contain` absorbs the sub-pixel aspect drift from rounding them
   to integers. */
.legal-hub-integrations__logo img {
  display:    block;
  max-width:  100%;
  max-height: 60px;
  object-fit: contain;
}

/* Placeholder for the four brands with no exported asset yet. Reads as a
   deliberate wordmark rather than a broken image. */
.legal-hub-integrations__wordmark {
  font-size:      var(--font-size-lg);   /* 18px */
  line-height:    1;
  font-weight:    var(--font-weight-bold);
  letter-spacing: 0.01em;
  color:          var(--muted-foreground);
  text-align:     left;   /* shares the logo columns' left rule */
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 991px) {
  .legal-hub-integrations__content {
    gap:           var(--spacing-8);   /* 32px */
    padding-right: 0;
  }

  /* Columns stay capped at 180px rather than stretching to `1fr`: with the logos
     left-aligned, `1fr` columns spread them across the full width and the short
     last row trails off into empty space. Capped columns keep the grid a tight
     left-aligned block under the copy, and `minmax(0, …)` still lets them shrink
     below 180px when the container can't fit three. */
  .legal-hub-integrations__logos {
    grid-template-columns: repeat(3, minmax(0, 180px));
    gap:                   var(--spacing-8);
  }
}

@media (max-width: 559px) {
  .legal-hub-integrations__logos {
    grid-template-columns: repeat(2, minmax(0, 180px));
    gap:                   var(--spacing-6);
  }
}


/* ============================================================
   Design refresh — docs/design-refresh-rules.md (BG-1, TY-2).
   ============================================================ */
.legal-hub-integrations[data-design="refresh"] {
  background: var(--card);
}

[data-design="refresh"] .legal-hub-integrations__heading {
  font-family: var(--font-family-serif);
  font-size:   2.25rem;   /* 36px */
  font-weight: var(--font-weight-light);
  line-height: 2.5rem;    /* 40px */
}

/* The section takes the standard rhythm and the 36px heading → body gap. */
.legal-hub-integrations[data-design="refresh"] {
  padding-block: 8rem;
}

[data-design="refresh"] .legal-hub-integrations__text {
  gap: 2.25rem;
}

@media (max-width: 1199px) {
  .legal-hub-integrations[data-design="refresh"] { padding-block: 6rem; }
}

@media (max-width: 991px) {
  .legal-hub-integrations[data-design="refresh"] { padding-block: 5rem; }
}

@media (max-width: 767px) {
  .legal-hub-integrations[data-design="refresh"] { padding-block: 4rem; }
}

/* PracticePanther's and Litify's CDN files carry a baked cream backdrop
   (#F5F0E7), which shows as a beige box on the refresh's white ground. Same
   knockout as the new homepage's `.home-integrations__logo--knockout`: grayscale
   puts the cream at luminance ~240 and brightness 1.07 lifts it past 255 to
   white, while the black ink stays black. Keyed on the file name so the markup
   doesn't change. Remove once transparent exports are on the CDN. */
.legal-hub-integrations[data-design="refresh"] .legal-hub-integrations__logo img:is([src*="practicepanther"], [src*="litify"]) {
  filter: grayscale(1) brightness(1.07);
}

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