/**
 * Card Component Styles
 * @module molecules/card
 *
 * Surface system — two independent choices:
 *
 * Background (pick one):
 *   .card--bg-semi   — translucent, rounded corners (default card look)
 *   .card--bg-clear  — transparent, rounded corners
 *   .card--bg-solid  — opaque, square corners
 *
 * Border (optional, additive):
 *   .card--border-dark — neutral strong border (--color-border-strong)
 *   .card--border-tint — colored border from --card-tint (requires .card--tint-*)
 *
 * Tints (set --card-tint for icon-box + border-tint):
 *   .card--tint-{palette} — sky, rose, emerald, amber, etc.
 *
 * Layout variants (control header, not surface):
 *   standard — header with icon/title/divider (default)
 *   compact  — header without divider
 *   bare     — no header
 */

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

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--theme-canvas-bg, var(--color-bg-panel));
  -webkit-backdrop-filter: var(--theme-canvas-blur);
  backdrop-filter: var(--theme-canvas-blur);
  border: var(--theme-canvas-border, 1px solid var(--color-border-light));
  box-shadow:
    var(--theme-canvas-shadow, none),
    var(--theme-canvas-glow, none);
  border-radius: var(--theme-radius);
  overflow: hidden;
  transform: translateZ(0);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

/* Hover: surface-aware card hover */
.card:hover {
  background: var(--theme-canvas-bg-hover, var(--color-bg-subtle));
}

/* ==========================================================================
   CARD SURFACE: BACKGROUND
   Each class sets background, blur, border-color (transparent), and radius.
   Layer .card--border-dark or .card--border-tint on top for visible borders.
   Paper-mode overrides live in canvas-paper.css.
   ========================================================================== */

/* Semi — translucent with backdrop blur, rounded corners.
   border-color: transparent preserves the 1px border so card--border-* can layer on top. */
.card--bg-semi {
  background: var(--theme-canvas-bg, var(--color-bg-panel));
  -webkit-backdrop-filter: var(--theme-canvas-blur);
  backdrop-filter: var(--theme-canvas-blur);
  border-color: transparent;
  border-radius: var(--radius-card);
}

.card--bg-semi:hover {
  background: var(--theme-canvas-bg-hover, var(--color-bg-subtle));
}

/* Clear — transparent, no blur, rounded corners */
.card--bg-clear {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
  border-radius: var(--radius-card);
}

.card--bg-clear:hover {
  background: transparent;
}

/* Solid — opaque, no blur, square corners */
.card--bg-solid {
  background: var(--color-bg-panel);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  border-radius: var(--radius-none);
}

.card--bg-solid:hover {
  background: var(--color-bg-subtle);
}


/* ==========================================================================
   SHADOW MODIFIERS
   ========================================================================== */

/* Elevated: adds shadow */
.card--elevated {
  box-shadow: var(--shadow-card);
}

/* Flat: removes shadow (explicit) */
.card--flat {
  box-shadow: none;
}

/* ==========================================================================
   PADDING VARIANTS
   ========================================================================== */

.card--padding-none {
  padding: 0;
}

.card--padding-sm {
  padding: var(--space-3);
}

.card--padding-md {
  padding: var(--space-4);
}

.card--padding-lg {
  padding: var(--space-6);
}

/* ==========================================================================
   CHILD ELEMENTS
   ========================================================================== */

/* Header */
.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.card__icon {
  font-size: var(--icon-lg);
  color: var(--card-tint, var(--color-text-muted));
}

.card__title-group {
  flex: 1;
  min-width: 0;
}

.card__title {
  margin: 0;
  font-size: var(--ts-heading-size);
  font-weight: var(--ts-heading-weight);
  line-height: var(--ts-heading-leading);
  letter-spacing: var(--ts-heading-tracking);
  color: var(--color-text-main);
}

/* ==========================================================================
   CARD HEADER VARIANTS — bare icon, no icon-box
   Feature: big icon + bold title, no divider (widget/form cards)
   List: smaller icon + title + count, with divider (item-list cards)
   ========================================================================== */

