/* ════════════════════════════════════════════════════════════════════
   Shared tile component
   --------------------------------------------------------------------
   Generic, reusable tile-grid styling extracted from the Court Rooms
   (.cat-card) pattern so multiple sections can render identical tiles
   without duplicating CSS. Pairs with /static/js/components/tiles.js.

   Markup (produced by Tiles.card / Tiles.grid):
     <div class="tile-grid">
       <div class="tile-card" onclick="...">
         <div class="tile-card-top">
           <div class="tile-card-name">Title</div>
           <span class="tile-pill">BADGE</span>          (optional)
         </div>
         <div class="tile-card-desc">Description</div>     (optional)
         <div class="tile-card-foot">
           <span class="count"><strong>3</strong> items</span>
           <span class="open-arrow">Open →</span>
         </div>
       </div>
     </div>

   Colours use the global CSS variables defined in base.html (--navy etc.).
   ════════════════════════════════════════════════════════════════════ */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.tile-card {
  background: var(--white);
  border: 1px solid #e6ecf2;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex; flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.tile-card:hover {
  box-shadow: 0 4px 14px rgba(0,47,108,0.10);
  transform: translateY(-1px);
  border-color: #cdd6e0;
}
.tile-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.tile-card-name {
  font-size: 16px; font-weight: 600; color: var(--navy);
  line-height: 1.3;
}
.tile-pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 12px;
  text-transform: uppercase;
  background: #e6efff; color: #1565c0;
  white-space: nowrap;
}
.tile-card-desc {
  font-size: 13px; color: #555; line-height: 1.5;
  min-height: 38px;
}
.tile-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 8px;
  font-size: 12px; color: #777;
  border-top: 1px solid #f0f3f7;
}
.tile-card-foot .count strong { color: var(--navy); font-weight: 600; }
.tile-card-foot .open-arrow { font-size: 13px; color: var(--blue); }

/* ── Breadcrumb / back bar for tile drill-down navigation ── */
.tile-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  font-size: 13px; color: #777;
  margin-bottom: 14px;
}
.tile-breadcrumb .crumb {
  background: none; border: none; padding: 0;
  font: inherit; color: var(--blue); cursor: pointer;
}
.tile-breadcrumb .crumb:hover { text-decoration: underline; }
.tile-breadcrumb .crumb.current {
  color: var(--navy); font-weight: 600; cursor: default;
}
.tile-breadcrumb .crumb.current:hover { text-decoration: none; }
.tile-breadcrumb .sep { color: #c0c7d0; }