/* =============================================================================
   AIToolsay — Tool-page trust strip
   -----------------------------------------------------------------------------
   The four value props that close every tool page (100% Free / No Signup /
   Browser Based / Privacy First). Loaded once by ai-tool-shell and
   ai-writers-shell.

   ── SPECIFICITY: EVERY SELECTOR HERE CARRIES `.pg-trust-wrap` ──────────────
   Both shells ship their own trust-strip CSS in an inline <style> that sits
   AFTER this file's <link>, so an equal-specificity rule there beats this one
   on source order. The rules that have to be cleared:

     ai-tool-shell     .pg-trust-strip                              (0,1,0)
                       .pg-trust-ic                                 (0,1,0)
                       body.theme-dark .pg-trust-ic                 (0,2,1)
                       body.theme-dark .pg-root .pg-trust-ic        (0,3,1)  ←
                       body.theme-dark .pg-root .pg-trust-item:hover
                         .pg-trust-ic                               (0,4,1)  ←
     ai-writers-shell  .pg-root .pg-trust-strip                     (0,2,0)
                       .pg-root .pg-trust-ic                        (0,2,0)
                       body.theme-dark .pg-root .pg-trust-ic        (0,3,1)  ←
                       body.theme-dark .pg-root .pg-trust-item:hover
                         .pg-trust-ic                               (0,4,1)  ←

   The two marked ← used to TIE this file exactly, and therefore won. The
   consequence was that DARK MODE NEVER GOT THIS REDESIGN: the chips fell back
   to the shells' `background:transparent` at rest and a flat
   `rgba(54,128,237,.16)` on hover, so on dark there was no tint plate and no
   gradient fill — while light mode had both. Adding `.pg-trust-wrap` to every
   selector puts this file one class ahead across the board:
     base  (0,3,0)   dark  (0,4,1)   dark hover  (0,5,1)
   If you ever drop the wrapper, those two rules silently take dark mode back.

   Fixes a live branding bug on the way: the old hover filled the icon with
   #FFECEC — a PINK left over from the pre-blue theme (its comment still called
   these "circular red-outline icons"), which flashed salmon on a blue site.
   ========================================================================== */

.pg-root .pg-trust-wrap .pg-trust-strip {
  --ts-1: #4C8DF2;
  --ts-2: #3680ED;
  --ts-3: #2060C0;
  --ts-glow: 54, 128, 237;
  --ts-surface: #fff;
  --ts-line: #e6ebf3;
  --ts-ink: #16202c;
  --ts-ink-2: #5b6779;
  --ts-tint: rgba(54, 128, 237, .09);

  /* Explicit steps, NOT auto-fit. With four items an auto-fit track landed on
     3 columns at tablet width — three across and one orphan on a second row,
     which reads as broken. 4 / 2 / 1 always divides evenly.
     The steps themselves live in the @container block below — see the note
     there for why they cannot key off the viewport. Base is 1-up. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  /* The old hairline top+bottom rules go — the cards carry the structure now,
     and two full-width lines boxed the strip off from the page. */
  border: 0;
  padding: 0;
  margin: 26px 0 6px;
}

.pg-root .pg-trust-wrap .pg-trust-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  border: 1.5px solid var(--ts-line);
  border-radius: 14px;
  background: var(--ts-surface);
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1),
              border-color .2s ease, box-shadow .2s ease;
}

/* NO accent hairline — removed, do not re-add. A 3px bar cannot follow a 14px
   corner radius, so however it is clipped it still reads as a straight line
   bolted across the top of a rounded card. The lift + brand border + coloured
   shadow + gradient chip already make the hover unmistakable; the bar on top
   of all that was simply too much. Same call as the prompt composer. */

/* Rounded square, not the old circle — matches the Advanced Options header
   chip and the model-picker logo tiles, so the page reads as one system. */
.pg-root .pg-trust-wrap .pg-trust-ic {
  flex-shrink: 0;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--ts-tint);
  color: var(--ts-2);
  transition: background .22s ease, color .22s ease,
              transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
}
.pg-root .pg-trust-wrap .pg-trust-ic svg {
  inline-size: 20px;
  block-size: 20px;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}