/* Shared bare-icon element */
.card__header-icon {
  flex-shrink: 0;
  color: var(--card-header-icon-color);
}

/* Feature variant — prominent, no divider */
.card__header--feature {
  border-bottom: none;
}

.card__header--feature .card__header-icon {
  font-size: var(--ts-card-feature-icon);
}

.card__header--feature .card__title {
  font-size: var(--ts-card-feature-size);
  font-weight: var(--ts-card-feature-weight);
  line-height: var(--ts-card-feature-leading);
  letter-spacing: var(--ts-card-feature-tracking);
}

/* List variant — compact, with divider */
.card__header--list .card__header-icon {
  font-size: var(--ts-card-list-icon);
}

.card__header--list .card__title {
  flex: 1;
  min-width: 0;
  font-size: var(--ts-card-list-size);
  font-weight: var(--ts-card-list-weight);
  line-height: var(--ts-card-list-leading);
  letter-spacing: var(--ts-card-list-tracking);
}

.card__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--ts-body-size);
  color: var(--color-text-muted);
}

/* Actions */
.card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--button-canvas-bg);
  color: var(--button-canvas-color);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.card__action:hover {
  background-color: var(--button-canvas-bg-hover);
  color: var(--button-canvas-color-hover);
}

.card__action .material-symbols-rounded {
  font-size: var(--icon-xl);
}

/* Card menu button — always visible, top-right corner */
.card__menu {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--button-canvas-bg);
  border: none;
  border-radius: var(--radius-full);
  color: var(--button-canvas-color);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  z-index: 1;
}

.card__menu:hover,
.card__menu:focus-visible {
  background: var(--button-canvas-bg-hover);
  color: var(--button-canvas-color-hover);
}

.card__menu .material-symbols-rounded {
  font-size: var(--icon-xl);
}

@media (--mobile) {
  .card__menu {
    width: 44px;
    height: 44px;
  }
}

/* Body */
.card__body {
  flex: 1;
  padding: var(--space-4);
}

/* Footer */
.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* ==========================================================================
   HEADERLESS — hides header row, keeps card chrome (bg, border, shadow)
   ========================================================================== */

.card--headerless .card__header {
  display: none;
}

/* ==========================================================================
   IN-BODY SECTION TITLE — big icon + big text, used when header is hidden
   ========================================================================== */

.card__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0 var(--space-3);
}

.card__section-title .material-symbols-rounded {
  font-size: var(--icon-2xl);
  color: var(--color-text-secondary);
}

.card__section-label {
  font-size: var(--ts-section-size);
  font-weight: var(--font-bold);
  color: var(--color-text-main);
}

/* ==========================================================================
   BORDER MODIFIERS
   ========================================================================== */

.card--no-header-border .card__header {
  border-bottom: none;
}

.card--no-footer-border .card__footer {
  border-top: none;
}

/* ==========================================================================
   CHILD PADDING VARIANTS
   ========================================================================== */

.card--padding-sm .card__header,
.card--padding-sm .card__body,
.card--padding-sm .card__footer {
  padding: var(--space-3);
}

.card--padding-lg .card__header,
.card--padding-lg .card__body,
.card--padding-lg .card__footer {
  padding: var(--space-6);
}

/* ==========================================================================
   STATES
   ========================================================================== */

/* Selected state */
.card.is-selected {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-brand);
}

/* Loading state */
.card.is-loading {
  pointer-events: none;
}

.card__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-panel);
  opacity: 0.8;
  backdrop-filter: blur(2px);
  z-index: 5;
}

/* ==========================================================================
   MEDIA
   ========================================================================== */

.card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card__media--cover {
  position: absolute;
  inset: 0;
  height: 100%;
}

.card__media--top {
  border-radius: var(--theme-radius) var(--theme-radius) 0 0;
}

/* ==========================================================================
   BLOCK STATES (context/canvas block lifecycle)
   ========================================================================== */

/* Collapsed — body hidden, chevron rotated */
.card--collapsed > .card__body {
  display: none;
}

.card--collapsed .card__chevron {
  transform: rotate(-90deg);
}

