/* =============================================================================
   search.css — the `.aitsr-` kit for /search (public.search)
   -----------------------------------------------------------------------------
   Route-gated: linked from layouts/seo-page.blade.php only when the current
   route is public.search, so it costs nothing on the other 40-odd surfaces that
   layout renders.

   Every colour resolves through the sitewide --aits-* tokens declared in
   custom.{ltr,rtl}.css. Those tokens are re-declared under body.theme-dark, so
   this file needs NO dark-mode twin rule set — the values re-resolve. The only
   dark rules below are the two places where a token cannot express the change
   (the tinted icon chip and the card image ring).

   Direction-agnostic: written with logical properties (margin-inline,
   padding-inline, inset-inline) so there is no ltr/rtl pair to keep in sync.
   ========================================================================== */

.aitsr {
    --aitsr-gap: 14px;
    max-width: 1080px;
    margin-inline: auto;
    padding-block: 8px 48px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.aitsr-hero {
    text-align: center;
    padding-block: 24px 34px;
}

.aitsr-title {
    margin: 0 0 20px;
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--aits-ink);
}

.aitsr-title .aitsr-term {
    color: var(--aits-blue);
    /* A long query must wrap inside the heading rather than push the page wide. */
    overflow-wrap: anywhere;
}

.aitsr-form {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 660px;
    margin-inline: auto;
    padding: 6px 6px 6px 16px;
    background: var(--aits-card);
    border: 1px solid var(--aits-line-strong);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-sm);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.aitsr-form:hover { border-color: var(--aits-blue-line); }

.aitsr-form:focus-within {
    border-color: var(--aits-blue);
    box-shadow: var(--ring), var(--sh-md);
}

.aitsr-form-ico {
    flex: 0 0 auto;
    display: inline-flex;
    font-size: 15px;
    color: var(--aits-faint);
    transition: color var(--t) var(--ease);
}

.aitsr-form:focus-within .aitsr-form-ico { color: var(--aits-blue); }

.aitsr-form input {
    flex: 1 1 auto;
    /* Without this a long value makes the flex item refuse to shrink and the
       pill overflows its container on narrow screens. */
    min-width: 0;
    padding: 13px 4px;
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--aits-ink);
    outline: none;
    appearance: none;
}

.aitsr-form input::placeholder { color: var(--aits-faint); font-weight: 500; }
.aitsr-form input::-webkit-search-cancel-button { cursor: pointer; }

.aitsr-form-btn {
    flex: 0 0 auto;
    padding: 11px 24px;
    border: 0;
    border-radius: var(--r-pill);
    background-image: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.aitsr-form-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-brand);
    color: #fff;
}

.aitsr-form-btn:active { transform: translateY(0); }

.aitsr-count {
    margin: 16px 0 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--aits-mut);
}

/* ── Result groups ────────────────────────────────────────────────────── */

.aitsr-group { margin-block: 0 34px; }

.aitsr-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--aits-line);
}

.aitsr-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    /* The heading may shrink; the "view all" link may not. */
    min-width: 0;
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--aits-ink);
}

.aitsr-group-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    background: var(--aits-blue-tint);
    color: var(--aits-blue);
    font-size: 13px;
}

.aitsr-group-count {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--aits-surface-3);
    border: 1px solid var(--aits-line);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--aits-mut);
}

.aitsr-group-all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--aits-blue);
    text-decoration: none;
    white-space: nowrap;
    transition: gap var(--t) var(--ease), color var(--t) var(--ease);
}

.aitsr-group-all:hover { gap: 9px; color: var(--aits-blue-dark); }
.aitsr-group-all i { font-size: 11px; }

/* ── Cards ────────────────────────────────────────────────────────────── */

.aitsr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--aitsr-gap);
}

.aitsr-card {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Grid children default to min-width:auto, which lets a long title blow the
       column out and clip the card on mobile. */
    min-width: 0;
    padding: 13px 15px;
    background: var(--aits-card);
    border: 1px solid var(--aits-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    text-decoration: none;
    transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.aitsr-card:hover {
    transform: translateY(-2px);
    border-color: var(--aits-blue-line);
    box-shadow: var(--sh-md);
    text-decoration: none;
}

.aitsr-card:focus-visible {
    outline: none;
    border-color: var(--aits-blue);
    box-shadow: var(--ring);
}

.aitsr-card-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--aits-blue-tint);
    color: var(--aits-blue);
    font-size: 16px;
}

