/* Lilostad tool cards · v1.0 · no external dependencies.
 * Scope: .lo-tools. Load after the active theme stylesheet.
 * Direction is inherited: put dir="rtl" on the section for Arabic.
 */
.lo-tools {
  --lo-primary: #0f4c81;
  --lo-primary-deep: #082c54;
  --lo-icon: #1d6fd6;
  --lo-link: #1d6fd6;
  --lo-link-hover: #0f4c81;
  --lo-feature-icon: #eaf4ff;
  --lo-text: #16324f;
  --lo-muted: #52657a;
  --lo-surface: #ffffff;
  --lo-tint-start: #eaf4ff;
  --lo-tint-end: #f7fbff;
  --lo-border: #d9e7f5;
  --lo-focus: #1d6fd6;
  --lo-background: #f7fbff;
  --lo-badge-bg: #eaf4ff;
  --lo-badge-text: #0f4c81;
  --lo-radius: 1.5rem;
  --lo-gap: 1.5rem;
  --lo-font: inherit;
  box-sizing: border-box;
  container: lo-tools / inline-size;
  inline-size: 100%;
  min-inline-size: 0;
  margin-inline: auto;
  color: var(--lo-text);
  font-family: var(--lo-font);
  font-size: 1rem;
  line-height: 1.7;
  text-align: start;
}

.lo-tools *,
.lo-tools *::before,
.lo-tools *::after { box-sizing: border-box; }

.lo-tools.lo-tools--home { max-inline-size: 75rem; }
.lo-tools.lo-tools--catalog { max-inline-size: 75rem; }

.lo-tools .lo-tools__header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block: 0 1.75rem;
}

.lo-tools .lo-tools__intro { max-inline-size: 40rem; }

.lo-tools .lo-tools__eyebrow {
  margin: 0 0 .4rem;
  color: var(--lo-primary);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.7;
}