/* Empty — hidden entirely */
.card--empty {
  display: none;
}

/* Error — visible with muted styling so developers can see failures */
.card--error {
  opacity: 0.6;
}

.card__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--color-text-tertiary);
  font-size: var(--ts-caption-size);
}

.card__error-icon {
  font-size: var(--icon-sm);
  color: var(--color-text-tertiary);
}

.card__error-text {
  font-family: var(--font-mono, monospace);
}

/* Loading — class used by hydration lifecycle, no visual effect.
   Cards are invisible (card--entering) during loading and appear
   when hydration completes with content. */

/* ==========================================================================
   ICON BOX — 40×40 colored square with white icon
   ========================================================================== */

.card__icon-box {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background-color: var(--card-tint, var(--color-text-muted));
}

.card__icon-box .material-symbols-rounded {
  font-size: var(--icon-lg);
  color: var(--color-text-contrast);
}

/* ==========================================================================
   COLLAPSIBLE HEADER — button-style header for toggle blocks
   ========================================================================== */

.card__header--toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: opacity var(--transition-fast);
}

.card__header--toggle:hover {
  opacity: 0.85;
}

.card__chevron {
  font-size: var(--icon-md);
  color: var(--color-text-subtle);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
  margin-left: auto;
}

/* ==========================================================================
   CONTEXT BLOCK HEADER (no bottom border for context blocks)
   ========================================================================== */

.card--no-header-border .card__header,
.card[data-card] .card__header {
  border-bottom: none;
}

/* Context block body — tighter padding (no top padding) */
.card[data-card] .card__body {
  padding: 0 var(--space-4) var(--space-4);
}

/* ==========================================================================
   ITEMS CONTAINER
   ========================================================================== */

.card__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ==========================================================================
   SUMMARY — top-of-body summary line
   ========================================================================== */

.card__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0 0 var(--space-2);
  font-size: var(--ts-caption-size);
  font-weight: var(--ts-caption-weight);
  line-height: var(--ts-caption-leading);
  letter-spacing: var(--ts-caption-tracking);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-light);
}

.card__summary-icon {
  font-size: var(--icon-sm);
  color: var(--color-text-subtle);
  flex-shrink: 0;
}

.card__summary-count {
  font-weight: var(--font-medium);
}

/* ==========================================================================
   ADD BUTTON — shared "add" button inside blocks
   ========================================================================== */

.card__add-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  border: none;
  background: var(--button-canvas-bg);
  color: var(--button-canvas-color);
  font-size: var(--ts-caption-size);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.card__add-btn:hover {
  background: var(--button-canvas-bg-hover);
  color: var(--button-canvas-color-hover);
}

.card__add-btn .material-symbols-rounded {
  font-size: var(--icon-sm);
}

/* Icon-box color is driven by --card-tint, set on .card via card--tint-{palette}.
   Glass: colored bg + white icon (default above).
   Paper: transparent bg + colored icon (see canvas-paper.css). */

/* ==========================================================================
   EMPTY STATE inside card blocks
   ========================================================================== */

.card[data-card] .empty-state {
  padding: var(--space-6) var(--space-4);
  min-height: auto;
}

/* ==========================================================================
   TINTED FROST VARIANTS
   Subtle color-washed frost for contextual differentiation.
   Same matte treatment as base; tint only changes bg fill and border hue.
   ========================================================================== */

/* Warm — amber/stone. Settings, appearance, general info. */
.card--tint-warm {
  --card-tint: var(--tint-amber-solid);
  --card-tint-fg: var(--tint-amber-fg);
  background: var(--theme-tint-warm-bg);
  border: var(--theme-tint-warm-border);
}

.card--tint-warm:hover {
  background: var(--theme-tint-warm-bg-hover);
}

/* Cool — blue/sky. Notes, communication, knowledge. */
.card--tint-cool {
  --card-tint: var(--tint-sky-solid);
  --card-tint-fg: var(--tint-sky-fg);
  background: var(--theme-tint-cool-bg);
  border: var(--theme-tint-cool-border);
}