.pg-root .pg-trust-wrap .pg-trust-body { min-inline-size: 0; }
.pg-root .pg-trust-wrap .pg-trust-body strong {
  display: block;
  margin-bottom: 3px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ts-ink);
  /* wrap rather than clip — a long translation must stay readable */
  overflow-wrap: anywhere;
}
.pg-root .pg-trust-wrap .pg-trust-body span {
  display: block;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ts-ink-2);
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-trust-wrap .pg-trust-item:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--ts-glow), .45);
    box-shadow: 0 14px 30px -16px rgba(var(--ts-glow), .55),
                0 3px 8px -4px rgba(16, 26, 40, .06);
  }
  .pg-root .pg-trust-wrap .pg-trust-item:hover .pg-trust-ic {
    background: linear-gradient(135deg, var(--ts-1), var(--ts-3));
    color: #fff;
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 8px 18px -7px rgba(var(--ts-glow), .7),
                inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  .pg-root .pg-trust-wrap .pg-trust-item:hover .pg-trust-ic svg { transform: scale(1.08); }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────
   THE COLUMN COUNT KEYS OFF THE STRIP'S OWN WIDTH, NOT THE VIEWPORT, and that
   distinction was a live bug. The strip sits inside `col-lg-9`, so with the
   sidebar up it only ever gets ~55% of the viewport — but the old rule said
   "4 columns above 1024px viewport". On every laptop between about 1025 and
   1440 that packed four cards into ~660-850px:

       1025px viewport → 158px cards,  71px of text column,
                         titles on 2-3 lines, cards 126px tall (vs 88 correct)
       1280px viewport → 202px cards, 115px text, still 2-line titles

   Measured, a card needs 231px for one-line text — the binding constraint is
   the SUBTITLE ("All tools are free forever" = 144px), not the title (137px) —
   so 4-up needs 4*231 + 3*12 = 960px of strip. Two-up needs 474px.
   A container query asks the right question, and it also means the strip
   correctly goes 4-up on a full-width page at a width where a viewport rule
   would still be forcing 2. `.pg-trust-wrap` (added to both shells) is the
   query container — and doubles as the specificity lift described in the file
   header, which is what finally lets this file win in dark mode. */
.pg-root .pg-trust-wrap { container-type: inline-size; }

@container (min-width: 474px) {
  .pg-root .pg-trust-wrap .pg-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 950, not 960. The 960 figure keeps BOTH lines unwrapped, but a 1440px laptop
   — the single most common desktop width — gives the strip 959px, missing it by
   a pixel and dropping to a 2x2 block where a clean single row would have fit.
   The threshold that actually matters is the TITLE's (137px text → 224px card →
   932px strip): a wrapped title is what reads as broken, whereas the subtitle
   running to two lines is the design's normal resting state and is what the
   strip has always looked like. 950 clears the title by ~8px at 1440. */
@container (min-width: 950px) {
  .pg-root .pg-trust-wrap .pg-trust-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Fallback for engines without container queries. Approximates the same intent
   from the viewport, assuming the sidebar case (the common one): 4-up only once
   the viewport is wide enough that ~55% of it clears 960px. */
@supports not (container-type: inline-size) {
  .pg-root .pg-trust-wrap .pg-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 575.98px) {
    .pg-root .pg-trust-wrap .pg-trust-strip { grid-template-columns: minmax(0, 1fr); }
  }
  @media (min-width: 1500px) {
    .pg-root .pg-trust-wrap .pg-trust-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

/* Type and chip sizing still key off the VIEWPORT — those track the physical
   screen and the pointer, not the column the strip happens to sit in. */
@media (max-width: 575.98px) {
  .pg-root .pg-trust-wrap .pg-trust-strip { gap: 10px; margin: 22px 0 4px; }
  .pg-root .pg-trust-wrap .pg-trust-item { padding: 12px 13px; gap: 12px; border-radius: 13px; }
  .pg-root .pg-trust-wrap .pg-trust-ic { inline-size: 38px; block-size: 38px; border-radius: 11px; }
  .pg-root .pg-trust-wrap .pg-trust-ic svg { inline-size: 18px; block-size: 18px; }
  .pg-root .pg-trust-wrap .pg-trust-body strong { font-size: 14px; }
  .pg-root .pg-trust-wrap .pg-trust-body span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-trust-wrap .pg-trust-item,
  .pg-root .pg-trust-wrap .pg-trust-ic,
  .pg-root .pg-trust-wrap .pg-trust-ic svg { transition: none; }
  .pg-root .pg-trust-wrap .pg-trust-item:hover { transform: none; }
  .pg-root .pg-trust-wrap .pg-trust-item:hover .pg-trust-ic { transform: none; }
  .pg-root .pg-trust-wrap .pg-trust-item:hover .pg-trust-ic svg { transform: none; }
}

/* ── DARK ───────────────────────────────────────────────────────────────── */
body.theme-dark .pg-root .pg-trust-wrap .pg-trust-strip {
  --ts-1: #5C9BF5;
  --ts-2: #8CBEFA;          /* lifted for contrast on the dark chip tint */
  --ts-3: #2A6BCC;
  --ts-glow: 96, 164, 245;
  --ts-surface: #17171A;
  --ts-line: rgba(255, 255, 255, .1);
  --ts-ink: #F5F5F6;
  --ts-ink-2: #A0A0A6;
  --ts-tint: rgba(96, 164, 245, .14);
  border: 0;
}
body.theme-dark .pg-root .pg-trust-wrap .pg-trust-ic {
  border: 0;
  background: var(--ts-tint);
  color: var(--ts-2);
}
@media (hover: hover) and (pointer: fine) {
  body.theme-dark .pg-root .pg-trust-wrap .pg-trust-item:hover {
    box-shadow: 0 14px 32px -16px rgba(var(--ts-glow), .4),
                0 3px 8px -4px rgba(0, 0, 0, .5);
  }
  body.theme-dark .pg-root .pg-trust-wrap .pg-trust-item:hover .pg-trust-ic {
    background: linear-gradient(135deg, var(--ts-1), var(--ts-3));
    color: #fff;
  }
}