/* ============================================================================
 * Layer 3 — Semantic Component Classes (BEM). Every primitive is sourced
 * from tokens.css via var(--token); no raw values. Mobile-first; desktop
 * refinements at @media (min-width: 768px).
 * ========================================================================== */

/* ==================== Listing Card ==================== */
.listing-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.listing-card:hover,
.listing-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-gray-300);
}
.listing-card__title { margin: 0; font-size: var(--font-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-gray-900); }
.listing-card__meta  { display: flex; flex-wrap: wrap; gap: var(--spacing-2); font-size: var(--font-sm); color: var(--color-gray-500); }
.listing-card__description {
    margin: 0;
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
    color: var(--color-gray-700);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.listing-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-top: auto;
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-100);
}

/* ==================== Search Bar ==================== */
.search-bar { position: relative; display: flex; align-items: center; width: 100%; }
.search-bar__input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font: inherit;
    font-size: var(--font-base);
    color: var(--color-gray-900);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-bar__input::placeholder { color: var(--color-gray-400); }
.search-bar__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 var(--spacing-1) var(--color-info-light); }
.search-bar__input:focus:not(:focus-visible) { box-shadow: none; }

/* ==================== Category Tree ==================== */
.category-tree { list-style: none; margin: 0; padding: 0; font-size: var(--font-sm); }
.category-tree__item { border-bottom: 1px solid var(--color-gray-100); }
.category-tree__item:last-child { border-bottom: 0; }
.category-tree__item--child .category-tree__link {
    padding-left: var(--spacing-6);
    font-size: var(--font-sm);
    color: var(--color-gray-600);
}
.category-tree__link {
    display: block;
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-gray-700);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.category-tree__link:hover,
.category-tree__link:focus-visible {
    background: var(--color-gray-50);
    color: var(--color-primary);
    outline: none;
}

/* ==================== Badges ==================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}
.badge--unclaimed  { background: var(--color-badge-unclaimed); color: var(--color-white); }
.badge--contacted  { background: var(--color-badge-contact);   color: var(--color-white); }
.badge--claimed    { background: var(--color-badge-claimed);   color: var(--color-white); }
.badge--premium    { background: var(--color-badge-premium);   color: var(--color-white); }

/* ==================== Buttons ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    font: inherit;
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn--primary   { background: var(--color-primary);   color: var(--color-white); }
.btn--primary:hover  { background: var(--color-primary-dark); }
.btn--secondary { background: var(--color-white);     color: var(--color-gray-700); border-color: var(--color-gray-300); }
.btn--secondary:hover { background: var(--color-gray-50); border-color: var(--color-gray-400); }
.btn--danger    { background: var(--color-danger);    color: var(--color-white); }
.btn--danger:hover { background: var(--color-danger-light); color: var(--color-danger); border-color: var(--color-danger); }
.btn--sm        { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-sm); }
@media (min-width: 768px) { .btn { padding: var(--spacing-3) var(--spacing-6); } }

/* ==================== Claim Banner ==================== */
.claim-banner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
    background: var(--color-info-light);
    border: 1px solid var(--color-info);
    border-left-width: 4px;
    border-radius: var(--radius-md);
}
.claim-banner__title { margin: 0; font-size: var(--font-lg); font-weight: var(--font-weight-semibold); color: var(--color-gray-900); }
.claim-banner__body  { margin: 0; font-size: var(--font-sm); color: var(--color-gray-700); line-height: var(--line-height-relaxed); }
@media (min-width: 768px) { .claim-banner { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ==================== Seed Verified Label ==================== */
/* Operator-verified marker (PRD §4.7). Renders ONLY on a seed
   listing's own detail page; never appears in the public index
   / ads. Visually distinct from a claim banner (neutral grey
   palette, no CTA, no urgency) so a visitor reads it as an
   honest "this was hand-collected by the directory" signal,
   not as marketing copy. */
.seed-verified {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-left-width: 4px;
    border-left-color: var(--color-gray-500);
    border-radius: var(--radius-md);
}
.seed-verified__label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-700);
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    align-self: flex-start;
}
.seed-verified__body { margin: 0; font-size: var(--font-sm); color: var(--color-gray-700); line-height: var(--line-height-relaxed); }

