/* path: src/routes/static/routes/css/routes_index.css */

/* =============================================================================
   Routes Hero
   ============================================================================= */

.RoutesHero{
  padding-top:0;
  padding-bottom:var(--space-5);
}

.RoutesHero__head{
  max-width:920px;
}

.RoutesHero__title{
  margin-bottom:var(--space-3);
}

.RoutesHero__subtitle{
  margin:0;
  color:var(--text-2);
  font-size:1.125rem;
  line-height:1.45;
}

/* =============================================================================
   Routes Index
   ============================================================================= */

.RoutesIndex{
  padding-top:0;
}

.RoutesIndex__grid{
  display:grid;
  align-items:stretch;
  grid-template-columns:1fr;
  gap:var(--space-4);
}

.RoutesIndex__empty{
  padding:var(--space-4);
  color:var(--text-2);
  background:var(--surface);
  border:1px solid var(--divider-2);
  border-radius:var(--r-m);
}

/* =============================================================================
   Route Card
   ============================================================================= */

.RouteCard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  min-width:0;
  padding:var(--space-4);
  background:var(--surface);
  border:1px solid var(--divider-2);
  border-radius:var(--r-m);
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.RouteCard:hover{
  transform:translateY(-4px);
  border-color:var(--divider);
  background:rgba(43, 49, 56, .96);
}

.RouteCard__top{
  display:grid;
  gap:var(--space-3);
}

.RouteCard__title{
  margin:0;
  color:var(--text);
  font-size:1.35rem;
  line-height:1.12;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.RouteCard__meta{
  display:grid;
  gap:6px;
}

.RouteCard__metaItem{
  display:flex;
  align-items:baseline;
  gap:8px;
  color:var(--text-2);
  font-size:.95rem;
  line-height:1.35;
}

.RouteCard__metaItem::after{
  content:"";
  flex:1;
  min-width:20px;
  border-bottom:1px dashed var(--divider-3);
  transform:translateY(-4px);
  opacity:.38;
}

.RouteCard__metaLabel{
  color:var(--text-3);
}

.RouteCard__metaValue{
  order:2;
  color:var(--text);
  font-weight:500;
  white-space:nowrap;
}

.RouteCard__prices{
  display:grid;
  gap:var(--space-2);
  margin-top:0;
}

.RouteCard__price{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  padding:13px 14px;
  background:rgba(255, 255, 255, .035);
  border:1px solid rgba(255, 255, 255, .025);
  border-radius:var(--r-s);
}

.RouteCard__priceLabel{
  color:var(--text-2);
  font-size:.95rem;
  line-height:1.25;
}

.RouteCard__priceValue{
  flex:0 0 auto;
  color:var(--text);
  font-size:1rem;
  line-height:1.25;
  font-weight:700;
  white-space:nowrap;
}

.RouteCard__link{
  display:inline-flex;
  align-items:center;
  gap:0;
  width:max-content;
  margin-top:auto;
  padding-top:2px;
  color:var(--accent-strong);
  font-size:1rem;
  line-height:1.2;
  font-weight:500;
  text-decoration:none;
}

.RouteCard__link::after{
  content:none;
}

.RouteCard__link:hover{
  color:var(--accent-strong);
  text-decoration:none;
}

.RouteCard__link:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:4px;
  border-radius:var(--r-s);
}

.RouteCard__linkArrow{
  display:inline-block;
  color:inherit;
  transition:transform .18s ease;
}

.RouteCard:hover .RouteCard__linkArrow,
.RouteCard__link:hover .RouteCard__linkArrow{
  transform:translateX(3px);
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (min-width:720px){
  .RoutesIndex__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .RouteCard__link::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:var(--r-m);
  }

  .RouteCard__link:focus-visible{
    outline:none;
  }

  .RouteCard__link:focus-visible::after{
    outline:2px solid var(--accent-strong);
    outline-offset:3px;
  }
}

@media (min-width:1040px){
  .RoutesHero{
    padding-bottom:28px;
  }

  .RoutesIndex__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}