/* BitFire Support landing page — directory and route components.
   Shared foundation, hero, buttons, footer, and CTA styles come from
   enterprise-base.css and enterprise-docs.css. */

.support-hero { padding-bottom: 104px; }
.support-hero h1 { max-width: 900px; }
.support-hero .docs-hero-grid { align-items: center; margin-bottom: 68px; }
.support-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.support-summary { border-color: rgba(91, 173, 218, 0.28); }

.support-status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  padding: 8px;
  border: 1px solid rgba(167, 210, 233, 0.18);
  border-radius: 20px;
  background: rgba(10, 28, 45, 0.82);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.28);
}

.support-status-strip > div {
  min-height: 112px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;
  padding: 21px;
  border-right: 1px solid rgba(167, 210, 233, 0.1);
}

.support-status-strip > div:last-child { border-right: 0; }
.support-status-strip .icon { width: 24px; color: #5eb9e5; }
.support-status-strip strong,
.support-status-strip small { display: block; }
.support-status-strip strong { color: #e5f1f7; }
.support-status-strip small { margin-top: 3px; color: #738c9c; }

.support-routes { border-bottom: 1px solid #dfe7ec; }
.support-routes .section-header { max-width: 790px; }
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.route-card {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  padding: 31px;
  border: 1px solid #d8e2e8;
  border-radius: 21px;
  color: var(--text-dark);
  background: #fff;
  box-shadow: 0 22px 55px rgba(7, 19, 34, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.route-card:hover { transform: translateY(-4px); border-color: #acd3e5; box-shadow: 0 28px 65px rgba(7, 19, 34, 0.1); }
.route-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 42px; border-radius: 14px; color: #176f9f; background: #e4f2f8; }
.route-icon .icon { width: 23px; }
.route-card > small { margin-bottom: 7px; color: #218bc9; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.route-card h3 { margin-bottom: 12px; color: #173247; }
.route-card p { margin-bottom: 28px; color: #607482; }
.route-card > strong { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: #1475a8; }
.route-card > strong .icon { width: 16px; transition: transform 160ms ease; }
.route-card:hover > strong .icon { transform: translateX(4px); }
.route-alert { border-color: #ebc6bd; background: #fffaf8; }
.route-alert .route-icon { color: #a3473f; background: #fde9e5; }
.route-alert > small { color: #a3473f; }

.support-directory { color: var(--text-dark); background: #fff; }
.support-directory .section-kicker { color: #126a9c; }
.directory-heading { display: grid; grid-template-columns: 1fr 0.72fr; gap: 65px; align-items: end; margin-bottom: 82px; }
.directory-heading h2 { margin: 0; font-weight: 790; letter-spacing: -0.06em; line-height: 0.98; }
.directory-heading > p { margin: 0 0 6px; color: #5c7180; line-height: 1.7; }

.guide-group { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 48px; padding: 64px 0; border-top: 1px solid #dfe7ec; }
.guide-group > header { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-content: start; }
.group-number { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #cfe0e9; border-radius: 50%; color: #197bad; background: #f1f8fb; font-family: ui-monospace, monospace; font-weight: 800; }
.guide-group header small { display: block; margin-bottom: 3px; color: #218bc9; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-group header h3 { margin: 0; color: #1d394c; letter-spacing: -0.035em; line-height: 1.1; }

.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.guide-grid-two { grid-template-columns: repeat(2, 1fr); }
.guide-card {
  min-width: 0;
  min-height: 335px;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border: 1px solid #dbe4ea;
  border-radius: 18px;
  background: #fff;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.guide-card:hover { transform: translateY(-3px); border-color: #acd3e5; background: #fbfdff; box-shadow: 0 20px 45px rgba(7, 19, 34, 0.07); }
.guide-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 34px; border-radius: 13px; color: #176f9f; background: #e4f2f8; }
.guide-icon .icon { width: 22px; }
.guide-icon-alert { color: #a3473f; background: #fde9e5; }
.guide-card > div:last-child { flex: 1; display: flex; flex-direction: column; }
.guide-card small { display: block; margin-bottom: 5px; color: #218bc9; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-card h4 { margin: 0 0 10px; color: #203b4e; line-height: 1.25; }
.guide-card p { margin: 0 0 25px; color: #627684; }
.card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: #1475a8; font-weight: 800; }
.card-link .icon { width: 16px; transition: transform 160ms ease; }
.guide-card:hover .card-link .icon { transform: translateX(4px); }
.contact-card { color: #e7f2f8; border-color: #173c57; background: #0b2033; }
.contact-card:hover { border-color: #286083; background: #0d263d; }
.contact-card .guide-icon { color: #0b2033; background: #62bde8; }
.contact-card small,
.contact-card .card-link { color: #70c5ed; }
.contact-card h4 { color: #e7f2f8; }
.contact-card p { color: #91a8b6; }

.support-principles { border-top: 1px solid #dfe7ec; }
.principles-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; }
.principles-grid h2 { margin-bottom: 21px; font-weight: 790; letter-spacing: -0.055em; line-height: 1; }
.principle-list { overflow: hidden; border: 1px solid #d8e2e8; border-radius: 19px; background: #fff; }
.principle-list article { display: grid; grid-template-columns: 44px 1fr; gap: 17px; padding: 23px 25px; border-bottom: 1px solid #e1e8ed; }
.principle-list article:last-child { border-bottom: 0; }
.principle-list article > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #cfe0e9; border-radius: 12px; color: #197bad; background: #f1f8fb; font-family: ui-monospace, monospace; font-weight: 800; }
.principle-list strong { display: block; margin-bottom: 4px; color: #203b4e; }
.principle-list p { margin: 0; color: #607482; }
.support-cta { padding-top: 92px; }

@media (max-width: 1050px) {
  .support-status-strip { grid-template-columns: repeat(2, 1fr); }
  .support-status-strip > div:nth-child(2) { border-right: 0; }
  .support-status-strip > div:nth-child(-n + 2) { border-bottom: 1px solid rgba(167, 210, 233, 0.1); }
  .guide-group { grid-template-columns: 190px minmax(0, 1fr); gap: 35px; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-grid-two { grid-template-columns: repeat(2, 1fr); }
  .guide-card { min-height: 270px; }
}

@media (max-width: 820px) {
  .support-hero .docs-hero-grid { margin-bottom: 48px; }
  .route-grid { grid-template-columns: 1fr; }
  .route-card { min-height: 300px; }
  .route-icon { margin-bottom: 30px; }
  .directory-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 58px; }
  .directory-heading > p { max-width: 680px; }
  .guide-group { grid-template-columns: 1fr; gap: 25px; padding: 52px 0; }
  .guide-group > header { max-width: 420px; }
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-grid > .guide-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .principles-grid { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 560px) {
  .support-hero { padding-bottom: 70px; }
  .support-hero-actions { align-items: stretch; flex-direction: column; }
  .support-hero-actions .button { width: 100%; }
  .support-status-strip { grid-template-columns: 1fr; }
  .support-status-strip > div,
  .support-status-strip > div:nth-child(2),
  .support-status-strip > div:nth-child(-n + 2) { min-height: 90px; border-right: 0; border-bottom: 1px solid rgba(167, 210, 233, 0.1); }
  .support-status-strip > div:last-child { border-bottom: 0; }
  .route-card { min-height: 0; padding: 25px; }
  .guide-grid,
  .guide-grid-two { grid-template-columns: 1fr; }
  .guide-grid > .guide-card:last-child:nth-child(odd) { grid-column: auto; }
  .guide-card { min-height: 0; }
  .guide-icon { margin-bottom: 27px; }
  .principle-list article { grid-template-columns: 40px 1fr; padding: 20px 17px; }
}