/* ==================== Review Card ==================== */
.review-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}
.review-card__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning);
    letter-spacing: 0.1em;
}
.review-card__body {
    margin: 0;
    font-size: var(--font-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-800);
    font-style: italic;
}
.review-card__author { font-size: var(--font-sm); color: var(--color-gray-600); font-style: normal; }

/* ==================== Pricing Matrix ==================== */
.pricing-matrix { display: grid; grid-template-columns: 1fr; gap: var(--spacing-4); margin: 0; padding: 0; list-style: none; }
.pricing-matrix__tier {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-6);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.pricing-matrix__tier--featured { border-color: var(--color-primary); box-shadow: var(--shadow-lg); position: relative; }
.pricing-matrix__tier--featured::before {
    content: "Most popular";
    position: absolute;
    top: 0;
    right: var(--spacing-4);
    transform: translateY(-50%);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
}
@media (min-width: 768px) { .pricing-matrix { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-5); } }

/* ==================== Kanban Board ==================== */
.kanban-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    min-height: calc(var(--spacing-8) * 3);
}
.kanban-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.kanban-card {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.kanban-card:hover  { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card:active { cursor: grabbing; }

/* ==================== Breadcrumb ==================== */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-sm);
    color: var(--color-gray-500);
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--spacing-2); }
.breadcrumb__item + .breadcrumb__item::before { content: "/"; color: var(--color-gray-300); }
.breadcrumb__item a { color: var(--color-gray-600); text-decoration: none; transition: color var(--transition-fast); }
.breadcrumb__item a:hover,
.breadcrumb__item a:focus-visible { color: var(--color-primary); outline: none; }
.breadcrumb__item--current { color: var(--color-gray-900); font-weight: var(--font-weight-medium); }

/* ==================== Form Elements ==================== */
.form-group { display: flex; flex-direction: column; gap: var(--spacing-2); margin-bottom: var(--spacing-5); }
.form-label { font-size: var(--font-sm); font-weight: var(--font-weight-medium); color: var(--color-gray-700); }
.form-input,
.form-select {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font: inherit;
    font-size: var(--font-base);
    color: var(--color-gray-900);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-select {
    appearance: none;
    padding-right: var(--spacing-7);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-gray-500) 50%),
        linear-gradient(135deg, var(--color-gray-500) 50%, transparent 50%);
    background-position: calc(100% - var(--spacing-5)) center, calc(100% - var(--spacing-3)) center;
    background-size: var(--spacing-2) var(--spacing-2);
    background-repeat: no-repeat;
}
.form-input:focus,
.form-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 var(--spacing-1) var(--color-info-light); }
.form-input:disabled,
.form-select:disabled { background: var(--color-gray-50); color: var(--color-gray-500); cursor: not-allowed; }
.form-error   { font-size: var(--font-sm); color: var(--color-danger); }
.form-success { font-size: var(--font-sm); color: var(--color-success); }

/* ==================== Pipeline Card (CRM) ==================== */
.pipeline-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.pipeline-card:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-sm); }
.pipeline-card__name  { margin: 0; font-size: var(--font-base); font-weight: var(--font-weight-semibold); color: var(--color-gray-900); }
.pipeline-card__value { font-size: var(--font-sm); color: var(--color-gray-500); }

/* ==================== Task List ==================== */
.task-list { display: flex; flex-direction: column; gap: var(--spacing-1); margin: 0; padding: 0; list-style: none; }
.task-list__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.task-list__item:hover         { background: var(--color-gray-50); }
.task-list__item--done         { opacity: 0.6; text-decoration: line-through; color: var(--color-gray-500); }

/* ==================== Audit Table ==================== */
.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.audit-table th,
.audit-table td { padding: var(--spacing-3) var(--spacing-4); text-align: left; border-bottom: 1px solid var(--color-gray-100); }
.audit-table th {
    background: var(--color-gray-50);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    text-transform: uppercase;
    font-size: var(--font-xs);
    letter-spacing: 0.05em;
}
.audit-table tbody tr { transition: background var(--transition-fast); }
.audit-table tbody tr:hover { background: var(--color-gray-50); }
.audit-table tbody tr:last-child td { border-bottom: 0; }

