/* ============================================================================
 * Dynoro Drone Threat Explorer - layout styles
 * ----------------------------------------------------------------------------
 * This file is intentionally minimal. It handles LAYOUT only (how things are
 * arranged on the page). It deliberately does NOT set fonts, text colors,
 * backgrounds, or button styling, so your site theme controls the look.
 *
 * The one exception is the threat-level colors near the bottom, because those
 * colors carry meaning. Change or remove them if you prefer.
 * ========================================================================== */

.dynoro {
  width: 100%;
  box-sizing: border-box;
}

.dynoro * {
  box-sizing: border-box;
}

/* ---- Header --------------------------------------------------------------- */
.dynoro__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dynoro__subtitle {
  margin: 0.25rem 0 0;
}

/* The CTA inherits your theme's link/button styling. */
.dynoro__cta {
  display: inline-block;
}

/* ---- Body: selector on the left, detail on the right ---------------------- */
.dynoro__body {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.4fr;
  gap: 1.5rem;
  align-items: start;
}

/* ---- Selector list -------------------------------------------------------- */
.dynoro__selector-title {
  margin: 0 0 0.75rem;
}

.dynoro__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dynoro__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
}

/* The selected item needs to be visibly distinct so users know what is
   active. This uses a neutral outline that works on any theme. Adjust freely. */
.dynoro__option.is-active {
  border-color: currentColor;
}

.dynoro__option-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex: 0 0 auto;
}

.dynoro__option-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* ---- Detail panel --------------------------------------------------------- */
.dynoro__detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.dynoro__media {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dynoro__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Recommended system block, directly under the image */
.dynoro__recommended {
  padding: 0.75rem 1rem;
  border: 1px solid currentColor;
}

.dynoro__recommended-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

.dynoro__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.dynoro__detail-title {
  margin: 0.25rem 0 0.5rem;
}

.dynoro__description {
  margin: 1rem 0;
}

/* ---- Specs ---------------------------------------------------------------- */
.dynoro__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.dynoro__spec {
  padding: 0.75rem;
  border: 1px solid currentColor;
}

.dynoro__spec__label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

/* ---- Engineering note ----------------------------------------------------- */
.dynoro__note {
  padding: 1rem;
  border: 1px solid currentColor;
}

.dynoro__note-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

.dynoro__note-text {
  margin: 0.5rem 0 0;
}

/* ---- Threat-level colors (meaningful, edit if you like) ------------------- */
.dynoro__threat {
  font-weight: 600;
}
.dynoro__threat--low {
  color: #16a34a; /* green */
}
.dynoro__threat--medium {
  color: #ca8a04; /* amber */
}
.dynoro__threat--high {
  color: #dc2626; /* red */
}
.dynoro__threat--extreme {
  color: #b91c1c; /* dark red */
}

/* ---- Responsive: stack on narrow screens ---------------------------------- */
@media (max-width: 900px) {
  /* Selector moves on top, details drop below it. */
  .dynoro__body {
    grid-template-columns: 1fr;
  }
  .dynoro__detail {
    grid-template-columns: 1fr;
  }
  .dynoro__specs {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Selector becomes a horizontal, swipeable row of cards instead of a
     tall vertical list. */
  .dynoro__list {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 0.5rem; /* leaves room for the scrollbar */
  }

  .dynoro__option {
    flex: 0 0 auto;
    width: 150px;
    flex-direction: column;   /* thumbnail on top, label beneath */
    align-items: stretch;
    scroll-snap-align: start;
  }

  .dynoro__option-thumb {
    width: 100%;
    height: 90px;
  }
}

@media (max-width: 480px) {
  .dynoro__specs {
    grid-template-columns: 1fr;
  }

  /* Slightly smaller cards on phones so more peek into view. */
  .dynoro__option {
    width: 130px;
  }
  .dynoro__option-thumb {
    height: 80px;
  }
}