/* Page::toolIconSvg() injects a raw inline <svg>; pin it so a stroke icon
   authored at another intrinsic size cannot fill the chip. */
.aitsr-card-ico svg { width: 22px; height: 22px; display: block; }

.aitsr-card-img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    object-fit: cover;
    background: var(--aits-surface-3);
    border: 1px solid var(--aits-line);
}

.aitsr-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Explicit colours, not `inherit`: .aitsr-card is an <a>, so both lines would
   otherwise pick up the global link colour and read as one blue block. */
.aitsr-card-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--aits-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--t) var(--ease);
}

.aitsr-card:hover .aitsr-card-title { color: var(--aits-blue); }

.aitsr-card-sub {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--aits-mut);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Empty state ──────────────────────────────────────────────────────── */

.aitsr-empty {
    max-width: 620px;
    margin-inline: auto;
    padding: 44px 24px 52px;
    text-align: center;
}

.aitsr-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 20px;
    border-radius: var(--r-pill);
    background: var(--aits-blue-tint);
    color: var(--aits-blue);
    font-size: 26px;
}

.aitsr-empty-title {
    margin: 0 0 10px;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--aits-ink);
    overflow-wrap: anywhere;
}

.aitsr-empty-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--aits-mut);
}

.aitsr-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.aitsr-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid var(--aits-line-strong);
    border-radius: var(--r-pill);
    background: var(--aits-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--aits-txt);
    text-decoration: none;
    transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}

.aitsr-chip i { font-size: 11px; color: var(--aits-faint); transition: color var(--t) var(--ease); }

.aitsr-chip:hover {
    border-color: var(--aits-blue);
    background: var(--aits-blue-tint);
    color: var(--aits-blue-dark);
    text-decoration: none;
}

.aitsr-chip:hover i { color: var(--aits-blue); }

/* ── Dark mode ────────────────────────────────────────────────────────── */
/* The --aits-* tokens already re-resolve under .theme-dark. These two rules
   cover what a token cannot: the tinted chips need a lighter ink to stay
   legible on the dark tint, and the image ring needs to soften. */

body.theme-dark .aitsr-group-ico,
body.theme-dark .aitsr-card-ico,
body.theme-dark .aitsr-empty-ico { color: var(--aits-blue-light); }

body.theme-dark .aitsr-card:hover .aitsr-card-title { color: var(--aits-blue-light); }

body.theme-dark .aitsr-chip:hover { color: var(--aits-blue-light); }
body.theme-dark .aitsr-chip:hover i { color: var(--aits-blue-light); }

body.theme-dark .aitsr-group-all:hover { color: var(--aits-blue-light); }

body.theme-dark .aitsr-card-img { border-color: var(--aits-line-soft); }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .aitsr { padding-block: 4px 36px; }
    .aitsr-hero { padding-block: 16px 26px; }

    .aitsr-form { padding: 5px 5px 5px 14px; }
    .aitsr-form input { padding: 12px 4px; font-size: 14px; }
    .aitsr-form-btn { padding: 10px 18px; font-size: 13px; }

    .aitsr-grid { grid-template-columns: 1fr; }

    /* The group heading and its "view all" link stop competing for one row. */
    .aitsr-group-head { flex-wrap: wrap; }
    .aitsr-group-count { order: 3; }
}

@media (max-width: 400px) {
    /* Below this the label is what has to go, not the button — a search box
       without a submit control is unusable on a phone keyboard that shows
       "Go" only for some input types. */
    .aitsr-form-btn { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .aitsr-card,
    .aitsr-form,
    .aitsr-form-btn,
    .aitsr-group-all,
    .aitsr-chip { transition: none; }

    .aitsr-card:hover,
    .aitsr-form-btn:hover { transform: none; }
}