/* /agency-directory (2026-11-13). Template: frontend/company/agency_directory_ink.pug. Loads after ink/home.css and
   ink/company.css, so the hero, sheets, FAQ and lime close come from there. This file owns the search bar, the cards and the
   steps. Built for a long list: a dense 3-column grid, filters that wrap, no shadows (borders only), no colour behind visuals. */

/* ---------- Search and filters: one white bar, full list width (Vytas, 2026-11-13: the labelled grid "looks messy") ---------- */
html body.ik:not(#_) .ad-tools { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: clamp(24px, 3vw, 36px); padding: 8px; border: 1px solid var(--cf-line); border-radius: 16px; background: #fff; }
html body.ik:not(#_) .ad-field { display: block; flex: 0 1 190px; min-width: 0; }
html body.ik:not(#_) .ad-field--search { flex: 1 1 280px; }
/* The labels stay for screen readers; the placeholder and the "All ..." option say what each control is. */
html body.ik:not(#_) .ad-field__lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html body.ik:not(#_) .ad-search { position: relative; display: block; }
html body.ik:not(#_) .ad-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cf-text-3); pointer-events: none; }
html body.ik:not(#_) :is(.ad-input, .ad-select) { width: 100%; height: 48px; margin: 0; border: 1px solid transparent; border-radius: 10px; background-color: var(--cf-mist); color: var(--cf-text); font: inherit; font-size: 15px; box-shadow: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
html body.ik:not(#_) .ad-input { padding: 0 14px 0 42px; -webkit-appearance: none; appearance: none; }
html body.ik:not(#_) .ad-input::placeholder { color: var(--cf-text-3); }
html body.ik:not(#_) .ad-select { padding: 0 36px 0 14px; -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
html body.ik:not(#_) :is(.ad-input, .ad-select):hover { border-color: var(--cf-field); }
html body.ik:not(#_) :is(.ad-input, .ad-select):focus { outline: 2px solid var(--cf-ink); outline-offset: 0; background-color: #fff; }

/* ---------- Count and clear ---------- */
html body.ik:not(#_) .ad-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin: 16px 4px 12px; }
html body.ik:not(#_) .ad-count { font-size: 15px; color: var(--cf-text-2); }
html body.ik:not(#_) .ad-count b { color: var(--cf-text); font-weight: 600; }
html body.ik:not(#_) .ad-clear { padding: 8px 0; border: 0; background: none; color: var(--cf-text); font: inherit; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html body.ik:not(#_) .ad-clear[hidden] { display: none; }

/* ---------- Cards ---------- */
html body.ik:not(#_) ul.ad-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
html body.ik:not(#_) li.ad-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--cf-line); border-radius: 20px; background: #fff; color: var(--cf-text); scroll-margin-top: 120px; }
html body.ik:not(#_) li.ad-card[hidden] { display: none; }
html body.ik:not(#_) li.ad-card:target { border-color: var(--cf-ink); }
html body.ik:not(#_) .ad-card__top { display: flex; align-items: center; gap: 14px; min-width: 0; }
html body.ik:not(#_) .ad-card__top > div { min-width: 0; }
html body.ik:not(#_) .ad-mono { display: inline-flex; flex: 0 0 48px; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--cf-ink); color: var(--cf-on-ink); font-size: 16px; font-weight: 600; letter-spacing: .02em; }
html body.ik:not(#_) [role="main"] img.ad-logo { flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid var(--cf-line); border-radius: 12px; object-fit: cover; background: #fff; }
html body.ik:not(#_) [role="main"] h3.ad-card__name { font-size: 19px; line-height: 1.25; color: var(--cf-text); overflow-wrap: anywhere; }
html body.ik:not(#_) .ad-card__host { display: block; margin-top: 2px; font-size: 14px; color: var(--cf-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.ik:not(#_) [role="main"] p.ad-card__p { font-size: 15px; line-height: 1.5; color: var(--cf-text-2); }
html body.ik:not(#_) dl.ad-facts { display: grid; gap: 10px; margin: 0; padding-top: 16px; border-top: 1px solid var(--cf-line); }
html body.ik:not(#_) .ad-facts__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; }
html body.ik:not(#_) .ad-facts dt { font-size: 13px; font-weight: 500; color: var(--cf-text-3); }
html body.ik:not(#_) .ad-facts dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--cf-text); }
html body.ik:not(#_) [role="main"] ul.ad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html body.ik:not(#_) [role="main"] ul.ad-chips li { padding: 3px 10px; border: 1px solid var(--cf-field); border-radius: 999px; font-size: 13px; line-height: 1.4; color: var(--cf-text); }
html body.ik:not(#_) a.ad-card__btn span { margin-left: 6px; }
html body.ik:not(#_) a.ad-card__btn { align-self: flex-start; height: 44px; margin-top: auto; padding: 0 18px; font-size: 15px; }

/* ---------- Empty state and show more ---------- */
html body.ik:not(#_) .ad-empty { padding: clamp(32px, 4vw, 48px) 24px; border: 1px dashed var(--cf-field); border-radius: 20px; background: #fff; text-align: center; }
html body.ik:not(#_) .ad-empty[hidden] { display: none; }
html body.ik:not(#_) .ad-empty p { margin-top: 8px; color: var(--cf-text-2); }
html body.ik:not(#_) button.ad-empty__btn, html body.ik:not(#_) .ad-more button { display: inline-flex; align-items: center; justify-content: center; height: 50px; margin-top: 20px; padding: 0 24px; border: 1px solid var(--cf-field); border-radius: 8px; background: transparent; color: var(--cf-text); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
html body.ik:not(#_) .ad-more { text-align: center; }
html body.ik:not(#_) .ad-more button[hidden] { display: none; }
@media (hover: hover) {
  html body.ik:not(#_) button.ad-empty__btn:hover, html body.ik:not(#_) .ad-more button:hover { border-color: var(--cf-text); background: var(--cf-text); color: #fff; }
}

/* ---------- Steps on the ink band ---------- */
html body.ik:not(#_) ol.ad-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 3vw, 40px); counter-reset: none; }
html body.ik:not(#_) ol.ad-steps li { padding: 24px; border: 1px solid var(--cf-ink-line); border-radius: 20px; background: var(--cf-ink-2); }
html body.ik:not(#_) ol.ad-steps b { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 18px; border: 1px solid #4a4a50; border-radius: 50%; font-size: 15px; font-weight: 600; color: var(--cf-on-ink); }
html body.ik:not(#_) ol.ad-steps h3.ik-h3 { color: var(--cf-on-ink); }
html body.ik:not(#_) [role="main"] ol.ad-steps p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--cf-on-ink-2); }

/* ---------- Centred hero ---------- */
html body.ik:not(#_) .ad-hero h1.ik-h1 { max-width: 900px; }
html body.ik:not(#_) .ad-hero p.ik-hero__sub { max-width: 640px; }
html body.ik:not(#_) .ad-hero .ik-btns { justify-content: center; }

/* ---------- Benefits for agencies, on the ink band ---------- */
html body.ik:not(#_) ul.ad-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
html body.ik:not(#_) ul.ad-perks li { padding: 24px; border: 1px solid var(--cf-ink-line); border-radius: 20px; background: var(--cf-ink-2); }
html body.ik:not(#_) .ad-perks__ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 10px; background: var(--cf-lime); color: var(--cf-ink); }
html body.ik:not(#_) ul.ad-perks h3.ik-h3 { color: var(--cf-on-ink); }
html body.ik:not(#_) [role="main"] ul.ad-perks p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--cf-on-ink-2); }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1100px) {
  html body.ik:not(#_) ul.ad-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.ik:not(#_) ul.ad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  html body.ik:not(#_) ul.ad-perks { grid-template-columns: 1fr; }
  html body.ik:not(#_) .ad-field { flex: 1 1 calc(50% - 4px); }
  html body.ik:not(#_) .ad-field--search { flex-basis: 100%; }
  html body.ik:not(#_) ol.ad-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  html body.ik:not(#_) ul.ad-grid { grid-template-columns: 1fr; }
  html body.ik:not(#_) li.ad-card { padding: 20px; }
  html body.ik:not(#_) a.ad-card__btn { align-self: stretch; }
  html body.ik:not(#_) .ad-facts__row { grid-template-columns: 84px minmax(0, 1fr); }
}
/* Phones keep the selects two to a row, so the list starts on the first screen of a long page. */
@media (max-width: 420px) {
  html body.ik:not(#_) .ad-select { padding: 0 30px 0 12px; font-size: 14px; background-position: right 12px center; }
}

/* The H1 is long (two keywords): at most 3 lines on phones (feedback: H1 at most 3 lines). */
@media (max-width: 640px) {
  html body.ik:not(#_):not(#_) .ad-hero h1.ik-h1 { font-size: clamp(32px, 9vw, 38px) !important; }
}

/* ---------- Compact card (2026-11-13: "cards to heigh") ---------- */
html body.ik:not(#_) li.ad-card { gap: 14px; padding: 22px; }
html body.ik:not(#_) [role="main"] img.ad-logo, html body.ik:not(#_) .ad-mono { flex-basis: 44px; width: 44px; height: 44px; }
html body.ik:not(#_) [role="main"] h3.ad-card__name a { color: inherit; text-decoration: none; }
@media (hover: hover) { html body.ik:not(#_) [role="main"] h3.ad-card__name a:hover { text-decoration: underline; text-underline-offset: 3px; } }
html body.ik:not(#_) [role="main"] p.ad-card__p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body.ik:not(#_) [role="main"] ul.ad-chips li.is-more { display: none; }
html body.ik:not(#_) [role="main"] ul.ad-chips li.ad-chips__more { border-style: dashed; color: var(--cf-text-2); }
html body.ik:not(#_) .ad-card__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row; column-gap: 16px; row-gap: 6px; align-items: end; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--cf-line); }
html body.ik:not(#_) [role="main"] p.ad-card__meta { grid-column: 1; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--cf-text-2); }
html body.ik:not(#_) p.ad-card__meta svg { flex: 0 0 15px; margin-top: 2px; color: var(--cf-text-3); }
html body.ik:not(#_) a.ad-card__link { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: inline-flex; gap: 6px; padding: 8px 0; color: var(--cf-text); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { html body.ik:not(#_) a.ad-card__link:hover { text-decoration: underline; text-underline-offset: 3px; } }