/* ========================================================================
   FLIGHT RATINGS GUIDE – Layout, cards, legend, tables
   Restored soft translucent gradient version (CMDD classic)
   ======================================================================== */

/* grid layout ------------------------------------------------------------ */
.cmdd #flight-ratings .rating-square {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  max-width: 1100px;
  margin: 1.25rem auto 1.75rem;
}

@media (max-width: 768px){
  .cmdd #flight-ratings .rating-square {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* cards ------------------------------------------------------------------ */
.cmdd #flight-ratings .rating-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  color: var(--text);
  padding: 1.2rem 1.4rem 1rem;
  background: linear-gradient(180deg, rgba(42,68,96,.6), rgba(20,30,45,.9));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 8px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}

.cmdd #flight-ratings .rating-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35),
              0 0 0 1px rgba(255,255,255,.05);
}

.cmdd #flight-ratings .rating-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
}

.cmdd #flight-ratings .rating-card h3 span {
  font-weight: 400;
  opacity: .8;
}

.cmdd #flight-ratings .rating-card ul {
  margin: 0 0 .5rem;
  padding-left: 1.2rem;
  color: var(--muted);
}

/* soft tinted gradients -------------------------------------------------- */
.cmdd #flight-ratings .rating-speed {
  background: linear-gradient(180deg, rgba(62,130,246,.18), rgba(42,68,96,.5));
  border-top: 3px solid rgba(62,130,246,.5);
}

.cmdd #flight-ratings .rating-glide {
  background: linear-gradient(180deg, rgba(142,197,255,.2), rgba(42,68,96,.5));
  border-top: 3px solid rgba(142,197,255,.45);
}

.cmdd #flight-ratings .rating-turn {
  background: linear-gradient(180deg, rgba(85,214,170,.18), rgba(42,68,96,.5));
  border-top: 3px solid rgba(85,214,170,.45);
}

.cmdd #flight-ratings .rating-fade {
  background: linear-gradient(180deg, rgba(255,160,122,.18), rgba(42,68,96,.5));
  border-top: 3px solid rgba(255,160,122,.45);
}

/* legend ----------------------------------------------------------------- */
.cmdd #flight-ratings .legend-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  padding: .75rem;
  margin: 0 0 1rem;
}

.cmdd #flight-ratings .legend-card img {
  display: block;
  max-width: 100%;
  height: auto;
}

.cmdd #flight-ratings .legend-bullets { margin:.5rem 0 1.5rem; }

.cmdd #flight-ratings .legend-swatch {
  display:inline-block;
  width:14px;height:14px;
  border-radius:3px;
  margin-right:.4rem;
  vertical-align:-2px;
}

.cmdd #flight-ratings .swatch-overstable  {background:#ff8f8f;}
.cmdd #flight-ratings .swatch-neutral     {background:#8ec5ff;}
.cmdd #flight-ratings .swatch-understable {background:#ffc85b;}

/* tables ----------------------------------------------------------------- */
.cmdd #flight-ratings table {
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  margin:0 0 1.25rem;
}

.cmdd #flight-ratings thead th {
  text-align:left;
  padding:.75rem .9rem;
  border-bottom:1px solid var(--border);
}

.cmdd #flight-ratings tbody td {
  padding:.6rem .9rem;
  border-top:1px solid color-mix(in srgb,var(--border)70%,transparent);
}

.cmdd #flight-ratings .section--soft-separator {
  margin-top:1.25rem;
}

/* image safety ----------------------------------------------------------- */
.cmdd #flight-ratings img {
  width:auto;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-sizing:content-box;
}