/* ==========================================================================
   classifieds_index.css  --  category-button grid for /classifieds/index.php
   Agent E3.  Created 2026-06-12 (B10).

   Mr Z: "organize these buttons better... they look dropped anywhere... at a
   minimum in alphabetical order."  ->  equal tiles, alphabetical, 4/3/2 cols,
   15px padding (RULE 36), 44px+ tap, whole tile clickable, light-pastel
   per-category family color (RULE 35), dark bg / light text (RULE 32/37).
   ========================================================================== */
.cf-cat-head { color:var(--link-fg); font-weight:800; font-size:1.1rem; margin:1.2rem 0 .4rem; }

.cf-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: .4rem 0 1rem;
    padding: 8px 0;
}
.cf-cat-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .4rem;
    min-height: 120px;            /* equal-size tiles */
    padding: 15px;                /* RULE 36 */
    border-radius: 14px;
    background: var(--btn-deep);          /* dark card (RULE 37) */
    color: var(--baby-blue);               /* light pastel text */
    text-decoration: none;
    border: 2px solid var(--purple-2);
    font-weight: 700; font-size: 1rem;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cf-cat-tile:hover, .cf-cat-tile:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
.cf-cat-tile .ic { font-size: 1.9rem; line-height: 1; }
/* Active = filled with this category's pastel family color (RULE 35).
   The active tile's BACKGROUND is a LIGHT pastel (set inline), so its text
   must be DARK.  mrartin.all.css's safety baseline sets `span { color:var(--fg) }`
   (light), which leaked into the active tile's <span> children and rendered
   them light-on-light (the "Appliance" invisible-text bug, 2026-06-29).
   Force every descendant of an active tile to the dark ink token so it reads. */
.cf-cat-tile.on,
.cf-cat-tile.on * { color: var(--btn-deep) !important; font-weight: 800; }

@media (max-width: 980px) { .cf-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
    .cf-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cf-cat-tile { min-height: 96px; padding: 14px; }
}