/* Card di un immobile (prototipo «Immobili»): tutta la card è il link. Foto 4:3 con badge, tipologia e numero di foto;
   titolo, luogo, striscia con m²/camere/bagni/box, prezzo e freccia sotto un filetto. Venduto: timbro rosso e foto spenta. */
@layer components {
  .card-immobile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-page);
    color: var(--text-strong);
    text-decoration: none;

    &:hover { color: var(--text-strong); }
    &:hover .card-immobile__arrow { background: var(--action-accent); }
  }

  .card-immobile__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-soft);
  }

  .card-immobile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card-immobile__badge { position: absolute; top: 12px; left: 12px; }

  .card-immobile__type {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 5px 12px;
    border-radius: var(--radius-xs);
    background: var(--surface-page);
    color: var(--text-brand);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
  }

  .card-immobile__count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    background: var(--surface-overlay);
    color: var(--text-inverse);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
  }

  .card-immobile__title {
    margin: 0;
    padding: 0 6px;
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: var(--fw-regular);
    line-height: 1.2;
    letter-spacing: -0.015em;
  }

  .card-immobile__place {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: -6px;
    padding: 0 6px;
    color: var(--text-muted);
    font-size: var(--fs-ui);
  }

  /* Celle separate da 1px: lo sfondo della striscia fa da filetto tra una cella e l'altra */
  .card-immobile__specs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1px;
    margin: 0 6px;
    overflow: hidden;
    border-radius: var(--radius-control);
    background: var(--border-default);
  }

  .card-immobile__spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 10px 6px;
    background: var(--surface-soft);
    color: var(--text-strong);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    text-align: center;
    & .icon { color: var(--text-brand); }
  }

  .card-immobile__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 12px 6px 2px;
    border-top: 1px solid var(--border-default);
  }

  .card-immobile__price {
    color: var(--text-brand);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
  }

  .card-immobile__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--hit-min);
    height: var(--hit-min);
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--text-brand);
    transition: background-color var(--dur-fast);
  }

  /* Venduto o affittato: timbro rosso ruotato (SoldStamp) e foto un po' spenta */
  .card-immobile--sold .card-immobile__img { filter: grayscale(.6); }

  .card-immobile__stamp {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 14px;
    border-radius: var(--radius-xs);
    background: var(--action-primary);
    color: var(--text-inverse);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 var(--surface-brand);
    transform: rotate(-3deg);
  }
}