/* ---------------------------------------------
   ABDA Website - Components (Classic, Uniform)
   --------------------------------------------- */

/* --- Card --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: var(--space-6);
  margin: var(--space-6) auto;
}
.card > h1 {
  margin-top: 0;
  margin-bottom: var(--space-5);
}

/* --- Home Tiles Grid --- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop */
  gap: 20px;
}

/* <= 900px: two columns (tablet) */
@media (max-width: 900px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* <= 600px: one column (phone) */
@media (max-width: 600px) {
  .tile-grid { grid-template-columns: 1fr; }
}

/* --- Tile (uniform look) --- */
.tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition:
    transform 0.07s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: rgba(11, 39, 73, 0.18);
  text-decoration: none;
}

/* Keyboard focus */
.tile:focus {
  outline: 3px solid rgba(193, 18, 31, 0.35);
  outline-offset: 3px;
}

/* Top row with icon + label */
.tile .tile-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Icon chip (uniform navy tint) */
.tile .icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 39, 73, 0.08);
  box-shadow: inset 0 0 0 1px rgba(11, 39, 73, 0.12);
}
.tile .icon svg {
  width: 24px;
  height: 24px;
  fill: var(--navy);
}

/* Label + subtext */
.tile .label {
  font: 800 18px/1.2 Montserrat, sans-serif;
  letter-spacing: 0.2px;
  color: var(--navy);
}
.tile .sub {
  font-size: var(--text-sm);
  color: #334155;
  margin-left: 62px; /* aligns under label on larger screens */
}

/* --- Mobile refinements (<= 600px) --- */
@media (max-width: 600px) {
  .tile { padding: 18px; }
  .tile .icon { width: 40px; height: 40px; border-radius: 12px; }
  .tile .icon svg { width: 20px; height: 20px; }
  .tile .label { font: 800 16px/1.2 Montserrat, sans-serif; }
  .tile .sub { margin-left: 0; line-height: 1.4; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .tile, .tile:hover { transform: none; }
  .tile { transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
}