/* Bastyon project pages — sections, metrics, cards, tables and hub tiles. */

/* Hub tiles (overview page) */
.bastyon-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; padding: 6px 24px 24px; }
.bastyon-tile { display: flex; min-height: 122px; flex-direction: column; gap: 8px; padding: 18px; color: inherit; text-decoration: none; border: 1px solid rgba(53, 189, 255, 0.2); border-radius: 15px; background: linear-gradient(145deg, rgba(53, 189, 255, 0.09), rgba(4, 11, 17, 0.92)); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.bastyon-tile:hover { transform: translateY(-2px); border-color: rgba(53, 189, 255, 0.5); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); }
.bastyon-tile svg { width: 26px; height: 26px; fill: none; stroke: var(--project-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bastyon-tile strong { margin-top: auto; color: #eef7fb; font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; }
.bastyon-tile small { color: #8aa3b0; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }

/* Content sections inside a project console */
.bastyon-section { padding: 22px 24px; }
.bastyon-section + .bastyon-section { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.bastyon-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.bastyon-section__head span { color: var(--project-accent); font-size: 0.58rem; font-weight: 950; letter-spacing: 0.17em; text-transform: uppercase; }
.bastyon-section__head h2 { margin: 5px 0 0; color: #f3f8fa; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.06; }
.bastyon-section__head p { max-width: 420px; margin: 0; color: #8398a5; font-size: 0.78rem; line-height: 1.5; text-align: right; }

/* Live metrics (supply page) */
.bastyon-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.bastyon-metric { padding: 16px; border: 1px solid rgba(53, 189, 255, 0.2); border-radius: 14px; background: rgba(5, 12, 19, 0.72); }
.bastyon-metric small { display: block; color: #7fa4b8; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.bastyon-metric strong { display: block; margin-top: 8px; color: #eaf7fd; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1; }
.bastyon-metric span { display: block; margin-top: 6px; color: #8ea7b4; font-size: 0.72rem; }

/* Content cards */
.bastyon-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.bastyon-card { padding: 20px; border: 1px solid rgba(53, 189, 255, 0.18); border-radius: 16px; background: rgba(5, 12, 19, 0.7); }
.bastyon-card h3 { margin: 0 0 10px; color: #f2f9fc; font-family: Georgia, "Times New Roman", serif; font-size: 1.28rem; line-height: 1.1; }
.bastyon-card p { margin: 0; color: #9fb3bd; font-size: 0.85rem; line-height: 1.62; }
.bastyon-card p + p { margin-top: 10px; }
.bastyon-card ul { margin: 12px 0 0; padding-left: 18px; color: #9fb3bd; font-size: 0.84rem; line-height: 1.7; }
.bastyon-card ul li + li { margin-top: 4px; }
.bastyon-card b { color: #e6f4fa; }

/* Comparison table */
.bastyon-table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 0.82rem; }
.bastyon-table th, .bastyon-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.bastyon-table th { color: #bfe6f7; font-weight: 900; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; }
.bastyon-table td { color: #a9bcc6; line-height: 1.5; }
.bastyon-table td:first-child { color: #e6f4fa; font-weight: 700; }
.bastyon-table tr:last-child td { border-bottom: 0; }

/* Note / callout */
.bastyon-note { margin-top: 18px; padding: 15px 18px; border: 1px solid rgba(53, 189, 255, 0.24); border-radius: 13px; background: rgba(53, 189, 255, 0.06); color: #a9c2cd; font-size: 0.82rem; line-height: 1.55; }
.bastyon-note strong { color: var(--project-accent); }

/* Live status pill */
.bastyon-status { display: inline-flex; align-items: center; gap: 7px; color: #8aa3b0; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.bastyon-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ffc75a; box-shadow: 0 0 10px rgba(255, 199, 90, 0.7); }
.bastyon-status.is-live::before { background: #3ddc97; box-shadow: 0 0 10px rgba(61, 220, 151, 0.75); }

/* Sources grid (sources page) */
.bastyon-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 18px; }
.bastyon-source { display: flex; min-height: 96px; flex-direction: column; justify-content: center; padding: 16px 18px; color: inherit; text-decoration: none; border: 1px solid rgba(53, 189, 255, 0.2); border-radius: 15px; background: rgba(5, 12, 19, 0.8); transition: transform 160ms ease, border-color 160ms ease; }
.bastyon-source:hover { transform: translateY(-2px); border-color: rgba(53, 189, 255, 0.5); }
.bastyon-source small { color: var(--project-accent); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.bastyon-source strong { margin-top: 9px; color: #eef7fb; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.bastyon-source span { margin-top: 5px; color: #9fb3bd; font-size: 0.76rem; }

@media (max-width: 900px) {
  .bastyon-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bastyon-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bastyon-section { padding: 18px 16px; }
  .bastyon-section__head { flex-direction: column; align-items: flex-start; }
  .bastyon-section__head p { text-align: left; }
  .bastyon-metrics { grid-template-columns: 1fr 1fr; }
  .bastyon-cards { grid-template-columns: 1fr; }
  .bastyon-tiles { grid-template-columns: 1fr; padding-inline: 16px; }
  .bastyon-source-grid { grid-template-columns: 1fr; }
  .bastyon-table { font-size: 0.76rem; }
  .bastyon-table th, .bastyon-table td { padding: 10px; }
}