/*
 * Visual tile (country / category): image or flag + short label. The whole tile is the link.
 *   <ul class="c-tiles"><li><a class="c-tile" href="/x/">
 *     <span class="c-tile__media"><img src="..." alt="" width="64" height="48" loading="lazy"></span>
 *     <span class="c-tile__label">Saudi Arabia</span> <span class="c-tile__meta">120 jobs</span></a></li></ul>
 * Grid: 2 columns mobile, 3 at 640px, 4 at 1024px. Headings are never changed by the tile; wrap it inside the existing heading if needed.
 * Label stays real text (never in the image); use alt="" when the label already names the image.
 */
.c-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.c-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; height: 100%; padding: var(--space-4) var(--space-3); text-align: center; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.c-tile:hover, .c-tile:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.c-tile__media { display: grid; place-items: center; width: 4rem; height: 3rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.c-tile__media > img { width: 100%; height: 100%; object-fit: cover; }
.c-tile__label { font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.3; overflow-wrap: anywhere; }
.c-tile__meta { font-size: var(--fs-12); color: var(--color-text-muted); }
@media (min-width: 640px) { .c-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .c-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .c-tile { transition: none; } .c-tile:hover, .c-tile:focus-visible { transform: none; } }