/* ==================== Job Monitor ==================== */
.job-monitor {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-admin-bg);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}
.job-monitor__header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
.job-monitor__title  {
    margin: 0;
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    font-family: var(--font-family-mono);
}
.job-monitor__status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}
.job-monitor__status--running  { background: var(--color-info-light);    color: var(--color-info); }
.job-monitor__status--complete { background: var(--color-success-light); color: var(--color-success); }
.job-monitor__status--failed   { background: var(--color-danger-light);  color: var(--color-danger); }
.job-monitor__progress { width: 100%; height: var(--spacing-2); background: var(--color-gray-200); border-radius: var(--radius-full); overflow: hidden; }
.job-monitor__progress-bar { height: 100%; background: var(--color-primary); transition: width var(--transition-normal); }

/* ==================== Alert / Notification ==================== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    color: var(--color-gray-800);
    line-height: var(--line-height-normal);
}
.alert--success { background: var(--color-success-light); border-color: var(--color-success); color: var(--color-success); }
.alert--error   { background: var(--color-danger-light);  border-color: var(--color-danger);  color: var(--color-danger); }
.alert--warning { background: var(--color-warning-light); border-color: var(--color-warning); color: var(--color-warning); }
.alert--info    { background: var(--color-info-light);    border-color: var(--color-info);    color: var(--color-info); }
.alert__title   { margin: 0 0 var(--spacing-1) 0; font-size: var(--font-base); font-weight: var(--font-weight-semibold); }

/* ==================== Advert (V1.1 ad-format listing display) ====================
 *
 * PRD §4.7 "Ad-Format Listing Display (V1.1 Scope Change)": search results,
 * category pages, the /listings index, and homepage featured sections
 * render each published listing as a compact Google-Ads-style advert, NOT
 * a dense data card. The whole advert is the click target — the
 * <a class="advert"> wraps the headline, optional photo, and the
 * description line. No URL is shown in the advert itself. There is no
 * "full details" toggle; the advert IS the presentation.
 *
 * Tiered presentation:
 *   - Standard: .advert (no modifier). Text-only, 2-line description
 *     clamp, no photo, no badge. The base block provides all the layout
 *     chrome (border, padding, hover lift) without the premium accent.
 *   - Premium:  .advert.advert--premium. Adds a left accent border
 *     (the brand's --color-badge-premium), 4-line description clamp,
 *     and renders the .advert__image + .advert__badge children.
 *
 * Description fallback chain (rendered in the template, not the CSS):
 *   ai_summary -> meta_description -> company name. The CSS does not
 *   need to know which one was chosen — the .advert__description
 *   element is the same regardless.
 *
 * The .advert styles intentionally do NOT remove or restyle the
 * legacy .listing-card block above; that component is kept for any
 * future internal surface (admin previews, etc.) that wants the older
 * dense card layout. New public surfaces MUST use .advert.
 */
.advert {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    color: var(--color-gray-900);
    text-decoration: none;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.advert:hover,
.advert:focus-visible {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    outline: none;
}
.advert__headline-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
}
.advert__headline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin: 0;
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-gray-900);
}
.advert__description {
    margin: 0;
    font-size: var(--font-sm);
    line-height: var(--line-height-normal);
    color: var(--color-gray-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.advert__image {
    flex-shrink: 0;
    width: var(--spacing-8);
    height: var(--spacing-8);
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}
.advert__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    background: var(--color-badge-premium);
    border-radius: var(--radius-full);
}

/* ==================== Advert --premium modifier ====================
 *
 * Premium tier (companies.lifecycle_status = 'premium'). The left
 * accent border uses the existing --color-badge-premium token so
 * the visual signal matches the badge colour. The 4-line clamp
 * (vs 2-line standard) gives the premium row more room to describe
 * the business without growing the card — the grid row height stays
 * close to the standard row's height on desktop, so premium rows do
 * not visually dominate the grid beyond what the accent border and
 * photo already signal.
 */
.advert--premium {
    border-left: 4px solid var(--color-badge-premium);
    padding-left: calc(var(--spacing-4) - 3px);
    background: var(--color-gray-50);
}
.advert--premium .advert__description {
    -webkit-line-clamp: 4;
}
.advert--premium:hover,
.advert--premium:focus-visible {
    border-color: var(--color-badge-premium);
}