/*
 * Card con immagine a tutta altezza e pannello bianco sovrapposto in basso (attività, news, comuni).
 * Tutta la card è un link. Altezza regolabile con --tile-h. Badge in alto con .tile__badge (--end: a destra).
 */
@layer components {
  .tile {
    position: relative; display: block; height: var(--tile-h, 420px);
    border-radius: var(--radius-l); overflow: hidden;
    background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-ink);
    transition: box-shadow .3s;
    &:hover { box-shadow: inset 0 0 0 1px var(--color-accent), 0 0 0 1px var(--color-accent); color: var(--color-ink); }
  }
  .tile__media { position: absolute; inset: 0; }
  .tile__media img { width: 100%; height: 100%; object-fit: cover; }
  /* Senza foto: logo dell'attività centrato nella parte alta */
  .tile__media--logo { inset: 0 0 110px; display: flex; align-items: center; justify-content: center; padding: 32px; }
  .tile__media--logo img { width: auto; height: auto; max-width: 70%; max-height: 70%; object-fit: contain; }
  .tile__badge { position: absolute; top: 12px; left: 12px; z-index: 1; pointer-events: none; }
  .tile__badge--end { left: auto; right: 12px; }
  .tile__panel {
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1;
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px; border-radius: var(--radius-m); background: var(--color-bg);
  }
  .tile__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .tile__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .tile__title { font-weight: 700; font-size: 18px; line-height: 1.25; }
  .tile__meta { font-size: 13px; color: var(--color-muted-text); }
  .tile__foot { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--color-line); }
  .tile__flag {
    display: block; padding: 7px 12px; border-radius: var(--radius-pill);
    background: var(--color-accent); color: var(--color-on-accent);
    font-weight: 700; font-size: 12px; letter-spacing: 0.03em; text-align: center; text-transform: uppercase;
  }
  .tile__note { font-size: 12px; color: var(--color-muted-text); text-align: center; }
}