.card--tint-cool:hover {
  background: var(--theme-tint-cool-bg-hover);
}

/* Sage — green. Tasks, productivity, projects. */
.card--tint-sage {
  --card-tint: var(--tint-emerald-solid);
  --card-tint-fg: var(--tint-emerald-fg);
  background: var(--theme-tint-sage-bg);
  border: var(--theme-tint-sage-border);
}

.card--tint-sage:hover {
  background: var(--theme-tint-sage-bg-hover);
}

/* Rose — pink. People, relationships, contacts. */
.card--tint-rose {
  --card-tint: var(--tint-rose-solid);
  --card-tint-fg: var(--tint-rose-fg);
  background: var(--theme-tint-rose-bg);
  border: var(--theme-tint-rose-border);
}

.card--tint-rose:hover {
  background: var(--theme-tint-rose-bg-hover);
}

/* ---------------------------------------------------------------------------
   PALETTE TINTS — extended color range for bg-semi/bg-solid fills.
   Sets --card-tint (solid) and --card-tint-fg (foreground accent).
   Combine with card--bg-semi or card--bg-solid for tinted surfaces.
   Combine with card--border-tint for tinted borders.
   --------------------------------------------------------------------------- */

.card--tint-sky     { --card-tint: var(--tint-sky-solid);     --card-tint-fg: var(--tint-sky-fg); }
.card--tint-emerald { --card-tint: var(--tint-emerald-solid); --card-tint-fg: var(--tint-emerald-fg); }
.card--tint-amber   { --card-tint: var(--tint-amber-solid);   --card-tint-fg: var(--tint-amber-fg); }
.card--tint-violet  { --card-tint: var(--tint-violet-solid);  --card-tint-fg: var(--tint-violet-fg); }
.card--tint-indigo  { --card-tint: var(--tint-indigo-solid);  --card-tint-fg: var(--tint-indigo-fg); }
.card--tint-slate   { --card-tint: var(--tint-slate-solid);   --card-tint-fg: var(--tint-slate-fg); }
.card--tint-blue    { --card-tint: var(--tint-blue-solid);    --card-tint-fg: var(--tint-blue-fg); }
.card--tint-teal    { --card-tint: var(--tint-teal-solid);    --card-tint-fg: var(--tint-teal-fg); }
.card--tint-orange  { --card-tint: var(--tint-orange-solid);  --card-tint-fg: var(--tint-orange-fg); }
.card--tint-purple  { --card-tint: var(--tint-purple-solid);  --card-tint-fg: var(--tint-purple-fg); }

/* ==========================================================================
   CARD SURFACE: BORDER
   Additive — layer on top of any .card--bg-* class.
   No border class = no border.
   ========================================================================== */

/* Dark border — neutral, always visible.
   Only sets border-color; the 1px solid structure comes from .card base.
   Uses --border-dark semantic token (stronger on paper, softer on glass). */
.card--border-dark {
  border-color: var(--border-dark);
}

.card--border-dark:hover {
  border-color: var(--border-dark);
}

/* Tint border — colored, requires a card--tint-* class.
   Only sets border-color; the 1px solid structure comes from .card base. */
.card--border-tint {
  border-color: color-mix(in srgb, var(--card-tint, var(--color-border-strong)) var(--tint-mix-mid), transparent);
}

.card--border-tint:hover {
  border-color: color-mix(in srgb, var(--card-tint, var(--color-border-strong)) var(--tint-mix-bold), transparent);
}


/* ==========================================================================
   INNER FILL UTILITIES
   Semi-transparent fills for items nested inside frost/glass surfaces.
   No backdrop-filter — layered transparency over the parent fill.
   ========================================================================== */

/* Inset — Recessed, non-interactive content grouping */
.glass-inset {
  background: var(--theme-inner-inset-bg);
  border: var(--theme-inner-inset-border);
  border-radius: var(--radius-md);
}

.glass-inset:hover {
  background: var(--theme-inner-inset-bg-hover);
}

