/* KARETA.KZ r290 — cards component normalization
   Purpose: bind legacy card classes to the UI_STANDARD_KARETA.md card contract.
   Scope: visual/card structure only. No data, routing, search, filter or order logic changes. */

:root{
  --ui-card-radius: var(--ui-radius-card, 18px);
  --ui-card-radius-inner: var(--ui-radius-md, 10px);
  --ui-card-bg: var(--ui-surface, var(--surface, #fff));
  --ui-card-bg-soft: var(--ui-surface-2, var(--surface2, #f8fafc));
  --ui-card-border: var(--ui-border, var(--border, rgba(15,23,42,.12)));
  --ui-card-border-soft: var(--ui-border-soft, rgba(15,23,42,.08));
  --ui-card-shadow: var(--ui-shadow-card, 0 12px 32px rgba(15,23,42,.08));
  --ui-card-shadow-hover: var(--ui-shadow-float, 0 18px 48px rgba(15,23,42,.14));
  --ui-card-pad-sm: var(--space-3, 12px);
  --ui-card-pad-md: var(--space-4, 16px);
  --ui-card-pad-lg: var(--space-5, 20px);
  --ui-card-gap: var(--space-3, 12px);
  --ui-card-line: color-mix(in srgb, var(--ui-card-border) 72%, transparent);
}

/* Future base card + legacy aliases. One card = one visual surface. */
.ui-card,
.card.ui-card,
.mo-card,
.mo-card.card,
.master-card,
.master-contact-row,
.master-contact-row.reveal.in,
.parts-category-card,
.parts-card,
.part-card,
.msng-item.msng-item--v2,
.news-card,
.admin-card,
.admin-master-card,
.schedule-card,
.legal-info-card,
.legal-rich-stat{
  box-sizing: border-box !important;
  min-width: 0;
  max-width: 100%;
  position: relative;
  isolation: isolate;
  border: 1px solid var(--ui-card-border) !important;
  border-radius: var(--ui-card-radius) !important;
  background: var(--ui-card-bg) !important;
  box-shadow: var(--ui-card-shadow) !important;
  color: var(--text, #111827);
  overflow: hidden;
}

/* Structural card zones. They are layout/content, not additional cards. */
.ui-card__head,
.ui-card__body,
.ui-card__footer,
.ui-card__actions,
.mo-card-head,
.mo-card-actions,
.mo-timeline,
.master-card__body,
.master-card__head,
.master-card__footer,
.master-contact-row > *,
.parts-category-card__top,
.parts-category-card__stats,
.msng-item-content,
.msng-item-row1,
.msng-item-title-row,
.msng-item-row3,
.nc-body,
.nc-footer,
.admin-card__body,
.admin-card__footer{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Prevent nested accidental visual surfaces inside normalized cards. */
.ui-card .ui-card__body,
.mo-card .mo-card-head,
.mo-card .mo-timeline,
.mo-card .mo-card-actions,
.master-card .master-card__body,
.master-card .master-card__footer,
.parts-category-card .parts-category-card__top,
.parts-category-card .parts-category-card__stats,
.msng-item.msng-item--v2 .msng-item-content,
.news-card .nc-body,
.news-card .nc-footer,
.admin-card .admin-card__body{
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Consistent internal rhythm without forcing all cards into identical markup. */
.mo-card-head,
.master-card__body,
.master-contact-row,
.parts-category-card,
.msng-item.msng-item--v2,
.news-card .nc-body,
.admin-card,
.admin-master-card,
.schedule-card{
  padding: var(--ui-card-pad-md) !important;
}

.mo-card-actions,
.master-card__footer,
.news-card .nc-footer,
.ui-card__actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  padding: var(--ui-card-pad-sm) var(--ui-card-pad-md) !important;
  border-top: 1px solid var(--ui-card-line) !important;
}

.mo-timeline{
  padding: var(--ui-card-pad-sm) var(--ui-card-pad-md) !important;
  border-top: 1px solid var(--ui-card-line) !important;
}

/* Unified hover is subtle; active must not move layout. */
.ui-card:hover,
.mo-card:hover,
.master-card:hover,
.master-contact-row:hover,
.parts-category-card:hover,
.parts-card:hover,
.part-card:hover,
.msng-item.msng-item--v2:hover,
.news-card:hover,
.admin-card:hover,
.admin-master-card:hover{
  border-color: color-mix(in srgb, var(--accent, var(--orange, #ff6b00)) 32%, var(--ui-card-border)) !important;
  box-shadow: var(--ui-card-shadow-hover) !important;
}

.ui-card:active,
.mo-card:active,
.master-card:active,
.master-contact-row:active,
.parts-category-card:active,
.parts-card:active,
.part-card:active,
.msng-item.msng-item--v2:active,
.news-card:active{
  transform: scale(.995);
}

/* Text overflow contract for all card families. */
.ui-card h1,
.ui-card h2,
.ui-card h3,
.ui-card h4,
.ui-card p,
.ui-card b,
.mo-card-title,
.mo-card-car,
.master-card__name,
.master-card__biz,
.master-card__spec,
.master-card__addr,
.parts-category-card__title,
.parts-category-card__desc,
.msng-item-name2,
.msng-item-preview2,
.msng-item-car2,
.news-card .nc-title,
.news-card .nc-intro,
.admin-card h3,
.admin-card p{
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.mo-card-title,
.master-card__name,
.parts-category-card__title,
.msng-item-name2,
.news-card .nc-title{
  line-height: 1.2;
}

.mo-card-car,
.master-card__spec,
.master-card__addr,
.parts-category-card__desc,
.msng-item-preview2,
.news-card .nc-intro{
  color: var(--text2, #64748b) !important;
  line-height: 1.45;
}

/* Inner media / counters use inner radius, not card radius. */
.master-card__cover,
.master-card__avatar,
.parts-category-card__icon,
.parts-category-card__count,
.news-card .nc-cover,
.msng-avatar,
.msng-item-av,
.mo-tl-dot{
  border-radius: var(--ui-card-radius-inner) !important;
}

.news-card .nc-cover{
  border-radius: 0 !important;
}

/* Badges/statuses inside cards: pill is allowed as a separate semantic shape. */
.mo-status-badge,
.master-card__badge,
.master-card__service,
.parts-category-card__stats span,
.msng-item-svc,
.news-card .nc-cat-badge,
.news-card .nc-featured-badge,
.ui-badge,
.ui-status{
  box-sizing: border-box;
  max-width: 100%;
  min-height: 24px;
  border-radius: var(--ui-radius-pill, 999px) !important;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card grids/lists must not stretch children beyond the viewport. */
#mo-list,
.mo-list,
.masters-grid,
.master-card-grid,
.parts-categories-grid,
.parts-grid,
#msng-page-listmount,
.msng-list,
.news-grid,
.news-hero-grid,
.admin-grid,
.admin-list{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#mo-list > *,
.mo-list > *,
.masters-grid > *,
.master-card-grid > *,
.parts-categories-grid > *,
.parts-grid > *,
#msng-page-listmount > *,
.msng-list > *,
.news-grid > *,
.news-hero-grid > *,
.admin-grid > *,
.admin-list > *{
  min-width: 0;
  max-width: 100%;
}

/* Empty states are cards without hover elevation. */
.ui-empty,
.mo-empty,
.masters-empty,
.parts-empty,
.msng-empty-cta.card,
.news-empty,
.news-empty-state{
  box-sizing: border-box;
  max-width: 100%;
  border: 1px dashed var(--ui-card-border) !important;
  border-radius: var(--ui-card-radius) !important;
  background: color-mix(in srgb, var(--ui-card-bg) 88%, transparent) !important;
  box-shadow: none !important;
  padding: var(--ui-card-pad-lg) !important;
}

@media (max-width: 760px){
  :root{
    --ui-card-pad-md: var(--space-3, 12px);
    --ui-card-pad-lg: var(--space-4, 16px);
  }

  .mo-card-head,
  .master-card__body,
  .master-contact-row,
  .parts-category-card,
  .msng-item.msng-item--v2,
  .news-card .nc-body,
  .admin-card,
  .admin-master-card,
  .schedule-card{
    padding: var(--ui-card-pad-md) !important;
  }

  .mo-card-actions,
  .master-card__footer,
  .news-card .nc-footer,
  .ui-card__actions{
    padding: var(--space-2, 8px) var(--ui-card-pad-md) !important;
  }

  .mo-card-actions .btn,
  .master-card__footer .btn,
  .news-card .nc-footer .btn{
    flex: 1 1 calc(50% - var(--space-2, 8px));
    min-width: 0;
  }
}