/* ============================================================
   URBINO · CARD
   Molecule. Composable surface that hosts atoms.
   Token-driven; world is set by parent (.urbino-cit) or local
   shortcut (.u-card--cit). Four shape variants, six tone variants,
   optional sections (header / body / footer), interactive mode.
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.u-card {
  background: var(--u-card-bg);
  border-radius: var(--u-card-radius);
  border: var(--u-card-border);
  box-shadow: var(--u-card-shadow);
  overflow: hidden;
  font-family: var(--u-font-sans);
  color: var(--u-fg-1);
}


/* ============================================================
   WORLD SHORTCUTS
   ============================================================ */

.u-card--mgr {
  /* default :root — selector exists as a marker */
}

.u-card--cit {
  --u-card-radius:      var(--u-radius-2xl);
  --u-card-border:      0;
  --u-card-padding:     var(--u-space-5);
  --u-card-padding-sm:  var(--u-space-4);
  --u-card-padding-lg:  var(--u-space-6);
  --u-card-padding-xl:  var(--u-space-7);
  --u-card-header-px:   var(--u-space-5);
  --u-card-footer-px:   var(--u-space-5);
  --u-card-header-title-size: 18px;
  --u-card-press-transform: scale(0.99);
}


/* ============================================================
   SHAPE VARIANTS — mutually exclusive
   ============================================================ */

.u-card--elevated {                           /* lifts off the surface */
  box-shadow: var(--u-shadow-md);
  border: 0;
}
.u-card--outlined {                           /* line only, no shadow */
  box-shadow: none;
  border: 1px solid var(--u-border);
}
.u-card--flat {                               /* sunken on canvas */
  background: var(--u-surface-alt);
  border: 0;
  box-shadow: none;
}
.u-card--ghost {                              /* invisible until hovered/interactive */
  background: transparent;
  border: 0;
  box-shadow: none;
}


/* ============================================================
   TONE VARIANTS — use sparingly
   ============================================================ */

.u-card--brand   { background: var(--u-blue-50);    border-color: var(--u-blue-200); }
.u-card--success { background: var(--u-green-100);  border-color: #BBF7D0; }
.u-card--warning { background: var(--u-amber-100);  border-color: #FDE68A; }
.u-card--danger  { background: var(--u-red-100);    border-color: #FECACA; }
.u-card--violet  { background: var(--u-violet-100); border-color: #E9D5FF; }
.u-card--dark    {                              /* Ötletláda promo */
  background: linear-gradient(160deg, var(--u-blue-950) 0%, var(--u-blue-900) 100%);
  color: var(--u-fg-inv);
  border: 0;
}


/* ============================================================
   PADDING HELPERS
   The card itself doesn't pad — sections do. These helpers add
   padding to the card body when no <__body> child is used.
   ============================================================ */

.u-card--p-0  { padding: 0; }
.u-card--p-sm { padding: var(--u-card-padding-sm); }
.u-card--p    { padding: var(--u-card-padding); }
.u-card--p-lg { padding: var(--u-card-padding-lg); }
.u-card--p-xl { padding: var(--u-card-padding-xl); }


/* ============================================================
   SECTIONS — header + body + footer
   ============================================================ */

.u-card__header {
  padding: var(--u-card-header-py) var(--u-card-header-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-space-2);
  border-bottom: 1px solid var(--u-divider);
}
.u-card--dark .u-card__header { border-bottom-color: rgba(255,255,255,0.12); }
.u-card__header-title {
  font-family: var(--u-font-display);
  font-size: var(--u-card-header-title-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.u-card__header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-1);
}

.u-card__body {
  padding: var(--u-card-padding);
}

.u-card__footer {
  padding: var(--u-card-footer-py) var(--u-card-footer-px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--u-space-2);
  border-top: 1px solid var(--u-divider);
  background: var(--u-surface-alt);
}
.u-card--cit .u-card__footer { background: transparent; }
.u-card--dark .u-card__footer { background: transparent; border-top-color: rgba(255,255,255,0.12); }

/* Sections share padding; remove default padding when sections are used */
.u-card:has(> .u-card__header),
.u-card:has(> .u-card__body),
.u-card:has(> .u-card__footer) { padding: 0; }


/* ============================================================
   INTERACTIVE — entire card is clickable
   Apply on <button>, <a>, or via tabindex on a generic element.
   ============================================================ */

.u-card--clickable {
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  border: 1px solid var(--u-border);
  transition:
    box-shadow var(--u-dur-fast) var(--u-ease-out),
    transform 80ms var(--u-ease-out),
    border-color var(--u-dur-fast) var(--u-ease-out);
  font: inherit;
  color: inherit;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.u-card--clickable:hover {
  box-shadow: var(--u-shadow-md);
  border-color: var(--u-slate-200);
}
.u-card--clickable:active {
  transform: var(--u-card-press-transform);
}
.u-card--clickable:focus-visible {
  outline: none;
  box-shadow: var(--u-focus-ring);
  border-color: var(--u-primary);
}


/* ============================================================
   MEDIA SLOT — leading photo / thumbnail strip
   For report-list cards: a tinted column on the left.
   ============================================================ */

.u-card__media {
  position: relative;
  overflow: hidden;
}
.u-card__media > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.u-card--row { display: flex; align-items: stretch; }
.u-card--row > .u-card__media { flex-shrink: 0; }
.u-card--row > .u-card__body { flex: 1; min-width: 0; }