.lo-tools .lo-tools__title {
  margin: 0;
  padding: 0;
  color: var(--lo-primary-deep);
  font-family: inherit;
  font-size: clamp(1.65rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

.lo-tools .lo-tools__description {
  margin: .5rem 0 0;
  padding: 0;
  color: var(--lo-muted);
  font-size: 1rem;
  line-height: 1.9;
}

/* Auto-fit is a usable fallback when container queries are unavailable. */
.lo-tools .lo-tools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--lo-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lo-tools .lo-tools__item {
  display: flex;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lo-tools .lo-tool-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--lo-surface);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  box-shadow: 0 3px 5px rgb(15 76 129 / .035), 0 12px 28px rgb(15 76 129 / .06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.lo-tools .lo-tool-card__media {
  position: relative;
  display: grid;
  grid-template-rows: minmax(1.6rem, auto) 1fr;
  place-items: center;
  gap: .75rem;
  flex: 0 0 auto;
  min-block-size: 10.5rem;
  padding: 1rem 1.25rem 1.75rem;
  background: linear-gradient(135deg, var(--lo-tint-start), var(--lo-tint-end));
  color: var(--lo-icon);
  border-block-end: 1px solid rgb(15 76 129 / .035);
}

.lo-tools .lo-tool-card__icon {
  grid-row: 2;
  display: block;
  inline-size: 4.25rem;
  block-size: 4.25rem;
  max-inline-size: 100%;
  margin: 0;
  color: inherit;
  object-fit: contain;
}

/* Decorative inline SVGs. For an image, use the same class and alt="". */
.lo-tools svg.lo-tool-card__icon,
.lo-tools svg.lo-tool-card__arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lo-tools .lo-tool-card__badge {
  grid-row: 1;
  align-self: start;
  justify-self: start;
  max-inline-size: 100%;
  padding: .15rem .75rem;
  overflow-wrap: anywhere;
  background: var(--lo-badge-bg);
  color: var(--lo-badge-text);
  border: 1px solid rgb(15 76 129 / .08);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.8;
}

/* The featured treatment affects the top panel; the body stays white. */
.lo-tools .lo-tool-card--featured { border-color: #a8c9ed; }
.lo-tools .lo-tool-card--featured .lo-tool-card__media {
  background: linear-gradient(140deg, var(--lo-primary), var(--lo-primary-deep));
  color: var(--lo-feature-icon);
}
.lo-tools .lo-tool-card--featured .lo-tool-card__badge {
  background: var(--lo-feature-icon);
  color: #0f4c81;
  border-color: transparent;
}

.lo-tools .lo-tool-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
  padding: 1.5rem;
}

.lo-tools .lo-tool-card__title {
  margin: 0;
  padding: 0;
  color: var(--lo-text);
  font-family: inherit;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
}

.lo-tools .lo-tool-card__description {
  margin: 0;
  padding: 0;
  color: var(--lo-muted);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

/* One clear link per card; no nested interactive elements or stretched overlay. */
.lo-tools .lo-tool-card__link,
.lo-tools .lo-tools__all-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  gap: .55rem;
  min-block-size: 2.75rem;
  max-inline-size: 100%;
  padding: .35rem 0;
  background: transparent;
  color: var(--lo-link);
  border: 0;
  border-radius: .25rem;
  box-shadow: none;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: normal;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.lo-tools .lo-tool-card__link { margin-block-start: auto; }
.lo-tools .lo-tool-card__link:visited,
.lo-tools .lo-tools__all-link:visited { color: var(--lo-link); }
.lo-tools .lo-tool-card__link:hover,
.lo-tools .lo-tools__all-link:hover {
  color: var(--lo-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .25em;
}

.lo-tools .lo-tool-card__arrow {
  flex: 0 0 auto;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  transition: transform 180ms ease;
}

/* Base arrow points right for LTR; :dir() also respects inherited RTL. */
.lo-tools .lo-tool-card__arrow:dir(rtl) { transform: scaleX(-1); }
.lo-tools .lo-tool-card__link:focus-visible,
.lo-tools .lo-tools__all-link:focus-visible {
  outline: 3px solid var(--lo-focus);
  outline-offset: 4px;
}
.lo-tools .lo-tool-card:focus-within {
  border-color: var(--lo-icon);
  box-shadow: 0 0 0 2px rgb(29 111 214 / .15), 0 12px 28px rgb(15 76 129 / .08);
}

/* Remove WordPress/theme link-decoration pseudo-elements locally. */
.lo-tools .lo-tool-card__link::before,
.lo-tools .lo-tool-card__link::after,
.lo-tools .lo-tools__all-link::before,
.lo-tools .lo-tools__all-link::after { content: none; }

@supports (container-type: inline-size) {
  .lo-tools .lo-tools__grid { grid-template-columns: minmax(0, 1fr); }
  @container lo-tools (min-width: 38rem) {
    .lo-tools .lo-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @container lo-tools (min-width: 58rem) {
    .lo-tools .lo-tools__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  
}

@media (hover: hover) and (pointer: fine) {
  .lo-tools .lo-tool-card:hover {
    transform: translateY(-4px);
    border-color: #a8c9ed;
    box-shadow: 0 7px 12px rgb(15 76 129 / .04), 0 18px 36px rgb(15 76 129 / .10);
  }
}

@media (max-width: 30rem) {
  .lo-tools { --lo-gap: 1rem; --lo-radius: 1.25rem; }
  .lo-tools .lo-tool-card__media { min-block-size: 9.5rem; }
  .lo-tools .lo-tool-card__body { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lo-tools .lo-tool-card,
  .lo-tools .lo-tool-card__arrow { transition: none; }
  .lo-tools .lo-tool-card:hover { transform: none; }
}

@media (forced-colors: active) {
  .lo-tools .lo-tool-card,
  .lo-tools .lo-tool-card__badge { border: 1px solid CanvasText; }
  .lo-tools .lo-tool-card__media { color: CanvasText; }
  .lo-tools .lo-tool-card__link,
  .lo-tools .lo-tools__all-link { color: LinkText; }
}


/* WordPress integration: original reference component, scoped to home/catalog only. */
.lo-tools [hidden] { display:none!important; }
.lo-tools .lo-tool-card__media { block-size:150px; min-block-size:150px; padding:20px; grid-template-rows:1fr; }
.lo-tools .lo-tool-card__icon { grid-row:1; }
.lo-tools .lo-tool-card__badge { position:absolute; inset-block-start:14px; inset-inline-start:14px; }
.lo-tools .lo-tool-card__description { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lo-tools .lo-tool-card__kind { font-size:12px; color:var(--lo-primary); line-height:1.5; }
.lo-tools .lo-tools__intro { max-inline-size:48rem; }
.lo-tools .lo-tool-card__link { padding-block-start:12px; }
.lo-tools .lo-tool-card__title { min-block-size:3.2em; }
.lo-tools .lo-tool-card__body { gap:10px; }
.lo-tools .lo-tool-card__link { color:var(--lo-link); }
.lo-tools .lo-tools__footer { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-block-start:28px; }
.lo-tools .lo-tools__all-link { padding:10px 22px; border:1px solid var(--lo-primary); border-radius:12px; background:var(--lo-primary); color:#fff; }
.lo-tools .lo-tools__all-link:visited,.lo-tools .lo-tools__all-link:hover { color:#fff; }
.lo-tools .orc-tools-catalog-controls { margin-block:24px; padding:22px; border:1px solid var(--lo-border); border-radius:18px; background:var(--lo-surface); }
.lo-tools .orc-tools-search-row { display:flex; align-items:end; flex-wrap:wrap; gap:16px; }
.lo-tools .orc-tools-search-group { flex:1 1 300px; min-width:0; }
.lo-tools .orc-tools-group-field { flex:1 1 180px; min-width:0; }
.lo-tools label { display:block; margin:0 0 6px; color:var(--lo-text); font-weight:700; font-size:13px; }
.lo-tools .orc-tools-search { display:flex; align-items:center; gap:10px; border:1px solid var(--lo-border); border-radius:12px; padding-inline:12px; background:var(--lo-surface); }
.lo-tools .orc-tools-search svg { flex:none; color:var(--lo-icon); }
.lo-tools :is(input[type=search],select) { width:100%; min-width:0; min-height:48px; font:inherit; font-size:14px; color:var(--lo-text); background:var(--lo-surface); border:1px solid var(--lo-border); border-radius:12px; padding:10px 12px; box-shadow:none; }
.lo-tools .orc-tools-search input[type=search] { border:0; background:transparent; padding-inline:0; }
.lo-tools button { font:inherit; font-size:13px; line-height:1.7; cursor:pointer; color:var(--lo-primary); background:var(--lo-surface); border:1px solid var(--lo-border); border-radius:10px; padding:9px 15px; min-height:44px; }
.lo-tools .orc-tools-search button { flex:none; border:0; padding:8px; min-width:44px; }
.lo-tools .orc-tools-filters { display:flex; gap:8px; overflow-x:auto; overscroll-behavior-inline:contain; margin-block-start:18px; padding-block:4px 8px; scrollbar-width:thin; }
.lo-tools .orc-tools-filters button { display:inline-flex; align-items:center; gap:8px; flex:none; white-space:nowrap; border-radius:999px; }
.lo-tools .orc-tools-filters button[aria-pressed=true] { background:var(--lo-primary); border-color:var(--lo-primary); color:#fff; }
.lo-tools [data-tools-filter-count] { font-size:11px; opacity:.85; }
.lo-tools .orc-tools-list-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-block:24px 18px; }
.lo-tools .orc-tools-list-heading h2 { font-size:18px; margin:0; color:var(--lo-text); }
.lo-tools .orc-tools-count { font-size:13px; color:var(--lo-muted); margin:4px 0 0; }
.lo-tools .orc-tools-empty { text-align:center; border:1px dashed var(--lo-border); border-radius:18px; padding:36px 20px; }
.lo-tools .orc-tools-empty h2 { color:var(--lo-text); font-size:21px; margin:12px 0; }
.lo-tools .orc-tools-empty p { color:var(--lo-muted); font-size:14px; }
.lo-tools :is(button,input,select):focus-visible { outline:3px solid var(--lo-focus); outline-offset:3px; }
.lo-tools .orc-tools-empty-mark { display:inline-flex; color:var(--lo-icon); }
.lo-tools .orc-card-sr { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
#platform-tools .lo-tools .ll-directory-filters { flex-wrap:nowrap; overflow-x:auto; padding-block:4px 8px; }
#platform-tools .lo-tools .ll-directory-filters button { white-space:nowrap; flex:none; border-radius:999px; }
#platform-tools .lo-tools .ll-directory-filters button[aria-pressed=true] { background:var(--lo-primary); border-color:var(--lo-primary); color:white; }
#platform-tools .lo-tools .ll-directory-more { display:flex; flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:28px; }
#platform-tools .lo-tools .ll-directory-more .lo-tools__all-link { align-self:auto; }
#platform-tools .lo-tools .ll-directory-more>button { background:var(--lo-surface); color:var(--lo-primary); border-color:var(--lo-border); }
[data-ostadi-theme=dark] .lo-tools { --lo-primary:#99c5ff;--lo-primary-deep:#e4efff;--lo-text:#e5eefb;--lo-icon:#9ecbff;--lo-muted:#b2c1d6;--lo-surface:#15273d;--lo-border:#334b69;--lo-tint-start:#1b3554;--lo-tint-end:#182d47;--lo-link:#9ecbff;--lo-link-hover:#c6e0ff;--lo-focus:#afd6ff;--lo-background:#0d1b2c;--lo-badge-bg:#244468;--lo-badge-text:#d6eaff; }
[data-ostadi-theme=dark] .lo-tools .lo-tool-card--featured .lo-tool-card__media { background:linear-gradient(140deg,#0f4c81,#082c54);color:var(--lo-feature-icon); }
[data-ostadi-theme=dark] .lo-tools :is(.lo-tools__all-link,.orc-tools-filters button[aria-pressed=true]) { color:#102641; }
[data-ostadi-theme=dark] #platform-tools .lo-tools .ll-directory-filters button[aria-pressed=true] { color:#102641; }
@media(max-width:600px) { .lo-tools .lo-tool-card__title{font-size:21px}.lo-tools .lo-tool-card__media{block-size:140px;min-block-size:140px}.lo-tools .orc-tools-catalog-controls{padding:16px}.lo-tools .orc-tools-group-field{flex-basis:100%} }


/* Blue brand states only: no layout, spacing, typography or motion changes. */
.lo-tools { background:var(--lo-background); }
#platform-tools { background:#f7fbff; }
[data-ostadi-theme=dark] #platform-tools { background:#0d1b2c; }
#platform-tools .lo-tools .ll-directory-filters button { color:var(--lo-primary);border-color:var(--lo-border);background:var(--lo-surface); }
.lo-tools :is(button,select):hover { border-color:var(--lo-icon); }
.lo-tools .lo-tool-card__link:active { color:var(--lo-primary-deep); }
.lo-tools .lo-tools__all-link:hover,.lo-tools .lo-tools__all-link:active { background:var(--lo-link);border-color:var(--lo-link);color:#fff; }
.lo-tools .orc-tools-filters button[aria-pressed=true]:is(:hover,:active),
#platform-tools .lo-tools .ll-directory-filters button[aria-pressed=true]:is(:hover,:active) { background:var(--lo-primary);border-color:var(--lo-primary); }
.lo-tools :is(input,select):focus-visible { border-color:var(--lo-focus); }
.lo-tools :is(a,button,input,select):focus-visible { outline-color:var(--lo-focus)!important; }
[data-ostadi-theme=dark] .lo-tools .lo-tools__all-link:is(:hover,:active) { color:#102641; }