/* Raised — Elevated interactive surface */
.glass-raised {
  background: var(--theme-inner-raised-bg);
  border: var(--theme-inner-raised-border);
  border-radius: var(--theme-radius);
  box-shadow: var(--theme-inner-raised-shadow);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.glass-raised:hover {
  background: var(--theme-inner-raised-bg-hover);
}

/* Pill — Compact badge/chip */
.glass-pill {
  background: var(--theme-inner-pill-bg);
  border: var(--theme-inner-pill-border);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.glass-pill:hover {
  background: var(--theme-inner-pill-bg-hover);
}

/* ==========================================================================
   CANVAS FIELD — Paper-style input container for canvas cards.
   Semi-transparent fill so the wallpaper grid shows through. Focus
   indicated by a darker solid border. Applies to any wrapper element
   that contains an <input>, <textarea>, or <select>.
   ========================================================================== */

.canvas-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--input-field-padding);
  border-radius: var(--input-field-radius);
  background: var(--input-canvas-bg);
  -webkit-backdrop-filter: var(--input-canvas-blur);
  backdrop-filter: var(--input-canvas-blur);
  border: var(--input-canvas-border);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.canvas-field:focus-within {
  border-color: var(--color-text-main);
}

/* Inner input/textarea/select — transparent, inherits wrapper glass */
.canvas-field__input,
.canvas-field select,
.canvas-field textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--ts-body-size);
  font-weight: var(--font-medium);
  line-height: var(--ts-body-leading);
  color: var(--color-text-main);
  outline: none;
}

.canvas-field__input::placeholder,
.canvas-field textarea::placeholder {
  color: var(--input-field-placeholder);
  font-weight: var(--ts-caption-weight);
}

.canvas-field textarea {
  resize: vertical;
  min-height: 48px;
  line-height: 1.5;
}

.canvas-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 20px;
  padding-right: var(--space-6);
}

/* Column layout — label above input (form fields, grouped entries) */
.canvas-field--column {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

/* Field label — sits above the input in column layout, or to the left in
   the default row layout. Small + muted so the input value remains the
   visual focus. */
.canvas-field__label {
  font-size: var(--ts-caption-size);
  font-weight: var(--ts-caption-weight);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Icon inside canvas field */
.canvas-field__icon {
  flex-shrink: 0;
  font-size: var(--icon-xl);
  color: var(--color-text-muted);
  line-height: 1;
}

/* Clear/action button */
.canvas-field__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.canvas-field__action:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-main);
}

/* ==========================================================================
   SECURE MODIFIER — opaque background, no transparency.
   For passwords, tokens, API keys, 2FA codes on canvas.
   Content must not leak through the background.
   ========================================================================== */

.canvas-field--secure {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.theme-dark .canvas-field--secure {
  background: var(--color-bg-panel);
}

.canvas-field--secure:focus-within {
  border-style: solid;
  border-color: var(--color-text-main);
}

/* =============================================================================
   ITEM CARD — mini vertical card for timelines and grids
   Rendered by itemCard() in card-helpers.js. Reusable across views.
   ============================================================================= */

.item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 120px;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  border: 1px solid var(--border-dark);
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.item-card:hover {
  background: var(--color-bg-hover);
}

.item-card--upcoming {
  border-style: dashed;
  opacity: 0.6;
}

.item-card__icon {
  font-size: var(--icon-lg);
}

.item-card__thumb {
  width: var(--icon-lg);
  height: var(--icon-lg);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.item-card__title {
  font-size: var(--ts-caption-size);
  font-weight: var(--ts-caption-weight);
  line-height: var(--ts-caption-leading);
  color: var(--color-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

.item-card__meta {
  font-size: var(--ts-label-size);
  font-weight: var(--ts-label-weight);
  color: var(--color-text-secondary);
}

.item-card__more {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.item-card:hover .item-card__more {
  opacity: 1;
}

.item-card__more:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-main);
}

.item-card__more .material-symbols-rounded {
  font-size: var(--icon-sm);
}

@media (--mobile) {
  .item-card {
    width: 100px;
    padding: var(--space-2);
  }

  .item-card__more {
    opacity: 1;
  }
}